/*
 * Impro Silesia — theme stylesheet.
 *
 * Layered on top of design-system.css, which holds the brand tokens verbatim.
 * Nothing here invents a colour or a size: every value resolves to a design
 * system token.
 *
 * Structure:
 *   1. Accessible text roles — the one place the brand is adjusted, and why
 *   2. Base
 *   3. Layout
 *   4. Header & navigation
 *   5. Components
 *   6. Sections
 *   7. Footer
 *   8. WooCommerce, including the single course product page
 *   9. School: course cards, the level-one course page, the voucher page
 */

/* ------------------------------------------------- 1. Accessible text roles */

/*
 * The brand orange #f39000 is a fill colour, not an ink colour. Measured
 * against the design system's own pairings:
 *
 *   white on #f39000 ............. 2.39:1  fails WCAG AA (needs 4.5:1)
 *   #f39000 text on white ........ 2.39:1  fails
 *   #828282 muted text on white .. 3.84:1  fails for body-size text
 *   black on #f39000 ............. 8.80:1  passes AAA
 *
 * So the orange is kept exactly as the design system defines it for fills,
 * and two extra roles carry it into text:
 *
 *   --is-on-primary  black ink on orange buttons instead of white
 *   --is-primary-ink a darkened orange used only for orange *text*
 *
 * The brand reads the same; the text is legible. See docs/design-system.md.
 */
:root {
  --is-primary: var(--color-primary);
  --is-primary-hover: var(--color-primary-hover);
  --is-primary-light: var(--color-primary-light);

  /* Ink that sits on a brand-orange fill. 8.80:1. */
  --is-on-primary: var(--color-fg-strong);

  /* Orange as text. 5.53:1 on white, 5.07:1 on the subtle background and
     4.98:1 on the orange tint of the step cards and guarantee boxes, where
     the earlier #a56200 fell to 4.35:1 (audit X-15). */
  --is-primary-ink: #985a00;

  /* Muted text that still passes AA at body size. 5.30:1 on white. */
  --is-fg-muted: #6b6b6b;

  /* The design system's #fa3e3e is a fill too: 3.61:1 as ink on white, which
     fails AA at the size "Brak w magazynie" is printed at. Darkened on the same
     hue for text only. 5.74:1 on white, 5.36:1 on the subtle background. */
  --is-error-ink: #c81e1e;

  /* The design system's #4caf50 is a fill as well: 2.78:1 as ink on white.
     Darkened on the same hue for the guarantee line and "Bez doświadczenia".
     5.3:1 on white, 4.8:1 on the success tint the guarantee boxes use. */
  --is-success-ink: #2e7a3a;

  --is-fg: var(--color-fg);
  --is-fg-inverse: var(--color-fg-inverse);
  --is-bg: var(--color-bg);
  --is-bg-subtle: var(--color-bg-subtle);
  --is-surface: var(--color-surface);
  --is-border: var(--color-border);

  /* Dark "stage" band, from the design system's stage palette. */
  --is-stage: var(--color-stage-black);
  --is-stage-raised: var(--color-stage-deep);
  --is-stage-border: var(--color-stage-ash);

  /* Layout */
  --is-container: var(--container-xl);
  --is-gutter: clamp(1rem, 4vw, 2rem);
  --is-header-height: 76px;

  /* One radius for everything that is pressed: theme buttons, WooCommerce's,
     pagination. Rounder than the design system's --radius-sm on purpose -- the
     same curve as the cards the buttons sit in, so a card and its button read
     as one object. Change it here, not per component. */
  --is-radius-button: var(--radius-lg);
}

/* ------------------------------------------------------------------ 2. Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--is-header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--is-bg);
  color: var(--is-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  color: var(--color-fg-strong);
  text-wrap: balance;
}

/*
 * Headings scale with the viewport. The design system's scale is written for
 * two ends of the range -- 28px is annotated "H1 mobile", 45px "H1 desktop" --
 * so one fixed size can only serve one of them: a 45px hero holds together on a
 * 360px screen, but it eats the fold and leaves the lead paragraph below it.
 *
 * Every level shifts by exactly one step of the same scale, never more. Pulling
 * the big headings down further than the small ones flattens the hierarchy:
 * with h1 at 28px and h2 at its floor of 22px, an h3 lands on top of its own h2
 * and h4 -- the page loses its outline before it gains any width. So each clamp
 * runs between two neighbouring tokens, and only the growth rate in the middle
 * is a plain value. That middle term keeps a rem part on purpose: a pure vw
 * size ignores the reader's font-size setting, a WCAG 1.4.4 failure.
 */
/* The design system greys `small` with #828282, 3.84:1 on white -- the
   reviewers' names, the hints under prices. The theme's muted ink passes
   (audit X-15); a dark band sets its own colour on its smalls. */
small {
  color: var(--is-fg-muted);
}

