/*
 * 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
 */

/* ------------------------------------------------- 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. 4.83:1 on white, 4.51:1 on the subtle background. */
  --is-primary-ink: #a56200;

  /* 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;

  --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;
}

/* ------------------------------------------------------------------ 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.
 */
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 {
  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 {
  margin-top: var(--space-10);
}

.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;
}

.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%;
  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;
}

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

  .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;
  }

  .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;
  }
}

/* ------------------------------------------------------------ 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(--radius-sm);
  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);
  text-decoration: underline;
}

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

.button--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
}

.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;
}

.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;
}

.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);
}

.quote {
  margin: 0;
  padding: var(--space-6);
  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;
}

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

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

.quote__text p {
  margin: 0;
}

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

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

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

/* -------------------------------------------------------------- 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__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__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 {
  border-color: var(--is-fg-inverse);
  color: var(--is-fg-inverse);
}

.section--cta .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(--radius-sm);
}

.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);
}

.site-footer a {
  color: var(--is-fg-inverse);
}

.site-footer a: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__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);
}

/* ----------------------------------------------------------- 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 #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  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);
}

/* --------------------------------------------------- Strona spektaklu */

/* Dates lead the page: somebody arriving from the repertoire has already
   chosen the show and needs when, where and how to pay. */
.show__facts {
  color: var(--is-fg-muted);
}

.show__dates-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
}

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

.show__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--radius-lg);
}

.show__date-when {
  flex: 1 1 12rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

.show__date-where,
.show__date-price {
  margin: 0;
  color: var(--is-fg-muted);
  font-size: var(--fs-sm);
}

.show__date-price {
  color: var(--is-fg);
  font-weight: var(--fw-semibold);
}

.show__date-status {
  display: block;
  color: var(--is-fg-muted);
  font-weight: var(--fw-regular);
}

.show__description {
  max-width: 60ch;
}

.show__address,
.show__empty {
  color: var(--is-fg-muted);
}

/* ------------------------------------------- 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.
 *
 * 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 div.product > .woocommerce-product-gallery,
.woocommerce.woocommerce.single-product div.product > div.summary {
  float: none;
  width: auto;
  margin: 0;
}

/*
 * Two columns above 900px, which is what lets the summary -- the column
 * holding every fact and the button -- follow the reader down a long page
 * instead of scrolling away at the top.
 *
 * Every other child of .product (the benefits block, the tabs, the harmonogram,
 * the other editions) spans both columns and stacks underneath, in the order
 * the hooks put them in.
 */
@media (min-width: 900px) {
  .woocommerce.woocommerce.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-10) var(--space-12);
    align-items: start;
  }

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

  .woocommerce.woocommerce.single-product div.product > .woocommerce-product-gallery {
    grid-row: 1;
    grid-column: 1;
  }

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

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

.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-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-more {
  padding-bottom: 0;
}

.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);
  }
}

.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-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);
}

/* The checkbox sits on the first line of its own label rather than beside a
   block of text, so a two-line consent line stays aligned. */
.form__field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

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

.form__label--check {
  margin: 0;
  font-weight: var(--fw-regular);
}

.form__field--check .form__error {
  grid-column: 1 / -1;
}

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

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

.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);
}

/* --------------------------------------------------------------------------
   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);
}

.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);
}

.package__action {
  margin: 0;
}

.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);
}

.spec__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--is-fg-muted);
}

/* --------------------------------------------------------------------------
   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);
}

.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-2) var(--space-5);
  margin: var(--space-8) 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}