/* ZORA-CHEM: design system (tokens, reset, base, layout, components, utilities).
   Block, element and modifier names and data-zc-* attributes are the markup contract for the WordPress templates.
   Motion: one system of tokens (--zc-ease-*, --zc-dur-*), mirrored in frontend/src/motion/tokens.js; every animation
   and transition is off with prefers-reduced-motion (utilities layer). */
@layer tokens, reset, base, layout, components, utilities;

@layer tokens {
  :root {
    --zc-forest: #1F3A2E;
    --zc-night: #12241C;
    --zc-cream: #F6F1E7;
    --zc-sand: #E9DFCC;
    --zc-amber: #B0612A;
    --zc-amber-deep: #944F21;
    --zc-amber-light: #E0A06A;
    --zc-ink: #2A2A26;
    --zc-muted: #5C5A50;
    --zc-cream-muted: #C9C2B1;
    --zc-white: #FFFFFF;
    --zc-line: rgb(31 58 46 / 0.16);
    --zc-line-strong: rgb(31 58 46 / 0.32);
    --zc-line-dark: rgb(246 241 231 / 0.16);
    --zc-line-dark-strong: rgb(246 241 231 / 0.3);
    /* Shade for overlays on photos and video (night, a touch deeper), in the steps the gradients need. */
    --zc-shade-90: rgb(12 26 20 / 0.9);
    --zc-shade-85: rgb(12 26 20 / 0.85);
    --zc-shade-80: rgb(12 26 20 / 0.8);
    --zc-shade-72: rgb(12 26 20 / 0.72);
    --zc-shade-62: rgb(12 26 20 / 0.62);
    --zc-shade-45: rgb(12 26 20 / 0.45);
    --zc-shade-30: rgb(12 26 20 / 0.3);
    --zc-shade-12: rgb(12 26 20 / 0.12);
    --zc-shade-0: rgb(12 26 20 / 0);
    --zc-shadow-raised: 0 2px 4px rgb(18 36 28 / 0.06), 0 24px 48px -20px rgb(18 36 28 / 0.22);
    --zc-font-heading: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --zc-font-body: "Inter", "Inter Fallback", Arial, sans-serif;
    /* Type scale: every component takes its size from these tokens. Fluid sizes run from 320 px to their maximum at
       1440 px and do not grow beyond it. Label: uppercase only (letter-spacing at least 0.08em). */
    --zc-text-hero: clamp(2.75rem, 1.536rem + 6.071vw, 7rem);          /* home H1, 44 to 112 px (also fitted to its column) */
    --zc-text-title: clamp(2.5rem, 1.643rem + 4.286vw, 5.5rem);        /* H1 of the other pages, 40 to 88 px */
    --zc-text-section: clamp(2.25rem, 1.607rem + 3.214vw, 4.5rem);     /* section H2, 36 to 72 px */
    --zc-text-display-num: clamp(2.5rem, 1.929rem + 2.857vw, 4.5rem);  /* large figures, 40 to 72 px */
    --zc-text-h3-xl: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);         /* large H3, figures and the word band, 28 to 48 px */
    --zc-text-index: clamp(1.375rem, 1.232rem + 0.714vw, 1.875rem);    /* names in the home index, 22 to 30 px */
    --zc-text-h3: clamp(1.375rem, 1.304rem + 0.357vw, 1.625rem);       /* cards, panels, questions, 22 to 26 px */
    --zc-text-lead: clamp(1.125rem, 1.071rem + 0.268vw, 1.3125rem);    /* 18 to 21 px */
    --zc-text-body: 1.0625rem;                                          /* 17 px */
    --zc-text-small: 0.9375rem;                                         /* 15 px, 16 px on phones */
    --zc-text-note: 0.875rem;                                           /* 14 px, the smallest mixed-case text */
    --zc-text-form: var(--zc-text-note); /* 16 px on phones */
    --zc-text-label: 0.8125rem;                                         /* 13 px, uppercase labels only */
    --zc-text-deco: clamp(2.5rem, 0.643rem + 9.286vw, 9rem);           /* decorative words and numbers, 40 to 144 px */
    --zc-text-step: min(20vw, 18rem);                                   /* pinned story step number, 288 px at 1440 */
    --zc-space-1: 4px;
    --zc-space-2: 8px;
    --zc-space-3: 12px;
    --zc-space-4: 16px;
    --zc-space-5: 24px;
    --zc-space-6: 32px;
    --zc-space-7: 48px;
    --zc-space-8: 64px;
    --zc-space-9: 96px;
    --zc-container: 1200px;
    --zc-container-wide: 1440px;
    --zc-gutter: clamp(16px, 4vw, 32px);
    --zc-section: clamp(72px, 9vw, 136px);
    --zc-radius-pill: 999px;
    --zc-radius-card: 20px;
    --zc-radius-panel: 28px;
    --zc-radius-sheet: 40px;
    --zc-radius-small: 8px;
    --zc-header-height: 64px;
    --zc-focus: var(--zc-amber-deep);
    /* Motion tokens: entrances 0.9 to 1.2 s on --zc-ease-out (GSAP expo.out), interface 0.35 s. */
    --zc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --zc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --zc-ease-expo-inout: cubic-bezier(0.87, 0, 0.13, 1);
    --zc-dur-enter: 1s;
    --zc-dur-ui: 0.35s;
    --zc-dur-header: 0.4s;
  }
  @media (max-width: 47.99em) {
    :root { --zc-text-small: 1rem; --zc-text-form: var(--zc-text-small); }
  }
  @media (min-width: 64em) {
    :root { --zc-header-height: 80px; }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button { font: inherit; color: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  /* night under the page: a page shorter than the window (e.g. the privacy policy before stage 4) ends on the footer */
  html { scroll-padding-top: calc(var(--zc-header-height) + var(--zc-space-4)); background: var(--zc-night); }
  body {
    background: var(--zc-cream);
    color: var(--zc-ink);
    font-family: var(--zc-font-body);
    font-size: var(--zc-text-body);
    line-height: 1.6;
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 {
    color: var(--zc-forest);
    font-family: var(--zc-font-heading);
    font-weight: 600;
    font-optical-sizing: auto;
    text-wrap: balance;
  }
  h1 { font-size: var(--zc-text-title); line-height: 1; letter-spacing: -0.02em; }
  h2 { font-size: var(--zc-text-section); line-height: 1; letter-spacing: -0.02em; }
  h3 { font-size: var(--zc-text-h3); line-height: 1.22; }
  p, li, dd { text-wrap: pretty; }
  a { color: var(--zc-amber-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--zc-focus); outline-offset: 3px; }
  :target { scroll-margin-top: calc(var(--zc-header-height) + var(--zc-space-4)); }
  main:focus { outline: none; }
  main { display: block; background: var(--zc-cream); }
  /* Pages whose header lies over the full-screen hero: the page behind the transparent header is dark. */
  .page--overlay { background: var(--zc-night); }
  ::selection { background: var(--zc-sand); color: var(--zc-forest); }
}

@layer layout {
  .container, .container-wide {
    width: 100%;
    max-width: calc(var(--zc-container) + 2 * var(--zc-gutter));
    margin-inline: auto;
    padding-inline: var(--zc-gutter);
  }
  .container-wide { max-width: calc(var(--zc-container-wide) + 2 * var(--zc-gutter)); }
  .section { padding-block: var(--zc-section); }
  .section--sand { background: var(--zc-sand); }
  .on-dark {
    --zc-focus: var(--zc-amber-light);
    color: var(--zc-cream);
  }
  .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--zc-cream); }
  .on-dark a { color: var(--zc-amber-light); }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--zc-space-3);
    color: var(--zc-amber-deep);
    font-size: var(--zc-text-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    flex: none;
    width: 28px;
    height: 8px;
    border-radius: var(--zc-radius-pill);
    background: var(--zc-amber);
  }
  .on-dark .eyebrow { color: var(--zc-amber-light); }
  .on-dark .eyebrow::before { background: var(--zc-amber-light); }
  .cover-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .cover-media img, .cover-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cover-media img[data-zc-parallax] { inset: -8% 0; height: 116%; }
  .lead { color: var(--zc-muted); font-size: var(--zc-text-lead); line-height: 1.5; max-width: 60ch; }
  .prose { display: grid; gap: var(--zc-space-4); max-width: 66ch; }

  /* Section heading: the display H2 starts in the first column on every page, the same line as the content under it.
     From 1024 px a lead stands beside the heading (columns 8-12, on the heading's last line), the heading in columns
     1-7; without a lead the heading may run across. --stack: the lead under the heading (narrow columns). */
  .section-head { display: grid; gap: var(--zc-space-4); margin-bottom: clamp(40px, 5vw, 72px); }
  .section-head__title { font-size: var(--zc-text-section); line-height: 1; letter-spacing: -0.03em; }
  .section-head__lead { max-width: 44ch; color: var(--zc-muted); font-size: var(--zc-text-lead); line-height: 1.5; }
  .on-dark .section-head__lead { color: var(--zc-cream); }
  @media (min-width: 64em) {
    .section-head:not(.section-head--stack) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--zc-space-5);
      align-items: end;
    }
    .section-head:not(.section-head--stack) > * { grid-column: 1 / -1; }
    .section-head:not(.section-head--stack) > .section-head__title:not(:last-child) { grid-column: 1 / 8; }
    .section-head:not(.section-head--stack) > .section-head__lead { grid-column: 8 / -1; grid-row: 1; padding-bottom: 0.2em; }
    .section-head--stack { row-gap: var(--zc-space-5); }
  }
}