h1 {
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-4xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

h2 {
  font-size: clamp(var(--fs-2xl), 3vw + 0.75rem, var(--fs-3xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h3 {
  font-size: clamp(var(--fs-xl), 2vw + 1rem, var(--fs-2xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h4 {
  font-size: clamp(var(--fs-lg), 1vw + 0.875rem, var(--fs-xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

p {
  margin: 0 0 var(--space-4);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* A film pasted into a post comes as an iframe 720 px wide: on a phone it
   pushed the whole article sideways to 736 px (audit F-1, 10.11.2026). It
   narrows to the column and keeps its shape. */
.entry-content iframe,
.prose iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

a {
  color: var(--is-primary-ink);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--is-fg);
}

ul,
ol {
  padding-inline-start: 1.25em;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--is-primary-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Programmatic skip target: focused by the skip link, never by tabbing. */
[tabindex="-1"]:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--is-fg-inverse);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- 3. Layout */

.container {
  width: min(100% - (2 * var(--is-gutter)), var(--is-container));
  margin-inline: auto;
}

.site-main {
  min-height: 50vh;
}

.section {
  padding-block: var(--space-16);
}

.section--muted {
  background: var(--is-bg-subtle);
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--space-10);
}

.section__title {
  margin-bottom: var(--space-3);
}

.section__lead {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-lg);
}

.section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* The button right under a heading, before the cards (audit B-6). */
.section__foot--top {
  margin: 0 0 var(--space-8);
}

/* Two or more buttons on a phone: they stack, so each takes the full width.
   Side by side at their own widths, wrapped one under the other, they read
   as a ragged pair with no air between them (Szymon, 10.11.2026). A single
   button keeps its own width. */
@media (max-width: 599px) {
  .section__foot:has(> .button ~ .button) > .button,
  .hero__actions:has(> .button ~ .button) > .button,
  .cta__actions:has(> .button ~ .button) > .button {
    flex: 1 1 100%;
  }
}

.eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--is-primary-ink);
}

/* --------------------------------------------------- 4. Header & navigation */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--is-surface);
  border-bottom: 1px solid var(--is-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--is-header-height);
}

.site-branding {
  display: flex;
  align-items: center;
}

.site-branding__link {
  display: inline-flex;
  align-items: center;
}

/* Two classes, not one: on shop pages WooCommerce's `.woocommerce img
   { height: auto }` (0,1,1) outranked a single class and the logo rendered at
   its natural 145px, turning a 76px header into a 165px one. */
.site-header .site-branding__logo {
  display: block;
  width: auto;
  height: 40px;
}

.site-branding__text {
  color: var(--color-fg-strong);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-sm);
  background: var(--is-surface);
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-nav__toggle-icon {
  position: relative;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-nav__toggle-icon::before {
  top: -6px;
}

.site-nav__toggle-icon::after {
  top: 6px;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
  background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav__panel {
  display: none;
}

.site-nav__panel.is-open {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  /* Taller than a phone's screen when open (about 960 px): it scrolls on its
     own, the page under it does not. navigation.js sets the exact height
     left under the header; this is the fallback (audit A-1, 10.11.2026). */
  max-height: calc(100dvh - var(--space-20));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6) var(--is-gutter) var(--space-10);
  background: var(--is-surface);
  border-bottom: 1px solid var(--is-border);
  box-shadow: var(--shadow-lg);
}

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--is-fg);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .is-current > a {
  color: var(--is-primary-ink);
}

.site-nav__sub {
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-4);
  list-style: none;
}

.site-nav__sub a {
  padding: var(--space-2) 0;
  font-weight: var(--fw-regular);
  color: var(--is-fg-muted);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.site-nav__cart {
  color: var(--is-fg);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.site-nav__cart-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.35em;
  border-radius: var(--radius-full);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
  font-size: var(--fs-xs);
  text-align: center;
}

/* The phone bar (audit V-1): "Zapisz się" and, once something is in it, the
   cart beside "Menu"; the menu's own copies of both show on a computer only.
   Logo, button, cart and toggle fit 360 px with the button's padding cut. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__quick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__quick-cta.button {
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

/* Without its word the toggle is still a 40 px target. */
.site-nav__toggle {
  min-height: var(--space-10);
}

/* The logo keeps its size; the toggle gives up its word first. */
.site-branding {
  flex: none;
}

.site-nav__quick-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-10);
  min-height: var(--space-10);
  color: var(--is-fg-inverse);
  text-decoration: none;
}

.site-nav__quick-cart .icon {
  width: var(--space-6);
  height: var(--space-6);
}

.site-nav__quick-cart .site-nav__cart-count {
  position: absolute;
  top: 0;
  right: 0;
  /* The count's own black is the header's: orange to read as a badge. */
  background: var(--is-primary);
  color: var(--is-on-primary);
}

.site-nav__quick-cart:hover {
  color: var(--is-primary);
}

@media (max-width: 1023px) {
  .site-nav__actions {
    display: none;
  }
}

/* With the cart in the bar there is no room for the word "Menu" under 390 px;
   the three lines say it, and the button keeps the word for screen readers. */
@media (max-width: 389px) {
  .site-nav:has(.site-nav__quick-cart) .site-nav__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* "Zapytaj o termin" gives the bar no room for the word "Menu" under 420 px,
   and with the cart beside it (or under 360 px) none for itself on one line:
   it wraps in two rather than push the page sideways. */
@media (max-width: 419px) {
  .site-nav--long-cta .site-nav__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-nav--long-cta:has(.site-nav__quick-cart) .site-nav__quick-cta.button {
    white-space: normal;
    text-align: center;
    line-height: var(--lh-snug);
  }
}

@media (max-width: 359px) {
  .site-nav--long-cta .site-nav__quick-cta.button {
    white-space: normal;
    text-align: center;
    line-height: var(--lh-snug);
  }

  .site-header__inner {
    gap: var(--space-2);
  }

  .site-nav__quick-cart {
    min-width: var(--space-8);
  }

  .site-nav__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__quick {
    display: none;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-nav__panel,
  .site-nav__panel.is-open {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--space-6);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .site-nav__list > li {
    position: relative;
  }

  /* "Główna" is the phone menu's: here the logo is the way home. */
  .site-nav__list > .site-nav__item--phone {
    display: none;
  }

  .site-nav__list > li > a {
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
  }

  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 16rem;
    padding: var(--space-2) var(--space-4);
    background: var(--is-surface);
    border: 1px solid var(--is-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast);
  }

  .site-nav__list > li:hover > .site-nav__sub,
  .site-nav__list > li:focus-within > .site-nav__sub {
    opacity: 1;
    visibility: visible;
  }

  .site-nav__actions {
    margin-top: 0;
  }
}

/*
 * The header on the stage black.
 *
 * The logo is an orange badge, so it needs no light version: on black it reads
 * stronger than on white. Every colour is a stage or brand role; the orange is
 * used as ink here because on black it passes (8.80:1), unlike on white.
 * Overrides live in one block rather than being threaded through the rules
 * above, so the light header stays readable as the baseline.
 */
.site-header {
  background: var(--is-stage);
  border-bottom-color: var(--is-stage-border);
}

.site-branding__text,
.site-nav__list a,
.site-nav__cart {
  color: var(--is-fg-inverse);
}

.site-nav__list a:hover,
.site-nav__list .is-current > a,
.site-nav__cart:hover {
  color: var(--is-primary);
}

.site-nav__sub a {
  color: var(--color-fg-subtle);
}

.site-nav__toggle {
  background: transparent;
  border-color: var(--is-stage-border);
  color: var(--is-fg-inverse);
}

.site-nav__panel.is-open {
  background: var(--is-stage-raised);
  border-bottom-color: var(--is-stage-border);
}

.site-nav__cart-count {
  background: var(--is-primary);
  color: var(--is-on-primary);
}

/* The darkened orange that marks focus on white is too dim on black. */
.site-header :where(a, button):focus-visible {
  outline-color: var(--is-primary);
}

@media (min-width: 1024px) {
  .site-nav__panel,
  .site-nav__panel.is-open {
    background: none;
  }

  .site-nav__sub {
    background: var(--is-stage-raised);
    border-color: var(--is-stage-border);
  }
}

/* ------------------------------------------------------------ 5. Components */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--is-radius-button);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.button--primary {
  background: var(--is-primary);
  border-color: var(--is-primary);
  color: var(--is-on-primary);
}

.button--primary:hover {
  background: var(--is-primary-hover);
  border-color: var(--is-primary-hover);
  color: var(--is-on-primary);
}

.button--secondary {
  background: transparent;
  border-color: var(--color-fg-strong);
  color: var(--color-fg-strong);
}

.button--secondary:hover {
  background: var(--color-fg-strong);
  color: var(--is-fg-inverse);
}

.button--ghost {
  padding-inline: 0;
  border-color: transparent;
  color: var(--is-primary-ink);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
}

/* One look for every "go further" text link: dark orange, semibold, sentence
   case, an arrow. "ZOBACZ REPERTUAR" in capitals, "Zobacz wszystkie opinie w
   Google →" and a black "Zobacz więcej" were three looks for one job
   (Szymon, 14.11.2026). The arrow is decoration; screen readers skip it. */
.button--ghost::after,
.course-card__more::after,
.section__lead-link::after {
  content: "→"; /* browsers without alt text for generated content */
  content: "→" / "";
}

/* The link closing a section's lead ("O teatrze impro"), in the same look. */
.section__lead-link {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.section__lead-link::after {
  margin-inline-start: var(--space-1);
}

/* The button's flex gap spaces its arrow; this plain link needs its own. */
.course-card__more::after {
  margin-inline-start: var(--space-1);
}

.button--ghost:hover {
  color: var(--is-fg);
}

/* "Small" is narrower, not shorter: at 32 px and 12 px type "Kup bilet" on a
   card was the smallest thing to tap on the page (audit D-3, 10.11.2026). It
   keeps the full button's height and type; only the sides are tighter. */
.button--small {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One card alone keeps a card's width: stretched across 1216 px its poster
   grew blurry and pushed the price and button off the screen (audit B-3,
   10.11.2026). */
.card-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 26rem);
}

/* Show tiles keep one width however many there are: three columns from
   1024 px, two from 768 px -- the width the poster's `sizes` promises (390 px).
   Two evenings used to stretch to half the page each, their 389 px posters
   blown up 1.5x (audit V-8), and six shows made a row of 4 and a row of 2
   (audit V-11). */
@media (min-width: 768px) {
  .card-grid:has(> .show-tile) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid:has(> .show-tile) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Four or eight (the Kolektyw's own list): four to a row, not 3 + 1. */
  .card-grid:has(> .show-tile:nth-child(4):last-child),
  .card-grid:has(> .show-tile:nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* "Najbliższe spektakle" on the home page: a strip moved with a finger on a
   phone, as production's carousel (#12589); the usual grid from 768 px. */
@media (max-width: 767px) {
  .section--strip .card-grid {
    /* Positioned, so absolute children (a card's screen-reader text) are
       clipped by the scroller instead of widening the page: the date's in
       the second show card took it to 670 px. */
    position: relative;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .section--strip .card-grid > * {
    scroll-snap-align: start;
  }
}

/* "Kontynuujesz?": a dark band like production's tile (Szymon, 12.11.2026)
   -- what it asks on the left, a line per level in the middle, the way to
   every date on the right. On a phone the three stack. */
.course-continue__box {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
}

.course-continue__box .eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--is-primary);
}

.course-continue__title {
  margin: 0;
  color: var(--is-fg-inverse);
  font-size: var(--fs-2xl);
}

.course-continue__lead,
.course-continue__check {
  margin: var(--space-1) 0 0;
  color: var(--color-fg-subtle);
}

.course-continue__check {
  font-size: var(--fs-sm);
}

.course-continue .course-continue__check a {
  color: var(--is-fg-inverse);
}

.course-continue__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Symbol, name, state: the state on the name's line, right-aligned. */
.course-continue__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--is-stage-border);
}

.course-continue__list li:last-child {
  border-bottom: 0;
}

/* The level's symbol from the path, as on the path map and the card badges. */
.course-continue__list .course-continue__icon {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--is-stage-raised);
  color: var(--is-primary);
}

.course-continue .course-continue__name {
  color: var(--is-fg-inverse);
  text-decoration: none;
}

.course-continue a.course-continue__name:hover b {
  color: var(--is-primary-light);
}

/* "· poziom 4" stays one piece: beside a long name in a narrow column the
   digit alone fell to the next line (Szymon, 13.11.2026). */
.course-continue__level {
  color: var(--color-fg-subtle);
  white-space: nowrap;
}

.course-continue .course-continue__state {
  color: var(--is-primary);
  font-weight: var(--fw-semibold);
  text-align: right;
  text-underline-offset: 3px;
}

.course-continue .course-continue__state:hover {
  color: var(--is-primary-light);
}

/* A level with nothing on sale: its waiting list in IS Apka (audit S-7). */
.course-continue .course-continue__notify {
  color: var(--is-fg-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: right;
  text-underline-offset: 3px;
}

.course-continue .course-continue__notify:hover {
  color: var(--is-primary-light);
}

.course-continue__more {
  margin: 0;
}

/* Under the list, the button sits at its right edge, under the states
   (Szymon, 13.11.2026); on a phone it is full width. */
@media (min-width: 600px) {
  .course-continue__more {
    justify-self: end;
  }
}

/* On a phone the state goes under the name: beside it, "1 grupa · możesz
   dołączyć" squeezed "Impro Królestwo · poziom 4" into three lines. */
@media (max-width: 599px) {
  .course-continue__list li {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--space-1);
  }

  .course-continue__list .course-continue__icon {
    grid-row: span 2;
  }

  .course-continue .course-continue__state,
  .course-continue .course-continue__notify {
    grid-column: 2;
    text-align: left;
  }

  .course-continue__more .button {
    width: 100%;
  }
}

/* The question beside the list from a tablet up, the button under the list;
   the button gets its own column only from 1280 px -- at 1024 the three
   columns broke "Impro Królestwo · poziom 4" into three lines. */
@media (min-width: 1024px) {
  .course-continue__box {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    align-items: center;
    gap: var(--space-6) var(--space-10);
    padding: var(--space-8) var(--space-10);
  }

  .course-continue__more {
    grid-column: 2;
  }
}

@media (min-width: 1280px) {
  .course-continue__box {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
  }

  .course-continue__more {
    grid-column: auto;
  }
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card__image--placeholder {
  background: linear-gradient(135deg, var(--is-stage) 0%, var(--is-primary) 100%);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

/* Also the product page's level line: "Poziom 1" above the title tells a
   beginner the page is for them before they have read a word of it, and it is
   the same label in the same voice as on the card that sent them here. */
.card__badge,
.product-badge {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--is-primary-ink);
}

.card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--is-primary-ink);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

/* Start date is the headline fact on a sign-up card; the rest of the practical
   detail sits a step quieter so the two do not compete. */
.card__meta time {
  color: var(--is-fg);
  font-weight: var(--fw-semibold);
}

.card__details {
  margin: 0 0 var(--space-3);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.card__text {
  margin: 0 0 var(--space-4);
  color: var(--is-fg-muted);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

.card__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

/* A recurring charge has to sit visibly next to the amount, not read as one. */
.card__price-note {
  display: block;
  color: var(--is-fg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

/* Sold-out editions stay listed -- seeing that a course exists and is full is
   useful -- but must not compete with the ones still open for sign-ups. */
.card__status {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--is-fg-muted);
}

.card--unavailable .card__image {
  opacity: 0.55;
}

.card--unavailable .card__price {
  color: var(--is-fg-muted);
  font-weight: var(--fw-regular);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: var(--space-6);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.section--muted .feature {
  background: var(--is-bg);
}

.feature__title {
  font-size: var(--fs-xl);
}

.feature__text {
  margin: 0;
  color: var(--is-fg-muted);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Six steps fill two rows of three, not a row of four and two (audit B-13). */
.steps:has(> :nth-child(6):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.step {
  padding: var(--space-6);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-top: 4px solid var(--is-primary);
  border-radius: var(--radius-lg);
}

.step__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--is-primary-ink);
}

.step__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl);
}

.step__text {
  margin: 0;
  color: var(--is-fg-muted);
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6);
}

/* A show's opinions on a phone: the best three, not ~1500 px of six (audit D-10). */
@media (max-width: 767px) {
  .quote-grid--show > :nth-child(n + 4) {
    display: none;
  }
}

/* Four quotes: two and two, not three and a lone one (audit B-13). */
@media (min-width: 768px) {
  .quote-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* An opinion: a big quotation mark, the words, and who said it under a
   rule -- the orange bar down the side read as a warning box (Szymon,
   10.11.2026). */
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-6);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
}

.quote::before {
  content: "\201D" / "";
  display: block;
  height: var(--space-8);
  margin-bottom: var(--space-2);
  color: var(--is-primary);
  font-family: var(--font-display);
  font-size: var(--fs-7xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

.section--muted .quote {
  background: var(--is-bg);
}

.quote__text {
  flex: 1;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

.quote__text p {
  margin: 0;
}

.quote__rating {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

/* A long opinion folds to four lines. The text sits inside <summary>, so the
   whole card is the button and opening the <details> only lifts the clamp. */
.quote__more {
  font-size: var(--fs-base); /* what a plain <p> in the same card gets */
}

.quote__more summary {
  cursor: pointer;
  list-style: none;
}

.quote__more summary::-webkit-details-marker {
  display: none;
}

.quote__more:not([open]) .quote__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.quote__toggle {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--is-primary-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.quote__toggle-less,
.quote__more[open] .quote__toggle-more {
  display: none;
}

.quote__more[open] .quote__toggle-less {
  display: inline;
}

.quote__author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.quote__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.quote__name {
  color: var(--is-fg);
  font-weight: var(--fw-bold);
}

.quote__logo {
  flex: none;
  width: auto;
  max-width: var(--space-24);
  height: var(--space-10);
  object-fit: contain;
}

/* The Google rating under a quotes heading: one line of facts, wrapping as a
   row of chips would, so the link never strands on its own at phone width
   without its separator. */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
  color: var(--is-fg-muted);
}

.review-summary__rating {
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.review-summary__star {
  color: var(--is-primary);
}

.review-summary__link {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.prose {
  max-width: var(--container-md);
}

/* Lists in a section's text: orange dots and air between the points, as
   every other list on the site (audit B-14). */
.prose:not(.prose--document) ul {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-5);
}

.prose:not(.prose--document) ul li::marker {
  color: var(--is-primary);
}

.prose > :last-child {
  margin-bottom: 0;
}

/* Text beside a photo, as production's two-column sections: photo above the
   text on a phone, at the side from 768 px. From 1024 px only, the photo
   filled a tablet or a narrow laptop window edge to edge, ~900 px wide above
   its text (Szymon, 13.11.2026). */
.prose-media {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.prose-media__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .prose-media {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

@media (min-width: 1024px) {
  .prose-media {
    gap: var(--space-12);
  }
}

/* -------------------------------------------------------------- 6. Sections */

.section--hero {
  padding-block: var(--space-20);
  background: var(--is-bg);
  border-bottom: 1px solid var(--is-border);
}

.hero {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hero__title {
  margin-bottom: var(--space-4);
  font-size: clamp(var(--fs-3xl), 6vw + 0.5rem, var(--fs-5xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.hero__tagline {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.hero__lead {
  max-width: 42rem;
  color: var(--is-fg-muted);
  font-size: var(--fs-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero__note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* Over a photo it takes the lead's colour, light on the dark veil. */
.section--hero-photo .hero__note {
  color: var(--color-fg-subtle);
}

.hero__note a {
  font-weight: var(--fw-semibold);
  color: inherit;
}

/* The quieter second door (note with a title): one link, a box like the
   facts below it, its label a text link that moves to the right edge of its
   own line when the box is too narrow to hold both. */
.hero__door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  max-width: 36rem;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-overlay-light);
  border-radius: var(--radius-xl);
  background: var(--color-overlay);
  color: var(--is-fg-inverse);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.hero__door:hover {
  border-color: var(--is-primary);
}

/* The page's a:hover colours every link's text; the box is a link, and its
   text went dark on the dark photo under the pointer (Szymon, 12.11.2026). */
.hero__door:is(:hover, :focus-visible) {
  color: var(--is-fg-inverse);
}

.section--hero:not(.section--hero-photo) .hero__door:is(:hover, :focus-visible) {
  color: var(--is-fg);
}

.hero__door-text b {
  display: block;
  font-size: var(--fs-base);
}

.hero__door-link {
  margin-left: auto;
  color: var(--is-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.section--hero:not(.section--hero-photo) .hero__door {
  border-color: var(--is-border);
  background: var(--is-surface);
  color: var(--is-fg);
}

.section--hero:not(.section--hero-photo) .hero__door-link {
  color: var(--is-primary-ink);
}

.hero__media {
  position: relative;
  min-height: 12rem;
}

.hero__glow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(
      circle at 32% 30%,
      var(--is-primary) 0%,
      transparent 62%
    ),
    radial-gradient(circle at 70% 72%, var(--is-primary-light) 0%, transparent 58%);
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 1.4fr 1fr;
  }

  .hero__media {
    min-height: 22rem;
  }
}

.section--cta {
  padding-block: var(--space-16);
}

.cta {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-10);
  background: var(--is-stage);
  border-radius: var(--radius-lg);
  color: var(--is-fg-inverse);
}

.cta__title {
  margin-bottom: var(--space-2);
  color: var(--is-fg-inverse);
  font-size: clamp(var(--fs-2xl), 3vw + 0.75rem, var(--fs-3xl));
}

.cta__text {
  margin: 0;
  color: var(--color-fg-subtle);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.section--cta .button--secondary,
.section--hero-photo .button--secondary {
  border-color: var(--is-fg-inverse);
  color: var(--is-fg-inverse);
}

.section--cta .button--secondary:hover,
.section--hero-photo .button--secondary:hover {
  background: var(--is-fg-inverse);
  color: var(--is-stage);
}

@media (min-width: 768px) {
  .cta {
    grid-template-columns: 1.5fr auto;
    padding: var(--space-16);
  }
}

.entry {
  padding-block: var(--space-16);
}

.entry__title {
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-4xl));
}

.entry__meta {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.entry__media {
  margin: 0 0 var(--space-6);
}

.entry-content,
.prose--document {
  max-width: var(--container-md);
}

.pagination {
  margin-top: var(--space-10);
}

.pagination .page-numbers {
  display: inline-block;
  padding: 0.35em 0.7em;
  border-radius: var(--is-radius-button);
}

.pagination .current {
  background: var(--is-stage);
  color: var(--is-fg-inverse);
}

/* ---------------------------------------------------------------- 7. Footer */

.site-footer {
  padding-block: var(--space-16) var(--space-6);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
}

/* design-system.css colours every <p> with --color-fg, the dark ink of a light
   page. In the footer that painted the site name and the city black on black.
   One class of weight, not element weight: on production LiteSpeed combines
   theme.css into a file printed before the inline tokens, so a tie with
   design-system's bare `p` went to the tokens and the name stayed black.
   :where(p) adds nothing, so the footer's own classes below -- the subtle
   tagline and note -- tie on weight and still win by coming later. */
.site-footer :where(p) {
  color: inherit;
}

/* Text links only: the footer's "Zapisz się na poziom 1" is a primary button
   and keeps its black ink on orange, 8.8:1 -- white on it was 2.38:1
   (audit X-6). */
.site-footer a:not(.button) {
  color: var(--is-fg-inverse);
}

.site-footer a:not(.button):hover {
  color: var(--is-primary-light);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-10);
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 40px;
  margin-bottom: var(--space-4);
}

.site-footer__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
}

.site-footer__tagline,
.site-footer__note,
.site-footer__legal {
  color: var(--color-fg-subtle);
}

.site-footer__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--is-primary-light);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  display: inline-block;
  padding: var(--space-1) 0;
  text-decoration: none;
}

.site-footer__cta {
  margin: var(--space-5) 0 0;
}

/* Facebook, Instagram, YouTube in one row (audit A-11). */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: var(--fw-semibold);
}

/* "Szkoła i warsztaty" / "Firmy i eventy" over each number (audit E-2). */
.site-footer__phone {
  display: grid;
  margin: 0 0 var(--space-3);
}

.site-footer__phone-label {
  color: var(--color-fg-subtle);
  font-size: var(--fs-xs);
}

.site-footer__legal {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--is-stage-border);
  font-size: var(--fs-sm);
}

.site-footer__company {
  margin: var(--space-2) 0 0;
  color: var(--color-fg-subtle);
  font-size: var(--fs-xs);
}

/* The search landing pages: a quiet line under the company, in its size and
   colour -- readable, never the background's colour (hidden links break
   Google's rules). */
.site-footer__more ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.site-footer .site-footer__more a {
  color: var(--color-fg-subtle);
  text-decoration: none;
}

.site-footer .site-footer__more a:is(:hover, :focus-visible) {
  color: var(--is-primary-light);
  text-decoration: underline;
}

/* ----------------------------------------------------------- 8. WooCommerce */

.site-main--shop {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .site-main--shop {
    padding-block: var(--space-16);
  }
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  padding: var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
  float: none;
}

.woocommerce ul.products li.product a img {
  border-radius: var(--radius-md);
}

/* WooCommerce's own sheet gives these `border: 0`, `font-size: 100%` and
   `line-height: 1`: a secondary button inside a course page lost its frame
   and read as small black text ("Czytaj całość", "Daj mi znać o kolejnym
   terminie" -- audit C-7). The theme's button box comes back here. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--is-primary);
  border-radius: var(--is-radius-button);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  background: var(--is-primary);
  color: var(--is-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--is-primary-hover);
  color: var(--is-on-primary);
}

/*
 * WooCommerce paints its *primary* buttons -- add to cart, "przejdz do kasy",
 * "zloz zamowienie" -- through a `.alt` class the rule above never matched, in
 * its own purple (#7f54b3). So the loudest button in the shop wore the
 * plugin's brand instead of ours.
 *
 * The body element carries the extra specificity rather than a longer chain:
 * Woo's selector is `.woocommerce button.button.alt` (0,3,1), so a tie decided
 * by stylesheet order is the one thing this must not be.
 */
body.woocommerce #respond input#submit.alt,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
  background: var(--is-primary);
  color: var(--is-on-primary);
}

body.woocommerce #respond input#submit.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover {
  background: var(--is-primary-hover);
  color: var(--is-on-primary);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-top-color: var(--is-primary);
  border-radius: var(--radius-md);
}

/* --------------------------------------------- Repertuar i strona spektaklu */

/* Laid out as production's WPCode #3878 and #5658, in the theme's tokens: the
   same rows, the same order, Kolektyw productions on the stage-black card. */

.section--repertoire {
  padding-top: var(--space-10);
}

/* The full width of the container, as every other section: at 65rem the
   rows stopped ~176 px short of the voucher box and the venues under them
   (audit D-13). */
.repertoire {
  display: grid;
  gap: var(--space-8);
}

.repertoire__month-name {
  margin-bottom: var(--space-3);
  font-size: var(--fs-2xl);
}

.repertoire__list,
.show__dates,
.show-lines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.repertoire__note,
.repertoire__empty {
  margin: var(--space-6) 0 0;
  color: var(--is-fg-muted);
}

.repertoire__empty {
  margin-top: 0;
  font-size: var(--fs-lg);
}

/* One night. On a phone: date block beside the text, buttons under a rule.
   From 900 px: date, picture, text, buttons in one row. */
.show-card {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  grid-template-areas:
    "date body"
    "act act";
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

/* The date block (components/show-date.php), on the repertoire card and the
   "Najbliższe spektakle" card alike. */
.show-date {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--is-bg-subtle);
  border-radius: var(--radius-md);
  color: var(--is-fg-muted);
  text-align: center;
  line-height: var(--lh-tight);
}

.show-date time {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.show-date__dow,
.show-date__month,
.show-date__time {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.show-date__day {
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
}

/* On a dark (Kolektyw) card, either kind. */
.show-card--dark .show-date,
.show-tile--dark .show-date {
  background: var(--is-stage-border);
  color: var(--color-fg-subtle);
}

.show-card--dark .show-date__day,
.show-tile--dark .show-date__day {
  color: var(--is-fg-inverse);
}

.show-card__date {
  grid-area: date;
  align-self: start;
}

.show-card__media {
  display: none;
}

.show-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.show-card__kicker,
.show__kicker {
  margin: 0;
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.show-card__title {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.show-card__title a {
  color: inherit;
  text-decoration: none;
}

.show-card__title a:hover {
  text-decoration: underline;
}

.show-card__place {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show-card__actions {
  grid-area: act;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--is-border);
}

.show-card__more,
.show__link {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
}

/* Groups each with a dot, a plain subtitle without one -- as in the IS App. */
.show-lines {
  gap: var(--space-1);
}

.show-lines__group,
.show-lines__subtitle {
  margin: 0;
  color: var(--is-fg-muted);
}

.show-lines__group {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.show-lines__group::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--is-primary);
  transform: translateY(-0.1em);
}

/* "Ostatnie bilety": one look everywhere -- red, which says hurry -- on the
   cards, in the repertoire and on the show page (audit D-14). */
.show-badge {
  align-self: flex-start;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-error) 12%, var(--is-surface));
  color: var(--is-error-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.show-badge--off {
  background: var(--color-border);
  color: var(--is-fg-muted);
}

/* A night that cannot be bought keeps a button's shape in the button's place. */
/* "Wyprzedane": muted ink on the grey fill was 4.23:1; the body ink on
   the same fill keeps it plainly a dead button by its fill and cursor, and
   readable (audit X-15). */
.show-buy--off {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--is-fg);
  cursor: default;
}

/* Kolektyw: the stage-black card ("wariant B"). */
.show-card--dark {
  background: var(--color-stage-smoke);
  border-color: var(--color-stage-smoke);
  color: var(--is-fg-inverse);
}

.show-card--dark .show-card__place,
.show-card--dark .show-lines__subtitle,
.show-card--dark .show-lines__group {
  color: var(--color-fg-subtle);
}

.show-card--dark .show-card__title {
  color: var(--is-fg-inverse);
}

.show-card--dark .show-card__kicker,
.show-card--dark .show-card__more {
  color: var(--is-primary-light);
}

.show-card--dark .show-card__actions {
  border-top-color: var(--is-stage-border);
}

.show-card--dark .show-buy--off {
  background: var(--is-stage-border);
  border-color: var(--is-stage-border);
  color: var(--color-fg-subtle);
}

/* A show in a "Najbliższe spektakle" row (components/show-tile.php), as the
   home page carousel on production: poster whole, date first, price and
   "Kup bilet" at the foot. */
.show-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.show-tile__media {
  display: block;
  background: var(--is-stage);
}

/* The poster's own proportions: its words are part of the picture. */
.show-tile .card__image {
  aspect-ratio: 1734 / 907;
}

.show-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

/* The date in a small block on the left of the words, as production's
   repertoire (Szymon, 11.11.2026). */
.show-tile__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  /* Air above the foot's rule on the tallest card of a row. */
  margin-bottom: var(--space-3);
}

.show-tile__date {
  min-width: var(--space-16);
}

.show-tile__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.show-tile__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.show-tile__title {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.show-tile__title a {
  color: inherit;
  text-decoration: none;
}

.show-tile__title a:hover,
.show-tile__title a:focus-visible {
  text-decoration: underline;
}

.show-tile__place {
  margin: var(--space-1) 0 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
}

.show-tile__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.show-tile__foot .show-buy {
  margin-left: auto;
}

.show-tile .show-badge {
  margin-top: var(--space-2);
}

.show-tile--dark {
  background: var(--color-stage-smoke);
  border-color: var(--color-stage-smoke);
  color: var(--is-fg-inverse);
}

.show-tile--dark .show-tile__kicker {
  color: var(--is-primary-light);
}

.show-tile--dark .show-tile__title,
.show-tile--dark .show-tile__price {
  color: var(--is-fg-inverse);
}

.show-tile--dark .show-tile__place,
.show-tile--dark .show-lines__subtitle,
.show-tile--dark .show-lines__group {
  color: var(--color-fg-subtle);
}

.show-tile--dark .show-tile__foot {
  border-top-color: var(--is-stage-border);
}

.show-tile--dark .show-buy--off {
  background: var(--is-stage-border);
  border-color: var(--is-stage-border);
  color: var(--color-fg-subtle);
}

@media (min-width: 900px) {
  .show-card {
    grid-template-columns: 4.25rem 10.5rem minmax(0, 1fr) 11rem;
    grid-template-areas: "date media body act";
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5);
  }

  .show-card__media {
    display: block;
    grid-area: media;
  }

  .show-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1734 / 907;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .show-card__actions {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    border-top: 0;
    text-align: center;
  }
}

/* The show page: picture, title and description in the wide column, the
   card with the date and the ticket button beside them from 960 px (and
   first after the title on a phone). */
.show {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "back"
    "notice"
    "media"
    "head"
    "card"
    "about"
    "more";
  gap: var(--space-5);
}

.section--show {
  padding-top: var(--space-4);
}

.show__back {
  grid-area: back;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  justify-self: start;
  color: var(--is-primary-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.show__back .icon {
  transform: scaleX(-1);
}

.show__notice {
  grid-area: notice;
  margin: 0;
  padding: var(--space-4);
  background: var(--is-bg-subtle);
  border-left: 4px solid var(--is-primary);
  border-radius: var(--radius-md);
}

.show__media {
  grid-area: media;
  margin: 0;
}

.show__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1734 / 907;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--is-bg-subtle);
}

.show__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.show__title {
  margin: 0;
}

.show__head .show-lines__group,
.show__head .show-lines__subtitle {
  font-size: var(--fs-lg);
}

.show__card {
  grid-area: card;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--is-bg-subtle);
  border-radius: var(--radius-lg);
}

.show__card .button {
  width: 100%;
}

.show__card--dates {
  padding: 0;
  background: none;
}

.show__card--empty {
  align-items: flex-start;
}

/* A night that cannot be bought: the nearest that can (audit S-4). */
.show-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
}

.show-next p {
  margin: 0;
}

.show-next__lead {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show-next__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The other show in a box of its own, so it does not read as this one's. */
.show-next__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-md);
}

.show-next__title b {
  color: var(--is-fg);
  font-weight: var(--fw-semibold);
}

.show-next__title span {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show-next__more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.show__card--empty p {
  margin: 0;
}

.show__card-title,
.show__more h2,
.show__about h2 {
  margin: 0;
  font-size: var(--fs-xl);
}

.show__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.show__fact > .icon {
  margin-top: var(--space-1);
}

.show__fact p {
  margin: 0;
}

.show__fact--price {
  flex-wrap: wrap;
  align-items: center;
}

.show__fact--price > .icon {
  margin-top: 0;
}

.show__fact--price .show-badge {
  margin: 0;
}

.show__fact-main {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

.show__fact-hall {
  font-weight: var(--fw-semibold);
}

.show__fact-sub {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show__share-status {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.show__share-status:empty {
  display: none;
}

.show__about {
  grid-area: about;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42.5rem;
}

.show__about p {
  margin: 0;
  /* Breaks inside a paragraph are the author's ("20:00  Pokaz Grupy"). */
  white-space: pre-line;
}

.show__about h2:not(:first-child) {
  margin-top: var(--space-4);
}

.show__subhead {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-lg);
}

.show__cast {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--space-6);
}

.show__cast li {
  padding-block: var(--space-1);
  break-inside: avoid;
}

.show__more {
  grid-area: more;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Another date of the same show. */
.show-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas:
    "date body"
    "buy buy";
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.show-row__date {
  grid-area: date;
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: center;
  line-height: var(--lh-tight);
}

.show-row__day {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
}

.show-row__month {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.show-row__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.show-row__name {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.show-row__name a {
  color: inherit;
}

.show-row__when {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show-row__buy {
  grid-area: buy;
}

.show-row__buy .button {
  width: 100%;
}

@media (min-width: 600px) {
  .show-row {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    grid-template-areas: "date body buy";
  }

  .show-row__buy .button {
    width: auto;
  }
}

@media (min-width: 960px) {
  .show {
    grid-template-columns: minmax(0, 1fr) 23.75rem;
    grid-template-areas:
      "back back"
      "notice notice"
      "media card"
      "head card"
      "about more";
    column-gap: var(--space-12);
  }

  /* Without a picture the title opens the page, beside the card. */
  .show:not(.show--media) {
    grid-template-areas:
      "back back"
      "notice notice"
      "head card"
      "about card"
      "about more";
  }

  .show__card {
    position: sticky;
    top: calc(var(--is-header-height) + var(--space-6));
    grid-row: media / about;
    padding: var(--space-6);
  }

  .show:not(.show--media) .show__card {
    grid-row: head / about;
  }

  .show__card--dates {
    position: static;
    padding: 0;
  }

  /* The dates beside the picture are narrow: the button goes under. */
  .show__card--dates .show-row,
  .show__more .show-row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas:
      "date body"
      "buy buy";
  }

  .show__card--dates .show-row__buy .button,
  .show__more .show-row__buy .button {
    width: 100%;
  }
}

/* ------------------------------------------- Szczegóły edycji na produkcie */

.product-schedule {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--is-bg-subtle);
  border-radius: var(--radius-lg);
}

.product-schedule__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--is-fg-muted);
}

.product-schedule__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

/* Label and value on one line, so the block scans as facts rather than prose. */
.product-schedule__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.product-schedule__row dt {
  flex: 0 0 7rem;
  color: var(--is-fg-muted);
}

.product-schedule__row dd {
  flex: 1 1 12rem;
  margin: 0;
  font-weight: var(--fw-semibold);
}

/* Seats are only printed when WooCommerce itself calls the number low, so this
   is allowed to be loud: it is the last honest reason to decide today. */
.product-schedule__seats {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--is-primary-light);
  border-radius: var(--radius-full);
  /* Black ink on an orange fill, not the orange text role: --is-primary-ink on
     --is-primary-light measures 2.81:1, which is exactly the trap section 1 of
     this file exists to document. Black on the same fill is 10.12:1. */
  color: var(--is-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* ------------------------------------------------- Strona produktu (kurs) */

/*
 * Undo WooCommerce's floats at every width, not just inside the grid: the
 * plugin sets `float` AND `width: 48%` on both columns, and a grid item ignores
 * the float but honours the width -- so without this each column would render
 * at 48% of its own track. The selector has to out-specify
 * `.woocommerce div.product div.summary` (0,3,2), hence the doubled body class
 * rather than a third element in the chain.
 *
 * And it has to out-specify the ID variant too: woocommerce-layout.css also
 * ships `.woocommerce #content div.product div.summary` (1,3,2), and every
 * <main> in this theme is `#content` (the skip link's target). Without the ID
 * here that rule won and both columns rendered at 48% of their track -- a
 * 180px summary column beside a gallery that filled half of its own.
 *
 * Below the breakpoint they simply stack, which is what WooCommerce's own
 * small-screen sheet does anyway -- and it saves every block underneath from
 * having to clear a float.
 */
.woocommerce.woocommerce.single-product #content div.product .product-main > .woocommerce-product-gallery,
.woocommerce.woocommerce.single-product #content div.product .product-main > div.summary {
  float: none;
  width: auto;
  margin: 0;
}

/* Stacked, the photo needs air before the level line under it; side by side
   the column gap does that job. */
@media (max-width: 899px) {
  .woocommerce.woocommerce.single-product #content div.product .product-main > .woocommerce-product-gallery {
    margin-bottom: var(--space-6);
  }
}

/*
 * Two columns above 900px: everything worth reading before buying -- the
 * photo, the benefits, the description, the harmonogram -- runs down the left,
 * and the summary with every fact and the button follows the reader down the
 * right.
 *
 * The grid is .product-main, a wrapper opened and closed by hooks in
 * inc/woocommerce.php, not div.product itself. A sticky box travels as far as
 * its parent's box, and div.product also holds "Inne terminy i kursy": with
 * the grid on div.product the summary slid down over those cards. Closing the
 * wrapper before them is what stops it.
 *
 * The summary spans every row of the left column. The rows are declared rather
 * than implicit so the span has something to end on; a block the hooks do not
 * print leaves an empty auto row, which is zero high because the vertical
 * rhythm comes from the blocks' own margins instead of a row gap.
 */
@media (min-width: 900px) {
  .woocommerce.single-product div.product .product-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--space-12);
    align-items: start;
  }

  .woocommerce.single-product div.product .product-main > * {
    grid-column: 1;
  }

  .woocommerce.woocommerce.single-product div.product .product-main > div.summary {
    grid-column: 2;
    grid-row: 1 / span 5;
    position: sticky;
    top: calc(var(--is-header-height) + var(--space-4));
  }
}

/* The tabs are WooCommerce's block, not a .product-section, so they bring no
   rhythm of their own. */
.woocommerce.single-product div.product .woocommerce-tabs {
  margin-top: var(--space-12);
}

.woocommerce.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--radius-lg);
}

/* WooCommerce prints the gallery at an inline opacity: 0 and leaves it to
   single-product.js to fade in. With one photo there is no slider for that
   script to build, and the photo is the page's largest element: it shows the
   moment it is decoded -- on every one-photo product, not only the course
   pages where the script is gone. !important is the only way past an inline
   style. The class comes from improsilesia_gallery_classes() in
   inc/woocommerce.php. */
.woocommerce-product-gallery.product-gallery--single {
  opacity: 1 !important;
}

.woocommerce.single-product div.product .product_title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-3xl);
}

/* The price is the second thing read and the first thing compared. */
.woocommerce.single-product div.product p.price,
.woocommerce.single-product div.product span.price {
  margin: 0 0 var(--space-4);
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* A struck-out price only works as a comparison if it stays visibly quieter
   than the one being paid. */
.woocommerce.single-product div.product p.price del {
  margin-right: var(--space-2);
  color: var(--is-fg-muted);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
}

.woocommerce.single-product div.product p.price ins {
  background: none;
  text-decoration: none;
}

.woocommerce.single-product div.product .woocommerce-product-details__short-description {
  margin-bottom: var(--space-5);
  color: var(--is-fg-muted);
  font-size: var(--fs-lg);
}

/* One button, one decision: on the summary column a full-width call to action
   reads as the next step rather than as one control among several. */
.woocommerce.single-product div.product form.cart {
  margin-bottom: var(--space-3);
}

.woocommerce.single-product div.product form.cart .button {
  width: 100%;
  padding-block: var(--space-4);
  font-size: var(--fs-base);
}

.woocommerce.single-product div.product .stock {
  margin: 0 0 var(--space-3);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.woocommerce.single-product div.product .stock.out-of-stock {
  color: var(--is-error-ink);
  font-weight: var(--fw-semibold);
}

.product-assurance {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.product-assurance p {
  margin: 0;
}

.product-assurance a {
  color: var(--is-primary-ink);
}

/* Sections below the summary. The rule is the separator: at this width a card
   for every block would fence off text that is meant to be read straight
   through. */
/* The rhythm between the blocks below the summary, declared once. A rule
   rather than a card for each: at this width a fence around every block would
   break text that is meant to be read straight through. */
.product-section,
.section--product-reviews,
.section--product-more {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--is-border);
}

.product-section .section__head {
  margin-bottom: var(--space-6);
}

.product-sessions__note {
  max-width: var(--container-md);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-lg);
}

/* Dates as a wrapped row of chips: six evenings scanned at a glance, in the
   order they happen, without a table's worth of chrome. Still an <ol> -- the
   order is the meaning. */
.product-sessions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: session;
}