@layer components {
  /* Skip link */
  .skip-link {
    position: absolute;
    z-index: 100;
    top: var(--zc-space-3);
    left: var(--zc-space-3);
    padding: var(--zc-space-3) var(--zc-space-5);
    border: 1.5px solid var(--zc-forest);
    border-radius: var(--zc-radius-pill);
    background: var(--zc-white);
    color: var(--zc-forest);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(calc(-100% - 64px));
  }
  .skip-link:focus { box-shadow: var(--zc-shadow-raised); transform: none; }

  /* Buttons: the fill slides in from the left on hover, the arrow leaves to the right and comes back from the left */
  .button {
    --zc-button-fill: var(--zc-amber-deep);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zc-space-3);
    min-height: 52px;
    overflow: hidden;
    padding: var(--zc-space-3) var(--zc-space-6);
    border: 1.5px solid transparent;
    border-radius: var(--zc-radius-pill);
    font-family: var(--zc-font-body);
    font-size: var(--zc-text-body);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--zc-dur-ui) var(--zc-ease-out), border-color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--zc-button-fill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.38s var(--zc-ease-out);
  }
  .button:hover::before { transform: scaleX(1); }
  .button > svg { flex: none; width: 20px; height: 20px; }
  .button--primary { --zc-focus: var(--zc-night); background: var(--zc-amber); color: var(--zc-white); }
  .button--primary:hover { color: var(--zc-white); }
  .button--secondary { --zc-button-fill: var(--zc-forest); border-color: var(--zc-forest); color: var(--zc-forest); }
  .button--secondary:hover { color: var(--zc-cream); }
  /* The ring of the amber button is measured against the button itself: night on light pages, cream on dark ones. */
  .on-dark .button--primary, .on-photo .button--primary,
  :is(.site-header.is-dark, .site-header.is-menu-open, .site-header--overlay:not(.is-scrolled)) .button--primary { --zc-focus: var(--zc-cream); }
  .on-dark .button--secondary { --zc-button-fill: var(--zc-cream); border-color: var(--zc-cream); color: var(--zc-cream); }
  .on-dark .button--secondary:hover { color: var(--zc-forest); }

  .arrow { position: relative; display: inline-grid; flex: none; width: 20px; height: 20px; overflow: hidden; }
  .arrow svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform 0.38s var(--zc-ease-out); }
  .arrow__b { transform: translateX(-120%); }
  :is(.button, .text-link, .product-card):hover .arrow__a { transform: translateX(120%); }
  :is(.button, .text-link, .product-card):hover .arrow__b { transform: none; transition-delay: 0.08s; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--zc-space-2);
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
  }
  .text-link span:not(.arrow) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .text-link:hover span:not(.arrow) { text-decoration-thickness: 2px; }

  /* Header: transitions colours in 0.4 s, hides when scrolling down past 600 px and returns when scrolling up (never
     while something in it has focus), shrinks from 80 to 64 px once scrolled. Over [data-header="dark"] sections it is
     night with cream text (.is-dark, JS); over the home hero it is transparent until the page scrolls. */
  .site-header {
    --zc-header-bg: var(--zc-cream);
    --zc-header-fg: var(--zc-forest);
    --zc-header-line: var(--zc-line);
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid var(--zc-header-line);
    background: var(--zc-header-bg);
    color: var(--zc-header-fg);
  }
  .site-header.is-ready {
    transition: background-color var(--zc-dur-header) var(--zc-ease-inout), border-color var(--zc-dur-header) var(--zc-ease-inout),
      color var(--zc-dur-header) var(--zc-ease-inout), translate var(--zc-dur-header) var(--zc-ease-out);
  }
  .site-header.is-dark, .site-header.is-menu-open, .site-header--overlay:not(.is-scrolled) {
    --zc-header-bg: var(--zc-night);
    --zc-header-fg: var(--zc-cream);
    --zc-header-line: var(--zc-line-dark);
    --zc-focus: var(--zc-cream);
  }
  .site-header--overlay { position: fixed; right: 0; left: 0; }
  .site-header--overlay:not(.is-scrolled, .is-menu-open) { --zc-header-bg: transparent; --zc-header-line: transparent; }
  .site-header.is-menu-open { transition: none; }
  .site-header.is-hidden:not(:focus-within, .is-menu-open) { translate: 0 -100%; }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--zc-space-2);
    min-height: var(--zc-header-height);
  }
  .site-header.is-ready .site-header__inner { transition: min-height var(--zc-dur-header) var(--zc-ease-inout); }
  .site-header__logo {
    display: grid;
    flex: none;
    margin-right: auto;
    padding-block: var(--zc-space-2);
    border-radius: var(--zc-radius-small);
  }
  .site-header__logo img { grid-area: 1 / 1; width: auto; height: 28px; transition: opacity var(--zc-dur-header) var(--zc-ease-inout), visibility 0s; }
  .logo--on-dark,
  :is(.site-header.is-dark, .site-header.is-menu-open, .site-header--overlay:not(.is-scrolled)) .logo--on-cream {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--zc-dur-header) var(--zc-ease-inout), visibility 0s linear var(--zc-dur-header);
  }
  :is(.site-header.is-dark, .site-header.is-menu-open, .site-header--overlay:not(.is-scrolled)) .logo--on-dark { opacity: 1; visibility: visible; }

  .site-nav__list { list-style: none; }
  .site-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
  }
  .site-nav__link > span { display: block; }
  .site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--zc-amber-deep); }
  :is(.site-header.is-dark, .site-header.is-menu-open) .site-nav__link:is(:hover, [aria-current="page"]) { color: var(--zc-amber-light); }
  .site-header--overlay:not(.is-scrolled, .is-menu-open) .site-nav__link:is(:hover, [aria-current="page"]) { color: var(--zc-cream); }

  .lang-switch { flex: none; }
  .lang-switch ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    font-size: var(--zc-text-note);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .lang-switch li { display: flex; }
  .lang-switch li + li::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 14px;
    margin-right: 2px;
    background: currentColor;
    opacity: 0.4;
  }
  .lang-switch a, .lang-switch [aria-current] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 32px;
    border-radius: var(--zc-radius-small);
  }
  .lang-switch a { color: inherit; text-decoration: none; }
  .lang-switch a:hover { text-decoration: underline; }

  .nav-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--zc-space-3) 0 10px;
    border: 1.5px solid currentColor;
    border-radius: var(--zc-radius-pill);
    background: transparent;
    color: inherit;
    font-size: var(--zc-text-small);
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

  /* Phones: the menu is a full-screen night panel (links in Fraunces, wholesale button and PL/EN at the bottom).
     Closing hides the links at once (display: none); opening is animated by JS with motion allowed. */
  @media (max-width: 63.99em) {
    .site-menu { display: none; }
    .site-menu.is-open {
      --zc-focus: var(--zc-cream);
      position: fixed;
      z-index: -1;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: calc(var(--zc-header-height) + var(--zc-space-6)) var(--zc-gutter) var(--zc-space-6);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--zc-night);
      color: var(--zc-cream);
    }
    .site-nav__list { display: grid; }
    .site-nav__link > span { padding-block: 0.2em; }
    .site-nav__link {
      min-height: 64px;
      overflow: clip;
      font-family: var(--zc-font-heading);
      font-size: var(--zc-text-section);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .site-menu__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--zc-space-4);
      margin-top: auto;
      padding-top: var(--zc-space-6);
      border-top: 1px solid var(--zc-line-dark-strong);
    }
    .site-menu .lang-switch ul { font-size: var(--zc-text-body); }
    .site-menu .lang-switch a, .site-menu .lang-switch [aria-current] { min-width: 44px; min-height: 44px; }
  }
  @media (max-width: 22.49em) {
    .site-header__logo img { height: 24px; }
  }
  @media (min-width: 48em) and (max-width: 63.99em) {
    .site-header__logo img { height: 32px; }
  }
  @media (max-width: 23.74em) {
    .nav-toggle { padding: 0; justify-content: center; }
    .nav-toggle__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  @media (min-width: 64em) {
    .site-header.is-compact { --zc-header-height: 64px; }
    .site-header__logo img { height: 36px; }
    .site-header__inner { gap: var(--zc-space-6); }
    .site-menu, .site-menu__footer { display: flex; align-items: center; gap: var(--zc-space-6); }
    .site-nav__list { display: flex; gap: var(--zc-space-5); }
    .site-nav__link { position: relative; font-size: var(--zc-text-small); }
    .site-nav__link::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 8px;
      left: 0;
      height: 2px;
      border-radius: var(--zc-radius-pill);
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--zc-dur-ui) var(--zc-ease-out);
    }
    .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
    .site-menu__cta { min-height: 48px; padding-inline: var(--zc-space-5); font-size: var(--zc-text-small); }
    .nav-toggle { display: none; }
  }

  /* Hero: full-screen video (mirrored, so the sun and the golden trees sit on the right) under a shade only where the
     text is: a band under the page header and a gradient from the bottom left. Phones: the stage is exactly one screen
     (100svh) with the first sentence of the lead; the rest of the lead follows under it. */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--zc-gutter) minmax(0, 1fr) var(--zc-gutter);
    grid-template-rows: [stage-start] minmax(calc(var(--zc-header-height) + var(--zc-space-5)), 1fr) repeat(4, auto) [stage-end] auto;
    background: var(--zc-night);
  }
  .hero__media { position: relative; z-index: -1; grid-column: 1 / -1; grid-row: stage-start / stage-end; min-height: 100svh; overflow: hidden; }
  .hero__frame { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background: var(--zc-night); }
  .hero__frame img, .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
  }
  .hero__video { opacity: 0; filter: saturate(1.12) contrast(1.05); transition: opacity 900ms ease; }
  .hero__video.is-playing { opacity: 1; }
  .hero__scrim {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    background:
      linear-gradient(to bottom, var(--zc-shade-72) 0, var(--zc-shade-62) 72px, var(--zc-shade-0) 180px),
      linear-gradient(to top, var(--zc-shade-85) 0%, var(--zc-shade-80) 48%, var(--zc-shade-45) 63%, var(--zc-shade-0) 78%);
  }
  .hero__eyebrow { grid-column: 2; grid-row: 2; margin-bottom: var(--zc-space-4); }
  @media (max-width: 22.49em) {
    .hero__eyebrow { letter-spacing: 0.08em; }
    .hero__eyebrow::before { content: none; }
  }
  /* The heading is a size container: every line is min(--zc-text-hero, 16cqi), so the longest line ("po parametrach",
     5.98em at the fixed optical size 96; with automatic optical size it is up to 7.1em at 40 px) always fits its
     column. Each line mask reaches 0.2em beyond the line (negative margins keep the layout),
     so accents and descenders are never clipped; the column layout stops those margins from collapsing. */
  .hero__title {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 3;
    font-size: var(--zc-text-hero);
    font-optical-sizing: none;
    font-variation-settings: "opsz" 96;
    line-height: 1;
    letter-spacing: -0.035em;
  }
  .hero__line { display: block; margin: -0.2em -0.1em; overflow: clip; font-size: min(var(--zc-text-hero), 16cqi); letter-spacing: -0.035em; }
  .hero__line > span { display: block; padding: 0.2em 0.1em; }
  .hero__lead { grid-column: 2; grid-row: 4; max-width: 46ch; margin-top: var(--zc-space-5); font-size: var(--zc-text-lead); line-height: 1.5; }
  .hero__lead--more { grid-row: 6; margin-top: 0; padding-block: var(--zc-space-7) var(--zc-space-2); }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zc-space-3) var(--zc-space-5); grid-column: 2; grid-row: 5; margin-top: var(--zc-space-6); padding-bottom: var(--zc-space-6); }
  .video-toggle {
    --zc-focus: var(--zc-cream);
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--zc-cream);
    border-radius: 50%;
    background: var(--zc-shade-45);
    color: var(--zc-cream);
    cursor: pointer;
    transition: background-color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .video-toggle:hover { background: var(--zc-shade-85); }
  .video-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; }
  .video-toggle__play { display: none; }
  .video-toggle[aria-pressed="true"] .video-toggle__pause { display: none; }
  .video-toggle[aria-pressed="true"] .video-toggle__play { display: block; }
  .hero > .video-toggle { grid-column: 2; grid-row: 5; justify-self: end; align-self: end; margin-bottom: var(--zc-space-6); }

  @media (max-width: 47.99em) {
    .hero__actions { flex-direction: column; align-items: flex-start; }
    .hero__actions .button--secondary {
      min-height: 44px;
      padding: 0;
      border: 0;
      border-radius: var(--zc-radius-small);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.25em;
    }
    .hero__actions .button--secondary::before { content: none; }
    .hero__actions .button--secondary:hover { color: var(--zc-cream); text-decoration-thickness: 2px; }
  }
  @media (min-width: 48em) {
    /* Wide screens: the heading at the bottom left, the lead and the buttons beside its last lines on the right, all in
       the dark lower part of the frame; the sky and the sun above stay in full colour. */
    .hero {
      grid-template-columns: minmax(var(--zc-gutter), 1fr) minmax(0, calc(var(--zc-container) * 0.58)) minmax(0, calc(var(--zc-container) * 0.42)) minmax(var(--zc-gutter), 1fr);
      grid-template-rows: [stage-start] minmax(calc(var(--zc-header-height) + var(--zc-space-6)), 1fr) auto auto auto auto auto [stage-end];
      column-gap: 0;
    }
    .hero__eyebrow { grid-column: 2; grid-row: 2; margin-bottom: var(--zc-space-5); }
    .hero__title { grid-column: 2; grid-row: 3 / 7; align-self: end; margin-bottom: clamp(40px, 7vh, 72px); }
    .hero__lead { grid-column: 3; grid-row: 4; max-width: 42ch; margin: 0 0 0 var(--zc-space-5); font-size: var(--zc-text-body); line-height: 1.55; }
    .hero__lead--more { grid-row: 5; padding: 0; margin-top: var(--zc-space-2); }
    .hero__actions { grid-column: 3; grid-row: 6; max-width: calc(100% - 68px); margin: var(--zc-space-6) 0 0 var(--zc-space-5); padding-bottom: clamp(40px, 7vh, 72px); }
    .hero > .video-toggle { grid-column: 3; grid-row: 6; margin-bottom: calc(clamp(40px, 7vh, 72px) + 4px); }
  }
  @media (min-width: 64em) {
    .hero__scrim {
      background:
        linear-gradient(to bottom, var(--zc-shade-72) 0, var(--zc-shade-62) 72px, var(--zc-shade-0) 180px),
        radial-gradient(ellipse 95% 110% at 0% 100%, var(--zc-shade-80) 0%, var(--zc-shade-62) 50%, var(--zc-shade-0) 80%),
        linear-gradient(to top, var(--zc-shade-80) 0%, var(--zc-shade-72) 37%, var(--zc-shade-30) 50%, var(--zc-shade-0) 62%);
    }
  }
  @media (min-width: 48em) and (max-width: 63.99em) {
    .hero__scrim {
      background:
        linear-gradient(to bottom, var(--zc-shade-72) 0, var(--zc-shade-62) 72px, var(--zc-shade-0) 180px),
        linear-gradient(to top, var(--zc-shade-85) 0%, var(--zc-shade-80) 58%, var(--zc-shade-45) 72%, var(--zc-shade-0) 86%);
    }
    .hero__title { grid-column: 2 / 4; grid-row: 3; margin-bottom: var(--zc-space-6); }
    .hero__lead, .hero__lead--more, .hero__actions { grid-column: 2 / 4; margin-left: 0; }
    .hero > .video-toggle { grid-column: 2 / 4; }
  }

  /* Facts under the hero */
  .facts-band { padding-block: var(--zc-space-6) clamp(48px, 6vw, 88px); background: var(--zc-night); }
  .facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--zc-line-dark-strong); }
  .facts__item { display: grid; align-content: start; gap: var(--zc-space-2); padding: var(--zc-space-5) var(--zc-space-3) var(--zc-space-4) 0; }
  .facts__item:nth-child(even) { padding-left: var(--zc-space-4); border-left: 1px solid var(--zc-line-dark-strong); }
  .facts__item:nth-child(n + 3) { border-top: 1px solid var(--zc-line-dark-strong); }
  .facts__value {
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-h3-xl);
    font-weight: 600;
    font-variant-numeric: lining-nums proportional-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .facts__unit, .facts__prefix { font-family: var(--zc-font-body); font-size: var(--zc-text-small); font-weight: 500; letter-spacing: 0; }
  .facts__label { color: var(--zc-cream-muted); font-size: var(--zc-text-small); line-height: 1.45; }
  @media (min-width: 64em) {
    .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .facts__item { padding: var(--zc-space-6) var(--zc-space-5) 0; }
    .facts__item:first-child { padding-left: 0; }
    .facts__item + .facts__item { border-left: 1px solid var(--zc-line-dark-strong); }
    .facts__item:nth-child(n + 3) { border-top: 0; }
  }

  /* Digits rising from their masks (JS with motion): the HTML holds the final value, read by screen readers. */
  .digits { display: inline-flex; }
  .digits__mask { display: inline-block; margin-block: -0.25em; overflow: clip; vertical-align: top; }
  .digits__mask > span { display: inline-block; padding-block: 0.25em; }

  /* Word band on night: one quiet row of words (Fraunces 500, the size of the large H3), cream and outlined in a
     hairline of amber-light by turns, a small amber dot before each, moved slowly sideways by scrolling (JS). Without
     motion the words wrap and only the first list shows (the copies are decorative). */
  .marquee { overflow: clip; padding-block: clamp(48px, 7vw, 104px); background: var(--zc-night); }
  .marquee__row { display: flex; flex-wrap: wrap; }
  .marquee__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2em 0.9em;
    padding-inline: var(--zc-gutter);
    list-style: none;
    color: var(--zc-cream);
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-h3-xl);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .marquee__list li { display: flex; align-items: center; gap: 0.9em; }
  .marquee__list li::before {
    content: "";
    flex: none;
    width: 0.14em;
    height: 0.14em;
    border-radius: 50%;
    background: var(--zc-amber-light);
  }
  .marquee__list li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--zc-amber-light); }
  .marquee__copy { display: none; }
  .marquee.is-moving .marquee__row { flex-wrap: nowrap; width: max-content; }
  .marquee.is-moving .marquee__list { flex-wrap: nowrap; padding-inline: 0 0.9em; }
  .marquee.is-moving .marquee__list li { white-space: nowrap; }
  .marquee.is-moving .marquee__copy { display: flex; }

  /* Story: "Z czego jest nasz pellet". Steps one under another (number, text, photo in a 4:5 frame rounded at the top).
     Wide screens with motion (.is-pinned, JS): the stage is pinned for three screens of scrolling, the text of the
     steps swaps in one slot on the left, the photos (columns 6-12, out to the right edge) cover each other from the
     bottom, a large outlined step number and a four-part progress bar; at the end the flame narrows to a pellet. */
  .story { padding-block: var(--zc-section) calc(var(--zc-section) + var(--zc-radius-sheet)); background: var(--zc-night); }
  .story__steps { display: grid; gap: clamp(64px, 9vw, 128px); max-width: calc(var(--zc-container) + 2 * var(--zc-gutter)); margin-inline: auto; padding-inline: var(--zc-gutter); }
  .story__step { display: grid; gap: var(--zc-space-6); }
  .story__text { display: grid; align-content: center; gap: var(--zc-space-4); max-width: 34rem; }
  .story__number {
    color: transparent;
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-deco);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 0.85;
    letter-spacing: -0.04em;
    -webkit-text-stroke: 1.5px var(--zc-amber-light);
  }
  .story__number > span { display: block; padding-bottom: 0.04em; }
  .story__text h3 { font-size: var(--zc-text-h3-xl); line-height: 1.05; letter-spacing: -0.02em; }
  .story__body { font-size: var(--zc-text-lead); line-height: 1.55; }
  .story__figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--zc-radius-pill) var(--zc-radius-pill) var(--zc-radius-panel) var(--zc-radius-panel);
    background: var(--zc-forest);
  }
  .story__image { width: 100%; height: 100%; object-fit: cover; }
  .story__progress { display: none; }
  @media (min-width: 48em) {
    .story__step { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
  }
  @media (min-width: 64em) {
    .story.is-pinned { padding-bottom: 0; }
    .story.is-pinned .story__stage {
      --zc-story-content: min(100vw - 2 * var(--zc-gutter), var(--zc-container));
      position: relative;
      display: grid;
      grid-template-columns: calc(var(--zc-story-content) * 5 / 12 - var(--zc-space-5) * 7 / 12) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      column-gap: var(--zc-space-5);
      height: 100vh;
      padding-left: max(var(--zc-gutter), (100vw - var(--zc-container)) / 2);
      overflow: clip;
    }
    .story.is-pinned :is(.story__steps, .story__step) { display: contents; }
    .story.is-pinned .story__text {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      align-content: start;
      max-width: none;
      padding-top: var(--zc-header-height);
    }
    .story.is-pinned .story__number { font-size: var(--zc-text-step); margin-bottom: var(--zc-space-2); }
    .story.is-pinned .story__figure {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      height: calc(100vh - var(--zc-header-height));
      aspect-ratio: auto;
      border-radius: var(--zc-radius-panel) 0 0 var(--zc-radius-panel);
    }
    .story.is-pinned .story__progress {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-column: 1;
      grid-row: 1;
      align-self: end;
      gap: var(--zc-space-2);
      margin-bottom: var(--zc-space-7);
    }
    .story__progress span { display: block; height: 3px; overflow: hidden; border-radius: var(--zc-radius-pill); background: var(--zc-line-dark-strong); }
    .story__progress span::after {
      content: "";
      display: block;
      height: 100%;
      background: var(--zc-amber-light);
      transform: scaleX(var(--zc-progress, 0));
      transform-origin: left center;
    }
  }

  /* Paths: a cream sheet over the dark chapter (rounded top, scaled in from 0.96 by scrolling), two tall photo panels
     whose texts line up across both (subgrid); the photo stays in full colour in the upper half. */
  .paths {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--zc-radius-sheet));
    padding-block: calc(var(--zc-section) * 0.8) var(--zc-section);
    border-radius: var(--zc-radius-sheet) var(--zc-radius-sheet) 0 0;
    background: var(--zc-cream);
    transform-origin: center top;
  }
  .paths .section-head { margin-bottom: var(--zc-space-6); }
  .paths__grid { display: grid; gap: var(--zc-space-4); }
  .path-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: minmax(clamp(220px, 34vh, 380px), 1fr) repeat(4, auto);
    align-items: end;
    gap: var(--zc-space-4);
    min-height: clamp(520px, 84vh, 820px);
    overflow: hidden;
    padding: clamp(20px, 4vw, 56px);
    border-radius: var(--zc-radius-panel);
    background: var(--zc-night);
  }
  .path-panel > .eyebrow { grid-row: 2; }
  .path-panel > h3 { grid-row: 3; font-size: var(--zc-text-h3-xl); line-height: 1.05; letter-spacing: -0.02em; }
  .path-panel > .path-panel__text { grid-row: 4; max-width: 40ch; font-size: var(--zc-text-lead); line-height: 1.5; }
  .path-panel > .text-link { grid-row: 5; justify-self: start; }
  .path-panel__media { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
  .path-panel__image { width: 100%; height: 100%; object-fit: cover; }
  .path-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to top, var(--zc-shade-90) 0%, var(--zc-shade-80) 32%, var(--zc-shade-72) 50%, var(--zc-shade-0) 62%);
    pointer-events: none;
  }
  @media (min-width: 48em) {
    .paths__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: minmax(clamp(240px, 38vh, 420px), 1fr) repeat(4, auto);
      column-gap: var(--zc-space-5);
    }
    .path-panel { grid-row: 1 / span 5; grid-template-rows: subgrid; row-gap: var(--zc-space-4); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .path-panel__image { transition: transform 0.9s var(--zc-ease-out); }
    .path-panel:hover .path-panel__image { transform: scale(1.08); }
  }

  /* SplitText line masks (JS with motion): like the hero lines, each mask reaches 0.2em beyond its line. */
  [data-zc-split]:has(> .split-line-mask) { display: flex; flex-direction: column; }
  .split-line-mask { margin: -0.2em -0.1em; }
  .split-line { padding: 0.2em 0.1em; }

  /* Badges */
  .badges { display: flex; flex-wrap: wrap; gap: var(--zc-space-2); list-style: none; }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px var(--zc-space-3);
    border-radius: var(--zc-radius-pill);
    background: var(--zc-sand);
    color: var(--zc-forest);
    font-size: var(--zc-text-note);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zc-amber);
  }

  /* Product cards: one structure (media, body) for the home index, the offer grid and the similar products. */
  .product-grid { display: grid; gap: var(--zc-space-5); list-style: none; }
  .product-card { position: relative; display: grid; grid-template-rows: auto 1fr; }
  .product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 64px var(--zc-space-6) var(--zc-space-6);
    border-radius: var(--zc-radius-panel);
    background: var(--zc-sand);
  }
  .section--sand .product-card__media { background: var(--zc-cream); }
  .product-card__image { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .product-card__media--photo { padding: 0; }
  .product-card__media--photo .product-card__image { object-fit: cover; mix-blend-mode: normal; }
  .product-card__badges { position: absolute; top: var(--zc-space-4); left: var(--zc-space-4); }
  .product-card__badges .badge { background: var(--zc-cream); }
  .section--sand .product-card__badges .badge { background: var(--zc-sand); }
  .product-card__body { display: grid; grid-template-rows: auto 1fr auto; }
  .product-card__heading { display: grid; gap: var(--zc-space-2); padding: var(--zc-space-5) var(--zc-space-1) 0; }
  .product-card__kind {
    color: var(--zc-amber-deep);
    font-size: var(--zc-text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .product-card__title { font-size: var(--zc-text-h3); line-height: 1.2; }
  .product-card__link { color: var(--zc-forest); text-decoration: none; border-radius: 2px; }
  .product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .product-card:hover .product-card__link { text-decoration: underline; text-decoration-thickness: 1px; }
  .product-card__params {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: end;
    margin: var(--zc-space-5) var(--zc-space-1) 0;
    border-top: 1px solid var(--zc-line);
  }
  .product-card__param { display: grid; grid-template-rows: auto 1fr; gap: 2px; padding: var(--zc-space-3) 0; }
  .product-card__param:nth-child(even) { padding-left: var(--zc-space-4); border-left: 1px solid var(--zc-line); }
  .product-card__param:nth-child(n + 3) { border-top: 1px solid var(--zc-line); }
  .product-card__param dt { color: var(--zc-muted); font-size: var(--zc-text-note); line-height: 1.35; }
  .product-card__param dd {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 2.7em;
    color: var(--zc-ink);
    font-size: var(--zc-text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1.35;
  }
  .product-card__param:nth-child(-n + 2) dd { justify-content: flex-end; }
  .product-card__note { display: block; color: var(--zc-muted); font-size: var(--zc-text-note); font-weight: 400; }
  .product-card__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zc-space-2);
    margin: 0 var(--zc-space-1);
    padding: var(--zc-space-4) 0 var(--zc-space-2);
    border-top: 1px solid var(--zc-line);
    color: var(--zc-amber-deep);
    font-size: var(--zc-text-small);
    font-weight: 600;
  }
  @media (prefers-reduced-motion: no-preference) {
    .product-grid .product-card__media { transition: transform 0.6s var(--zc-ease-out); }
    .product-grid .product-card__image { transition: transform 0.9s var(--zc-ease-out); }
    .product-grid .product-card:hover .product-card__media { transform: translateY(-6px); }
    .product-grid .product-card:hover .product-card__image { transform: scale(1.04); }
  }
  @media (min-width: 40em) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64em) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zc-space-7) var(--zc-space-5); }
  }
  .product-grid__more { display: flex; justify-content: center; margin-top: var(--zc-space-7); }

  /* Similar products on tablets: the third card fills the row, image on the left */
  @media (min-width: 40em) and (max-width: 63.99em) {
    .product-grid--related > .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto; }
    .product-grid--related > .product-card:last-child:nth-child(odd) .product-card__media { aspect-ratio: auto; height: 100%; padding-bottom: var(--zc-space-5); }
    .product-grid--related > .product-card:last-child:nth-child(odd) .product-card__body { padding-left: var(--zc-space-5); }
  }

  /* Home page offer: a compact index of six rows on desktop (name in Fraunces, 22 to 30 px, parameters in note size),
     the bag of the row under the pointer or focus rises on a sand stage in the right column; a horizontal strip on
     phones, two columns of cards with a lower (4:3) image on tablets. */
  .product-index { display: grid; gap: var(--zc-space-5); }
  @media (max-width: 39.99em) {
    .product-index {
      grid-auto-columns: 84%;
      grid-auto-flow: column;
      gap: var(--zc-space-3);
      margin-inline: calc(-1 * var(--zc-gutter));
      padding: var(--zc-space-1) var(--zc-gutter) var(--zc-space-3);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-padding-inline: var(--zc-gutter);
      scroll-snap-type: x mandatory;
    }
    .product-index > .product-card { scroll-snap-align: start; }
    .product-grid__more { margin-top: var(--zc-space-4); }
    .product-grid__more .button { width: 100%; }
  }
  @media (min-width: 40em) and (max-width: 63.99em) {
    .product-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-index .product-card__media { aspect-ratio: 4 / 3; padding-top: var(--zc-space-7); }
  }
  @media (min-width: 64em) {
    .product-index {
      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
      column-gap: clamp(40px, 5vw, 88px);
      row-gap: 0;
      border-bottom: 1px solid var(--zc-line-strong);
    }
    .product-index > .product-card { display: contents; }
    .product-index .product-card__body {
      position: relative;
      grid-column: 1;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      gap: var(--zc-space-3) var(--zc-space-6);
      padding-block: var(--zc-space-5);
      border-top: 1px solid var(--zc-line-strong);
    }
    .product-index .product-card__heading { grid-column: 1; gap: var(--zc-space-1); padding: 0; }
    .product-index .product-card__title { font-size: var(--zc-text-index); line-height: 1.15; letter-spacing: -0.01em; }
    .product-index > .product-card:hover .product-card__link { text-decoration: none; }
    .product-index .product-card__params { display: flex; flex-wrap: wrap; grid-column: 1; grid-row: 2; gap: var(--zc-space-1) var(--zc-space-5); margin: 0; border: 0; }
    .product-index .product-card__param { display: grid; gap: 0; padding: 0; border: 0; }
    .product-index .product-card__param dd { display: block; min-height: 0; font-size: var(--zc-text-note); }
    .product-index .product-card__note { display: inline; }
    .product-index .product-card__more {
      display: grid;
      place-content: center;
      place-items: center;
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border: 1px solid var(--zc-line-strong);
      border-radius: 50%;
      transition: border-color var(--zc-dur-ui) var(--zc-ease-out), background-color var(--zc-dur-ui) var(--zc-ease-out), color var(--zc-dur-ui) var(--zc-ease-out);
    }
    .product-index .product-card__more > span:first-child {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .product-index .product-card__media {
      position: sticky;
      z-index: 1;
      top: calc(var(--zc-header-offset, var(--zc-header-height)) + var(--zc-space-6));
      grid-column: 2;
      grid-row: 1 / span 6;
      align-self: start;
      aspect-ratio: 4 / 5;
      margin-block: var(--zc-space-5);
      padding: clamp(32px, 4vw, 56px);
      clip-path: inset(100% 0 0 0 round var(--zc-radius-panel));
      transition: clip-path 0.6s var(--zc-ease-out) 0.6s;
    }
    .product-index .product-card__image { scale: 1.12; transition: scale 0.6s var(--zc-ease-out) 0.6s; }
    .product-index > .product-card:is(:hover, :focus-within) .product-card__media,
    .product-index:not(:hover, :focus-within) > .product-card:first-child .product-card__media {
      z-index: 2;
      clip-path: inset(0 round var(--zc-radius-panel));
      transition-delay: 0s;
    }
    .product-index > .product-card:is(:hover, :focus-within) .product-card__image,
    .product-index:not(:hover, :focus-within) > .product-card:first-child .product-card__image { scale: 1; transition-delay: 0s; }
    .product-index .product-card__body { transition: translate 0.6s var(--zc-ease-out); }
    .product-index > .product-card:is(:hover, :focus-within) .product-card__body { translate: 12px 0; }
    .product-index > .product-card:is(:hover, :focus-within) .product-card__more { border-color: var(--zc-amber-deep); background: var(--zc-amber-deep); color: var(--zc-white); }
  }

  /* Quality in numbers: split screen, the photo (full colour, no shade) pinned in the left half, the numbers on night
     on the right; on phones the photo (4:5) sits above the numbers. */
  .quality { display: grid; background: var(--zc-night); }
  .quality__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
  .quality__image { width: 100%; height: 100%; object-fit: cover; }
  .quality__content { padding: var(--zc-section) var(--zc-gutter); }
  .quality__panels { display: grid; gap: var(--zc-space-8); }
  .quality__panel { display: grid; align-content: start; gap: var(--zc-space-2); }
  .quality__panel h3 { padding-bottom: var(--zc-space-4); border-bottom: 1px solid var(--zc-cream); }
  .quality__metrics { display: grid; }
  .quality__metric { display: grid; gap: var(--zc-space-2); padding-block: var(--zc-space-5); border-bottom: 1px solid var(--zc-line-dark-strong); }
  .quality__metric dt { color: var(--zc-cream-muted); font-size: var(--zc-text-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .quality__metric dd {
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-display-num);
    font-weight: 600;
    font-variant-numeric: lining-nums proportional-nums;
    line-height: 0.95;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  .quality__prefix, .quality__unit { font-family: var(--zc-font-body); font-size: var(--zc-text-body); font-weight: 500; letter-spacing: 0; }
  .quality__note { max-width: 60ch; margin-top: var(--zc-space-7); color: var(--zc-cream-muted); font-size: var(--zc-text-small); }
  @media (min-width: 56em) {
    .quality { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .quality__media { position: sticky; top: 0; height: 100vh; aspect-ratio: auto; }
    .quality__content {
      padding: calc(var(--zc-section) * 1.2) max(var(--zc-gutter), (100vw - var(--zc-container)) / 2) calc(var(--zc-section) * 1.2) clamp(40px, 6vw, 112px);
    }
  }

  /* Pictograms from the media library (zc_pictogram(): engraving-like line drawings on a 64-unit grid, stroke in currentColor) */
  .pictogram { display: block; width: 100%; height: auto; overflow: visible; }

  /* Steps with pictograms (template-parts/steps.php): an ordered list without visible numbers (the order is in the
     markup for screen readers), each pictogram in a round frame. */
  .steps { list-style: none; }
  .steps__icon { display: grid; flex: none; place-items: center; border-radius: 50%; color: var(--zc-forest); }
  .steps__title { color: var(--zc-forest); font-size: var(--zc-text-h3); line-height: 1.2; }
  .steps__text { font-size: var(--zc-text-body); line-height: 1.5; }

  /* How to order (home): the two paths side by side from 768 px (one under the other on phones), each its heading,
     three compact rows between hairlines (a 46 px pictogram in a sand ring, the text beside it; the business path in
     amber) and its link under them. */
  .how__rows { display: grid; gap: var(--zc-space-7) clamp(32px, 5vw, 88px); }
  .how__row { display: grid; align-content: start; gap: var(--zc-space-4); }
  .how__title { font-size: var(--zc-text-h3); line-height: 1.2; }
  .steps--list { display: grid; border-top: 1px solid var(--zc-line-strong); }
  .steps--list .steps__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--zc-space-4);
    padding-block: 10px;
    border-bottom: 1px solid var(--zc-line);
  }
  .steps--list .steps__icon { width: 56px; height: 56px; padding: 5px; border: 1px solid var(--zc-line-strong); background: var(--zc-sand); }
  .steps--list .pictogram { stroke-width: 1.75; }
  .how__row--business .steps--list .steps__icon { border-color: var(--zc-amber); color: var(--zc-amber-deep); }
  .how__link { justify-self: start; }
  @media (min-width: 48em) {
    .how__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* How we work together (Dla firm): the steps side by side from 1024 px, each a medallion (cream, a hairline ring
     outside and an amber one inside) with its pictogram, the title in Fraunces and the text under it, centred; a thin
     amber guide line runs from medallion to medallion and ends in a small chevron before the next one (the direction
     of the process; drawn by scrolling with motion, --zc-line from 0 to 1, frontend/src/motion/scrubs.js). On phones and
     tablets a vertical axis: the medallions on the left, the line down between them, the texts beside them. */
  .process { padding-block: clamp(64px, 7vw, 112px); }
  .process .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
  .steps--process { --zc-medal: 76px; --zc-line: 1; display: grid; gap: var(--zc-space-6); }
  @media (min-width: 48em) {
    .steps--process { --zc-medal: 96px; }
  }
  .steps--process .steps__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--zc-medal) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: var(--zc-space-5);
    row-gap: var(--zc-space-2);
  }
  .steps--process .steps__icon {
    position: relative;
    z-index: 1;
    grid-row: 1 / span 2;
    width: var(--zc-medal);
    height: var(--zc-medal);
    padding: calc(var(--zc-medal) * 0.11);
    border: 1px solid var(--zc-line-strong);
    background: var(--zc-cream);
    box-shadow: inset 0 0 0 5px var(--zc-cream), inset 0 0 0 6px var(--zc-amber);
  }
  .steps--process .steps__title { align-self: end; padding-top: var(--zc-space-3); }
  .steps--process .steps__text { max-width: 34ch; color: var(--zc-muted); }
  /* guide line from this medallion to the next one, and the chevron before the next one */
  .steps--process .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--zc-medal);
    left: calc(var(--zc-medal) / 2);
    width: 1px;
    height: calc(100% - var(--zc-medal) + var(--zc-space-6) - 8px);
    background: var(--zc-amber);
    transform: scaleY(var(--zc-line));
    transform-origin: center top;
  }
  .steps--process .steps__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -13px;
    left: calc(var(--zc-medal) / 2 - 4px);
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--zc-amber);
    border-bottom: 1px solid var(--zc-amber);
    opacity: var(--zc-line);
    rotate: 45deg;
  }
  @media (min-width: 64em) {
    .steps--process { --zc-medal: 112px; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--zc-space-6); }
    .steps--process .steps__item {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      align-content: start;
      justify-items: center;
      row-gap: var(--zc-space-3);
      text-align: center;
    }
    .steps--process .steps__icon { grid-row: auto; margin-bottom: var(--zc-space-3); }
    .steps--process .steps__title { align-self: start; padding-top: 0; }
    .steps--process .steps__item:not(:last-child)::after {
      top: calc(var(--zc-medal) / 2);
      left: calc(50% + var(--zc-medal) / 2 + var(--zc-space-3));
      width: calc(100% + var(--zc-space-6) - var(--zc-medal) - 2 * var(--zc-space-3) - 4px);
      height: 1px;
      transform: scaleX(var(--zc-line));
      transform-origin: left center;
    }
    .steps--process .steps__item:not(:first-child)::before {
      top: calc(var(--zc-medal) / 2 - 4px);
      left: calc(50% - var(--zc-medal) / 2 - var(--zc-space-3) - 8px);
      rotate: -45deg;
    }
  }

  /* FAQ: one answer open at a time (details with a shared name); the answer opens and closes smoothly
     (interpolate-size and ::details-content where supported, else JS: frontend/src/motion/faq.js), the plus turns
     into a minus. */
  .faq__layout { display: grid; gap: var(--zc-space-6); }
  .faq__list { border-top: 1px solid var(--zc-line-strong); }
  .faq__item { border-bottom: 1px solid var(--zc-line-strong); }
  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zc-space-5);
    min-height: 72px;
    padding-block: var(--zc-space-4);
    color: var(--zc-forest);
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-h3);
    font-weight: 600;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
  }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__icon { position: relative; flex: none; width: 40px; height: 40px; border: 1px solid var(--zc-line-strong); border-radius: 50%; transition: border-color var(--zc-dur-ui) var(--zc-ease-out); }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    translate: -50% -50%;
    transition: rotate var(--zc-dur-ui) var(--zc-ease-out);
  }
  .faq__icon::after { rotate: 90deg; }
  .faq__item[open] .faq__icon::after { rotate: 0deg; }
  .faq__question:hover .faq__icon { border-color: var(--zc-forest); }
  .faq__answer { max-width: 62ch; padding-right: var(--zc-space-8); color: var(--zc-ink); }
  .faq__answer > p { padding-bottom: var(--zc-space-5); }
  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .faq__list { interpolate-size: allow-keywords; }
      .faq__item::details-content {
        block-size: 0;
        overflow-y: clip;
        transition: block-size 0.45s var(--zc-ease-inout), content-visibility 0.45s allow-discrete;
      }
      .faq__item[open]::details-content {
        block-size: auto;
        transition-duration: 0.6s;
        transition-timing-function: var(--zc-ease-out);
      }
      .faq__answer { opacity: 0; transition: opacity 0.3s var(--zc-ease-inout); }
      .faq__item[open] .faq__answer { opacity: 1; transition: opacity 0.5s var(--zc-ease-out) 0.1s; }
    }
  }
  @media (min-width: 56em) {
    .faq__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--zc-space-8); }
    .faq__layout > .section-head { position: sticky; top: calc(var(--zc-header-offset, var(--zc-header-height)) + var(--zc-space-6)); align-self: start; }
  }

  /* Wholesale band: photo with parallax, shade from the left under the text */
  .cta-band { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(96px, 13vw, 200px); background: var(--zc-night); }
  .cta-band__scrim {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to top, var(--zc-shade-90) 0%, var(--zc-shade-80) 55%, var(--zc-shade-62) 100%);
    pointer-events: none;
  }
  .cta-band__inner { display: grid; gap: var(--zc-space-6); }
  .cta-band__content { display: grid; gap: var(--zc-space-4); max-width: 40rem; }
  /* The photo sits on its lower edge, so the spruces stand whole in the frame on every width. */
  .cta-band__image { object-position: 50% 100%; }
  .cta-band h2 { font-size: var(--zc-text-section); line-height: 1; letter-spacing: -0.03em; }
  .cta-band__text { max-width: 44ch; font-size: var(--zc-text-lead); line-height: 1.5; }
  .cta-band__aside { display: grid; gap: var(--zc-space-5); align-content: end; justify-items: start; }
  @media (min-width: 56em) {
    .cta-band__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
    .cta-band__scrim { background: linear-gradient(to right, var(--zc-shade-90) 0%, var(--zc-shade-80) 40%, var(--zc-shade-62) 62%, var(--zc-shade-12) 100%); }
  }

  /* Footer */
  .site-footer {
    --zc-focus: var(--zc-amber-light);
    padding-block: clamp(56px, 7vw, 88px) var(--zc-space-6);
    background: var(--zc-night);
    color: var(--zc-cream-muted);
    font-size: var(--zc-text-small);
  }
  .site-footer__grid { display: grid; gap: var(--zc-space-7); }
  /* Footer logo: the standard horizontal logo, 40 / 44 / 48 px tall, with the clear space of half its height
     (brand/logo/logo.json) before the tagline; the column gap keeps it on the other sides. */
  .site-footer__brand { --zc-footer-logo: 40px; display: grid; align-content: start; justify-items: start; }
  .site-footer__logo { display: block; margin-bottom: calc(var(--zc-footer-logo) * 0.5); border-radius: var(--zc-radius-small); }
  .site-footer__logo img { width: auto; max-width: none; height: var(--zc-footer-logo); }
  .site-footer__brand p { max-width: 24ch; color: var(--zc-cream); font-family: var(--zc-font-heading); font-size: var(--zc-text-h3); font-weight: 600; line-height: 1.2; }
  .site-footer__title {
    margin-bottom: var(--zc-space-3);
    color: var(--zc-cream);
    font-family: var(--zc-font-body);
    font-size: var(--zc-text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .site-footer__menu { display: grid; gap: var(--zc-space-1); list-style: none; }
  .site-footer a, .site-footer__consent { color: var(--zc-cream); text-decoration: none; }
  .site-footer a:hover, .site-footer__consent:hover { color: var(--zc-amber-light); text-decoration: underline; }
  .site-footer__menu a, .site-footer__consent { display: inline-flex; align-items: center; min-height: 32px; }
  .site-footer__consent { padding: 0; border: 0; background: none; text-align: start; cursor: pointer; }
  /* 44 px target in the 32 px row of the links */
  .site-footer__menu .site-footer__consent { min-height: 44px; margin-block: -6px; }
  .site-footer address { display: grid; gap: var(--zc-space-1); font-style: normal; }
  .site-footer address span { display: block; }
  .site-footer__company { color: var(--zc-cream); }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--zc-space-3) var(--zc-space-6);
    margin-top: var(--zc-space-8);
    padding-top: var(--zc-space-5);
    border-top: 1px solid var(--zc-line-dark);
  }
  /* also the phone and e-mail under the address */
  .site-footer__bottom a, .site-footer__contact a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-thickness: 1px; }
  @media (min-width: 48em) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { --zc-footer-logo: 44px; }
  }
  @media (min-width: 80em) {
    .site-footer__brand { --zc-footer-logo: 48px; }
  }
  @media (min-width: 64em) {
    .site-footer__grid { grid-template-columns: minmax(min-content, 1.3fr) 0.8fr 1fr 1.5fr; }
  }

  /* Breadcrumbs */
  .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; color: var(--zc-muted); font-size: var(--zc-text-note); }
  .breadcrumbs li { display: inline-flex; align-items: center; }
  .breadcrumbs li + li::before { content: "›"; padding-inline: var(--zc-space-2); }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--zc-muted); }
  .breadcrumbs a:hover { color: var(--zc-amber-deep); }
  .breadcrumbs [aria-current="page"] { color: var(--zc-ink); font-weight: 500; }
  .on-dark .breadcrumbs ol, .on-dark .breadcrumbs a, .on-dark .breadcrumbs [aria-current="page"] { color: var(--zc-cream); }
  .on-dark .breadcrumbs a:hover { color: var(--zc-amber-light); }
  @media (max-width: 47.99em) {
    .breadcrumbs li:not(:nth-last-child(2)):not(:focus-within) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .breadcrumbs li:nth-last-child(2)::before { content: "‹"; padding: 0 var(--zc-space-2) 0 0; }
  }

  /* Offer page: split heading, the left half on night, the right half a 4:5 photo out to the edge of the screen,
     opening from a capsule. */
  .offer-hero { display: grid; background: var(--zc-night); }
  .offer-hero__content { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--zc-space-5); padding: var(--zc-space-6) var(--zc-gutter) var(--zc-space-7); }
  .offer-hero__content > h1 { grid-row: 3; }
  .offer-hero__content > .lead { grid-row: 4; }
  .offer-hero h1 { font-size: var(--zc-text-title); line-height: 1; letter-spacing: -0.03em; }
  .offer-hero .lead { max-width: 46ch; color: var(--zc-cream); }
  .offer-hero__media { aspect-ratio: 4 / 3; overflow: hidden; }
  .offer-hero__image { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 56em) {
    .offer-hero {
      --zc-offer-hero-height: clamp(560px, calc(100svh - var(--zc-header-height)), 46rem);
      grid-template-columns: minmax(0, 1fr) min(50%, var(--zc-offer-hero-height) * 0.8);
      min-height: var(--zc-offer-hero-height);
    }
    .offer-hero__content {
      padding: var(--zc-space-7) clamp(32px, 5vw, 88px) clamp(56px, 9vh, 96px) max(var(--zc-gutter), (100vw - var(--zc-container)) / 2);
    }
    .offer-hero__media { aspect-ratio: auto; }
  }
  .offer-section { padding-block: var(--zc-space-7) var(--zc-section); }

  /* Page headings of the subpages (Dla firm, O firmie: split with a photo; Kontakt, Polityka: --plain, text only):
     the offer heading with an optional eyebrow above the title and a text link under the lead. */
  .offer-hero__content > .eyebrow { grid-row: 2; align-self: end; }
  .offer-hero__content > .offer-hero__link { grid-row: 5; justify-self: start; }
  .offer-hero--plain .offer-hero__content { grid-template-rows: auto auto auto auto; padding-bottom: var(--zc-space-8); }
  .offer-hero--plain .offer-hero__content > h1 { margin-top: var(--zc-space-7); }
  @media (min-width: 56em) {
    .offer-hero--plain { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .offer-hero--plain .offer-hero__content { padding-right: max(var(--zc-gutter), (100vw - var(--zc-container)) / 2); }
  }

  /* Benefits (Dla firm, D23): tiles, 4 in a row from 1200 px, 2 x 2 from 768 px; medallion as in .process; no hover */
  .section--benefits { padding-block: clamp(64px, 7vw, 112px); }
  .section--benefits .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
  .benefits { display: grid; gap: var(--zc-space-4); list-style: none; }
  .benefits__item { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--zc-space-3); padding: clamp(24px, 2.2vw, 32px); border: 1px solid var(--zc-line); border-radius: var(--zc-radius-card); background: var(--zc-white); box-shadow: inset 0 2px 0 var(--zc-amber), var(--zc-shadow-raised); }
  .benefits__icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: var(--zc-space-2); padding: 8px; border: 1px solid var(--zc-line-strong); border-radius: 50%; background: var(--zc-cream); box-shadow: inset 0 0 0 4px var(--zc-cream), inset 0 0 0 5px var(--zc-amber); color: var(--zc-forest); }
  .benefits__icon .pictogram { stroke-width: 1.75; }
  .benefits__item h3 { font-size: var(--zc-text-h3); line-height: 1.15; letter-spacing: -0.01em; }
  .benefits__item p { color: var(--zc-muted); font-size: var(--zc-text-small); line-height: 1.55; }
  @media (min-width: 48em) {
    .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zc-space-5); }
  }
  @media (min-width: 75em) {
    .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Text section (O firmie: "Co robimy" and the optional text sections, Dla firm: delivery): the heading in columns 1–5 and
     the text in lead size beside it in columns 6–12, both from the same top line; stacked on narrower screens. */
  .text-block__grid { display: grid; gap: var(--zc-space-5); }
  .text-block__title { font-size: var(--zc-text-section); line-height: 1; letter-spacing: -0.03em; }
  .text-block__body { max-width: 60ch; font-size: var(--zc-text-lead); line-height: 1.5; }
  .text-block__body > * + * { margin-top: var(--zc-space-4); }
  @media (min-width: 64em) {
    .text-block__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--zc-space-5); align-items: start; }
    .text-block__title { grid-column: 1 / 6; }
    .text-block__body { grid-column: 6 / -1; padding-top: 0.35em; }
  }

  /* Contact: the company's contact data next to the form card */
  .contact-layout { display: grid; gap: var(--zc-space-8) var(--zc-space-7); align-items: start; }
  .contact-layout h2 { margin-bottom: var(--zc-space-5); font-size: var(--zc-text-h3-xl); line-height: 1.05; }
  .contact-data { display: grid; gap: var(--zc-space-2); font-size: var(--zc-text-lead); font-style: normal; line-height: 1.45; }
  .contact-data__name { font-weight: 600; }
  .contact-data a { display: inline-flex; align-items: center; min-height: 44px; }
  @media (min-width: 56em) {
    .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  /* Wholesale enquiry (Dla firm, #zapytanie): from 1024 px the heading and its lead in a column on the left (4 of 12,
     kept in view while the form scrolls), the form card on the right. A link to the anchor lands with the heading
     a little under the header (the section's top padding is skipped). */
  .inquiry { scroll-margin-top: calc(var(--zc-space-6) - var(--zc-section)); }
  .inquiry__layout { display: grid; gap: var(--zc-space-6); }
  .inquiry__layout > .section-head { margin-bottom: 0; }
  @media (min-width: 64em) {
    .inquiry__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
    .inquiry__layout > .section-head { position: sticky; top: calc(var(--zc-header-offset, var(--zc-header-height)) + var(--zc-space-6)); transition: top var(--zc-dur-header) var(--zc-ease-out); }
  }

  /* Form card: white on cream, a hairline and the raised shadow of the design system (forms of Dla firm and Kontakt;
     --narrow: the withdrawal form of the privacy policy, 640 px). */
  .form-card {
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--zc-line);
    border-radius: var(--zc-radius-card);
    background: var(--zc-white);
    box-shadow: var(--zc-shadow-raised);
  }
  .form-card--narrow { max-width: 40rem; }
  .prose .form-card { margin-top: var(--zc-space-4); }
  .contact-layout .form-card__title, .form-card__title { margin-bottom: var(--zc-space-5); font-size: var(--zc-text-h3); line-height: 1.2; }

  /* Forms (Contact Form 7, inc/forms.php; classes of the templates in content/forms/forms.json; the plugin's stylesheet
     is not loaded), compact: labels 14 px, fields 44 px, a six-part grid from 640 px (.field: half, --third,
     --two-thirds, --wide), products as tiles in two columns, the marketing consent in a quiet hairline box with its
     channels in one row, the spam check and the button in one row, the information clause small and narrow; a message
     under each invalid field and one status line (success or error) under the button (the screen-reader copy of the
     plugin is visually hidden, its aria-live region stays). */
  .wpcf7 .screen-reader-response, .form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .form { display: flex; flex-direction: column; gap: var(--zc-space-4); }
  .form .hidden-fields-container { display: none; }
  .form__grid { display: grid; gap: 14px var(--zc-space-4); }
  .field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .field--choices { display: block; }
  .field > label, .field > legend, .field__label { padding: 0; color: var(--zc-forest); font-size: var(--zc-text-form); font-weight: 600; line-height: 1.4; }
  .field > legend { float: left; width: 100%; margin-bottom: var(--zc-space-2); }
  .field > legend + * { clear: both; }
  .field__req { color: var(--zc-amber-deep); }
  .form .wpcf7-form-control-wrap { display: block; }
  .form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 9px var(--zc-space-3);
    border: 1px solid var(--zc-line-strong);
    border-radius: var(--zc-radius-small);
    background-color: var(--zc-white);
    color: var(--zc-ink);
    font: inherit;
    font-size: var(--zc-text-small);
    line-height: 1.4;
    transition: border-color var(--zc-dur-ui) var(--zc-ease-out), box-shadow var(--zc-dur-ui) var(--zc-ease-out);
  }
  .form textarea { display: block; min-height: calc(4lh + 20px); resize: vertical; }
  .form :is(input, select, textarea):hover, .form :is(input, select, textarea):focus { border-color: var(--zc-forest); }
  .form :is(input, select, textarea, button):disabled { border-color: var(--zc-line); background-color: var(--zc-sand); color: var(--zc-muted); cursor: not-allowed; }
  .form :is(.wpcf7-not-valid, [aria-invalid="true"]):not(.wpcf7-checkbox) { border-color: var(--zc-amber-deep); box-shadow: inset 0 0 0 1px var(--zc-amber-deep); }
  .wpcf7-not-valid-tip { display: block; margin-top: var(--zc-space-1); color: var(--zc-amber-deep); font-size: var(--zc-text-note); font-weight: 600; line-height: 1.4; }
  /* checkboxes: in one row (consent and withdrawal channels), tiles for the products */
  .form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 0 var(--zc-space-5); }
  .form .wpcf7-list-item { display: block; margin: 0; }
  .form .wpcf7-list-item label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--zc-text-small); line-height: 1.35; cursor: pointer; }
  .form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--zc-forest); cursor: pointer; }
  .field--tiles .wpcf7-checkbox { display: grid; gap: var(--zc-space-2); }
  .field--tiles .wpcf7-list-item label {
    height: 100%;
    padding: 6px var(--zc-space-3);
    border: 1px solid var(--zc-line-strong);
    border-radius: var(--zc-radius-small);
    font-size: var(--zc-text-note);
    transition: border-color var(--zc-dur-ui) var(--zc-ease-out), background-color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .field--tiles .wpcf7-list-item label:hover { border-color: var(--zc-forest); }
  .field--tiles .wpcf7-list-item label:has(input:checked) { border-color: var(--zc-forest); background: var(--zc-cream); box-shadow: inset 0 0 0 1px var(--zc-forest); }
  .field--tiles .wpcf7-list-item label:has(input:focus-visible) { border-color: var(--zc-forest); }
  .field--tiles .wpcf7-list-item-label { font-weight: 500; }
  /* the marketing consent: separate and optional (D16), but quiet */
  .form__consent { padding: 10px var(--zc-space-4) 6px; border: 1px solid var(--zc-line); border-radius: var(--zc-radius-small); }
  .form__consent > legend { margin-bottom: var(--zc-space-1); }
  .form__consent-text { color: var(--zc-ink); font-size: var(--zc-text-form); line-height: 1.45; }
  .form__consent .wpcf7-form-control-wrap { display: inline-block; margin-right: var(--zc-space-5); vertical-align: middle; }
  .form__hint { display: inline-block; color: var(--zc-muted); font-size: var(--zc-text-form); line-height: 1.45; vertical-align: middle; }
  /* the spam check and the button in one row */
  .form__footer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--zc-space-4) var(--zc-space-5); }
  .field--quiz .wpcf7-form-control-wrap > label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zc-space-3); }
  .wpcf7-quiz-label { color: var(--zc-forest); font-size: var(--zc-text-body); font-weight: 600; font-variant-numeric: tabular-nums; }
  .form input.wpcf7-quiz { width: 5.5rem; }
  .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zc-space-3); }
  /* beside the spam check the button stands level with its field (under the label), also when a message follows it */
  .form__footer > .form__actions { margin-top: calc(var(--zc-text-form) * 1.4 + 4px); }
  .form .wpcf7-submit {
    --zc-focus: var(--zc-night);
    min-height: 48px;
    margin: 0;
    padding: var(--zc-space-3) var(--zc-space-6);
    border: 1.5px solid transparent;
    border-radius: var(--zc-radius-pill);
    background: var(--zc-amber);
    color: var(--zc-white);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .form .wpcf7-submit:hover { background: var(--zc-amber-deep); }
  .form.submitting .wpcf7-submit { opacity: 0.6; cursor: progress; }
  .form .wpcf7-spinner { display: none; width: 20px; height: 20px; border: 2px solid var(--zc-line-strong); border-top-color: var(--zc-forest); border-radius: 50%; }
  .form.submitting .wpcf7-spinner { display: inline-block; animation: zc-spin 0.8s linear infinite; }
  .form__note { order: 2; max-width: 60ch; color: var(--zc-muted); font-size: var(--zc-text-form); line-height: 1.5; }
  /* status line after sending: a dot and a tint of its state (success forest, errors amber) */
  .form .wpcf7-response-output {
    order: 1;
    display: flex;
    align-items: baseline;
    gap: var(--zc-space-3);
    margin: 0;
    padding: var(--zc-space-3) var(--zc-space-4);
    border: 1px solid var(--zc-forest);
    border-radius: var(--zc-radius-small);
    background: color-mix(in srgb, var(--zc-forest) 7%, var(--zc-white));
    color: var(--zc-forest);
    font-size: var(--zc-text-small);
    font-weight: 600;
    line-height: 1.45;
  }
  .form .wpcf7-response-output::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; translate: 0 -1px; }
  .form .wpcf7-response-output:empty { display: none; }
  .form:is(.invalid, .unaccepted, .spam, .failed, .aborted) .wpcf7-response-output {
    border-color: var(--zc-amber-deep);
    background: color-mix(in srgb, var(--zc-amber) 9%, var(--zc-white));
    color: var(--zc-amber-deep);
  }
  @media (min-width: 40em) {
    .form__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .form__grid > .field { grid-column: span 3; }
    .form__grid > .field--third { grid-column: span 2; }
    .form__grid > .field--two-thirds { grid-column: span 4; }
    .form__grid > .field--wide { grid-column: 1 / -1; }
    .field--tiles .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 39.99em) {
    .form__footer > * { flex-basis: 100%; }
    .form__footer > .form__actions { margin-top: 0; }
    .form .wpcf7-submit { width: 100%; }
  }
  @keyframes zc-spin { to { transform: rotate(360deg); } }

  /* Filter: sticky under the header; on phones one row scrolled sideways, the label for screen readers only */
  .filter {
    position: sticky;
    z-index: 20;
    top: var(--zc-header-offset, var(--zc-header-height));
    display: flex;
    align-items: center;
    gap: var(--zc-space-3) var(--zc-space-5);
    margin-bottom: var(--zc-space-6);
    padding-block: var(--zc-space-3);
    border-bottom: 1px solid var(--zc-line);
    background: var(--zc-cream);
    transition: top var(--zc-dur-header) var(--zc-ease-out);
  }
  .filter__label { flex: none; color: var(--zc-muted); font-size: var(--zc-text-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .filter__options { display: flex; gap: var(--zc-space-2); }
  .filter__button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--zc-space-2);
    min-height: 44px;
    padding: 0 var(--zc-space-4) 0 14px;
    border: 1.5px solid var(--zc-line-strong);
    border-radius: var(--zc-radius-pill);
    background: transparent;
    color: var(--zc-ink);
    font-size: var(--zc-text-small);
    font-weight: 500;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--zc-dur-ui) var(--zc-ease-out), background-color var(--zc-dur-ui) var(--zc-ease-out), color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .filter__button::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--zc-muted); border-radius: 50%; }
  .filter__button:hover { border-color: var(--zc-forest); }
  .filter__button[aria-pressed="true"] { border-color: var(--zc-forest); background: var(--zc-forest); color: var(--zc-cream); font-weight: 600; }
  .filter__button[aria-pressed="true"]::before { border-color: var(--zc-amber-light); background: var(--zc-amber-light); }
  /* Two-tone ring: amber-light against the forest fill, amber-deep against the cream page around it. */
  .filter__button[aria-pressed="true"]:focus-visible { outline-color: var(--zc-amber-light); outline-offset: 0; box-shadow: 0 0 0 6px var(--zc-amber-deep); }
  .filter__status { margin-top: var(--zc-space-6); color: var(--zc-muted); font-size: var(--zc-text-small); font-variant-numeric: tabular-nums lining-nums; }
  @media (max-width: 47.99em) {
    .filter { min-height: 60px; margin-inline: calc(-1 * var(--zc-gutter)); padding: var(--zc-space-2) 0; }
    .filter__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .filter__options { overflow-x: auto; padding: 4px var(--zc-gutter); scroll-padding-inline: var(--zc-gutter); scrollbar-width: none; }
  }

  /* Product page: heading on night (display name, three large figures) beside the gallery stage on sand */
  .product-hero { padding-block: var(--zc-space-5) clamp(48px, 6vw, 96px); background: var(--zc-night); }
  .product-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zc-space-7); }
  .product-hero__info { display: grid; align-content: space-between; gap: var(--zc-space-5); }
  .product-hero h1 { font-size: var(--zc-text-title); line-height: 1; letter-spacing: -0.03em; }
  .product-hero__teaser { max-width: 40ch; color: var(--zc-cream); font-size: var(--zc-text-lead); line-height: 1.5; }
  .product-hero .badge { background: var(--zc-forest); color: var(--zc-cream); }
  .product-hero .badge::before { background: var(--zc-amber-light); }
  .key-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--zc-space-4); border-top: 1px solid var(--zc-line-dark-strong); }
  .key-figures__item { display: grid; grid-template-rows: auto 1fr; gap: var(--zc-space-2); padding: var(--zc-space-4) var(--zc-space-3) 0 0; }
  .key-figures__item + .key-figures__item { padding-left: var(--zc-space-4); border-left: 1px solid var(--zc-line-dark-strong); }
  .key-figures dt { color: var(--zc-cream-muted); font-size: var(--zc-text-label); font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
  .key-figures dd {
    align-self: end;
    font-family: var(--zc-font-heading);
    font-size: var(--zc-text-display-num);
    font-weight: 600;
    font-variant-numeric: lining-nums proportional-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  @media (max-width: 29.99em) {
    .key-figures__unit { display: block; margin-top: 4px; }
  }
  @media (max-width: 22.49em) {
    .key-figures { grid-template-columns: minmax(0, 1fr); }
    .key-figures__item, .key-figures__item + .key-figures__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: end; padding: var(--zc-space-3) 0; border-left: 0; }
    .key-figures__item + .key-figures__item { border-top: 1px solid var(--zc-line-dark-strong); }
    .key-figures__unit { display: inline; }
  }
  .key-figures__prefix { display: block; margin-bottom: 4px; font-family: var(--zc-font-body); font-size: var(--zc-text-note); font-weight: 500; letter-spacing: 0; }
  .key-figures__unit { font-family: var(--zc-font-body); font-size: var(--zc-text-small); font-weight: 500; letter-spacing: 0; }
  .product-hero .breadcrumbs { margin-bottom: var(--zc-space-4); }
  @media (min-width: 56em) {
    .product-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(40px, 5vw, 80px); }
    .product-hero__info { padding-bottom: var(--zc-space-2); }
  }

  .gallery { display: grid; gap: var(--zc-space-4); }
  .gallery__stage {
    display: grid;
    height: clamp(340px, calc(100svh - var(--zc-header-height) - 160px), 760px);
    overflow: hidden;
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--zc-radius-panel);
    background: var(--zc-sand);
  }
  .gallery__main { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .gallery__main.is-entering { opacity: 0; transition: opacity 0.3s var(--zc-ease-inout); }
  .gallery__main.is-entering.is-in { opacity: 1; }
  .gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--zc-space-3); list-style: none; }
  .gallery__thumb {
    --zc-focus: var(--zc-amber);
    display: block;
    width: 104px;
    height: 60px;
    padding: 6px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--zc-radius-pill);
    background: var(--zc-sand);
    transition: border-color var(--zc-dur-ui) var(--zc-ease-out);
  }
  .gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .gallery__thumb:hover { border-color: var(--zc-cream-muted); }
  .gallery__thumb[aria-current="true"] { border-color: var(--zc-amber-light); box-shadow: inset 0 0 0 1.5px var(--zc-amber-light); }

  .product-body { display: grid; gap: var(--zc-space-8); padding-block: clamp(48px, 6vw, 96px) var(--zc-section); }
  .product-body__main { display: grid; gap: clamp(48px, 6vw, 80px); }
  .product-section { container-type: inline-size; display: grid; align-content: start; gap: var(--zc-space-5); }
  .product-section h2 { font-size: var(--zc-text-h3-xl); line-height: 1.05; letter-spacing: -0.02em; }
  @media (min-width: 56em) {
    .product-body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
    .product-body__main { grid-column: 1; grid-row: 1; }
    .product-body__aside { position: sticky; top: calc(var(--zc-header-offset, var(--zc-header-height)) + var(--zc-space-5)); grid-column: 2; grid-row: 1; transition: top var(--zc-dur-header) var(--zc-ease-out); }
  }

  .buy-box { display: grid; border-radius: var(--zc-radius-card); background: var(--zc-forest); }
  .buy-box__section { display: grid; gap: var(--zc-space-3); padding: clamp(24px, 3vw, 36px); }
  .buy-box__section + .buy-box__section { border-top: 1px solid var(--zc-line-dark-strong); }
  .buy-box__title { font-size: var(--zc-text-h3); }
  .buy-box__note { color: var(--zc-cream-muted); font-size: var(--zc-text-small); line-height: 1.5; }
  .buy-box__section .button { justify-self: stretch; }

  .spec-list { display: grid; border-top: 1px solid var(--zc-line-strong); }
  .spec-list__row { display: grid; gap: 2px; padding-block: var(--zc-space-4); border-bottom: 1px solid var(--zc-line); }
  .spec-list dt { color: var(--zc-muted); font-size: var(--zc-text-small); }
  .spec-list dd { color: var(--zc-ink); font-size: var(--zc-text-body); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; line-height: 1.45; }
  /* Two columns only where each keeps lines of about 35 characters or more */
  @container (min-width: 40rem) {
    .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--zc-space-7); }
  }

  .documents { display: grid; gap: var(--zc-space-3); list-style: none; }
  .documents__item {
    display: flex;
    align-items: center;
    gap: var(--zc-space-3);
    min-height: 56px;
    padding: var(--zc-space-3) var(--zc-space-4);
    border: 1px solid var(--zc-line);
    border-radius: var(--zc-radius-small);
    color: var(--zc-forest);
    font-weight: 600;
  }
  .documents__item svg { flex: none; width: 24px; height: 24px; color: var(--zc-amber-deep); }

  /* Photo band before the similar products: pellet poured into a hopper, in a capsule */
  .media-band { padding-bottom: var(--zc-section); }
  .media-band__capsule {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--zc-radius-sheet);
    background: var(--zc-night);
  }
  .media-band__capsule img, .media-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .media-band__video { opacity: 0; transition: opacity 900ms ease; }
  .media-band__video.is-playing { opacity: 1; }
  .media-band .video-toggle { position: absolute; right: var(--zc-space-5); bottom: var(--zc-space-5); }
  @media (min-width: 48em) {
    .media-band__capsule { aspect-ratio: 21 / 9; border-radius: var(--zc-radius-pill); }
    .media-band .video-toggle { top: 50%; right: 6%; bottom: auto; translate: 0 -50%; }
  }

  .related .section-head { margin-bottom: clamp(32px, 4vw, 56px); }

  /* Text on photos and video always sits on a shade and stays cream (the overlays are measured against every pixel
     under the text), so links, labels and focus rings there are cream too. */
  .on-photo { --zc-focus: var(--zc-cream); color: var(--zc-cream); }
  .on-photo h1, .on-photo h2, .on-photo h3, .on-photo .eyebrow, .on-photo a:not(.button) { color: var(--zc-cream); }
  .on-photo .eyebrow::before { background: var(--zc-cream); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .nowrap { white-space: nowrap; }

  /* Lenis (smooth scrolling, JS with motion only) */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}