.product-sessions__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--is-bg-subtle);
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  counter-increment: session;
}

/* The ordinal is decoration of a list that is already ordered, so it is
   generated content: assistive technology reads the dates, not "1 2 3". */
.product-sessions__item::before {
  content: counter(session);
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
}

.product-sessions__venue {
  margin: 0;
  color: var(--is-fg-muted);
}

.product-sessions__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.product-sessions__map {
  margin-left: var(--space-2);
  color: var(--is-primary-ink);
}

/* WooCommerce's tabs, in the theme's voice: a row of labels, not a widget. */
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--is-border);
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
  padding: 0;
  color: var(--is-fg-muted);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--is-fg);
}

.woocommerce.single-product div.product .woocommerce-tabs .panel {
  max-width: var(--container-md);
  margin-bottom: 0;
  padding: 0;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > h2:first-child {
  /* The tab label already names the panel; a second heading repeats it. */
  display: none;
}

/* The offers section is rendered inside the shop's container, so its own one
   would indent it a second time. */
/* .section brings its own padding-block; only the bottom half is unwanted. */
.section--product-reviews,
.section--product-more {
  padding-bottom: 0;
}

.section--product-reviews .container,
.section--product-more .container {
  width: 100%;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Contact section and form
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-10);
  }
}

/* The short card above the form, only while the full one sits under the
   form (one column, below 900 px) -- audit E-5. */
.contact__quick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--is-bg-subtle);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.contact__quick-photo {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.contact__quick-name {
  display: grid;
  margin: 0;
}

.contact__quick-name small {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.contact__quick-buttons {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--space-2);
}

.contact__quick-buttons .button {
  flex: 1 1 0;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .contact__quick {
    display: none;
  }
}

/* "Firma lub instytucja" only once that sender is ticked (audit E-14). A
   browser without :has() keeps the field visible, as before. */
.form:has(input[name="sender"]) .form__company {
  display: none;
}

.form:has(input[name="sender"][value="Firma lub instytucja"]:checked) .form__company {
  display: block;
}

.form__company .form__label::after {
  content: " *";
  color: var(--color-error);
}

/* "Dodaj szczegóły (opcjonalnie)": Miasto, Budżet, Coś jeszcze (audit E-4). */
.form__more {
  margin: 0 0 var(--space-5);
}

.form__more-toggle {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding-block: var(--space-2);
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.contact__aside {
  padding: var(--space-6);
  background: var(--is-bg-subtle);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.contact__person-name {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.contact__person-photo {
  display: block;
  width: var(--space-20);
  height: var(--space-20);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.contact__person-role {
  margin: 0 0 var(--space-4);
  color: var(--is-fg-muted);
}

.contact__links {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.contact__links li + li {
  margin-top: var(--space-1);
}

.contact__details {
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.contact__detail dt {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--is-fg-muted);
}

.contact__detail dd {
  margin: 0;
}

.form__field {
  margin: 0 0 var(--space-5);
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
}

.form__required {
  color: var(--color-error);
}

.form__optional,
.form__hint {
  font-weight: var(--fw-regular);
  color: var(--is-fg-muted);
}

.form__hint {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
}

.form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: inherit;
  background: var(--is-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.form__input:focus {
  border-color: var(--is-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form__input--textarea {
  resize: vertical;
  min-height: 9rem;
}

.form__input[aria-invalid='true'] {
  border-color: var(--color-error);
}

.form__check {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--is-primary);
}

.form__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-error);
}

/* "Kiedy? / Ile osób? / Miasto / Budżet" of the business form: short answers,
   two to a row once there is room, one under another on a phone. */
.form__grid {
  display: grid;
  gap: 0 var(--space-4);
}

@media (min-width: 768px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "Piszę jako": a fieldset that looks like any other field. */
.form__choices {
  min-width: 0;
  padding: 0;
  border: 0;
}

.form__choices .form__label {
  padding: 0;
}

.form__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-2) 0;
  cursor: pointer;
}

.form__choice .form__check {
  margin: 0;
}

.form__actions {
  margin: 0 0 var(--space-4);
}

/* "* pole wymagane" above the first field: what the asterisk means. */
.form__legend {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

.form-notice p {
  margin: 0;
}

/* Each error in the notice links to its field. */
.form-notice__errors {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-weight: var(--fw-regular);
}

.form-notice__errors a {
  color: inherit;
}

/* An older name for a form's section (#kontdol): an empty mark at its top, so
   links that still use it land where #kontakt does, below the sticky header. */
.anchor-alias {
  display: block;
  scroll-margin-top: var(--is-header-height);
}

.form__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* Hidden from people and from assistive technology, reachable by a robot that
   fills in every input it finds. Not display:none -- some bots skip those. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--is-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--is-bg-subtle);
  font-weight: var(--fw-semibold);
}

.form-notice--ok {
  border-left-color: var(--color-success);
}

.form-notice--error {
  border-left-color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Client list
   -------------------------------------------------------------------------- */

.client-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.client {
  padding: var(--space-2) var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* Logos sit on white tiles of one height, so a tall crest and a long word mark
   read as one row; grey until hovered, so twelve brand colours do not shout
   over the page. */
/* Full rows of twelve: 3 to a row on a phone (the wall was ~800 px tall
   there), 4 on a tablet, 6 on a computer -- not 8 and a row of 4 (audit E-9). */
.client-list--logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .client-list--logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .client-list--logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.client--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-16);
  padding: var(--space-2);
}

@media (min-width: 600px) {
  .client--logo {
    height: var(--space-20);
    padding: var(--space-3);
  }
}

.client__logo {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  /* A logo saved on a white box blends into the tile instead of showing it. */
  mix-blend-mode: multiply;
}

.client--logo:hover .client__logo {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Packages
   -------------------------------------------------------------------------- */

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-6);
}

/* A column, so the price and the button line up across cards whatever the
   description above them runs to. */
.package {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-top: 4px solid var(--is-primary);
  border-radius: var(--radius-lg);
}

/* Four cards make two rows of two, not three and an orphan (production's
   2 x 2 on /kursy-podstaw-impro/). */
@media (min-width: 768px) {
  .package-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Posters (the Kolektyw's formats): the whole picture, title lettering
   included, in its own 1200 x 628 shape; a strip on a phone. The shape is
   set, not left to the file: with "auto" a lazy image took WordPress's
   stand-in size of 3000 x 1500 and every poster stood 1500 px tall, a
   sliver of its title showing (audit D-1, 10.11.2026). */
.section--posters .package__media .card__image {
  aspect-ratio: 1200 / 628;
  height: auto;
  object-fit: cover;
}

@media (max-width: 767px) {
  .section--posters .package-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .section--posters .package {
    scroll-snap-align: start;
  }
}

/* From 768 px the posters are a grid; the strip's dots mean nothing there.
   Two columns: the Kolektyw's ten formats in three left "Tylko Jeden" alone
   on the last row (audit V-11). */
@media (min-width: 768px) {
  .section--posters .swipe-dots {
    display: none;
  }

  .section--posters .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A card that is one link (`linked`): the button's hit area spreads over the
   whole card, so a tap on the photo or the text goes where the button goes.
   The button stays the one link in the page -- read once, focused once. */
.package--linked {
  position: relative;
  transition: box-shadow var(--transition-fast);
}

.package--linked .package__action .button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.package--linked:hover {
  box-shadow: var(--shadow-md);
}

/* A photo card: the picture runs to the card's edges above the label. */
.package--photo {
  overflow: hidden;
}

.package__media {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
}

.package__media .card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.package__media--top .card__image {
  object-position: top;
}

.package__more {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
}

.package__more a {
  color: var(--is-primary-ink);
}

/* On a phone a photo card is a strip, not a 240 px photo over one sentence:
   four of them were two screens (audit B-12). Posters keep their shape. */
@media (max-width: 767px) {
  .section:not(.section--posters) .package__media .card__image {
    aspect-ratio: 5 / 2;
  }
}

.package__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--is-primary-ink);
}

.package__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xl);
}

.package__subtitle {
  margin: 0 0 var(--space-4);
  color: var(--is-fg-muted);
}

.package__text {
  margin: 0 0 var(--space-4);
}

.package__benefits {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.package__benefits li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
}

.package__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--is-primary);
}

/* Pushed to the bottom of the card by the auto margin above it. */
.package__price {
  margin: auto 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.package__price-note {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--is-fg-muted);
}

/* "choices" (home page "Po co do nas przychodzisz?"): on a phone each card is
   one row -- title, then its button -- without the photo and the sentence.
   The three photo cards took 1444 px, nearly two screens, before the first
   course card (Szymon, 14.11.2026). The whole row stays the link (`linked`);
   from 768 px the cards are as before. */
@media (max-width: 767px) {
  .section--choices .package-grid {
    gap: var(--space-3);
  }

  .section--choices .package {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-top: 1px solid var(--is-border);
    border-left: 4px solid var(--is-primary);
  }

  .section--choices .package__media,
  .section--choices .package__text {
    display: none;
  }

  .section--choices .package__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-lg);
  }

  .section--choices .package__action {
    flex-shrink: 0;
    margin: 0;
    padding-top: 0;
  }

  /* Narrower, not smaller: 12 px button type was rejected before (audit D-3). */
  .section--choices .package__action .button {
    padding: var(--space-2) var(--space-3);
  }
}

/* Pinned to the card's bottom: a one-line title left one button ~27 px above
   its neighbours' (audit E-13). */
.package__action {
  margin: auto 0 0;
  padding-top: var(--space-4);
}

.package-note {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* --------------------------------------------------------------------------
   Spec grid
   -------------------------------------------------------------------------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-6);
  margin: 0;
}

.spec {
  padding: var(--space-5);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.spec__label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--is-fg-muted);
}

.spec__value {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* The body text of a card, as in the cards beside it: 14 px grey on tight
   lines read as fine print (audit B-10). */
.spec__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--is-fg-muted);
}

/* Big numbers about the school (section-specs, layout "stats"): two by two
   on a phone, one row from a tablet up, no boxes -- the number carries it. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

/* Centred numbers under a centred title. */
.section--stats .section__head {
  margin-inline: auto;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.stat__pre,
.stat__note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--is-fg-muted);
}

/* Kept when empty, so the numbers stay on one line across the row. */
.stat__pre {
  min-height: 1lh;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--is-primary-ink);
}

@media (min-width: 768px) {
  .stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat__value {
    font-size: var(--fs-5xl);
  }
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */

/* On a sign-up card the start date is the headline fact and is set bold. On an
   article card it is just provenance, so it steps back behind the title. */
.card--article .card__meta time {
  color: var(--is-fg-muted);
  font-weight: var(--fw-regular);
}

.section__empty {
  margin: 0;
  color: var(--is-fg-muted);
}

/* --------------------------------------------------------------------------
   Long-form article
   -------------------------------------------------------------------------- */

.entry__back {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* Date and reading time on one line, separated by the gap rather than by a
   punctuation mark a screen reader would read out. */
.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-8);
}

/*
 * A 1200-word article is read, not scanned, so the body steps up one size and
 * one line-height from the interface default. Everything else here exists
 * because the editor produces it: headings inside the flow need space above
 * them, lists need room between items, and a quote needs to look like a quote.
 */
.entry-content,
.prose--document {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.entry-content > :first-child,
.prose--document > :first-child {
  margin-top: 0;
}

.entry-content > :last-child,
.prose--document > :last-child {
  margin-bottom: 0;
}

.entry-content h2,
.prose--document h2 {
  margin-top: var(--space-10);
}

/* A heading reached from "Spis treści" lands under the sticky header. */
.entry-content :is(h2, h3)[id] {
  scroll-margin-top: calc(var(--is-header-height) + var(--space-4));
}

/* "Spis treści": the article's headings, as production's template had them
   (Google shows its jump links under a result). */
.entry-toc {
  max-width: 65ch;
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
  background: var(--is-bg-subtle);
}

.entry-toc__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

.entry-toc ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

.entry-toc__item--3 {
  margin-left: var(--space-4);
  list-style: circle;
}

.entry-toc a {
  color: var(--is-fg);
}

.entry-content h3,
.prose--document h3,
.entry-content h4,
.prose--document h4 {
  margin-top: var(--space-8);
}

.entry-content ul,
.prose--document ul,
.entry-content ol,
.prose--document ol {
  margin: 0 0 var(--space-4);
  padding-inline-start: 1.5em;
}

.entry-content li + li,
.prose--document li + li {
  margin-top: var(--space-2);
}

.entry-content blockquote,
.prose--document blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 4px solid var(--is-primary);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.entry-content blockquote > :last-child,
.prose--document blockquote > :last-child {
  margin-bottom: 0;
}

.entry-content figure,
.prose--document figure {
  margin: var(--space-8) 0;
}

.entry-content img,
.prose--document img {
  border-radius: var(--radius-lg);
}

.entry-content figcaption,
.prose--document figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

.entry-content hr,
.prose--document hr {
  margin: var(--space-10) 0;
  border: 0;
  border-top: 1px solid var(--is-border);
}

.entry-content table,
.prose--document table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.entry-content th,
.prose--document th,
.entry-content td,
.prose--document td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--is-border);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Legal documents
   -------------------------------------------------------------------------- */

/* A regulamin is dense, numbered and cross-referenced; it reads better a step
   smaller than an article and with the lists pulled in tight. */
.prose--document {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.prose--document ol,
.prose--document ul {
  margin-bottom: var(--space-5);
}

.section__foot-note {
  max-width: var(--container-md);
  margin: var(--space-10) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* Documents row, above the copyright line. */
.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  margin: var(--space-8) 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

/* 16 px tall and two cramped rows on a phone (audit A-11): each link gets a
   finger-sized line. */
.site-footer__legal-list a {
  display: inline-block;
  padding-block: var(--space-3);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--space-3);
  max-width: var(--container-md);
}

.faq__item {
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.section--muted .faq__item {
  background: var(--is-bg);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus: the one hint that the row opens, drawn in
   CSS so the summary stays plain text for a screen reader. */
.faq__question::after {
  content: "+";
  flex: none;
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--is-primary-ink);
}

.faq__item[open] > .faq__question::after {
  content: "−";
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--is-fg-muted);
}

.faq__answer p {
  margin: 0 0 var(--space-3);
}

.faq__answer p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.video {
  max-width: var(--container-md);
  margin: 0;
}

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--is-stage);
  border-radius: var(--radius-lg);
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The questions and the film are one narrow column, centred on the page with
   their heading at its left edge: hung off the left they left a third of a
   desktop screen empty, and the course pages already centred them (audit
   V-6, F-9). On a phone the column is the page. */
.section--faq > .container,
.section--video > .container,
.course-faq > .container {
  width: min(100% - (2 * var(--is-gutter)), var(--container-md));
}

/* Home page: the questions keep their narrow column but start at the page's
   left edge with every other section, not centred under left-aligned ones
   (Szymon, 14.11.2026). Other pages keep the centred column. */
.site-main--front .section--faq > .container {
  width: min(100% - (2 * var(--is-gutter)), var(--is-container));
}

.video__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}


/* --------------------------------------------------------------------------
   Sign-up
   -------------------------------------------------------------------------- */

.signup__form {
  max-width: var(--container-md);
}

.signup__fallback {
  margin: 0;
  padding: var(--space-5);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-left: 4px solid var(--is-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--fs-lg);
}

.section--muted .signup__fallback {
  background: var(--is-bg);
}

/* The newsletter's Fluent Forms form, in the theme's own field and button
   styles (.form__input, .button--primary) -- left to the plugin it came in
   its own blue and grey, unlike every other form on the site. Scoped to the
   sign-up, so a Fluent form anywhere else keeps whatever it is given. */
.signup__form .fluentform .ff-el-group {
  margin-bottom: var(--space-4);
}

.signup__form .fluentform .ff-el-input--label label {
  font-weight: var(--fw-semibold);
}

.signup__form .fluentform .ff-el-form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--is-fg);
  background: var(--is-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.signup__form .fluentform .ff-el-form-control:focus {
  border-color: var(--is-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.signup__form .fluentform input[type='checkbox'] {
  accent-color: var(--is-primary);
}

/* Two classes more than Fluent Forms' own per-form rule
   (form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)), which kept the
   button its blue. */
.signup__form .fluentform .ff-btn.ff-btn-submit:not(.ff_btn_no_style) {
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--is-radius-button);
  background: var(--is-primary);
  color: var(--is-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.signup__form .fluentform .ff-btn.ff-btn-submit:not(.ff_btn_no_style):hover {
  background: var(--is-primary-hover);
}

.signup__form .fluentform .ff-message-success {
  padding: var(--space-4);
  border-left: 4px solid var(--is-primary);
  border-radius: var(--radius-md);
  background: var(--is-surface);
  box-shadow: none;
}

.signup__note {
  max-width: var(--container-md);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

/* The newsletter band above the footer: heading beside the form on a
   computer, so the band stays a band and not another screen. Its lead is two
   lines, kept as written. */
.signup--split .section__lead {
  white-space: pre-line;
}

@media (min-width: 1024px) {
  .signup--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-12);
    align-items: start;
  }

  .signup--split > :first-child {
    grid-row: span 2;
  }

  .signup--split .signup__note {
    grid-column: 2;
  }
}

/* The ticket download on /dziekujemy-za-zakup-biletu/ is filled in by Kicket's
   embed manager from ?reservationId=. Until it is, the link points at the page
   itself -- so it stays hidden rather than offering a button that reloads. */
#ticket-url[href=""],
.hero__actions:has(> #ticket-url[href=""]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Icons (assets/icons/, printed by improsilesia_icon())

   Hand-drawn on a 256-unit grid with a 5.5-unit line, made for 64-128 px. The
   stroke widths below are drawing units, not design values: they keep the
   line near 1.5 px on screen at each size. Below tile size the fine detail
   strokes and the little "emphasis" marks would be sub-pixel noise, so the
   small size drops them and redraws the outline heavier.
   -------------------------------------------------------------------------- */

.icon {
  display: block;
  flex: none;
  overflow: visible;
}

.icon--sm {
  width: var(--space-5);
  height: var(--space-5);
}

.icon--sm .icon__lines,
.icon--sm .icon__lines g {
  stroke-width: 18;
}

.icon--sm .icon__detail,
.icon--sm .icon__accent {
  display: none;
}

.icon--md {
  width: var(--space-16);
  height: var(--space-16);
}

.icon--md .icon__lines {
  stroke-width: 7;
}

.icon--lg {
  width: var(--space-20);
  height: var(--space-20);
}

.icon--lg .icon__lines {
  stroke-width: 6.5;
}

.icon--xl {
  width: var(--space-32);
  height: var(--space-32);
}

@media (min-width: 1024px) {
  .icon--xl {
    width: calc(var(--space-32) * 2);
    height: calc(var(--space-32) * 2);
  }
}

/* A link or a line of text led by an icon: phone, e-mail, calendar file. */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.card__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* The details line can wrap, so its icon stays with the first line. */
.card__details.card__fact {
  display: flex;
  align-items: flex-start;
}

.feature--icon > .icon,
.package--icon > .icon {
  margin-bottom: var(--space-4);
  color: var(--is-primary-ink);
}

.spec__label .icon {
  margin-bottom: var(--space-3);
  color: var(--is-primary-ink);
}

/* On a phone the spec cards stand one under another, and with the drawing on
   top each took most of a screen (Szymon, 10.11.2026): there the drawing
   moves to the left of the text, smaller, and the cards close up. */
@media (max-width: 767px) {
  .spec-grid {
    gap: var(--space-3);
  }

  .spec {
    position: relative;
    padding: var(--space-4);
  }

  .spec:has(.icon) {
    padding-left: calc(var(--space-4) + var(--space-10) + var(--space-4));
  }

  .spec__label .icon {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    width: var(--space-10);
    height: var(--space-10);
    margin: 0;
  }

  .spec__label {
    margin-bottom: var(--space-1);
  }
}

/* Dark ink over the orange glow: the drawing reads as chalk on a lit stage. */
.hero__motif {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--is-fg);
}

/* --------------------------------------------------------------------------
   Hero on a photograph

   A dark stage photo behind the whole hero, copy in white on the left. The
   gradient is what keeps the text readable whatever the picture does: nearly
   solid stage-black under the words, thinning out towards the right where the
   photo is allowed to show. On a phone the text sits over the middle of the
   picture, so the veil is heavier and runs top to bottom instead.
   -------------------------------------------------------------------------- */

.section--hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-24);
  background: var(--is-stage);
  border-bottom: 0;
  color: var(--is-fg-inverse);
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Faces sit in the upper third of a photo of people; a wide hero crops
     height, and centring would cut the heads rather than the floor. */
  object-position: 50% 30%;
}

.section--hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--is-stage) 72%, transparent) 0%,
    color-mix(in srgb, var(--is-stage) 88%, transparent) 100%
  );
}

.section--hero-photo .hero__title,
.section--hero-photo .hero__tagline {
  color: var(--is-fg-inverse);
}

.section--hero-photo .hero__lead {
  color: var(--color-fg-subtle);
}

.section--hero-photo .eyebrow {
  color: var(--is-primary);
}

@media (min-width: 1024px) {
  .section--hero-photo {
    padding-block: var(--space-32);
  }

  .section--hero-photo::before {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--is-stage) 94%, transparent) 0%,
      color-mix(in srgb, var(--is-stage) 78%, transparent) 42%,
      color-mix(in srgb, var(--is-stage) 20%, transparent) 100%
    );
  }

  .section--hero-photo .hero {
    grid-template-columns: minmax(0, 40rem);
  }
}

/* ---------------------------------------------------------------- 9. School */

/*
 * Course cards, the level-one course page and the voucher page -- what the
 * WPCode snippets drew on production ("IS – Karty kursów", "IS – Strona
 * kursu", "IS – Strona vouchera"), in the theme's own tokens. Two tints are
 * mixed from brand colours rather than added as values: orange for "soft"
 * blocks, green for the guarantee.
 */
:root {
  --is-primary-tint: color-mix(in srgb, var(--is-primary) 10%, var(--is-surface));
  --is-success-tint: color-mix(in srgb, var(--color-success) 10%, var(--is-surface));
}

.stars {
  color: var(--is-primary);
  letter-spacing: var(--tracking-wide);
}

/* ---- Course cards */

.course-cards {
  display: grid;
  /* minmax(0, …): without it the column grows to the width of a phone's card
     strip and the whole page with it -- the browser then zooms out. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.course-cards__chips {
  position: sticky;
  top: var(--is-header-height);
  z-index: var(--z-dropdown);
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-3);
  overflow-x: auto;
  background: var(--is-bg);
  border-bottom: 1px solid var(--is-border);
  scrollbar-width: none;
}

.course-cards__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-full);
  color: var(--is-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.course-cards__chip b {
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--is-primary-tint);
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
}

.course-cards__section {
  scroll-margin-top: calc(var(--is-header-height) + var(--space-16));
}

.course-cards__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--is-fg);
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

/* Home page: kinds with nothing on sale, one quiet line each with their
   waiting list (Szymon, 12.11.2026). */
.course-cards__none {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-10) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--is-border);
  list-style: none;
  color: var(--is-fg-muted);
}

.course-cards__none b {
  color: var(--is-fg);
}

.course-cards__none a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* On the home page the groups read as part of "Najbliższe warsztaty impro":
   a plain subheading with a line under it, not the catalogue's uppercase
   heading with a rule and a count, which stood alone under the dark
   level-one panel (Szymon, 12.11.2026). */
.course-cards--glowna .course-cards__section + .course-cards__section {
  margin-top: var(--space-10);
}

.course-cards--glowna .course-cards__title {
  margin-bottom: var(--space-2);
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--fs-2xl);
  text-transform: none;
}

.course-cards--glowna .course-cards__count {
  display: none;
}

.course-cards--glowna .course-cards__intro {
  max-width: 65ch;
  margin-bottom: var(--space-5);
  text-align: left;
}

.course-cards__count {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: none;
}

.course-cards__intro {
  margin: 0 0 var(--space-4);
  color: var(--is-fg-muted);
}

.course-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.course-card__image,
.course-card__noimage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  background: var(--is-stage);
}

.course-card__noimage {
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  color: var(--is-fg-inverse);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.course-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.course-card__level {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--is-primary-tint);
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-card__level:has(.icon) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.course-card__level .icon {
  width: 1.4em;
  height: 1.4em;
}

.course-card__level--off {
  background: var(--is-bg-subtle);
  color: var(--is-fg-muted);
}

.course-card__when {
  color: var(--is-error-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.course-card__when--running {
  color: var(--is-success-ink);
}

.course-card__soldout,
.course-buy__soldout {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-card__title {
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-decoration: none;
}

/* The whole card opens the course; "Zapisz się" sits above this layer. */
.course-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.course-card__requirement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.course-card__requirement--ok {
  color: var(--is-success-ink);
}

.course-meta {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
}

.course-meta__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.course-meta__row .icon,
.course-rows__row .icon {
  color: var(--is-primary);
}

.course-meta__row .icon,
.course-card__requirement .icon {
  width: var(--space-4);
  height: var(--space-4);
}

.course-meta__dim {
  color: var(--is-fg-muted);
}

.course-seats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--is-error-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.course-seats::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-error);
}

.course-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-1);
}