/* Entrances that must be right from the first frame are CSS (motion allowed only). Home hero: the photo is whole from
   the first paint and settles in scale; the heading lines are visible from the first paint too (their masks start
   almost full and the lines rise the last 14 %), because the largest heading line is the page's LCP element (Chrome
   does not count a full-viewport photo); then the header, the eyebrow, the lead and the buttons come in, and the video
   fades in over the photo once it plays. JS finishes them at once on later visits in the same session. The offer photo
   opens from a capsule, the product bag rises on its stage. */
@media (prefers-reduced-motion: no-preference) {
  .hero__frame { animation: zc-settle 1.8s var(--zc-ease-out) both; }
  .site-header--overlay { animation: zc-intro-fade 0.9s var(--zc-ease-out) 0.3s both; }
  .hero__eyebrow { animation: zc-intro-rise 1s var(--zc-ease-out) 0.2s both; }
  .hero__line > span { animation: zc-intro-line 1.2s var(--zc-ease-out) both; }
  .hero__line:nth-child(2) > span { animation-delay: 0.08s; }
  .hero__line:nth-child(3) > span { animation-delay: 0.16s; }
  .hero__lead { animation: zc-intro-rise 1s var(--zc-ease-out) 0.45s both; }
  .hero__lead--more { animation-delay: 0.51s; }
  .hero__actions { animation: zc-intro-rise 1s var(--zc-ease-out) 0.6s both; }
  .hero > .video-toggle { animation: zc-intro-fade 0.9s var(--zc-ease-out) 0.7s both; }
  .offer-hero__media { animation: zc-capsule-open 1.3s var(--zc-ease-expo-inout) 0.1s both; }
  .offer-hero__image { animation: zc-settle 1.8s var(--zc-ease-out) 0.1s both; }
  .gallery__main--intro { animation: zc-bag-rise 1.1s var(--zc-ease-out) 0.15s both; }
  .hero.is-intro-seen :is(.hero__frame, .hero__eyebrow, .hero__line > span, .hero__lead, .hero__actions, .video-toggle),
  .site-header.is-intro-seen { animation: none; }

  @keyframes zc-intro-fade { from { opacity: 0; } }
  @keyframes zc-intro-rise { from { opacity: 0; transform: translateY(24px); } }
  @keyframes zc-intro-line { from { transform: translateY(14%); } }
  @keyframes zc-capsule-open {
    from { clip-path: inset(22% 26% round 999px); }
    to { clip-path: inset(0 round 0); }
  }
  @keyframes zc-settle { from { transform: scale(1.15); } }
  @keyframes zc-bag-rise { from { opacity: 0; transform: translateY(6%) scale(1.06); } }

  /* Cross-document page transitions: the header stays, the old page fades up in 0.28 s, the new one rises as a
     curtain from the bottom in 0.6 s; the 975 kg card photo morphs into the product gallery stage. */
  .site-header { view-transition-name: zc-header; }
  .gallery__stage { view-transition-name: zc-product-media; }
  ::view-transition-group(zc-header) { animation: none; }
  ::view-transition-old(root) { animation: zc-page-out 0.28s var(--zc-ease-inout) both; }
  ::view-transition-new(root) { animation: zc-page-in 0.6s var(--zc-ease-out) both; }
  ::view-transition-group(zc-product-media) { animation-duration: 0.6s; animation-timing-function: var(--zc-ease-out); }
  @keyframes zc-page-out { to { opacity: 0; transform: translateY(-24px); } }
  @keyframes zc-page-in {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0); }
  }
}

/* Opt-in for cross-document view transitions, kept at the top level (some engines only read it there); off with
   reduced motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}