.course-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.course-card__price del,
.course-price del {
  margin-right: var(--space-1);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

.course-card__price ins,
.course-price ins {
  text-decoration: none;
}

.course-card__price--long {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* A subscription's price is a sentence. Beside the button it was squeezed to
   a word per line and made the card -- and with it every card in the strip --
   twice as tall (Szymon, 10.11.2026): the sentence takes the full width and
   the button goes under it, full width too. The foot wraps for every card --
   "Daj znać o wolnym miejscu" beside a price is wider than a phone's card. */
.course-card__price--long {
  flex: 1 1 100%;
}

.course-card__price--long + .course-card__button {
  flex: 1 1 100%;
}

.course-card__button {
  position: relative;
  z-index: 2;
  flex: none;
}

.course-card--out {
  background: var(--is-bg-subtle);
  box-shadow: none;
}

.course-card--out .course-card__image {
  filter: grayscale(1);
  opacity: 0.55;
}

.course-card--out .course-card__title,
.course-card--out .course-meta {
  color: var(--is-fg-muted);
}

.course-start-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
}

.course-start-panel__eyebrow {
  margin: 0;
  color: var(--color-fg-subtle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-start-panel__title {
  color: var(--is-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.course-start-panel ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

/* Where the dark "Zacznij od poziomu 1" panel shows -- phone and computer
   alike since 12.11.2026 -- it is the level-one heading; the heading and the
   intro above it said the same twice (Szymon, 12.11.2026). */
.course-cards__section--na-start:has(.course-start-panel) .course-cards__title,
.course-cards__section--na-start:has(.course-start-panel) .course-cards__intro {
  display: none;
}

/* The home page's low card (course-card 'compact'): thumbnail and title with
   its date line beside it, the price and two actions under a rule -- about a
   third of the full card (Szymon, 12.11.2026). */
.course-card--compact {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.course-card__thumb {
  display: block;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-md);
  background: var(--is-stage);
  object-fit: cover;
}

.course-card__main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.course-card--compact .course-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-base);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.course-card__line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0;
  color: var(--is-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.course-card__seats {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.course-card__who {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-card__need {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.course-card__need--ok {
  color: var(--is-success-ink);
}

.course-card--compact .course-card__foot {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--is-border);
}

.course-card--compact .course-card__price {
  margin-right: auto;
  font-size: var(--fs-base);
  white-space: nowrap;
}

.course-card--compact .course-card__price--long {
  white-space: normal;
}

.course-card__more {
  position: relative;
  z-index: 2;
  color: var(--is-primary-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.course-card--compact .course-card__button {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.course-cards__grid + .course-taster,
.swipe-dots + .course-taster {
  margin-top: var(--space-4);
}

.course-taster {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--is-primary);
  border-radius: var(--radius-xl);
  background: var(--is-primary-tint);
}

.course-taster__icon {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--is-surface);
  color: var(--is-primary-ink);
}

.course-taster__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.course-taster__eyebrow {
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-taster__title {
  color: var(--is-fg);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.course-taster .course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.course-taster__more {
  font-size: var(--fs-sm);
}

.course-taster__more a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.course-taster__buy {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .course-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .course-card:hover {
    transform: translateY(calc(-1 * var(--space-1)));
    box-shadow: var(--shadow-md);
  }

  .course-start-panel {
    margin-bottom: var(--space-5);
    padding: var(--space-6) var(--space-8);
  }

  .course-start-panel__title {
    font-size: var(--fs-2xl);
  }

  .course-taster {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-4) var(--space-5);
  }

  .course-taster__buy {
    grid-column: auto;
  }

}

@media (min-width: 1024px) {
  .course-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Every column the same width: a wider first column made the second row's
     first card taller than its neighbours and put titles, dates and buttons
     off line (audit A-6). "Zacznij od poziomu 1" stays the bar above the
     cards it has been from 768 px. */
  .course-start-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    column-gap: var(--space-8);
  }

  .course-start-panel__eyebrow,
  .course-start-panel__title {
    grid-column: 1;
  }

  .course-start-panel ul {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

@media (min-width: 1280px) {
  .course-cards--warsztaty .course-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Two courses and a Zajawka: the Zajawka is the third card in the row, not a
   bar under two cards beside an empty third column -- the cheaper first step
   stands next to the courses it leads to (Szymon, 14.11.2026). Desktop only;
   on a phone the courses are a strip and the bar stays under it. Dense flow
   puts it beside the cards whatever heading or panel comes first. */
@media (min-width: 1024px) {
  .course-cards__section:has(> .course-cards__grid > .course-card:nth-child(2):last-child):has(> .course-taster) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: var(--space-5);
  }

  .course-cards__section:has(> .course-cards__grid > .course-card:nth-child(2):last-child):has(> .course-taster) > * {
    grid-column: 1 / -1;
  }

  .course-cards__section:has(> .course-cards__grid > .course-card:nth-child(2):last-child):has(> .course-taster) > .course-cards__grid {
    grid-column: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-cards__section:has(> .course-cards__grid > .course-card:nth-child(2):last-child):has(> .course-taster) > .course-taster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: 3;
    margin-top: 0;
    padding: var(--space-5);
  }

  .course-cards__section:has(> .course-cards__grid > .course-card:nth-child(2):last-child):has(> .course-taster) .course-taster__buy {
    width: 100%;
    margin-top: auto;
  }
}

/* ---- Google rating */

.rating-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.rating-line b {
  color: var(--is-fg);
}

/* Under the heading, at its left edge like the heading itself (audit V-3). */
.rating-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.rating-banner__score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rating-banner__score b {
  color: var(--is-primary-ink);
  font-size: var(--fs-xl);
}

.rating-banner__google {
  font-weight: var(--fw-semibold);
}

.rating-big {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}

.rating-big b {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

.rating-big .stars {
  display: block;
  font-size: var(--fs-xl);
}

.rating-big small {
  display: block;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

/* ---- Level-one course page */

.course-buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
  background: var(--is-surface);
  box-shadow: var(--shadow-sm);
}

.course-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.course-price b {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
}

.course-price > span {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-price--long b {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.course-price__community {
  flex-basis: 100%;
  color: var(--is-primary-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.course-rows {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.course-rows__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.course-rows__row small {
  display: block;
  color: var(--is-fg-muted);
}

.course-rows__row--ok {
  color: var(--is-success-ink);
}

.course-rows__row--ok .icon {
  color: var(--is-success-ink);
}

/* The workshop's requirement: read before "Zapisz się", not after (#12770, W2). */
.course-rows__row--level {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--is-primary-tint);
}

.course-rows__row--level .icon {
  color: var(--is-primary-ink);
}

.course-buy__start {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.course-buy__start a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
}

/* "Warsztat · 3 h" and "Od poziomu 2" over a workshop's title (W1). */
.workshop-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.workshop-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--is-bg-subtle);
  color: var(--is-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.workshop-badge--level {
  background: var(--is-primary-tint);
  /* 12 px on the orange tint: --is-primary-ink alone is 4.44:1, a tenth of black takes it to 5.3:1 (WCAG AA). */
  color: color-mix(in srgb, var(--is-primary-ink) 90%, var(--is-fg));
}

.workshop-badge--ok {
  background: var(--is-success-tint);
  color: var(--is-success-ink);
}

.course-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.course-dates span {
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--is-bg-subtle);
  font-variant-numeric: tabular-nums;
}

.course-buy__button {
  width: 100%;
}

/* The refund guarantee as one line under "Zapisz się", in the buy block and
   in "Co dostajesz?" (audit S-1): read at the moment of deciding, not above it. */
.course-guarantee {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 0;
  color: var(--is-success-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
}

.course-guarantee .icon {
  flex: none;
  margin-top: 0.1em;
}

.course-buy__alt {
  color: var(--is-primary-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-underline-offset: 3px;
}

/* Full-width blocks under the two columns. 40 px a side read cramped next to
   the rest of the site's 64 (Szymon, 13.11.2026): 48 on a phone, 64 -- as
   .section -- from 768 px. */
.course-section {
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .course-section {
    padding-block: var(--space-16);
  }
}

/* One heading system on every page (audit V-3, K-4): a sentence at the left,
   at h2's own size, with the orange eyebrow where there is one -- as
   .section__title. Capitals are for eyebrows only; the course and voucher
   pages' centred capitals read as another site at the moment of buying. */
.course-section__title {
  margin: 0 0 var(--space-5);
}

.course-section__lead {
  max-width: var(--container-sm);
  margin: calc(-1 * var(--space-2)) 0 var(--space-6);
  color: var(--is-fg-muted);
}

.course-section__note,
.course-section__more {
  margin: var(--space-4) 0 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-section__more a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.course-quotes {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.course-quote {
  display: flex;
  flex: 0 0 84%;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--is-bg-subtle);
  scroll-snap-align: start;
}

.course-quote__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.course-quote__head small {
  display: block;
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
}

.course-quote__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--is-stage);
  color: var(--is-fg-inverse);
  font-weight: var(--fw-bold);
}

.course-quote blockquote {
  margin: 0;
}

.course-quote p {
  margin: 0;
  line-height: var(--lh-normal);
}

.course-quote mark {
  background: none;
  color: inherit;
  font-weight: var(--fw-bold);
}

.swipe-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.swipe-dots i {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--is-border);
}

.swipe-dots i.is-on {
  background: var(--is-primary);
}

.fold--closed .fold__body {
  position: relative;
  max-height: 21rem;
  overflow: hidden;
}

.fold--short.fold--closed .fold__body {
  max-height: 9rem;
}

.fold--closed .fold__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--space-20);
  background: linear-gradient(transparent, var(--is-bg));
}

.fold__button {
  margin-top: var(--space-3);
}

.fold-text {
  display: grid;
  gap: var(--space-3);
  line-height: var(--lh-normal);
}

.fold-text p {
  margin: 0;
}

.fold-text ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.fold-text li::marker {
  color: var(--is-primary);
}

.course-about__subhead {
  font-weight: var(--fw-bold);
}

.course-about__grid {
  display: grid;
  gap: var(--space-6);
}

.course-trainer {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
}

.course-trainer__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.course-trainer__top small {
  display: block;
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-trainer__top b {
  font-size: var(--fs-xl);
}

.course-trainer__photo {
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.course-trainer__photo--initials {
  display: grid;
  place-items: center;
  background: var(--is-stage);
  color: var(--is-fg-inverse);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.course-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--is-primary-tint);
}

.course-steps__item em {
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.course-steps__item b {
  font-size: var(--fs-lg);
}

.course-steps__item p {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

/* The short version: four cards, photo above its title -- production's since
   9.11.2026. Two to a row on a phone, four from 768 px. */
.course-community__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.course-community__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.course-community__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.course-community__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--is-bg-subtle);
  color: var(--is-primary);
}

.course-community__card figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-community__card b {
  color: var(--is-fg);
}

.course-community__photos {
  display: grid;
  gap: var(--space-2);
}

.course-community__photos figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--is-stage);
}

.course-community__photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-community__photos figcaption {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-overlay);
  color: var(--is-fg-inverse);
  font-size: var(--fs-xs);
}

.course-community__photos--three {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(13.75rem, 42vw, 26.25rem);
}

.course-community__photos--three figure:first-child {
  grid-row: 1 / 3;
}

.course-community__tiles {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.course-community__tiles > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--is-bg-subtle);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-community__tiles b {
  display: block;
  color: var(--is-fg);
}

.course-community__tiles .icon {
  color: var(--is-primary);
}

.course-community__free {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--is-success-tint);
  color: var(--is-success-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.course-community__quote {
  max-width: var(--container-sm);
  margin: var(--space-5) auto 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--is-primary);
  color: var(--is-fg-muted);
  font-style: italic;
}

.course-community__quote p {
  margin: 0;
}

.course-community__quote small {
  display: block;
  font-style: normal;
}

.level-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.level-path::before {
  content: "";
  position: absolute;
  top: calc(var(--space-10) / 2);
  right: calc(100% / 12);
  left: calc(100% / 12);
  height: 2px;
  background: var(--is-border);
}

.level-path__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-align: center;
}

.level-path__node {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-full);
  background: var(--is-bg-subtle);
  color: var(--is-fg-muted);
}

.level-path__name {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.level-path__step--on .level-path__node {
  border: 2px dashed var(--is-primary);
  background: var(--is-surface);
  color: var(--is-primary-ink);
}

.level-path__step--on .level-path__name {
  color: var(--is-primary-ink);
  font-weight: var(--fw-bold);
}

.course-more__head {
  margin-bottom: var(--space-5);
}

.course-more__head .course-section__title {
  margin-bottom: var(--space-2);
}

.course-more__head p {
  margin: 0;
  color: var(--is-fg-muted);
}

/* "Inne terminy": smaller cards, photo beside the text. */
.course-cards--kurs .course-card__level,
.course-cards--kurs .course-card__requirement {
  display: none;
}

.course-cards--kurs .course-card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
}

.course-cards--kurs .course-card__image,
.course-cards--kurs .course-card__noimage {
  flex: 0 0 6.5rem;
  width: 6.5rem;
  border-radius: var(--radius-md);
}

/* A square on the trainer, not the card's height: stretched to a tall card a
   landscape poster was cut to a strip of torso with no face, and every
   thumbnail looked the same (audit V-9). The posters put the trainer at about
   two fifths of the width, near the top. */
.course-cards--kurs .course-card__image {
  align-self: flex-start;
  aspect-ratio: 1;
  object-position: 38% 15%;
}

.course-cards--kurs .course-card__body {
  gap: var(--space-1);
  padding: 0;
}

.course-cards--kurs .course-meta__row:nth-child(n + 3) {
  display: none;
}

.course-cards--kurs .course-card__title {
  font-size: var(--fs-base);
}

/* Price and button pinned to the bottom of every card, so a title wrapped to
   two lines no longer moves them out of line with the neighbours; a bigger
   thumbnail and two cards to a row, so a fourth card is not left alone under
   three (audit C-12). */
.course-cards--kurs .course-card {
  align-items: stretch;
}

.course-cards--kurs .course-card__body {
  flex: 1 1 auto;
}

/* "Inne terminy" on a course from level 2 up mixes levels and workshops:
   there the level says which is which. */
.course-cards--kurs-dalej .course-card__level {
  display: inline-block;
}

@media (min-width: 768px) {
  .course-cards--kurs .course-card__image,
  .course-cards--kurs .course-card__noimage {
    flex-basis: 9rem;
    width: 9rem;
  }
}

@media (min-width: 1024px) {
  .course-cards--kurs .course-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* On a phone each section's cards are a strip moved sideways: one card and
   the edge of the next, snapping (Szymon, 29.10.2026). */
@media (max-width: 767px) {
  .course-cards__grid[data-swipe] {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--is-gutter));
    padding: 0 var(--is-gutter) var(--space-2);
    overflow-x: auto;
    scroll-padding-inline: var(--is-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .course-cards__grid[data-swipe] > .course-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .course-cards__grid[data-swipe] + .swipe-dots {
    margin-top: var(--space-2);
  }
}

.waitlist-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--container-md);
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  border: 1px dashed var(--is-border);
  border-radius: var(--radius-xl);
  background: var(--is-surface);
  text-align: center;
}

.waitlist-box__title {
  margin: 0;
  font-size: var(--fs-lg);
}

.waitlist-box p {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.waitlist-box__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-1);
}

.waitlist-box small {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
}

.course-summary {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-2xl);
  background: var(--is-surface);
  box-shadow: var(--shadow-sm);
}

.course-summary__cols {
  display: grid;
  gap: var(--space-4);
}

.course-summary__cols h3 {
  margin: 0 0 var(--space-2);
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.check-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.check-list .icon {
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  color: var(--is-success-ink);
}

.course-summary__buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}


/* The workshop's cancellation rule in the guarantee's place (D1): a rule, not a promise, so grey. */
.course-summary__cancel {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--is-bg-subtle);
  font-size: var(--fs-sm);
}

.course-summary__rules {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
}

.course-summary__rules a {
  color: inherit;
}

.course-ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 52rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
  text-align: center;
}

.course-ask span {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.course-ask div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.course-faq__cta {
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* The bar at the bottom of a phone screen; school.js shows it. */
.mobile-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--is-border);
  background: var(--is-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.mobile-bar[hidden] {
  display: none;
}

.mobile-bar__text {
  display: grid;
  min-width: 0;
}

.mobile-bar__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.mobile-bar__alert {
  color: var(--is-error-ink);
  font-weight: var(--fw-semibold);
}

.mobile-bar .button {
  flex: none;
  white-space: nowrap;
}

body.has-mobile-bar {
  padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .course-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .swipe-dots {
    display: none;
  }

  .course-about__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  /* Only the trainer's card: one column of its own width, not the side one. */
  .course-about--trainer-only .course-about__grid {
    grid-template-columns: minmax(0, var(--container-sm));
  }

  .course-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-community__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .course-community__tiles {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }

  .level-path__node {
    width: var(--space-12);
    height: var(--space-12);
  }

  .level-path::before {
    top: calc(var(--space-12) / 2);
  }

  .level-path__name {
    font-size: var(--fs-sm);
  }

  .waitlist-box__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .course-summary {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
  }

  .course-summary__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* The bar stays until the product page's summary turns sticky beside the
   content (900px, section 8): between the two a tablet would have neither. */
@media (min-width: 900px) {
  .mobile-bar {
    display: none !important;
  }

  body.has-mobile-bar {
    padding-bottom: 0;
  }
}

/* A strip moved sideways with a finger is also a keyboard stop: focus it and
   the arrow keys scroll it. */
[data-swipe]:focus-visible {
  outline: 2px solid var(--is-primary-ink);
  outline-offset: 4px;
}

/* A very narrow phone: only the viewed level keeps its name. */
@media (max-width: 359px) {
  .level-path__step:not(.level-path__step--on) .level-path__name {
    display: none;
  }
}

/* ---- /warsztaty-improwizacji/ */

.text-center {
  text-align: center;
}

.section--tight {
  padding-block: var(--space-4);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__foot--center {
  display: flex;
  justify-content: center;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.hero__fact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-overlay-light);
  border-radius: var(--radius-xl);
  background: var(--color-overlay);
  color: var(--is-fg-inverse);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.hero__fact small {
  display: block;
  color: var(--color-fg-subtle);
}

.hero__fact b {
  display: block;
  font-size: var(--fs-base);
}

.hero__fact .icon {
  color: var(--is-primary);
}

/* A fact that leads somewhere (the next start, to its card): the whole box
   is the link, with an arrow saying so. */
.hero__fact--link {
  padding: 0;
}

.hero__fact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.hero__fact-link:hover b,
.hero__fact-link:focus-visible b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero__fact-link .icon:last-child {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Without a photo the hero is light, and the facts sit on the page colour. */
.section--hero:not(.section--hero-photo) .hero__fact {
  border-color: var(--is-border);
  background: var(--is-surface);
  color: var(--is-fg);
}

.section--hero:not(.section--hero-photo) .hero__fact small {
  color: var(--is-fg-muted);
}

.section--gains .feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.section--gains .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  border: 0;
  background: none;
  text-align: center;
}

.section--gains .feature__title {
  font-size: var(--fs-base);
  text-transform: uppercase;
}

.section--gains .section__head {
  margin-inline: auto;
  text-align: center;
}

/* Six icons with a word or two took ~650 px of a phone (audit A-13): three
   to a row and tighter cells there. */
@media (max-width: 767px) {
  .section--gains .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .section--gains .feature {
    padding: var(--space-2) var(--space-1);
  }

  .section--gains .feature__title {
    font-size: var(--fs-xs);
  }
}

.guarantee-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 52rem;
  margin: 0 auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--is-success-tint);
  color: var(--is-success-ink);
}

.guarantee-box p {
  margin: 0;
}

.guarantee-box .icon {
  flex: none;
  color: var(--is-success-ink);
}

/* Under a feature grid: as wide as the grid above it. */
.guarantee-box--wide {
  max-width: none;
  margin: var(--space-6) 0 0;
}

/* Its own line between the heading and the first group, with room below:
   pressed onto the group's title it read as part of it (Szymon, 10.11.2026). */
.section-course-cards__link {
  margin: 0 0 var(--space-10);
  font-size: var(--fs-sm);
  text-align: center;
  text-wrap: balance;
}

.section-course-cards__link a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.section-course-cards__empty {
  color: var(--is-fg-muted);
  text-align: center;
}

.reviews-top {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem;
  margin-inline: auto;
}

.reviews-top__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
}

.reviews-top__item blockquote {
  margin: 0;
}

.reviews-top__item p {
  margin: 0;
  line-height: var(--lh-normal);
}

.reviews-top__item figcaption {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.reviews-top__item figcaption b {
  color: var(--is-fg);
}

.audiences {
  display: grid;
  gap: var(--space-10);
}

.audience {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.audience__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

.audience ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  line-height: var(--lh-normal);
}

.audience li::marker {
  color: var(--is-primary);
}

.audience__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.list-columns {
  display: grid;
  gap: var(--space-6);
}

.list-columns h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.video-strip {
  display: grid;
  grid-auto-columns: 80%;
  grid-auto-flow: column;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.video-strip .video__frame {
  scroll-snap-align: start;
}

.video__frame--portrait {
  aspect-ratio: 9 / 16;
}

/* Upright reels: a card and most of the next on a phone, dots beneath. */
.video-strip--portrait {
  grid-auto-columns: calc((100% - var(--space-4)) / 1.7);
  scrollbar-width: none;
}

.trainers {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.trainer {
  display: flex;
  flex: 0 0 80%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--is-surface);
  scroll-snap-align: start;
}

.trainer__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  /* The studio portraits of 12.11.2026 are 2:3 with the head near the top:
     cut evenly, 6:7 took the top of Krzysiek's hair. */
  object-position: 50% 20%;
}

.trainer__photo--initials {
  display: grid;
  place-items: center;
  background: var(--is-stage);
  color: var(--is-primary);
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
}

.trainer__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.trainer__name {
  margin: 0;
  color: var(--is-primary-ink);
  font-size: var(--fs-xl);
}

.trainer__role {
  margin: var(--space-1) 0 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.trainer .fold,
.trainer .fold-text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}

.trainer .fold--closed .fold__body::after {
  background: linear-gradient(transparent, var(--is-surface));
}

.gallery-strip__title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.gallery-strip {
  display: grid;
  grid-auto-columns: 70%;
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery-strip__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .section--gains .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reviews-top {
    grid-template-columns: 1fr 1fr;
  }

  .audience {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  .audience:nth-child(even) .audience__image {
    order: -1;
  }

  .list-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-strip {
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
  }

  .trainers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .trainers + .swipe-dots {
    display: none;
  }

  .video-strip--portrait {
    grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4);
  }

  .gallery-strip {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (min-width: 1024px) {
  .trainers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Five reels in a row: nothing left to swipe, so no dots. Fewer than
     five (Integracja has four) sit in the middle, not to the left. */
  .video-strip--portrait {
    grid-auto-columns: calc((100% - 4 * var(--space-4)) / 5);
    justify-content: safe center;
  }

  .video-strip--portrait + .swipe-dots {
    display: none;
  }
}

/* Sections printed inside WooCommerce's page wrapper already sit in its
   container; a second one would add the gutters twice. */
.site-main--shop .course-section > .container,
.site-main--shop .voucher .container {
  width: 100%;
}

/* ---- Voucher page */

.is-voucher-page .product > .summary {
  display: none;
}

.voucher-hero {
  padding-block: var(--space-6) var(--space-10);
}

.voucher-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.voucher-hero__pdf {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voucher-hero__pdf img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
}

.voucher-hero__pdf p,
.voucher-hero__crumb {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.voucher-hero__pdf p {
  text-align: center;
}

.voucher-hero__crumb a {
  color: inherit;
}

.voucher-hero__title {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--fs-3xl);
}

.voucher-hero__intro {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

.voucher-buy fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.voucher-buy legend {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.voucher-buy__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.voucher-buy__chip {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
  background: var(--is-surface);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.voucher-buy__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.voucher-buy__chip b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.voucher-buy__chip small {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
}

.voucher-buy__chip--wide {
  grid-column: 1 / -1;
}

/* Why the voucher costs the dearer ticket (audit S-8). */
.show-voucher-buy__cover {
  margin: var(--space-2) 0 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.voucher-buy__chip:has(input:checked),
.voucher-buy__pair:has(input:checked) {
  border: 2px solid var(--is-primary);
  background: var(--is-primary-tint);
}

.voucher-buy__chip:has(input:focus-visible) {
  outline: 2px solid var(--is-primary-ink);
  outline-offset: 2px;
}

.voucher-buy__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.voucher-buy__field input,
.voucher-buy__field textarea {
  width: 100%;
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--is-surface);
  color: var(--is-fg);
  font: inherit;
  font-size: var(--fs-base);
}

.voucher-buy__field textarea {
  resize: vertical;
}

/* Without script the extra fields simply stay open; school.js closes them. */
.voucher-buy.is-ready:not(.is-other) .voucher-buy__other,
.voucher-buy.is-ready:not(.is-pair) .voucher-buy__name2 {
  display: none;
}

.voucher-buy__names {
  display: grid;
  gap: var(--space-2);
}

.voucher-buy__pair {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.voucher-buy__pair input {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin: var(--space-1) 0 0;
  accent-color: var(--is-primary);
}

.voucher-buy__pair b {
  display: block;
}

.voucher-buy__pair em {
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--is-primary);
  color: var(--is-on-primary);
  font-size: var(--fs-xs);
  font-style: normal;
}

.voucher-buy__pair > span > span {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.voucher-buy__total {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.voucher-buy__error {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--is-error-ink);
  border-radius: var(--radius-lg);
  color: var(--is-error-ink);
  font-size: var(--fs-sm);
}

.voucher-buy button[disabled] {
  opacity: 0.7;
  cursor: wait;
}

.voucher-cards {
  display: grid;
  gap: var(--space-5);
}

.voucher-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
  background: var(--is-surface);
}

.voucher-card--top {
  border: 2px solid var(--is-primary);
}

.voucher-card__flag {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--is-primary);
  color: var(--is-on-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.voucher-card em,
.voucher-duo em {
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.voucher-card > b {
  font-size: var(--fs-xl);
}

.voucher-card p,
.voucher-duo p {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.voucher-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
}

.voucher-card__foot b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}

.voucher-two {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Centred as every other section heading on both voucher pages (audit C-13). */

.voucher-two__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  line-height: var(--lh-normal);
}

.voucher-two__list li::marker {
  color: var(--is-primary);
}

.voucher-duo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-xl);
}

.voucher-duo > b {
  font-size: var(--fs-lg);
}

/* The show voucher (#12700): the workshop voucher's page, plus a dark note
   about impro, the "more tickets" field and the nearest Kolektyw shows on the
   stage-black box the repertoire gives the Kolektyw. */
.show-voucher__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-stage-smoke);
  color: var(--color-fg-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: left;
}

/* On a phone the square, nearly black example took the whole first screen
   and pushed the title and the ticket choice below it (audit C-8): a lower,
   landscape crop as on the workshop voucher. */
@media (max-width: 767px) {
  .show-voucher .voucher-hero__pdf img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}

.show-voucher__note .icon {
  flex: none;
  color: var(--is-primary);
}

.show-voucher__note b {
  color: var(--is-fg-inverse);
}

.show-voucher-buy__price {
  color: var(--color-fg-strong);
  font-weight: var(--fw-semibold);
}

.show-voucher-buy.is-ready:not(.is-more) .show-voucher-buy__more {
  display: none;
}

.show-voucher-buy__more small {
  display: block;
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
}

.show-voucher-buy__more input {
  max-width: 8rem;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* "Na co osoba obdarowana wymieni voucher": the home page's show cards on the
   page's own white -- the Kolektyw card is stage-black itself, and a black box
   around it hid it (Szymon, 13.11.2026). */
.show-voucher-shows__grid {
  margin-top: var(--space-5);
}

.show-voucher-shows__more {
  margin: var(--space-5) 0 0;
}

.show-voucher-shows__more a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

.show-voucher__activation {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .show-voucher-shows {
    padding: var(--space-8);
  }

  .show-voucher-shows__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .voucher-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  /* A stretched grid item cannot stick: the example stood still at the top
     and ~600 px of white column was left under it beside the form (audit
     C-11). Sized to its content, it follows the form down. */
  .voucher-hero__pdf {
    position: sticky;
    top: calc(var(--is-header-height) + var(--space-4));
    align-self: start;
  }

  .voucher-hero__title {
    font-size: var(--fs-4xl);
  }

  .voucher-buy__names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voucher-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .voucher-two {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-8);
  }

  .voucher-included {
    grid-template-columns: 1fr 1fr;
  }
}

/* The school's blocks sit inside WooCommerce's pages on the course and the
   voucher page, where `.woocommerce a.button` (section 8) paints every button
   orange. The theme's own variants keep their meaning there. */
.woocommerce a.button.button--secondary,
.woocommerce button.button.button--secondary {
  background: transparent;
  border-color: var(--color-fg-strong);
  color: var(--color-fg-strong);
}

.woocommerce a.button.button--secondary:hover,
.woocommerce button.button.button--secondary:hover {
  background: var(--color-fg-strong);
  color: var(--is-fg-inverse);
}

.woocommerce a.button.button--small,
.woocommerce button.button.button--small {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
}

/* ---- Video poster: an image and a play button until the player is asked for */

.video__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--is-fg-inverse);
}

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

.video__play {
  position: relative;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-full);
  background: var(--is-primary);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast);
}

/* The triangle, drawn in the button's ink colour. */
.video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: var(--space-3) 0 var(--space-3) var(--space-5);
  border-color: transparent transparent transparent var(--is-on-primary);
  transform: translate(-50%, -50%);
}

.video__poster:hover .video__play,
.video__poster:focus-visible .video__play {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   404 (audit A-12)
   -------------------------------------------------------------------------- */

.not-found__search {
  max-width: var(--container-md);
  margin-top: var(--space-10);
}

.not-found__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.not-found__search-row .form__input {
  flex: 1 1 14rem;
  min-width: 0;
}

.not-found__home {
  margin: var(--space-8) 0 0;
}

.not-found__home a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Empty cart (audit C-10): the theme's line and three ways on, centred on
   the whole width, with the site's buttons.
   -------------------------------------------------------------------------- */

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-md);
  margin: 0 auto;
  padding-block: var(--space-10);
  text-align: center;
}

.cart-empty > .icon {
  color: var(--is-primary-ink);
}

.cart-empty__title {
  margin: 0;
  font-size: var(--fs-2xl);
}

.cart-empty__lead {
  margin: 0;
  color: var(--is-fg-muted);
}

.cart-empty__ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 599px) {
  .cart-empty__ways,
  .cart-empty__ways li,
  .cart-empty__ways .button {
    width: 100%;
  }
}

/* The cart block's own list styles reached in: 27 px of list indent pushed
   the three buttons right on a phone, and a gap above every item but the
   first set "Terminy poziomu 1" 8 px higher than its neighbours (audit
   V-13). Two classes, to win over them. */
.cart-empty .cart-empty__ways {
  padding: 0;
}

.cart-empty .cart-empty__ways > li {
  margin: 0;
  padding: 0;
}

/* The icon taller than the label made these buttons 48 px against 42 px
   everywhere else; it overhangs the line box instead (audit V-13). */
.cart-empty__ways .button .icon {
  margin-block: calc(-1 * var(--space-1));
}

.wp-block-woocommerce-empty-cart-block:has(.cart-empty) {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Where we play (audit D-11): one card per stage on every page.
   -------------------------------------------------------------------------- */

.venues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.venue {
  padding: var(--space-6);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.venue > .icon {
  margin-bottom: var(--space-3);
  color: var(--is-primary-ink);
}

.venue__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--is-primary-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.venue__name {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl);
}

.venue__address,
.venue__when,
.venue__note {
  margin: 0 0 var(--space-2);
}

.venue__when {
  font-weight: var(--fw-semibold);
}

.venue__note {
  color: var(--is-fg-muted);
}

.venue__map {
  margin: var(--space-3) 0 0;
}

.venue__map a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Articles and documents (audit F-3, F-5, F-6, F-7, F-9, F-10, F-13)
   -------------------------------------------------------------------------- */

/* One column for reading, in the middle of the screen: title, photo and text
   hung off the left with a third of the screen empty (F-9). */
.entry {
  max-width: var(--container-md);
  margin-inline: auto;
}

.entry__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.prose--document {
  margin-inline: auto;
}

/* design-system.css sets every <p> to the interface size; in an article that
   made the paragraphs smaller and tighter than the list points right under
   them (F-3). The body's size and line height reach the paragraphs. */
.entry-content p,
.prose--document p {
  font-size: inherit;
  line-height: inherit;
}

/* Every heading inside an article is a chapter: one size, whatever level the
   old editor gave it -- "Podsumowanie" was smaller than bold words in a list
   (F-13). */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

/* The line under a video is its caption, not body text (F-10). */
.entry-content .entry-content__caption {
  margin-top: calc(-1 * var(--space-2));
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* The list of articles: three to a row, so five are 3 + 2 rather than 4 and
   a lone one (F-5). */
@media (min-width: 1024px) {
  .section--articles .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The whole article card opens the article; "Czytaj →" says it (F-6). */
.card--article {
  position: relative;
}

.card--article .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--article:hover .card__title a {
  color: var(--is-primary-ink);
}

.card__read {
  margin: auto 0 0;
  color: var(--is-primary-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* A low hero for a list page (F-7). */
.section--hero-compact,
.section--hero-photo.section--hero-compact {
  padding-block: var(--space-12);
}

@media (min-width: 1024px) {
  .section--hero-photo.section--hero-compact {
    padding-block: var(--space-16);
  }
}

/* A document's chapters (audit F-12): a list on top, each chapter's name set
   as a heading, and room above it when a link lands there under the header. */
.document-toc {
  max-width: var(--container-md);
  margin: 0 auto var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--is-bg-subtle);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.document-toc__title {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-bold);
}

.document-toc ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.document-toc a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--is-primary-ink);
}

@media (min-width: 768px) {
  .document-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

.prose--chapters > ol > li {
  scroll-margin-top: calc(var(--is-header-height) + var(--space-4));
}

.prose--document .document-chapter {
  margin: var(--space-10) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.prose--chapters > ol > li::marker {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

/* The course being paid for, above the checkout (audit S-5; the mock-up
   of 13.11.2026): level, name and price, date, place, seats, guarantee. */
.checkout-course {
  max-width: var(--container-md);
  margin: 0 auto var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--is-border);
  border-left: 4px solid var(--is-primary);
  border-radius: var(--radius-lg);
  background: var(--is-surface);
}

.checkout-course p {
  margin: 0;
}

.checkout-course__level {
  color: var(--is-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.checkout-course__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.checkout-course__name {
  font-weight: var(--fw-semibold);
}

/* An instalment price is a phrase, not a number: it wraps, at most half the row. */
.checkout-course__price {
  flex: 0 1 auto;
  max-width: 50%;
  font-weight: var(--fw-bold);
  text-align: end;
}

.checkout-course__when,
.checkout-course__refund,
.checkout-course__rating {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--is-fg-muted);
}

.checkout-course__seats {
  margin-top: var(--space-2);
  color: var(--is-error-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.checkout-course__refund {
  margin-top: var(--space-2);
  color: var(--is-success-ink);
}

/* "Usuń z koszyka" small, under everything: a way back, not an offer. */
.checkout-course__actions {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
}

.checkout-course__actions a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--is-fg-muted);
  text-underline-offset: 3px;
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--is-fg-inverse);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

/* Under "Kupuję i płacę": safe payment, guarantee, phone. */
/* .entry-content ul indents every list in the page; this one is not prose. */
.entry-content .checkout-assurance,
.checkout-assurance {
  display: grid;
  gap: var(--space-2);
  max-width: var(--container-md);
  margin: var(--space-4) auto 0;
  padding: 0;
  list-style: none;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.checkout-assurance li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkout-assurance .icon {
  flex: 0 0 auto;
  color: var(--is-fg);
}

.checkout-assurance a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
}

/* "Chcesz zapisać się na więcej…" quietly, after the button (it stood
   before the form and led off the page before the first field). */
.checkout-change {
  max-width: var(--container-md);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--is-border);
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.checkout-change a {
  color: var(--is-primary-ink);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
}

/* The coupon as a link that opens the field (inc/woocommerce.php): the
   block's own form is inside the order summary a phone shows folded, so
   that copy goes. */
.checkout-coupon {
  max-width: var(--container-md);
  margin: 0 auto var(--space-6);
}

.checkout-coupon__toggle {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--is-primary-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.checkout-coupon__toggle::-webkit-details-marker {
  display: none;
}

.checkout-coupon__form {
  margin-top: var(--space-2);
}

/* WooCommerce's notices above the boxes (the block prints none of the
   session's). Its icon sits in the notice's left padding, which the theme's
   list reset took away: it covered the first word. */
.checkout-notices {
  max-width: var(--container-md);
  margin: 0 auto var(--space-4);
}

.checkout-notices .woocommerce-error,
.checkout-notices .woocommerce-message,
.checkout-notices .woocommerce-info {
  margin: 0;
  padding-inline-start: var(--space-12);
  list-style: none;
}

.checkout-coupon__row {
  display: flex;
  gap: var(--space-2);
}

.checkout-coupon__row .form__input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.checkout-coupon__row .button {
  flex: 0 0 auto;
}

.checkout-coupon ~ .wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  display: none;
}

/* Courses only (body .checkout--courses, inc/woocommerce.php): the boxes
   above say what is bought, so the block's folded summary at the top goes
   and the one above the button keeps names, prices, discounts and the
   total -- no picture, no description. The sidebar only while it is not a
   column of its own and while that copy above the button is there: the
   total is never left out. */
.checkout--courses .wc-block-checkout:not(.is-large):has(.checkout-order-summary-block-fill-wrapper) .wc-block-checkout__sidebar {
  display: none;
}

.checkout--courses :is(
  .wc-block-components-order-summary-item__image,
  .wc-block-components-order-summary-item__description .wc-block-components-product-metadata
) {
  display: none;
}

/* Without the picture its gap before the name goes too. */
.checkout--courses .wc-block-components-order-summary-item__description {
  padding-inline-start: 0;
}

/* The checkout's footer: the documents and the company only (footer.php). */
.site-footer--checkout {
  padding-block: var(--space-6);
}

.site-footer--checkout .site-footer__legal-list {
  margin-top: 0;
}

/* The address only with "Chcę fakturę" (audit S-5, variant C):
   assets/js/checkout-invoice.js sets .checkout-invoice-off on <html> while
   the box is clear. Hidden, not removed -- React keeps drawing the fields,
   and the country stays Poland. */
.checkout-invoice-off #billing :is(
  .wc-block-components-address-form__country,
  .wc-block-components-address-form__state,
  .wc-block-components-address-form__company,
  .wc-block-components-address-form__address_1,
  .wc-block-components-address-form__address_2,
  .wc-block-components-address-form__postcode,
  .wc-block-components-address-form__city
) {
  display: none;
}

/* The invoice step is its box alone: "Chcę fakturę na firmę (NIP)" says what
   it is. Its title ("NIP" on staging's Flexible Invoices 5.4, "Faktura na
   firmę?" on production) repeated the box, and production's "Fakturę
   wyślemy automatycznie na e-mail (czasem wpada do spamu)" planted a doubt
   one step before paying (the checkout evaluation, 14.11.2026). The screen
   reader's legend stays. */
.wc-block-components-checkout-step:has(#billing_invoice_ask, #wpdesk-flexible-invoices-checkout-want-invoice) :is(
  .wc-block-components-checkout-step__heading,
  .wc-block-components-checkout-step__description
) {
  display: none;
}

/* A step's title over its description, not under it: the block drew the
   title small and the description at body size, so "Na ten adres
   wyślemy…" read as the heading. */
.wc-block-checkout .wc-block-components-checkout-step__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.wc-block-checkout .wc-block-components-checkout-step__description {
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

/* A sign-up is one step, "Twoje dane" (inc/woocommerce.php): the name and
   phone step goes on under it without a title of its own. */
.checkout--courses .wc-block-checkout__billing-fields :is(
  .wc-block-components-checkout-step__heading,
  .wc-block-components-checkout-step__description
) {
  display: none;
}

/* "Kwota" equal to "Łącznie" said the same sum twice; it stays while a
   discount or a fee stands between them. The whole totals band goes, not
   only its "Kwota": hiding the row alone left an empty band with its two
   borders (Szymon's phone, 14.11.2026). */
.checkout--courses .wp-block-woocommerce-checkout-order-summary-totals-block:not(:has(.wc-block-components-totals-discount, .wc-block-components-totals-fees, .wc-block-components-totals-shipping)) {
  display: none;
}

/* "Składasz zamówienie jako gość" under the e-mail: with no WordPress
   accounts (IS Apka is the account, inc/woocommerce.php) there is nothing
   else to check out as, and the line only suggested there should be. */
.wc-block-checkout__guest-checkout-notice {
  display: none;
}

/* WPCode #12591 prints "Adres firmy uzupełnij powyżej." under a ticked box;
   the theme's note below says it, with a button to the fields, and only while
   they are empty -- the two stood one above the other (14.11.2026). Its
   selector, one body higher: the snippet's style comes later in the page. */
body .wp-block-wpdesk-flexible-invoices-checkout:has(#wpdesk-flexible-invoices-checkout-want-invoice:checked) .wc-block-components-checkout-step__content::after {
  content: none;
}

/* Under "Chcę fakturę": the address opens a screen above, in the contact step. */
.checkout-invoice-note:not(:has(p:empty)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--is-bg-subtle);
  font-size: var(--fs-sm);
}

.checkout-invoice-note p {
  margin: 0;
}

/* .button sets its own display, which beats the hidden attribute: without
   this "Przejdź do adresu" stood under a clear "Chcę fakturę" (Szymon,
   12.11.2026). */
.checkout-invoice-note__go[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Cookie banner (components/consent-banner.php, audit X-1/X-3/X-7/F-3)
   -------------------------------------------------------------------------- */

/* Shown while <html> is .consent-open: set by the inline bootstrap in <head>
   for a visitor who has not answered, so the strip is there at first paint
   and never jumps in. One narrow strip, not a modal. */
.consent {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-overlay);
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--is-border);
  background: var(--is-surface);
  box-shadow: var(--shadow-lg);
  color: var(--is-fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.consent-open .consent {
  display: block;
}

.consent:focus {
  outline: none;
}

.consent__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--is-container);
  margin: 0 auto;
}

.consent__text {
  margin: 0;
  color: var(--is-fg);
}

.consent__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Akceptuję" and "Odrzucam" are the same size and weight: refusing must be
   as easy as agreeing, or the "yes" is not valid. 44 px tall, black ink on
   orange and on white (X-7: was white 13 px on orange, 2.38:1, 30 px). */
.consent__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.consent__button {
  padding-inline: var(--space-4);
}

/* F-3: the phone's "Zapisz się" bar sits above the strip, not under it.
   consent.js keeps --consent-height equal to the strip's height. */
.consent-open .mobile-bar {
  bottom: var(--consent-height, 0px);
}

/* A link focused by Tab is scrolled clear of the strip, not under it. */
html.consent-open {
  scroll-padding-bottom: var(--consent-height, 0px);
}

/* The open phone menu runs to the bottom of the screen: its last links
   scroll up out from under the strip. */
@media (max-width: 1023px) {
  .consent-open .site-nav__panel.is-open {
    padding-bottom: calc(var(--space-10) + var(--consent-height, 0px));
  }
}

/* While the strip is open the end of the page can still be scrolled clear
   of it, under the phone bar too. */
.consent-open body {
  padding-bottom: var(--consent-height, 0px);
}

.consent-open body.has-mobile-bar {
  padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0px) + var(--consent-height, 0px));
}

@media (min-width: 900px) {
  .consent-open body.has-mobile-bar {
    padding-bottom: var(--consent-height, 0px);
  }
}

/* "Ustawienia cookies" in the footer: a button that reads as the links
   beside it. */
.site-footer__consent {
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--is-fg-inverse);
  font: inherit;
  cursor: pointer;
}

.site-footer__consent:hover {
  color: var(--is-primary-light);
}

.site-footer__consent:focus-visible {
  outline: 2px solid var(--is-primary-light);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .consent__buttons {
    flex: none;
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
  }
}