/*
Theme Name: Smartech24
Theme URI: https://smartech24.pl
Author: Smartech24
Description: Lekki motyw blokowy sklepu smartech24.pl. Bez page-buildera i bez zadnego zapytania do serwerow trzecich: font Archivo jest hostowany lokalnie, bo Google Fonts wysylalby adres IP klienta do Google jeszcze przed zgoda w banerze.
Version: 1.7.16
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smartech24
Tags: block-patterns, full-site-editing, e-commerce
*/

@layer tokens, base, komponenty, woo;

.s24-koszyk .s24-zapisane-link {
  position: relative;
  box-sizing: border-box;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 8px;
}
.s24-zapisane-link svg { flex: none; }
.s24-zapisane-licznik {
  position: absolute;
  top: -5px;
  right: -4px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding-inline: 3px;
  border-radius: 50%;
  background: var(--s24-ink);
  color: var(--s24-base);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.s24-zapisane-licznik[hidden] { display: none; }

@layer tokens {
  :root {
    --s24-base: #FFFFFF;
    --s24-surface: #FFFFFF;
    --s24-paper: #F6F4F0;
    --s24-paper-deep: #EDEAE4;
    --s24-ink: #141414;
    --s24-ink-soft: #3D3D3D;
    --s24-muted: #5E5E5E;
    --s24-faint: #8A8780;
    --s24-line: #DEDAD2;
    --s24-line-strong: #C4BFB5;
    --s24-red-500: #F31F31;
    --s24-red-600: #E31229;
    --s24-red-700: #B50D20;
    --s24-success: #1D6B4F;
    --s24-success-bg: #EDF5F1;
    --s24-error: #A4161A;
    --s24-error-bg: #FBF0EF;
    --s24-info: #2C4A6E;
    --s24-info-bg: #EFF2F6;
    --s24-sale: #B50D20;
    --s24-sale-soft: #FDF3F0;

    --s24-radius-s: var(--wp--custom--radius--s, 4px);
    --s24-radius-m: var(--wp--custom--radius--m, 8px);
    --s24-shadow-raise: var(--wp--preset--shadow--raise);
    --s24-motion-fast: var(--wp--custom--motion--fast, 140ms);
    --s24-motion-base: var(--wp--custom--motion--base, 220ms);
    --s24-motion-slow: var(--wp--custom--motion--slow, 400ms);
    --s24-motion-easing: var(--wp--custom--motion--easing, cubic-bezier(.2,.6,.2,1));
  }
}

@layer base {
  body {
    background: var(--s24-paper);
    color: var(--s24-ink);
  }

  ::placeholder {
    color: var(--s24-muted);
    opacity: 1;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    text-wrap: balance;
  }

  .has-xs-font-size { letter-spacing: var(--wp--custom--tracking--xs, 0.02em); }
  .has-s-font-size { letter-spacing: var(--wp--custom--tracking--s, 0); }
  .has-m-font-size { letter-spacing: var(--wp--custom--tracking--m, 0); }
  .has-l-font-size { letter-spacing: var(--wp--custom--tracking--l, 0); }
  .has-xl-font-size { letter-spacing: var(--wp--custom--tracking--xl, -0.01em); }
  .has-2-xl-font-size { letter-spacing: var(--wp--custom--tracking--2-xl, -0.02em); }
  .has-3-xl-font-size { letter-spacing: var(--wp--custom--tracking--3-xl, -0.025em); }
  .has-4-xl-font-size { letter-spacing: var(--wp--custom--tracking--4-xl, -0.03em); }
  .has-5-xl-font-size { letter-spacing: var(--wp--custom--tracking--5-xl, -0.035em); }
  .has-6-xl-font-size { letter-spacing: var(--wp--custom--tracking--6-xl, -0.04em); }

  /* Ceny i kazda inna liczba, ktora ma sie nie rozjezdzac w kolumnie. */
  .s24-num,
  .woocommerce-Price-amount,
  .wc-block-components-totals-item__value,
  .wc-block-formatted-money-amount {
    font-variant-numeric: tabular-nums;
  }

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

  /* Czerwien 700 daje wymagany kontrast i odroznia globalny fokus od obramowania pola. */
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--s24-red-700);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer komponenty {
  /* Gora kategorii jest jednym blokiem SSR: nazwa, opis i dzieci pochodza
     z biezacego terminu, a na podkategoriach nie istnieje nawet znacznik img. */
  .s24-kategoria {
    min-width: 0;
    margin-top: 18px;
  }

  .s24-kategoria__hero {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--s24-ink);
  }

  .s24-kategoria__hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(20 20 20 / 72%) 0%, rgb(20 20 20 / 22%) 68%, transparent 100%);
    content: "";
  }

  .s24-kategoria__obraz {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .s24-kategoria__hero-tresc {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    padding: clamp(24px, 4vw, 48px);
  }

  .s24-kategoria__tytul {
    max-width: 18ch;
    margin: 0;
    font-size: var(--wp--preset--font-size--4-xl);
    letter-spacing: -0.03em;
    line-height: 1.04;
  }

  .s24-kategoria--obrazowa .s24-kategoria__tytul {
    width: fit-content;
    padding: 6px 10px;
    background: var(--s24-ink);
    color: var(--s24-base);
  }

  .s24-kategoria--typograficzna .s24-kategoria__tytul {
    padding-block: 8px 2px;
  }

  .s24-kategoria-opis {
    max-width: 78ch;
    margin-top: 14px;
    color: var(--s24-ink-soft);
    font-size: 1rem;
    line-height: 1.6;
  }

  .s24-kategoria-opis :where(p, ul, ol) {
    margin-block: 0 10px;
  }

  .s24-kategoria-opis :where(p, ul, ol):last-child {
    margin-bottom: 0;
  }

  .s24-kategoria-opis--zwijany {
    display: grid;
  }

  .s24-kategoria-opis--zwijany > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 2px;
    color: var(--s24-red-700);
    font-weight: 600;
    cursor: pointer;
    grid-row: 2;
    justify-self: start;
    list-style: none;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .s24-kategoria-opis--zwijany > summary::-webkit-details-marker {
    display: none;
  }

  .s24-kategoria-opis--zwijany > .s24-kategoria-opis__tresc {
    grid-row: 1;
  }

  /* Nowy Chromium chowa zamkniete details przez `::details-content`, nawet
     gdy samo dziecko ma author-level display. Pokazujemy kontener, a dwie
     linie nadal ogranicza clamp ponizej; stan open usuwa ten clamp. */
  .s24-kategoria-opis--zwijany:not([open])::details-content {
    content-visibility: visible;
  }

  .s24-kategoria-opis--zwijany:not([open]) > .s24-kategoria-opis__tresc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .s24-kategoria-opis__zwin,
  .s24-kategoria-opis--zwijany[open] .s24-kategoria-opis__rozwin {
    display: none;
  }

  .s24-kategoria-opis--zwijany[open] .s24-kategoria-opis__zwin {
    display: inline;
  }

  .s24-kategoria-chips {
    max-width: 100%;
    overflow-x: auto;
    margin-top: 14px;
    padding-bottom: 6px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .s24-kategoria-chips ul {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
  }

  .s24-kategoria-chips a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid var(--s24-line-strong);
    border-radius: var(--s24-radius-s);
    background: var(--s24-surface);
    color: var(--s24-ink);
    font-size: 0.90625rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
  }

  .s24-kategoria-chips a:hover,
  .s24-kategoria-chips a[aria-current="page"] {
    border-color: var(--s24-ink);
    background: var(--s24-paper-deep);
  }

  .s24-kategoria-chip__liczba {
    color: var(--s24-muted);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .s24-kategoria-narzedzia {
    gap: 10px 24px;
  }

  .s24-kategoria-narzedzia .wc-block-product-results-count,
  .s24-kategoria-narzedzia .woocommerce-result-count {
    margin: 0;
    color: var(--s24-ink-soft);
    font-size: 0.90625rem;
  }

  @media (max-width: 781px) {
    .s24-kategoria {
      margin-top: 12px;
    }

    .s24-kategoria__hero {
      height: 160px;
    }

    .s24-kategoria__hero-tresc {
      padding: 20px;
    }

    .s24-kategoria__tytul {
      font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .s24-kategoria-narzedzia {
      flex-wrap: nowrap;
    }

    .s24-kategoria-narzedzia .wc-block-product-results-count,
    .s24-kategoria-narzedzia .woocommerce-result-count {
      flex: 1 1 auto;
    }

    .s24-kategoria-narzedzia .wc-block-catalog-sorting,
    .s24-kategoria-narzedzia .woocommerce-ordering {
      flex: 0 1 auto;
      min-width: 0;
    }

    .s24-kategoria-narzedzia select {
      max-width: 154px;
    }
  }

  /* Nadpisujemy fokus linku core'a przez id, aby wyzsza specyficznosc wystarczyla bez !important. */
  #wp-skip-link:focus {
    z-index: 100001;
    padding: 12px 16px;
    border-radius: var(--s24-radius-s);
    background: var(--s24-ink);
    color: var(--s24-base);
    font-weight: 600;
    text-decoration: underline;
  }

  /* Pasek informacyjny jest ciemny, bo duza czerwona powierzchnia konkurowalaby z CTA. */
  .s24-pasek {
    background: var(--s24-ink);
    color: var(--s24-base);
    font-size: 0.8125rem;
  }

  .s24-pasek a {
    color: var(--s24-base);
    text-decoration: underline;
  }

  .s24-pasek__wewnatrz {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: min(1200px, calc(100% - 32px));
    min-height: 36px;
    margin-inline: auto;
    align-items: center;
  }

  .s24-sticky-sentinel {
    display: block;
    height: 1px;
    margin-bottom: -1px;
  }

  .s24-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    border-bottom: 1px solid var(--s24-line);
    background: var(--s24-surface);
    transition: box-shadow var(--s24-motion-base) var(--s24-motion-easing);
  }

  .s24-header--przyklejony {
    box-shadow: 0 12px 18px -18px rgb(20 20 20 / 45%);
  }

  .s24-header-glowny {
    padding-block: 16px 14px;
  }

  .s24-header-rzad {
    gap: 24px;
  }

  .s24-logo {
    flex: 0 0 205px;
    margin: 0;
    line-height: 0;
  }

  .s24-logo a {
    display: block;
    color: var(--s24-ink);
  }

  /* Cel dotykowy 44 px przy niskim logo na telefonie i tablecie. */
  @media (max-width: 1024px) {
    .s24-logo a {
      display: flex;
      align-items: center;
      min-height: 44px;
    }
  }

  .s24-logo__svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Nagłówek kasy: to samo logo co w sklepie, bez menu i wyszukiwarki. */
  .s24-kasa-naglowek .s24-logo {
    flex: 0 0 auto;
    width: 205px;
    max-width: 60%;
    margin: 0;
  }

  .s24-szukaj .wp-block-search__inside-wrapper {
    overflow: hidden;
    border: 1.5px solid var(--s24-muted);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
  }

  .s24-szukaj .wp-block-search__input {
    min-height: 46px;
    padding: 12px 14px;
    border: 0;
    background: var(--s24-surface);
    color: var(--s24-ink);
    font-size: 0.9375rem;
  }

  /* Fokus pola wyszukiwania uzywa atramentu, aby obrys kontrolki mial kontrast ponad 3:1. */
  .s24-szukaj .wp-block-search__input:focus {
    outline: 2px solid var(--s24-ink);
    outline-offset: -2px;
  }

  /* Wyszukiwanie jest akcja, dlatego przycisk korzysta z czerwieni 600 i 700 na hover. */
  .s24-szukaj .wp-block-search__button {
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: var(--s24-red-600);
    color: var(--s24-base);
    font-weight: 600;
    transition: background-color var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-szukaj .wp-block-search__button:hover {
    background: var(--s24-red-700);
  }

  .s24-nawigacja {
    position: relative;
  }

  .s24-menu {
    border-top: 1px solid var(--s24-line);
  }

  .s24-nav-desktop,
  .s24-mega-lista,
  .s24-nav-podlista,
  .s24-menu-mobile ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .s24-nav-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 24px;
  }

  .s24-nav-desktop > li {
    display: flex;
    align-items: stretch;
  }

  .s24-nav-glowny {
    display: flex;
    align-items: stretch;
  }

  .s24-nav-link,
  .s24-nav-toggle {
    min-height: 46px;
    border: 0;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    color: var(--s24-ink);
  }

  .s24-nav-link {
    display: inline-flex;
    align-items: center;
    padding-block: 11px;
    font-size: 0.90625rem;
    text-decoration: none;
  }

  .s24-nav-toggle {
    display: inline-grid;
    width: 34px;
    padding: 0;
    place-items: center;
    cursor: pointer;
  }

  .s24-nav-toggle svg {
    transition: transform var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-nav-dzial.is-open .s24-nav-toggle svg,
  .s24-nav-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .s24-nav-dzial.current-menu-ancestor .s24-nav-link,
  .s24-nav-link[aria-current="page"] {
    border-bottom-color: var(--s24-red-600);
    font-weight: 600;
  }

  .s24-mega-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    visibility: hidden;
    grid-template-columns: 3fr 2fr;
    min-height: 228px;
    border: 1px solid var(--s24-line);
    border-top-color: var(--s24-line-strong);
    background: var(--s24-surface);
    box-shadow: 0 16px 18px -18px rgb(20 20 20 / 40%);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--s24-motion-base) var(--s24-motion-easing),
      visibility 0s linear var(--s24-motion-base);
  }

  .s24-nawigacja:not(.s24-nav-js) .s24-nav-dzial:hover .s24-mega-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 120ms, 120ms;
  }

  .s24-nawigacja:not(.s24-nav-js) .s24-nav-dzial:focus-within .s24-mega-panel,
  .s24-nav-dzial.is-open .s24-mega-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .s24-mega-linki {
    padding: 24px 28px 28px;
  }

  .s24-mega-wszystkie {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--s24-ink);
    font-weight: 700;
  }

  .s24-mega-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 22px;
  }

  .s24-nav-podkategoria > a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: var(--s24-radius-s);
    color: var(--s24-ink);
    font-size: 0.875rem;
    line-height: 1.35;
    text-decoration: none;
  }

  .s24-nav-podkategoria > a:hover {
    background: var(--s24-paper);
  }

  .s24-nav-licznik {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--s24-muted);
    font-size: 0.8125rem;
  }

  .s24-nav-podlista {
    margin: 0 0 4px 12px;
    padding-left: 8px;
    border-left: 1px solid var(--s24-line);
  }

  .s24-mega-wizualny {
    border-left: 1px solid var(--s24-line);
    background: var(--s24-surface);
  }

  .s24-nav-dzial--waski .s24-mega-panel {
    right: auto;
    width: min(720px, 100%);
    grid-template-columns: 3fr 2fr;
  }

  .s24-nav-dzial--waski .s24-mega-lista {
    grid-template-columns: 1fr;
  }

  .s24-menu-mobile {
    display: none;
  }

  .s24-menu .wp-block-navigation-item__content {
    padding-block: 13px;
    border-bottom: 2.5px solid transparent;
  }

  /* Aktywna galaz jest stanem nawigacji, wiec sygnalizuje ja czerwien akcji. */
  .s24-menu .current-menu-item > .wp-block-navigation-item__content,
  .s24-menu .current-menu-ancestor > .wp-block-navigation-item__content {
    border-bottom-color: var(--s24-red-600);
    font-weight: 600;
  }

  .s24-menu .wp-block-navigation__submenu-container {
    min-width: 260px;
    padding: 6px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-s);
    background: var(--s24-surface);
    box-shadow: var(--s24-shadow-raise);
  }

  .s24-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 9px 12px;
    border-bottom: 0;
    border-radius: var(--s24-radius-s);
  }

  .s24-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--s24-paper);
    text-decoration: none;
  }

  /* Koszyk uruchamia glowna akcje zakupowa, dlatego dostaje czerwien 600. */
  .s24-koszyk a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--s24-radius-m);
    background: var(--s24-red-600);
    color: var(--s24-base);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-koszyk a:hover {
    background: var(--s24-red-700);
    color: var(--s24-base);
    text-decoration: none;
  }

  .s24-koszyk .wc-block-mini-cart__badge {
    font-variant-numeric: tabular-nums;
  }

  .s24-koszyk .wc-block-mini-cart__button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 11px;
    border: 0;
    border-radius: var(--s24-radius-m);
    background: var(--s24-red-600);
    color: var(--s24-base);
  }

  .s24-mini-koszyk__panel {
    align-items: stretch;
    flex: 1;
    gap: 10px;
    padding: 32px 24px;
  }

  .s24-mini-koszyk__komunikat {
    margin: 0;
    color: var(--s24-ink);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    line-height: 1.2;
  }

  .s24-mini-koszyk__opis {
    margin: 0;
    color: var(--s24-muted);
  }

  .s24-mini-koszyk__akcje {
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
  }

  .s24-mini-koszyk__akcje .wp-block-button,
  .s24-mini-koszyk__akcje .wp-block-button__link {
    width: 100%;
  }

  .s24-mini-koszyk__akcje .wp-block-button__link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tekst czerwony na jasnym tle bierze --s24-red-700 (6,90:1), nie
     --s24-red-600 (4,36:1 na papierze — ponizej progu 4,5:1). Red-600 jest
     od przyciskow z BIALYM napisem, gdzie liczy sie kontrast tla. Obrys moze
     zostac w red-600: to element nietekstowy, prog 3:1. */
  .s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link {
    border-color: var(--s24-red-600);
    background: transparent;
    color: var(--s24-red-700);
  }

  .s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link:hover {
    border-color: var(--s24-red-700);
    background: var(--s24-paper);
    color: var(--s24-red-700);
  }

  .s24-mini-koszyk__pusty {
    align-items: center;
    min-height: 100%;
    padding: 32px 24px;
    text-align: center;
  }

  .s24-mini-koszyk__pusty h2,
  .s24-mini-koszyk__pusty p {
    margin: 0;
  }

  .wc-block-product-template .wc-block-product,
  .s24-karta {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-s);
    background: var(--s24-surface);
  }

  .wc-block-product-template .wc-block-product > * {
    padding-inline: 17px;
  }

  .wc-block-product-template .wc-block-product .wc-block-components-product-image {
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid var(--s24-line);
    background: var(--s24-surface);
  }

  .wc-block-product-template .wc-block-product .wc-block-components-product-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--s24-surface);
  }

  .wc-block-product-template .wc-block-product:last-child {
    padding-bottom: 17px;
  }

  .wc-block-product-template .wc-block-components-product-title {
    font-size: 0.96875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .wc-block-product-template .wc-block-components-product-title a {
    color: var(--s24-ink);
  }

  .s24-badge-obnizka,
  .wc-block-components-product-sale-badge {
    padding: 4px 9px;
    border-radius: var(--s24-radius-s);
    background: var(--s24-red-600);
    color: var(--s24-base);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .s24-produkt-cena .price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .s24-produkt-cena del {
    color: var(--s24-muted);
    font-size: 1.125rem;
  }

  .s24-produkt-cena ins {
    color: var(--s24-sale);
    text-decoration: none;
  }

  .smartech24-omnibus {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 0;
    padding: 11px 13px;
    border-left: 3px solid var(--s24-sale);
    border-radius: 0 var(--s24-radius-m) var(--s24-radius-m) 0;
    background: var(--s24-sale-soft);
    color: var(--s24-ink-soft);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
  }

  .s24-rozmiary .variations {
    display: block;
    margin: 0;
    border: 0;
  }

  .s24-rozmiary .variations tbody,
  .s24-rozmiary .variations tr,
  .s24-rozmiary .variations th,
  .s24-rozmiary .variations td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .s24-rozmiary .variations .label {
    margin-bottom: 10px;
  }

  .s24-rozmiary .variations .label label {
    font-size: 1.03125rem;
    font-weight: 600;
  }

  .s24-rozmiary .s24-pastylki {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .s24-rozmiary .s24-pastylka {
    display: flex;
    box-sizing: border-box;
    align-items: baseline;
    gap: 6px;
    min-height: 44px;
    padding: 8px 10px;
    border: 2px solid var(--s24-muted);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
    color: var(--s24-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--s24-motion-fast) var(--s24-motion-easing), background-color var(--s24-motion-fast) var(--s24-motion-easing);
  }

  /* Pastylka jest interaktywna, wiec hover i wybor sygnalizuje czerwien akcji. */
  .s24-rozmiary .s24-pastylka:hover {
    border-color: var(--s24-red-600);
  }

  /* Stan radia ma jednoczesnie gruba ramke i inne tlo; nie polega na kolorze. */
  .s24-rozmiary .s24-pastylka[aria-checked="true"] {
    border-color: var(--s24-red-600);
    background: var(--s24-paper-deep);
  }

  .s24-rozmiary .s24-pastylka:disabled,
  .s24-rozmiary .s24-pastylka--niedostepna {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .s24-rozmiary .s24-pastylka-etykieta {
    font-size: 0.90625rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }

  .s24-rozmiary .s24-pastylka-cena {
    color: var(--s24-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Skala 5.3 jest progresywnym ulepszeniem prawdziwego selecta Woo.
     Staly viewBox i wspolny transform sylwetki/prostokata zachowuja geometrie
     slotu oraz relacje 1 cm : 1 cm podczas zmiany wariantu. */
  .s24-rozmiary .s24-skala {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(128px, 0.65fr);
    align-items: center;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-paper);
    color: var(--s24-ink-soft);
  }

  .s24-rozmiary .s24-skala[hidden] {
    display: none;
  }

  .s24-rozmiary .s24-skala--laduje {
    visibility: hidden;
  }

  .s24-rozmiary .s24-skala [data-s24-skala-scena] {
    transition: transform var(--s24-motion-fast) var(--s24-motion-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    .s24-rozmiary .s24-skala [data-s24-skala-scena] {
      transition: none;
    }
  }

  .s24-rozmiary .s24-skala__grafika {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .s24-rozmiary .s24-skala__grafika image {
    opacity: 0.68;
  }

  .s24-rozmiary .s24-skala__produkt {
    fill: var(--s24-paper-deep);
    stroke: var(--s24-ink);
    stroke-width: 1.5px;
  }

  .s24-rozmiary .s24-skala__podpis {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .s24-rozmiary .s24-skala__podpis strong {
    color: var(--s24-ink);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 480px) {
    .s24-rozmiary .s24-skala {
      grid-template-columns: 1fr;
    }
  }

  /* Oryginalny select zostaje w DOM i znika dopiero po zbudowaniu pastylek
     przez JS. Regula ukrywajaca go NIE moze stac w tej warstwie — przegrywa
     z nielayerowanym arkuszem WooCommerce. Siedzi w mostku na koncu pliku,
     w sekcji „Karta produktu (Kamien 5.1)”. */

  .s24-dostawa-info {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-paper);
    color: var(--s24-ink-soft);
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .s24-dostawa-info strong {
    display: block;
    margin-bottom: 3px;
    color: var(--s24-ink);
    font-size: 0.9375rem;
  }

  /* display:flex wyzej bije domyslne [hidden], dlatego ta regula jest funkcjonalna. */
  .s24-dostawa-info[hidden] { display: none; }

  .s24-dostawa-info--paczkomat {
    border-color: var(--s24-success);
    background: var(--s24-success-bg);
  }

  .s24-dostawa-info--paczkomat > svg,
  .s24-dostawa-info--paczkomat strong {
    color: var(--s24-success);
  }

  .s24-dostawa-info--kurier {
    border-color: var(--s24-info);
    background: var(--s24-info-bg);
  }

  .s24-dostawa-info--kurier > svg,
  .s24-dostawa-info--kurier strong {
    color: var(--s24-info);
  }

  /* D3: jedna tresc z post_content, rozlozona po jej prawdziwych naglowkach. */
  .s24-opis {
    display: grid;
    gap: 0;
    color: var(--s24-ink-soft);
  }

  .s24-opis__wprowadzenie,
  .s24-opis__tresc-bez-naglowka,
  .s24-opis__sekcja--glowna,
  .s24-specyfikacja,
  .s24-faq {
    margin-bottom: clamp(28px, 4vw, 48px);
  }

  .s24-opis :where(p, ul, ol) {
    max-width: 76ch;
    line-height: 1.7;
  }

  .s24-opis :where(p, ul, ol):last-child {
    margin-bottom: 0;
  }

  .s24-opis__sekcja--glowna > :where(h2, h3, h4, h5, h6),
  .s24-specyfikacja > :where(h2, h3, h4, h5, h6),
  .s24-faq > :where(h2, h3, h4, h5, h6) {
    margin: 0 0 18px;
    color: var(--s24-ink);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
  }

  .s24-specyfikacja {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
    gap: 24px clamp(28px, 5vw, 72px);
    padding-block: clamp(24px, 4vw, 40px);
    border-block: 1px solid var(--s24-line-strong);
  }

  .s24-specyfikacja > :where(h2, h3, h4, h5, h6) {
    margin: 0;
  }

  .s24-specyfikacja__tresc > :first-child,
  .s24-akordeon__tresc > :first-child {
    margin-top: 0;
  }

  .s24-specyfikacja__tresc > :last-child,
  .s24-akordeon__tresc > :last-child {
    margin-bottom: 0;
  }

  .s24-akordeon,
  .s24-faq > details {
    border-top: 1px solid var(--s24-line-strong);
  }

  .s24-akordeon:last-child,
  .s24-faq__lista,
  .s24-faq > details:last-child {
    border-bottom: 1px solid var(--s24-line-strong);
  }

  .s24-faq__lista .s24-akordeon:last-child {
    border-bottom: 0;
  }

  .s24-akordeon > summary,
  .s24-faq > details > summary {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 56px;
    padding: 14px 2px;
    color: var(--s24-ink);
    cursor: pointer;
    list-style: none;
  }

  .s24-akordeon > summary::-webkit-details-marker,
  .s24-faq > details > summary::-webkit-details-marker {
    display: none;
  }

  .s24-akordeon > summary :where(h2, h3, h4, h5, h6),
  .s24-akordeon > summary > span:first-child {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  .s24-faq > details > summary {
    position: relative;
    padding-right: 28px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  .s24-akordeon__znak {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }

  .s24-akordeon__znak::before,
  .s24-akordeon__znak::after {
    position: absolute;
    top: 9px;
    left: 3px;
    width: 14px;
    height: 2px;
    background: currentcolor;
    content: "";
    transition: transform var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-akordeon__znak::after {
    transform: rotate(90deg);
  }

  .s24-akordeon[open] > summary .s24-akordeon__znak::after {
    transform: rotate(0deg);
  }

  .s24-faq > details > summary::before,
  .s24-faq > details > summary::after {
    position: absolute;
    top: calc(50% - 1px);
    right: 5px;
    width: 14px;
    height: 2px;
    background: currentcolor;
    content: "";
    transition: transform var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-faq > details > summary::after {
    transform: rotate(90deg);
  }

  .s24-faq > details[open] > summary::after {
    transform: rotate(0deg);
  }

  .s24-akordeon__tresc,
  .s24-faq > details > p {
    padding: 0 44px 22px 2px;
  }

  .s24-faq > details > p {
    margin: 0;
  }

  .s24-akordeon > summary:focus-visible,
  .s24-faq > details > summary:focus-visible {
    outline: 2px solid var(--s24-red-700);
    outline-offset: 3px;
  }

  @media (max-width: 600px) {
    .s24-specyfikacja {
      grid-template-columns: minmax(0, 1fr);
    }

    .s24-akordeon__tresc,
    .s24-faq > details > p {
      padding-right: 2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .s24-akordeon__znak::before,
    .s24-akordeon__znak::after,
    .s24-faq > details > summary::before,
    .s24-faq > details > summary::after {
      transition: none;
    }
  }

  /* Produkt prosty ma kontrolki bezposrednio w form.cart. Produkt
     wariacyjny dostaje ten sam elastyczny wiersz dopiero w prawdziwym
     kontenerze Woo `.woocommerce-variation-add-to-cart`. */
  .s24-produkt form.cart:not(.variations_form),
  .s24-produkt form.variations_form .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .s24-produkt form.cart .quantity {
    flex-shrink: 0;
  }

  .s24-produkt form.cart .quantity input {
    box-sizing: border-box;
    width: 76px;
    min-width: 44px;
    height: 56px;
    border: 1.5px solid var(--s24-muted);
    border-radius: var(--s24-radius-m);
    color: var(--s24-ink);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .s24-produkt form.cart button.single_add_to_cart_button {
    flex: 999 1 220px;
    box-sizing: border-box;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    border-radius: var(--s24-radius-m);
    background: var(--s24-red-600);
    color: var(--s24-base);
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .s24-produkt form.cart button.single_add_to_cart_button:hover:not(:disabled) {
    background: var(--s24-red-700);
  }

  .wc-block-catalog-sorting select,
  .woocommerce-ordering select {
    min-height: 44px;
    padding: 9px 36px 9px 12px;
    border: 1.5px solid var(--s24-muted);
    border-radius: var(--s24-radius-m);
    background-color: var(--s24-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--s24-ink);
    font: inherit;
    font-size: 0.90625rem;
    appearance: none;
  }

  /* Fokus pola sortowania uzywa atramentu, czyli obrysu o wysokim kontrascie. */
  .wc-block-catalog-sorting select:focus-visible,
  .woocommerce-ordering select:focus-visible {
    outline: 2px solid var(--s24-ink);
    outline-offset: 1px;
  }

  .cmplz-body .cmplz-links li:empty,
  #cmplz-cookiebanner-container .cmplz-links li:empty {
    display: none;
  }

  /* Baner zgod Complianz: wyjecie z przeplywu, ZANIM przyjdzie jego wlasny CSS.
   *
   * Zmierzona usterka (16.10, profil mobile-4g, na zimno): `complianz.min.js`
   * konczy sie w 5 426 ms i wstrzykuje znaczniki banera, a jego arkusz
   * `banner-optin.css` — ktory nadaje `.cmplz-cookiebanner` `position: fixed`
   * i ukrywa `.cmplz-dismissed` — dojezdza dopiero w 6 070 ms. W tym okienku
   * baner stoi w zwyklym przeplywie i ma 2 546 px wysokosci: dokument rosnie
   * 7 932 -> 10 520 px i wraca, co daje DWA przesuniecia po 1,0, czyli
   * calosc CLS-u 2,0026 przy 1440 px.
   *
   * Przy 390 px tego nie bylo — i to NIE jest rożnica ukladu, tylko wyscig:
   * strona mobilna wazy mniej, wiec arkusz wyprzedza wstrzykniecie. Pomiar
   * izolacyjny to rozstrzyga: po zablokowaniu samego `banner-optin.css`
   * CLS przy 390 px skacze z 0,0031 na 1,0004, a baner ma 390x1166 px
   * w przeplywie. Przy 1440 px zablokowanie `complianz.min.js` zbija CLS
   * z 2,0026 na 0,0026.
   *
   * Te dwie deklaracje sa dokladnie tym, co Complianz ustawia sam — tylko
   * docieraja ze `style.css`, czyli w 2 265 ms, ponad trzy sekundy przed
   * wstrzyknieciem banera. Siedza w warstwie `@layer komponenty`, a arkusz
   * wtyczki jest bez warstwy, wiec gdy przyjdzie, bije te reguly
   * bezwarunkowo: nie zmieniamy wygladu banera, tylko zabieramy mu
   * mozliwosc przesuniecia strony w oczekiwaniu na wlasny styl. */
  .cmplz-cookiebanner {
    position: fixed;
  }

  .cmplz-cookiebanner.cmplz-dismissed,
  #cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed {
    display: none;
  }

  .s24-filtry .wp-block-group {
    padding-top: 18px;
    border-top: 1px solid var(--s24-line);
  }

  .s24-filtry .wc-block-components-checkbox__label {
    font-size: 0.90625rem;
  }

  /* Checkbox jest kontrolka wyboru, dlatego jego stan aktywny uzywa czerwieni 600. */
  .s24-filtry input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--s24-red-600);
  }

  .s24-footer {
    border-top: 1px solid var(--s24-red-500);
    background: var(--s24-ink);
    color: var(--s24-base);
  }

  .s24-footer a {
    color: var(--s24-base);
  }

  .s24-footer a:hover {
    color: var(--s24-base);
  }

  .s24-footer .wp-block-heading {
    color: var(--s24-base);
  }

  .s24-footer__marka {
    margin: 0 0 16px;
    font-size: 1.375rem;
    letter-spacing: -0.02em;
  }

  .s24-footer__naglowek {
    margin: 0 0 16px;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .s24-footer__firma,
  .s24-footer__lista {
    font-size: 0.90625rem;
    line-height: 1.65;
  }

  .s24-footer__kontakt {
    background: var(--s24-ink);
    color: #C9CACE;
  }

  .s24-footer__lista {
    display: grid;
    gap: 8px;
    padding-left: 0;
    list-style: none;
  }

  .s24-footer__dol {
    margin-top: 32px;
    padding-block: 20px;
    border-top: 1px solid #48494E;
    background: var(--s24-ink);
    color: #C9CACE;
    font-size: 0.84375rem;
  }

  .s24-footer__dol p {
    margin: 0;
  }

  @media (max-width: 781px) {
    .s24-pasek__wewnatrz {
      justify-content: center;
    }

    .s24-pasek__produkcja {
      display: none;
    }

    .s24-header-glowny {
      padding: 12px 16px 10px;
    }

    .s24-header-rzad {
      gap: 10px 12px;
    }

    .s24-logo {
      flex: 1 1 120px;
      max-width: 150px;
    }

    .s24-koszyk .wp-block-woocommerce-customer-account {
      display: none;
    }

    .s24-koszyk a {
      min-width: 44px;
      min-height: 44px;
      padding: 8px 11px;
    }

    .s24-menu {
      height: 0;
      border: 0;
    }

    .s24-nav-desktop {
      display: none;
    }

    .s24-nawigacja {
      position: static;
    }

    .s24-menu-mobile {
      display: block;
    }

    .s24-menu-mobile > summary {
      position: absolute;
      top: 12px;
      left: var(--wp--style--root--padding-left, 16px);
      z-index: 30;
      display: grid;
      width: 44px;
      height: 44px;
      border-radius: var(--s24-radius-m);
      cursor: pointer;
      list-style: none;
      place-items: center;
    }

    .s24-menu-mobile > summary::-webkit-details-marker,
    .s24-menu-mobile-dzial > summary::-webkit-details-marker {
      display: none;
    }

    .s24-hamburger,
    .s24-hamburger::before,
    .s24-hamburger::after {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--s24-ink);
      content: "";
    }

    .s24-hamburger::before { transform: translateY(-7px); }
    .s24-hamburger::after { transform: translateY(5px); }

    .s24-menu-mobile[open] > summary {
      position: fixed;
      z-index: 100003;
      top: 14px;
      right: 16px;
      left: auto;
      background: var(--s24-paper);
    }

    .s24-menu-mobile[open] .s24-hamburger {
      background: transparent;
    }

    .s24-menu-mobile[open] .s24-hamburger::before { transform: translateY(1px) rotate(45deg); }
    .s24-menu-mobile[open] .s24-hamburger::after { transform: translateY(-1px) rotate(-45deg); }

    .s24-menu-mobile-panel {
      position: fixed;
      z-index: 100002;
      inset: 0;
      overflow-y: auto;
      padding: 22px 20px 40px;
      background: var(--s24-surface);
    }

    .s24-menu-mobile-panel nav {
      max-width: 620px;
      margin-inline: auto;
    }

    .s24-menu-mobile-tytul {
      margin: 0 64px 24px 0;
      font-size: 1.5rem;
      font-weight: 700;
    }

    .s24-menu-mobile-dzial {
      border-top: 1px solid var(--s24-line);
    }

    .s24-menu-mobile-dzial > summary {
      min-height: 52px;
      padding: 15px 32px 15px 0;
      font-weight: 700;
      cursor: pointer;
    }

    .s24-menu-mobile-dzial > ul {
      padding-bottom: 12px;
    }

    .s24-menu-mobile .s24-nav-podkategoria > a,
    .s24-menu-mobile-dzial > ul > li > a,
    .s24-menu-mobile-stale a {
      min-height: 44px;
      padding: 11px 8px;
    }

    .s24-menu-mobile .s24-menu-mobile-stale {
      padding-top: 12px;
      border-top: 1px solid var(--s24-line);
    }

    .s24-menu-mobile-stale a,
    .s24-menu-mobile-dzial > ul > li > a {
      display: block;
      color: var(--s24-ink);
      font-weight: 600;
      text-decoration: none;
    }

    body.s24-menu-mobile-otwarte {
      overflow: hidden;
    }

    .s24-produkt-cena .price {
      font-size: 1.75rem;
    }

    /* Filtry musza zostac pod siatka, aby pierwszy produkt byl widoczny na telefonie. */
    .s24-filtry { order: 2; }

    .s24-filtry .wp-block-woocommerce-attribute-filter,
    .s24-filtry .wc-block-attribute-filter {
      max-height: 264px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .s24-header .s24-szukaj {
      flex: 1 1 100%;
      order: 3;
    }

    .s24-koszyk {
      order: 2;
    }
  }
}

/* Strona główna: osiem sekcji o odmiennym rytmie (S6 czeka na zdjęcie). */
@layer komponenty {
  .s24-home-sekcja {
    margin-block: clamp(72px, 8vw, 112px);
  }

  .s24-home-eyebrow {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }

  .s24-home-naglowek {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px 56px;
    margin-bottom: clamp(28px, 4vw, 48px);
  }

  .s24-home-naglowek h2,
  .s24-home-dostawa__intro h2 {
    margin: 0;
    font-size: var(--wp--preset--font-size--3-xl);
  }

  .s24-home-naglowek > p {
    max-width: 43ch;
    margin: 0 0 4px;
    color: var(--s24-muted);
  }

  /* Wprowadzenie do katalogu jest pionowe; asymetryczna siatka dzialow
     zaczyna sie dopiero pod opisem. Polecane zachowuja naglowek w rzedzie. */
  .s24-home-dzialy .s24-home-naglowek {
    display: block;
  }

  .s24-home-dzialy .s24-home-naglowek > p {
    margin-top: 14px;
  }

  .s24-home-przycisk {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 22px;
    border: 1.5px solid var(--s24-red-600);
    border-radius: var(--s24-radius-m);
    background: var(--s24-red-600);
    color: var(--s24-base);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--s24-motion-fast) var(--s24-motion-easing), border-color var(--s24-motion-fast) var(--s24-motion-easing);
  }

  .s24-home-przycisk:hover {
    border-color: var(--s24-red-700);
    background: var(--s24-red-700);
    color: var(--s24-base);
    text-decoration: none;
  }

  /* S1 — fotografia pozostaje elementem LCP i ma wymiary w HTML. */
  .s24-home-hero {
    position: relative;
    overflow: hidden;
    height: min(78vh, 760px);
    min-height: 570px;
    padding-inline: clamp(24px, 5vw, 96px);
    background: var(--s24-ink);
    color: var(--s24-base);
  }

  .s24-home-hero__obraz,
  .s24-home-hero__obraz img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .s24-home-hero__obraz img {
    object-fit: cover;
    /* Tryptyk lezy w gornej czesci kadru zrodlowego. Srodek fotografii
       ucinal gorne ramy na szerokich ekranach. */
    object-position: center 18%;
  }

  .s24-home-hero__podklad {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: min(800px, 72vw);
    background: rgb(20 20 20 / 94%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 96px) 100%, 0 100%);
  }

  .s24-home-hero__tresc {
    position: relative;
    z-index: 2;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    width: min(560px, 48vw);
    height: 100%;
    margin-block-start: 0;
    padding-block: 48px;
  }

  .s24-home-hero h1 {
    max-width: 11ch;
    margin: 0;
    color: var(--s24-base);
    font-size: clamp(3rem, 5.7vw, 5.75rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .s24-home-hero .s24-home-hero__lead {
    max-width: 52ch;
    margin: 24px 0 0;
    color: #F0EEE9;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.6;
  }

  .s24-home-hero__akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-top: 30px;
  }

  .s24-home-hero .s24-home-link {
    color: var(--s24-base);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  /* S2 — udział powierzchni wynika z liczby produktów w działach. */
  .s24-home-dzialy__siatka {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
  }

  .s24-home-dzial {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 0;
    background: var(--s24-surface);
    color: var(--s24-ink);
    text-decoration: none;
  }

  .s24-home-dzial--glowny {
    grid-row: 1 / 3;
  }

  .s24-home-dzial__media {
    display: block;
    overflow: hidden;
    min-height: 0;
  }

  .s24-home-dzial__media img {
    display: block;
    width: 100%;
    height: auto;
  }

  .s24-home-dzial__tresc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 3vw, 38px);
  }

  .s24-home-dzial__nazwa {
    font-size: clamp(1.65rem, 2.5vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
  }

  .s24-home-dzial:hover .s24-home-dzial__nazwa {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  .s24-home-dzial__licznik {
    margin-top: 12px;
    color: var(--s24-red-700);
    font-size: 0.90625rem;
    font-weight: 700;
  }

  .s24-home-dzial__opis {
    margin-top: 8px;
    color: var(--s24-muted);
    font-size: 0.90625rem;
    line-height: 1.5;
  }

  /* S3 — natywna karuzela Woo pokazuje 4 karty i fragment kolejnej. */
  .s24-home-polecane .s24-home-wszystkie {
    margin: 0;
    font-weight: 700;
  }

  .s24-home-polecane__akcje {
    gap: 16px;
  }

  .s24-home-polecane .wc-block-product-template .wc-block-product {
    overflow: visible;
    min-width: 22%;
    max-width: none;
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .s24-home-polecane .wc-block-product-template .wc-block-product > * {
    padding-inline: 0;
  }

  .s24-home-polecane .wc-block-product-template .wc-block-components-product-image {
    border-bottom: 0;
  }

  .s24-home-polecane .wc-block-components-product-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.7em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* S4 — brak zdjęcia jest decyzją zasobową, nie pustym slotem. */
  .s24-home-pracownia {
    border-top: 1px solid var(--s24-red-500);
  }

  .s24-home-pracownia__wewnatrz {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding-block: clamp(72px, 9vw, 120px);
  }

  .s24-home-pracownia__tekst {
    max-width: 850px;
  }

  .s24-home-pracownia__tekst h2 {
    max-width: 16ch;
    margin: 0 0 30px;
    font-size: var(--wp--preset--font-size--4-xl);
  }

  .s24-home-pracownia__tekst > p:not(.s24-home-eyebrow) {
    max-width: 67ch;
    margin: 0 0 12px;
    color: var(--s24-ink-soft);
    font-size: 1.0625rem;
  }

  .s24-home-pracownia__liczby {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: clamp(48px, 7vw, 80px) 0 0;
  }

  .s24-home-pracownia__liczby > div {
    padding-top: 18px;
    border-top: 1px solid var(--s24-ink);
  }

  .s24-home-pracownia__liczby dt {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .s24-home-pracownia__liczby dd {
    margin: 8px 0 0;
    color: var(--s24-muted);
    font-size: 0.90625rem;
  }

  /* S5 — jedyna ciemna sekcja strony. */
  .s24-home-personalizacja {
    background: var(--s24-ink);
    color: var(--s24-base);
  }

  .s24-home-personalizacja__wewnatrz {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
    gap: 48px 9vw;
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding-block: clamp(72px, 9vw, 120px);
  }

  .s24-home-personalizacja h2 {
    max-width: 12ch;
    margin: 0 0 24px;
    color: var(--s24-base);
    font-size: var(--wp--preset--font-size--4-xl);
  }

  .s24-home-personalizacja .s24-home-personalizacja__intro > p:last-child {
    max-width: 48ch;
    color: #D6D4CF;
  }

  .s24-home-personalizacja__lista {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .s24-home-personalizacja__lista li {
    display: grid;
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1fr);
    gap: 20px;
    padding-block: 19px;
    border-top: 1px solid #48494E;
  }

  .s24-home-personalizacja__lista li:last-child {
    border-bottom: 1px solid #48494E;
  }

  .s24-home-personalizacja .s24-home-personalizacja__lista span {
    color: #C9CACE;
  }

  .s24-home-personalizacja__akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    grid-column: 1 / -1;
  }

  .s24-home-przycisk--obrys {
    border-color: #C9CACE;
    background: transparent;
  }

  .s24-home-przycisk--obrys:hover {
    border-color: var(--s24-base);
    background: var(--s24-base);
    color: var(--s24-ink);
  }

  /* S7 — jedna tabela zamiast pięciu powtarzalnych kart. */
  .s24-home-dostawa__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: 32px 7vw;
    align-items: end;
    margin-bottom: 38px;
  }

  .s24-home-dostawa__prog {
    padding-left: 20px;
    border-left: 3px solid var(--s24-ink);
  }

  .s24-home-dostawa__prog strong,
  .s24-home-dostawa__prog span {
    display: block;
  }

  .s24-home-dostawa__prog > span {
    margin-top: 3px;
    color: var(--s24-muted);
    font-size: 0.84375rem;
  }

  .s24-home-dostawa__tabela {
    overflow-x: auto;
  }

  .s24-home-dostawa table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: transparent;
  }

  .s24-home-dostawa caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .s24-home-dostawa :where(th, td) {
    padding: 17px 20px;
    border: 0;
    border-bottom: 1px solid var(--s24-line-strong);
    text-align: left;
  }

  .s24-home-dostawa thead th {
    border-top: 1px solid var(--s24-ink);
    border-bottom-color: var(--s24-ink);
    color: var(--s24-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }

  .s24-home-dostawa tbody th {
    font-weight: 600;
  }

  .s24-home-dostawa__dol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 22px;
  }

  .s24-home-dostawa__dol p,
  .s24-home-dostawa__dol a {
    margin: 0;
    font-weight: 600;
  }

  /* S8 — same fakty, bez ikon i pudełek. */
  .s24-home-atuty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block: clamp(72px, 8vw, 112px);
    padding-block: 36px;
    border-block: 1px solid var(--s24-line-strong);
  }

  .s24-home-atut {
    padding-inline: 28px;
  }

  .s24-home-atut:first-child {
    padding-left: 0;
  }

  .s24-home-atut + .s24-home-atut {
    border-left: 1px solid var(--s24-line-strong);
  }

  .s24-home-atut h3 {
    margin: 0 0 10px;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }

  .s24-home-atut p {
    margin: 0;
    color: var(--s24-muted);
    font-size: 0.90625rem;
    line-height: 1.55;
  }

  /* S9 — neutralny formularz, dostawcę zna wyłącznie adapter PHP. */
  .s24-home-newsletter__wewnatrz {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
    gap: 40px 8vw;
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding-block: clamp(56px, 7vw, 88px);
  }

  .s24-home-newsletter h2 {
    margin: 0 0 16px;
    font-size: var(--wp--preset--font-size--3-xl);
  }

  .s24-home-newsletter__tekst > p:last-child {
    max-width: 45ch;
    margin-bottom: 0;
    color: var(--s24-muted);
  }

  .s24-home-newsletter__pole > label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.90625rem;
    font-weight: 700;
  }

  .s24-home-newsletter__pole > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .s24-home-newsletter input[type="email"] {
    min-width: 0;
    min-height: 50px;
    padding: 12px 15px;
    border: 1.5px solid var(--s24-muted);
    border-right: 0;
    border-radius: var(--s24-radius-m) 0 0 var(--s24-radius-m);
    background: var(--s24-surface);
    color: var(--s24-ink);
    font: inherit;
  }

  .s24-home-newsletter button {
    min-height: 50px;
    padding: 12px 22px;
    border: 1.5px solid var(--s24-red-600);
    border-radius: 0 var(--s24-radius-m) var(--s24-radius-m) 0;
    background: var(--s24-red-600);
    color: var(--s24-base);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .s24-home-newsletter button:hover {
    border-color: var(--s24-red-700);
    background: var(--s24-red-700);
  }

  .s24-home-newsletter__zgoda {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 9px;
    margin-top: 13px;
    color: var(--s24-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .s24-home-newsletter__zgoda input {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--s24-red-600);
  }

  .s24-home-newsletter__pulapka {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .s24-home-newsletter__komunikat {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 3px solid;
    font-size: 0.90625rem;
  }

  .s24-home-newsletter__komunikat--sukces {
    border-color: var(--s24-success);
    background: var(--s24-success-bg);
    color: var(--s24-success);
  }

  .s24-home-newsletter__komunikat--blad {
    border-color: var(--s24-error);
    background: var(--s24-error-bg);
    color: var(--s24-error);
  }

  @media (max-width: 960px) {
    .s24-home-dzialy__siatka {
      height: auto;
      min-height: 0;
    }

    .s24-home-personalizacja__wewnatrz,
    .s24-home-newsletter__wewnatrz {
      grid-template-columns: 1fr;
    }

    .s24-home-atuty {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .s24-home-atut:nth-child(3) {
      padding-top: 28px;
      padding-left: 0;
      border-top: 1px solid var(--s24-line-strong);
      border-left: 0;
    }

    .s24-home-atut:nth-child(4) {
      padding-top: 28px;
      border-top: 1px solid var(--s24-line-strong);
    }
  }

  @media (max-width: 781px) {
    .s24-home-sekcja {
      margin-block: 64px;
    }

    .s24-home-naglowek,
    .s24-home-dostawa__intro {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .s24-home-naglowek {
      align-items: start;
      flex-direction: column;
      margin-bottom: 28px;
    }

    .s24-home-hero {
      height: 62vh;
      min-height: 610px;
      padding-inline: 20px;
    }

    .s24-home-hero__obraz img {
      object-position: center 32%;
    }

    .s24-home-hero__podklad {
      width: 100%;
      background: rgb(20 20 20 / 80%);
      clip-path: none;
    }

    .s24-home-hero__tresc {
      justify-content: end;
      width: 100%;
      padding-block: 42px;
    }

    .s24-home-hero h1 {
      max-width: 12ch;
      font-size: clamp(2.7rem, 12vw, 4.25rem);
    }

    .s24-home-dzialy__siatka {
      grid-template-columns: 1fr;
      grid-template-rows: none;
    }

    .s24-home-dzial,
    .s24-home-dzial--glowny {
      grid-row: auto;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      min-height: 0;
    }

    .s24-home-dzial__tresc {
      padding: 22px 20px 26px;
    }

    .s24-home-polecane .is-product-collection-layout-carousel .wc-block-product {
      min-width: 82%;
      scroll-snap-align: start;
    }

    .s24-home-pracownia__wewnatrz,
    .s24-home-personalizacja__wewnatrz,
    .s24-home-newsletter__wewnatrz {
      width: min(100% - 40px, 1200px);
    }

    .s24-home-pracownia__liczby {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .s24-home-pracownia__liczby dt {
      font-size: clamp(1rem, 5.2vw, 1.35rem);
    }

    .s24-home-pracownia__liczby dd {
      font-size: 0.75rem;
    }

    .s24-home-personalizacja__wewnatrz {
      gap: 36px;
    }

    .s24-home-personalizacja__lista li {
      grid-template-columns: minmax(105px, 0.68fr) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }

    .s24-home-dostawa__intro {
      display: grid;
    }

    .s24-home-atuty {
      grid-template-columns: 1fr;
      padding-block: 0;
      border-top: 0;
    }

    .s24-home-atut,
    .s24-home-atut:first-child,
    .s24-home-atut:nth-child(3),
    .s24-home-atut:nth-child(4) {
      padding: 26px 0;
      border-top: 1px solid var(--s24-line-strong);
      border-left: 0;
    }

    .s24-home-newsletter__pole > div {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .s24-home-newsletter input[type="email"],
    .s24-home-newsletter button {
      border: 1.5px solid var(--s24-muted);
      border-radius: var(--s24-radius-m);
    }

    .s24-home-newsletter button {
      border-color: var(--s24-red-600);
    }
  }
}

@layer woo {
  .wc-block-checkout__form .wc-block-components-text-input input,
  .wc-block-components-text-input input.components-text-control__input,
  .wc-block-components-textarea {
    min-height: 46px;
    border: 1.5px solid var(--s24-muted) !important;
    border-radius: var(--s24-radius-m) !important;
    background: var(--s24-surface);
    color: var(--s24-ink);
  }

  .wc-block-components-button:not(.is-link) {
    border-radius: var(--s24-radius-m);
    font-weight: 600;
  }

  .wc-block-components-checkout-place-order-button {
    min-height: 56px;
    font-size: 1.0625rem;
  }

  /* Pole NIP dostaje atramentowy obrys na samym polu: ramka z paddingiem na
     opakowaniu przesuwala input, a plywajaca etykieta Woo zostawala na krawedzi. */
  .wc-block-components-text-input input[id$="smartech24-nip"] {
    border: 2px solid var(--s24-ink) !important;
  }

  .wc-block-components-text-input input[id$="smartech24-nip"][aria-invalid="true"] {
    border-color: var(--s24-error) !important;
    background: var(--s24-error-bg);
  }

  .s24-nip-blad {
    display: block;
    margin: 8px 0 0;
    color: var(--s24-error);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
  }

  /* Wiersz pobrania jest informacja finansowa, wiec uzywa neutralnego papieru i atramentu. */
  .wc-block-components-totals-fees {
    padding: 11px 12px;
    border: 1.5px solid var(--s24-ink);
    border-radius: var(--s24-radius-m);
    background: var(--s24-paper);
  }

  .s24-prog {
    padding: 15px 18px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
  }

  /* Osiagniety prog jest komunikatem sukcesu, dlatego dostaje semantyczne tlo sukcesu. */
  .s24-prog--osiagniety {
    background: var(--s24-success-bg);
  }

  .s24-prog-tor {
    height: 7px;
    overflow: hidden;
    margin-top: 10px;
    border-radius: var(--s24-radius-m);
    background: var(--s24-faint);
  }

  /* Pasek postepu nie jest akcja, wiec przed osiagnieciem progu pozostaje atramentowy. */
  .s24-prog-wypelnienie {
    height: 100%;
    border-radius: var(--s24-radius-m);
    background: var(--s24-ink);
  }

  .s24-prog--osiagniety .s24-prog-wypelnienie {
    background: var(--s24-success);
  }
}

/*
 * Mostek do niewarstwowych stylow globalnych WordPressa. Tylko reguly,
 * ktore swiadomie zmieniaja elementowe domyslne z theme.json, sa poza
 * @layer; reszta komponentow pozostaje warstwowa i nie ingeruje w uklad
 * wewnetrznych blokow WooCommerce.
 */
html body {
  background: var(--s24-paper);
  color: var(--s24-ink);
}

/* Dynamiczny naglowek kategorii trafia pod niewarstwowe style blokow
   WordPressa. Mostek utrzymuje tylko typografie i kolory; geometria zostaje
   w @layer komponenty powyzej. */
.s24-kategoria__tytul {
  max-width: 18ch;
  margin: 0;
  font-size: var(--wp--preset--font-size--4-xl);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.s24-kategoria--obrazowa .s24-kategoria__tytul {
  background: var(--s24-ink);
  color: var(--s24-base);
}

.s24-kategoria-chips a,
.s24-kategoria-chips a:hover,
.s24-kategoria-chips a[aria-current="page"] {
  color: var(--s24-ink);
  text-decoration: none;
}

@media (max-width: 781px) {
  .s24-kategoria__tytul {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }
}

#wp-skip-link:focus,
.s24-pasek a,
.s24-koszyk a,
.s24-koszyk a:hover,
.s24-footer a,
.s24-footer a:hover,
.s24-home-przycisk,
.s24-home-przycisk:hover,
.s24-home-hero .s24-home-link {
  color: var(--s24-base);
}

#wp-skip-link:focus,
.s24-pasek a,
.s24-home-hero .s24-home-link {
  text-decoration: underline;
}

.s24-koszyk a,
.s24-koszyk a:hover,
.s24-home-przycisk,
.s24-home-przycisk:hover,
.s24-home-dzial {
  text-decoration: none;
}

.s24-logo a,
.s24-nav-link,
.s24-mega-wszystkie,
.s24-nav-podkategoria > a,
.wc-block-product-template .wc-block-components-product-title a,
.s24-menu-mobile-stale a,
.s24-menu-mobile-dzial > ul > li > a,
.s24-home-dzial {
  color: var(--s24-ink);
}

.s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link,
.s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link:hover {
  color: var(--s24-red-700);
}

.s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link {
  background: transparent;
}

.s24-mini-koszyk__akcje .is-style-outline .wp-block-button__link:hover {
  background: var(--s24-paper);
}

.s24-szukaj .wp-block-search__button {
  background: var(--s24-red-600);
  color: var(--s24-base);
}

.s24-szukaj .wp-block-search__button:hover {
  background: var(--s24-red-700);
}

/* Karty archiwum: lekki podzial hairline zamiast pudelka. Klasa jest tylko
   w archive-product.html, wiec polecane na stronie glownej zostaja bez zmian. */
.s24-listing-karty .wc-block-product {
  overflow: visible;
  padding-block-end: 16px;
  border: 0;
  border-bottom: 1px solid var(--s24-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.s24-listing-karty .wc-block-product > * {
  padding-inline: 0;
}

.s24-listing-karty .wc-block-product:last-child {
  padding-bottom: 16px;
}

.s24-listing-karty .s24-karta__media {
  position: relative;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: var(--s24-surface);
}

.s24-listing-karty .s24-karta__media > a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--s24-surface);
}

.s24-listing-karty .s24-karta__media > a > img[data-testid="product-image"],
.s24-listing-karty .s24-karta__media > a > .s24-karta__obraz-drugi {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
}

.s24-listing-karty .s24-karta__media > a > img[data-testid="product-image"] {
  opacity: 1;
  transition: opacity var(--s24-motion-base) var(--s24-motion-easing);
}

.s24-listing-karty .s24-karta__obraz-drugi {
  opacity: 0;
  transition: opacity var(--s24-motion-base) var(--s24-motion-easing);
}

@media (hover: hover) and (pointer: fine) {
  .s24-listing-karty .s24-karta__media:hover > a > img[data-testid="product-image"],
  .s24-listing-karty .s24-karta__media:focus-within > a > img[data-testid="product-image"] {
    opacity: 0;
  }

  .s24-listing-karty .s24-karta__media:hover .s24-karta__obraz-drugi,
  .s24-listing-karty .s24-karta__media:focus-within .s24-karta__obraz-drugi {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s24-listing-karty .s24-karta__media img {
    transition: none;
  }
}

.s24-listing-karty .s24-karta__nazwa {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.7em;
  max-height: 2.7em;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.s24-listing-karty .s24-karta__cena {
  margin-top: 8px;
  margin-bottom: 0;
}

.s24-listing-karty .s24-karta__cena .wc-block-components-product-price {
  color: var(--s24-ink-soft);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

/* D4 „Zapisz”: serduszko w prawym gornym rogu slotu obrazu. Jest rodzenstwem
   linku karty, a nie jego dzieckiem, wiec nie tworzy zagniezdzonej kontrolki.
   Tlo z tokenu `surface` daje ikonie wymagany kontrast takze nad ciemnym
   kadrem (obrazy sa `object-fit: contain` na bialym slocie). */
.s24-listing-karty .s24-karta__zapisz {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--s24-radius-s);
  background: var(--s24-surface);
  color: var(--s24-ink-soft);
  cursor: pointer;
  transition: opacity var(--s24-motion-base) var(--s24-motion-easing),
    color var(--s24-motion-base) var(--s24-motion-easing);
}

/* display:flex wyzej bije domyslne [hidden], dlatego ta regula jest funkcjonalna:
   bez JavaScriptu kontrolka nie moze sie pokazac. */
.s24-listing-karty .s24-karta__zapisz[hidden] {
  display: none;
}

.s24-listing-karty .s24-karta__zapisz > svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.s24-listing-karty .s24-karta__zapisz:hover {
  color: var(--s24-red-700);
}

/* Stan zapisany: wypelnione serduszko plus kolor. Sam kolor nie wystarcza. */
.s24-listing-karty .s24-karta__zapisz[aria-pressed="true"] {
  color: var(--s24-red-700);
}

.s24-listing-karty .s24-karta__zapisz[aria-pressed="true"] > svg {
  fill: currentColor;
}

/* Na urzadzeniu precyzyjnym serduszko wchodzi na hover i fokus. Zapisane
   zostaje widoczne zawsze — inaczej nie da sie odczytac stanu bez najazdu.
   Na dotyku (brak tej media query) jest widoczne bez warunkow. */
@media (hover: hover) and (pointer: fine) {
  .s24-listing-karty .s24-karta__zapisz {
    opacity: 0;
  }

  .s24-listing-karty .wc-block-product:hover .s24-karta__zapisz,
  .s24-listing-karty .wc-block-product:focus-within .s24-karta__zapisz,
  .s24-listing-karty .s24-karta__zapisz:focus-visible,
  .s24-listing-karty .s24-karta__zapisz[aria-pressed="true"] {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s24-listing-karty .s24-karta__zapisz {
    transition: none;
  }
}

/* D7 bez JavaScriptu: natywne radio w formularzu GET. */
.s24-d7 {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
}

.s24-listing-uklad {
  align-items: flex-start;
}

.s24-filtry-szuflada__uchwyt,
.s24-filtry-szuflada__zamknij,
.s24-filtry-trigger {
  display: none;
}

.s24-d7__sekcja,
.s24-filtr-dokladny__details,
.s24-filtr-cena__details {
  border: 0;
  border-top: 1px solid var(--s24-line);
}

.s24-d7__sekcja > summary,
.s24-filtr-dokladny__details > summary,
.s24-filtr-cena__details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-block: 10px;
  color: var(--s24-ink);
  font-size: 0.96875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.s24-d7__sekcja > summary::-webkit-details-marker,
.s24-filtr-dokladny__details > summary::-webkit-details-marker,
.s24-filtr-cena__details > summary::-webkit-details-marker {
  display: none;
}

.s24-d7__sekcja > summary::after,
.s24-filtr-dokladny__details > summary::after,
.s24-filtr-cena__details > summary::after {
  content: "+";
  color: var(--s24-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.s24-d7__sekcja[open] > summary::after,
.s24-filtr-dokladny__details[open] > summary::after,
.s24-filtr-cena__details[open] > summary::after {
  content: "−";
}

/* K8.4: token `--s24-focus` nigdy nie istnial — `outline` z nieznana
   zmienna spadal do `none` i naglowki filtrow oraz opcje D7 nie mialy
   pierscienia fokusu. Ten sam kolor co bazowa regula `:focus-visible`. */
.s24-d7__sekcja > summary:focus-visible,
.s24-filtr-dokladny__details > summary:focus-visible,
.s24-filtr-cena__details > summary:focus-visible {
  outline: 2px solid var(--s24-red-700);
  outline-offset: 2px;
}

.s24-d7__sekcja:not([open]) > :not(summary),
.s24-filtr-dokladny__details:not([open]) > :not(summary),
.s24-filtr-cena__details:not([open]) > :not(summary) {
  display: none;
}

.s24-d7__grupa {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.s24-d7__sekcja .s24-d7__grupa {
  padding-bottom: 8px;
}

.s24-d7__grupa legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--s24-ink);
  font-size: 0.96875rem;
  font-weight: 600;
}

.s24-d7__opcja {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  cursor: pointer;
}

.s24-d7__opcja input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--s24-red-600);
}

.s24-d7__opcja:focus-within {
  outline: 2px solid var(--s24-red-700);
  outline-offset: 2px;
}

.s24-d7__akcje {
  display: grid;
  gap: 8px;
}

.s24-d7__akcje button,
.s24-d7__akcje a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--s24-red-600);
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.s24-d7__akcje button {
  background: var(--s24-red-600);
  color: var(--s24-base);
  cursor: pointer;
}

.s24-d7__akcje a {
  background: transparent;
  color: var(--s24-red-700);
}

.s24-filtr-dokladny,
.s24-filtr-cena {
  margin-top: 0;
}

.s24-filtr-dokladny__szukanie {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.s24-filtr-dokladny__szukanie label {
  color: var(--s24-ink-soft);
  font-size: 0.84375rem;
  font-weight: 600;
}

.s24-filtr-dokladny__szukanie input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 44px 8px 10px;
  border: 1px solid var(--s24-line-strong);
  border-radius: var(--s24-radius-s);
  background: var(--s24-surface);
  color: var(--s24-ink);
}

.s24-filtr-dokladny__szukanie button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--s24-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.s24-filtr-dokladny__pusto {
  margin: 0;
  color: var(--s24-muted);
  font-size: 0.84375rem;
}

.s24-filtr-dokladny__details-zawartosc,
.s24-filtr-cena__details-zawartosc {
  padding-bottom: 12px;
}

/*
 * Blok atrybutu Woo dokleja do listy „Wyswietl N opcji wiecej”, zwijajac
 * nadmiar przez atrybut `hidden` na pozycjach. Nasze wyszukiwanie rozmiaru
 * przechodzi po wszystkich pozycjach i samo ustawia `hidden`, wiec kasuje
 * zwiniecie Woo: zmierzone na stagingu, lista pokazuje wszystkie 41 pozycji,
 * a klikniecie przycisku zmienia tylko jego wlasna etykiete (41 widocznych
 * przed i po). To martwa kontrolka. Pelna liste obsluguje pole szukania i
 * przewijany `details`, dlatego przycisk chowamy — `display: none` zabiera
 * go tez z kolejnosci Tab i z drzewa dostepnosci.
 */
.s24-filtr-dokladny li.show-more,
.s24-filtr-dokladny li.show-less {
  display: none;
}

.s24-aktywne-filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.s24-aktywne-filtry__chip {
  margin: 0;
}

.s24-aktywne-filtry__chip button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--s24-line-strong);
  border-radius: 999px;
  background: var(--s24-surface);
  color: var(--s24-ink);
  font-size: 0.84375rem;
  font-weight: 600;
  cursor: pointer;
}

.s24-aktywne-filtry__chip button:hover {
  border-color: var(--s24-ink);
  background: var(--s24-paper-deep);
}

.s24-brak-wynikow__akcja a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--s24-red-600);
  border-radius: var(--s24-radius-s);
  background: var(--s24-red-600);
  color: var(--s24-base);
  font-weight: 600;
  text-decoration: none;
}

.s24-footer .wp-block-heading {
  color: var(--s24-base);
}

.s24-footer__marka {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.s24-footer__naglowek {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.wc-block-product-template .wc-block-components-product-title {
  font-size: 0.96875rem;
  line-height: 1.35;
}

.s24-home-naglowek h2,
.s24-home-dostawa__intro h2,
.s24-home-newsletter h2 {
  font-size: var(--wp--preset--font-size--3-xl);
}

.s24-home-hero__tresc {
  margin-block-start: 0;
}

/* WordPress doklada block-gap do kolejnych dzieci grupy. Obraz i podklad
   sa pozycjonowane absolutnie, wiec ten margines tworzyl szczeline u gory. */
.s24-home-hero > .s24-home-hero__obraz,
.s24-home-hero > .s24-home-hero__podklad {
  margin: 0;
}

/* Katalog jest jednym kontenerem wide: naglowek i kafle maja wspolna os,
   a tresc nigdy nie zaczyna sie przy krawedzi okna. Regula jest poza
   warstwami, aby wygrala z generowanym przez WordPress ukladaniem alignwide. */
.s24-home-dzialy.alignwide {
  box-sizing: border-box;
  width: min(1360px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

.s24-home-polecane.alignwide {
  box-sizing: border-box;
  width: min(1360px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

.s24-home-polecane .wp-block-woocommerce-product-collection {
  margin-bottom: 0;
}

.s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel {
  display: flex;
  overflow-x: auto;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 24px;
  margin: 0;
  padding: 4px 0 14px;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
}

.s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel > .wc-block-product {
  flex: 0 0 calc((100% - 72px) / 4);
  width: auto;
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
}

.s24-home-polecane .wc-block-next-previous-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.s24-home-polecane .wc-block-next-previous-buttons__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--s24-line-strong);
  border-radius: 0;
  background: var(--s24-surface);
  color: var(--s24-ink);
  cursor: pointer;
}

.s24-home-polecane .wc-block-next-previous-buttons__button:hover {
  border-color: var(--s24-ink);
  background: var(--s24-ink);
  color: var(--s24-base);
}

.s24-home-polecane .wc-block-next-previous-buttons__button[aria-disabled="true"] {
  border-color: var(--s24-line);
  background: var(--s24-paper);
  color: var(--s24-faint);
  cursor: default;
}

@media (min-width: 782px) and (max-width: 1099px) {
  .s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel > .wc-block-product {
    flex-basis: calc((100% - 48px) / 3);
  }
}

/*
 * Krój display (D5): Archivo Expanded, wdth 125, waga 700, hostowany lokalnie
 * w assets/fonts/archivo-display-*.woff2. Zmierzona roznica wobec tekstowego
 * Archivo 700 to +26,6 % szerokosci, komplet polskich diakrytykow sprawdzony
 * w przegladarce (docs/store-redesign/domkniecie-kamienia-1.md).
 *
 * Token `6xl` z planu §5.5 („hero, haslo dzialu") to jedyne miejsce, gdzie
 * ten krój wolno uzyc. Nowe uzycia dopisuj do tego selektora, nie ustawiaj
 * rodziny w nowych regulach — inaczej display rozlezie sie po calym sklepie.
 */
.s24-home-hero h1 {
  color: var(--s24-base);
  font-family: var(--wp--preset--font-family--archivo-display);
  font-size: clamp(3rem, 5.7vw, 5.75rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.s24-home-pracownia__tekst h2,
.s24-home-personalizacja h2 {
  font-size: var(--wp--preset--font-size--4-xl);
}

.s24-home-personalizacja h2 {
  color: var(--s24-base);
}

.s24-home-przycisk--obrys:hover {
  color: var(--s24-ink);
}

.s24-home-atut h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

@media (max-width: 781px) {
  .s24-home-dzialy.alignwide,
  .s24-home-polecane.alignwide {
    width: calc(100% - 40px);
  }

  .s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel {
    gap: 16px;
  }

  .s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel > .wc-block-product {
    flex-basis: 82%;
  }

  .s24-home-polecane__akcje {
    width: 100%;
    justify-content: space-between;
  }

  .s24-home-hero h1 {
    font-size: clamp(2.7rem, 12vw, 4.25rem);
  }
}

/*
 * Podpowiedzi wyszukiwarki (Kamien 2B).
 *
 * Panel jest tym samym jezykiem wizualnym co mega menu: 1 px linii,
 * powierzchnia zdjecia jako tlo, ten SAM cien co `.s24-mega-panel`
 * (§15 pkt 10 pozwala na jeden cien w calym projekcie — nie dokladamy
 * drugiego wariantu) i zero promienia, bo panele nad trescia maja
 * krawedz prosta, a 8 px nalezy do kontrolek.
 */
@layer komponenty {
  .s24-szukaj-pole {
    position: relative;
  }

  .s24-podpowiedzi {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: min(62vh, 520px);
    overflow-y: auto;
    scroll-padding-bottom: 52px;   /* przyklejona „Zobacz wszystkie” nie zaslania wybranej */
    border: 1px solid var(--s24-line);
    border-top-color: var(--s24-line-strong);
    background: var(--s24-surface);
    box-shadow: 0 16px 18px -18px rgb(20 20 20 / 40%);
  }

  .s24-podpowiedzi__naglowek {
    margin: 0;
    padding: 12px 16px 6px;
    color: var(--s24-muted);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .s24-podpowiedzi__pusto {
    margin: 0;
    padding: 16px;
    color: var(--s24-ink-soft);
    font-size: var(--wp--preset--font-size--s);
  }

  .s24-podpowiedz {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;        /* bez tego 44 px + padding dawalo 64 px */
    min-height: 44px;              /* cel dotykowy z §12 */
    padding: 10px 16px;
    color: var(--s24-ink);
    cursor: pointer;
    font-size: var(--wp--preset--font-size--s);
    line-height: 1.35;
  }

  .s24-podpowiedz__nazwa {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;         /* nazwy siegaja 109 znakow */
  }

  .s24-podpowiedz__dodatek {
    flex: none;
    color: var(--s24-muted);
    font-weight: 600;
    white-space: nowrap;
  }

  .s24-podpowiedz--kategoria .s24-podpowiedz__nazwa {
    font-weight: 600;
  }

  .s24-podpowiedz:hover,
  .s24-podpowiedz[aria-selected="true"] {
    background: var(--s24-paper);
  }

  /*
   * Wybrana pozycja ma trzy sygnaly naraz, bo stan nie moze byc widoczny
   * wylacznie przez kolor (§12): tlo, pasek po lewej i `aria-selected`,
   * ktore czyta czytnik ekranu. Pasek jest obramowaniem, nie cieniem —
   * §15 pkt 10 zostawia w projekcie jeden cien i tu go nie dokladamy.
   */
  .s24-podpowiedz[aria-selected="true"] {
    padding-left: 14px;
    border-left: 2px solid var(--s24-ink);
  }

  .s24-podpowiedz--produkt {
    align-items: center;
    gap: 12px;
    padding-block: 8px;
  }

  .s24-podpowiedz__tresc {
    flex: 1 1 auto;
    min-width: 0;
  }

  .s24-podpowiedz__typ {
    display: block;
    color: var(--s24-muted);
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.3;
  }

  /* Przyklejona, zeby przy dlugiej liscie nie trzeba bylo do niej przewijac. */
  .s24-podpowiedz--wszystkie {
    position: sticky;
    bottom: 0;
    align-items: center;
    border-top: 1px solid var(--s24-line);
    background: var(--s24-surface);
    font-weight: 600;
  }

  @media (max-width: 599px) {
    /* Zakres cen ma ok. 140 px: w jednym rzedzie zjadlby nazwe. */
    .s24-podpowiedz--produkt {
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 0;
    }

    .s24-podpowiedz--produkt .s24-podpowiedz__tresc {
      flex-basis: calc(100% - 60px);
    }

    .s24-podpowiedz--produkt .s24-podpowiedz__dodatek {
      margin-left: 60px;
      font-size: var(--wp--preset--font-size--xs);
    }
  }
}

/*
 * Miniatura w podpowiedzi. Poza @layer: nielayerowane `img { height: auto;
 * max-width: 100% }` z arkuszy WordPressa wygrywaja z kazda warstwa, a to
 * pudelko ma byc stale. Biale tlo zostaje, gdy pliku brak: bez skoku ukladu.
 */
.s24-podpowiedz__obraz {
  display: block;
  flex: 0 0 48px;
  box-sizing: content-box;
  width: 48px;
  height: 48px;
  overflow: hidden;
  outline: 1px solid var(--s24-line);
  outline-offset: -1px;
  background: #fff;
}

.s24-podpowiedz__obraz img {
  display: block;
  width: 48px;
  max-width: none;
  height: 48px;
}

/*
 * Linki do kategorii nad wynikami. Poza @layer z tego samego powodu: kolor
 * linkow z arkuszy WordPressa wygrywal z warstwa.
 */
.s24-szukaj-kategorie {
  margin: 0 0 26px;
}

.s24-szukaj-kategorie__tytul {
  margin: 0 0 8px;
  color: var(--s24-muted);
  font-size: var(--wp--preset--font-size--s);
}

.s24-szukaj-kategorie ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s24-szukaj-kategorie a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* cel dotykowy z §12 */
  padding: 6px 14px;
  border: 1px solid var(--s24-line-strong);
  border-radius: 8px;
  background: var(--s24-surface);
  color: var(--s24-ink);
  font-size: var(--wp--preset--font-size--s);
  text-decoration: none;
}

.s24-szukaj-kategorie a:hover {
  border-color: var(--s24-ink);
}

.s24-szukaj-kategorie__liczba {
  color: var(--s24-muted);
}

/*
 * Szuflada 4.4 jest mostkiem do niewarstwowego ukladu kolumn WordPressa.
 * Reguly sa poza @layer, aby 834 px mial ten sam mobilny kontrakt co 390 px.
 */
@media (max-width: 899px) {
  .s24-listing-uklad {
    display: flex;
    flex-direction: column;
  }

  .s24-listing-uklad > .s24-filtry {
    order: 2;
    width: 100%;
    max-width: none;
  }

  .s24-listing-uklad > .wp-block-column:not(.s24-filtry) {
    order: 1;
    width: 100%;
  }

  .s24-kategoria-narzedzia .s24-filtry-trigger:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--s24-ink);
    border-radius: var(--s24-radius-s);
    background: var(--s24-surface);
    color: var(--s24-ink);
    font-weight: 700;
    cursor: pointer;
  }

  body.s24-filtry-otwarte::before {
    position: fixed;
    z-index: 100003;
    inset: 0;
    background: rgb(20 20 20 / 48%);
    content: "";
  }

  .s24-filtry-szuflada[role="dialog"]:not([hidden]) {
    position: fixed;
    z-index: 100004;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 0;
    border-top: 1px solid var(--s24-line-strong);
    background: var(--s24-surface);
  }

  .s24-filtry-szuflada__uchwyt {
    display: block;
    width: 46px;
    height: 4px;
    margin: -8px auto 12px;
    border-radius: 999px;
    background: var(--s24-line-strong);
  }

  .s24-filtry-szuflada__zamknij:not([hidden]) {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--s24-ink);
    font-size: 1.5rem;
    cursor: pointer;
    place-items: center;
  }

  .s24-filtry-szuflada[role="dialog"] > .wp-block-heading {
    margin-right: 48px;
  }

  .s24-filtry-szuflada[role="dialog"] .s24-d7__akcje {
    display: none;
  }

  .s24-filtry-szuflada[role="dialog"] .s24-d7,
  .s24-filtry-szuflada[role="dialog"] .s24-filtr-dokladny,
  .s24-filtry-szuflada[role="dialog"] .s24-filtr-cena {
    margin-bottom: 0;
  }

  .s24-filtry-szuflada[role="dialog"] .s24-filtr-dokladny__details-zawartosc {
    max-height: 34vh;
    overflow-y: auto;
  }

  /*
   * Cele dotykowe ≥44×44 w szufladzie (§6.13). Zmierzone przed poprawka:
   * etykiety dokladnych rozmiarow mialy 20 px, a pola ceny 33 px; wlasne
   * kontrolki motywu (radia D7 44, summary 64, Zamknij 44, Pokaz 66,
   * Wyczysc 66) byly juz zgodne. Rozmiary pochodza z blokow Woo, dlatego
   * powiekszamy je tutaj, w zasiegu samej szuflady.
   *
   * Woo trzyma `align-items: flex-start` i rysuje znacznik zaznaczenia jako
   * element pozycjonowany absolutnie wzgledem etykiety. Dlatego wysokosc
   * dokladamy `padding-block`, a nie wysrodkowaniem: pozycja statyczna
   * znacznika idzie razem z blokiem tresci, wiec „ptaszek” zostaje
   * dokladnie na kwadracie checkboxa.
   */
  .s24-filtry-szuflada[role="dialog"] .s24-filtr-dokladny__opcja label {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
  }

  .s24-filtry-szuflada[role="dialog"] .wc-block-components-price-slider__amount {
    box-sizing: border-box;
    min-height: 44px;
  }

  .s24-filtry-mobile__akcje:not([hidden]) {
    position: sticky;
    z-index: 2;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
    gap: 10px;
    margin: 12px -20px 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--s24-line);
    background: var(--s24-surface);
  }

  .s24-filtry-mobile__akcje > a,
  .s24-filtry-mobile__akcje > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--s24-red-600);
    border-radius: var(--s24-radius-s);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }

  .s24-filtry-mobile__akcje > a {
    background: var(--s24-surface);
    color: var(--s24-red-700);
  }

  .s24-filtry-mobile__akcje > button {
    background: var(--s24-red-600);
    color: var(--s24-base);
    cursor: pointer;
  }

  .s24-filtry-mobile__akcje > .screen-reader-text {
    position: absolute;
  }

  .s24-filtry-mobile__akcje [hidden] {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Karta produktu (Kamien 5.1): uklad 58/42, slot galerii, miniatury   */
/* ------------------------------------------------------------------ */

/*
 * DLACZEGO TA SEKCJA JEST POZA @layer.
 *
 * Uklad karty produktu rysuje `woocommerce-layout.css`:
 *   .woocommerce div.product div.images  { float: left;  width: 48% }
 *   .woocommerce div.product div.summary { float: right; width: 48% }
 * a geometrie wnetrza galerii i selecta — `woocommerce.css`. Oba arkusze
 * sa NIELAYEROWANE, a nielayerowany CSS bije kazda warstwe niezaleznie od
 * specyficznosci. Reguly ukladu PDP w `@layer komponenty` nie mialy wiec
 * zadnego skutku. Zmierzony dowod z baseline'u 5.0:
 * `.s24-rozmiary.s24-ma-js .variations select { width: 1px }` w warstwie
 * przegrywalo z `.woocommerce div.product form.cart .variations select
 * { min-width: 75% }` i pudelko selecta mialo 952 px — 259 px poza oknem
 * 1440 px, przy dzialajacym `clip-path`. Zamiast `!important` (plan §4 go
 * zabrania) uklad PDP idzie tutaj, do mostka, ze selektorami zakotwiczonymi
 * w `.s24-produkt` i `div.product`: nie dotyka listingu (`li.product`,
 * `.wc-block-product`), koszyka ani kasy.
 */

/* --- dwie kolumny: 58% galerii / 42% panelu zakupu ------------------ */

/*
 * Siatka jest na `.s24-karta-gora`, nie na `div.product`. Sticky panelu
 * przyklejony do calej karty zaslanial zakladke opisu i wszystko pod nia.
 * Od 1024 px panel jedzie tylko obok galerii i puszcza opis na pelna
 * szerokosc. `minmax(0, Nfr)` zamiast `Nfr`, bo dlugie SKU i tabela
 * wariacji inaczej rozpychaja tor poza 58/42.
 */
.s24-produkt div.product {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 32px;
}

.s24-produkt .s24-karta-gora {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* `float` jest w gridzie ignorowany, ale `width: 48%` zwezaloby kolumne
   do polowy toru. `margin-bottom: 2em` zastepuje `row-gap` wyzej. */
.s24-produkt .s24-karta-gora > div.images.woocommerce-product-gallery,
.s24-produkt .s24-karta-gora > .summary.entry-summary {
  float: none;
  width: auto;
  margin-bottom: 0;
}

/* Kontrolka „Zapisz” jest pozycjonowana wzgledem panelu zakupu. Od 1024 px
   ten sam element ma `position: sticky`, ktory tez tworzy blok zawierajacy. */
.s24-produkt .s24-karta-gora > .summary.entry-summary {
  position: relative;
}

@media (min-width: 1024px) {
  .s24-produkt .s24-karta-gora > .summary.entry-summary {
    display: flex;
    align-self: stretch;
    flex-direction: column;
  }

  .s24-produkt .s24-karta-gora {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: 40px;
  }

  .s24-produkt .s24-karta-gora > div.images.woocommerce-product-gallery {
    grid-column: 1;
  }

  /*
   * Panel zakupu jedzie z klientem, ktory czyta opis pod galeria. 96 px to
   * zapas pod przyklejony pasek naglowka. `align-items: start` na gridzie
   * jest warunkiem dzialania `sticky`: domyslne `stretch` rozciaga element
   * na cala wysokosc wiersza i nie zostaje nic do przewijania.
   *
   * `z-index: 1` NIE jest kosmetyka. Przyklejony panel zostaje w swoim
   * wierszu, a zakladki i „Podobne produkty” sa pozniejszym rodzenstwem bez
   * pozycjonowania — bez warstwy maluja sie NAD nim. Zmierzone na podgladzie
   * (ID 32069, 1440x900, panel przyklejony na 96..569):
   * `document.elementFromPoint` nad srodkiem przycisku zakupu zwracalo
   * `UL.tabs.wc-tabs` przy scrollY 600 i `A.button…product_type_variable`
   * (kafelek „Podobne produkty”) przy scrollY 2600 — czyli przycisk byl
   * widoczny, ale NIEKLIKALNY. Z `z-index: 1` w kazdym z osmiu punktow
   * przewijania pod punktem jest `BUTTON.single_add_to_cart_button`.
   *
   * `max-height` + `overflow-y` to SIATKA BEZPIECZENSTWA, nie element
   * projektu. Panel wyzszy od okna przy `top: 96px` przykleja sie tak, ze
   * jego dolna czesc zostaje pod krawedzia ekranu i NIE DA SIE jej doscignac
   * przewijaniem — zmierzone na ID 12 po wybraniu rozmiaru: panel 1003 px
   * przy oknie 900 px, przycisk zakupu na 946..999 px przez caly zakres
   * przyklejenia (scrollY 300–1200), `elementFromPoint` poza oknem.
   * Ograniczenie wysokosci do okna zostawia przycisk w zasiegu (takze dla
   * `scrollIntoView` i dla fokusu klawiatury). Dla panelu, ktory sie miesci
   * — a to przypadek wejsciowy kazdej z szesciu kart matrycy (473–679 px
   * przy oknie 900 px) — regula nie robi NIC: nie ma paska przewijania ani
   * zadnej zmiany w ukladzie. Etap 5.2 przebudowuje rdzen zakupu i powinien
   * skrocic panel na tyle, zeby ta siatka nigdy sie nie uruchamiala.
   */
  .s24-produkt .s24-karta-gora > .summary.entry-summary {
    position: sticky;
    z-index: 1;
    top: 96px;
    grid-column: 2;
    grid-row: 1;
    /* Bez overflow i max-height. Po wyborze wariantu panel rosnie i wewnetrzny
       pasek przewijania wygladal jak drugi koszyk. Wyzszy panel wypelnia
       swoj blok, wiec jedzie ze strona, a przycisk zostaje osiagalny. */
  }

}

/* --- zwarty panel decyzji zakupowej na jednym ekranie -------------- */

.s24-produkt.s24-ma-js div.product form.variations_form
  [data-s24-wariant-dane-start] > i {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 1px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
}

.s24-produkt.s24-ma-js div.product form.variations_form
  [data-s24-wariant-dane-start] > i::before,
.s24-produkt.s24-ma-js div.product form.variations_form
  [data-s24-wariant-dane-start] > i::after {
  position: absolute;
  left: 7px;
  width: 2px;
  border-radius: 1px;
  background: currentcolor;
  content: "";
}

.s24-produkt.s24-ma-js div.product form.variations_form
  [data-s24-wariant-dane-start] > i::before {
  top: 7px;
  height: 6px;
}

.s24-produkt.s24-ma-js div.product form.variations_form
  [data-s24-wariant-dane-start] > i::after {
  top: 4px;
  height: 2px;
}

/*
 * Reguly sa celowo poza @layer. WooCommerce laduje nielayerowany arkusz,
 * ktory dodawal po 24 px paddingu do TH/TD i rozciagal cztery warianty do
 * 237 px. Selektory sa ograniczone do prawdziwej karty produktu.
 */
@media (min-width: 1024px) {
  .s24-produkt div.product .summary.entry-summary > h1.product_title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .s24-produkt div.product .summary.entry-summary > .s24-pdp-sku {
    float: right;
    margin: 4px 0 6px 14px;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .s24-produkt div.product .summary.entry-summary > p.price {
    margin: 0 0 10px;
    font-size: 1.375rem;
    line-height: 1.2;
  }

  .s24-produkt div.product .summary.entry-summary
    > .woocommerce-product-details__short-description {
    clear: both;
    margin: 0 0 12px;
    color: var(--s24-ink-soft);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .s24-produkt div.product .summary.entry-summary
    > .woocommerce-product-details__short-description > :last-child {
    margin-bottom: 0;
  }

  .s24-produkt div.product .summary.entry-summary > form.variations_form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form table.variations {
    display: block;
    margin: 0 0 8px;
    border: 0;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .variations tbody,
  .s24-produkt.s24-ma-js div.product form.variations_form .variations tr,
  .s24-produkt.s24-ma-js div.product form.variations_form .variations th,
  .s24-produkt.s24-ma-js div.product form.variations_form .variations td {
    display: block;
    width: auto;
    border: 0;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .variations tr {
    position: relative;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .variations th.label {
    min-height: 22px;
    margin: 0 0 7px;
    padding: 0;
    line-height: 1.25;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .variations td.value {
    position: static;
    padding: 0;
    line-height: 1.2;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .reset_variations {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 22px;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .s24-pastylki {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .s24-pastylka {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    gap: 1px;
    padding: 6px 9px;
    line-height: 1.15;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .s24-skala {
    grid-template-columns: 160px minmax(0, 1fr);
    min-height: 96px;
    gap: 12px;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--s24-paper-deep);
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    min-height: 114px;
    gap: 12px;
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-paper-deep);
    color: var(--s24-ink-soft);
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start][hidden] {
    display: none;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] > img {
    width: 30px;
    height: auto;
    justify-self: center;
    opacity: 0.62;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] strong,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] span,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] strong,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] span {
    display: block;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] strong {
    margin-bottom: 3px;
    color: var(--s24-ink);
    font-size: 0.9375rem;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] span {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .s24-skala__grafika {
    width: 160px;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .woocommerce-variation-price > .price {
    display: none;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .woocommerce-variation.single_variation {
    box-sizing: border-box;
    min-height: 66px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .woocommerce-variation.single_variation:empty {
    min-height: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .woocommerce-variation-availability p.stock {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .single_variation_wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form .s24-dostawa-info {
    align-items: center;
    box-sizing: border-box;
    min-height: 66px;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] {
    display: grid;
    box-sizing: border-box;
    grid-column: 1 / -1;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    min-height: 66px;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
    color: var(--s24-muted);
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start][hidden] {
    display: none;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] strong {
    margin-bottom: 2px;
    color: var(--s24-ink-soft);
    font-size: 0.8125rem;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .s24-dostawa-info strong {
    margin-bottom: 2px;
    font-size: 0.8125rem;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    #s24-dostawa-skrot {
    display: block;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    .woocommerce-variation-add-to-cart {
    grid-column: 1 / -1;
  }

  .s24-produkt div.product form.cart .quantity input.qty {
    width: 58px;
    min-width: 58px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .s24-produkt.s24-ma-js div.product .summary.entry-summary > .product_meta {
    display: none;
  }
}

@media (max-width: 1023px) {
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-paper-deep);
    color: var(--s24-ink-soft);
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start][hidden],
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start][hidden] {
    display: none;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] > img {
    width: 30px;
    height: auto;
    justify-self: center;
    opacity: 0.62;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] strong,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] span,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] strong,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] span {
    display: block;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] strong,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] strong {
    margin-bottom: 3px;
    color: var(--s24-ink);
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-start] span,
  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] span {
    color: var(--s24-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .s24-produkt.s24-ma-js div.product form.variations_form
    [data-s24-wariant-dane-start] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
    color: var(--s24-muted);
  }
}

/* --- galeria: pasek miniatur po lewej ------------------------------- */

.s24-produkt div.product div.images.woocommerce-product-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}

/*
 * Pasek miniatur nalezy sie TYLKO galerii wielozdjeciowej. Warunek czyta
 * liczbe zdjec z HTML-u SERWERA (`:nth-child(2)` wewnatrz wrappera), wiec
 * miejsce na pasek rezerwuje sie od pierwszego malowania, a nie dopiero
 * wtedy, gdy FlexSlider dorysuje `ol.flex-control-thumbs`.
 *
 * Kombinator jest POTOMKOWY, nie dziecka — i to nie jest kosmetyka.
 * FlexSlider w trybie `slide` przenosi wrapper do `.flex-viewport`, wiec
 * `:has(> wrapper > obraz)` przestawalo pasowac PO inicjalizacji: rezerwacja
 * znikala, galeria kurczyla sie o 76 px, a pasek miniatur ladowal NA
 * zdjeciu. Zmierzone na mobile-4G (ID 32069, 390 px): jedno przesuniecie
 * `div.summary.entry-summary` o 0,0122 w 3588 ms i `padding-bottom: 0px`
 * przy pasku na 618..682 px wewnatrz galerii 340..682 px.
 * Produkt z samym zdjeciem glownym (ID 1153) nie dostaje ani kolumny, ani
 * dolnego marginesu, ani pustej miniaturki — galeria jednego zdjecia
 * zajmuje pelna szerokosc.
 *
 * Od 1024 px pasek stoi po lewej (kolumna 64 px). Nizej skrypt etapu 5.6
 * wylacza FlexSlider przed inicjalizacja, wiec nie powstaja ani poziome
 * miniatury, ani klony obrazow: istniejacy wrapper staje sie natywnym
 * torem scroll-snap, a zarezerwowane miejsce zajmuja kropki.
 */
.s24-produkt div.product div.images.woocommerce-product-gallery:has(
  .woocommerce-product-gallery__image:nth-child(2)
) {
  padding-bottom: 76px;
}

@media (min-width: 1024px) {
  .s24-produkt div.product div.images.woocommerce-product-gallery:has(
    .woocommerce-product-gallery__image:nth-child(2)
  ) {
    grid-template-columns: 64px minmax(0, 1fr);
    padding-bottom: 0;
  }
}

/*
 * K8 / D17 opcja 2 (decyzja wlasciciela 29.10.2026): ponizej 1024 px galeria
 * jest widoczna od pierwszego malowania. Woo wypisuje na niej INLINE
 * `opacity: 0` i odslania ja dopiero swoim JS — pod mobile-4G zdjecie
 * glowne bylo gotowe ~1,5 s przed odslonieciem (A/B: ID 12 3925 -> 2208 ms,
 * `deploy/pomiar-lcp-d17.py`). FlexSlider jest tu i tak wylaczony
 * (`pasek-mobilny.js`), wiec nie ma co ukrywac przed inicjalizacja.
 * Styl inline bije kazda regule bez `!important`; wartosc animowana bije
 * styl inline, wiec jednoklatkowa animacja z `forwards` zastepuje
 * `!important` (plan §4). Przy `reduce` czas spada do 0,01 ms — dziala tak samo.
 */
@keyframes s24-galeria-widoczna {
  from, to { opacity: 1; }
}

@media (max-width: 1023px) {
  .s24-produkt div.product div.images.woocommerce-product-gallery {
    animation: s24-galeria-widoczna 1ms forwards;
  }
}

/* Slot zawsze w ostatnim torze: przy jednym zdjeciu jest nim kolumna 1,
   przy wielu — kolumna 2. Jedna regula na oba przypadki. */
.s24-produkt div.product div.images.woocommerce-product-gallery
  > .woocommerce-product-gallery__wrapper {
  grid-row: 1;
  grid-column: -2 / -1;
}

/*
 * PASEK MINIATUR JEST POZA UKLADEM. To nie jest ozdoba zapisu, tylko
 * warunek CLS: `ol.flex-control-thumbs` powstaje dopiero przy inicjalizacji
 * FlexSlidera, a pod dlawieniem mobile-4G dzieje sie to po kilku sekundach.
 * Gdyby pasek byl w ukladzie, jego pojawienie sie zmienialoby wysokosc
 * galerii i przesuwalo caly panel zakupu.
 *
 * ZMIERZONE, zanim pasek trafil poza uklad (podglad 5.1, profil
 * mobile-390-js z dlawieniem 1638 kb/s / RTT 150 ms / CPU x4): pasek
 * 7 miniatur mial 496 px, slot 266 px, wiec galeria rosla o 230 px —
 * jedno przesuniecie `div.summary.entry-summary` o wartosci 0,0585 na
 * ID 12 i 0,0583 na ID 323, przy budzecie 0,05. Po przeniesieniu paska
 * na `position: absolute` (miejsce rezerwuje pusta kolumna albo
 * `padding-bottom` galerii, oba obecne od pierwszego malowania) te same
 * przebiegi daja 0.
 *
 * Blok zawierajacy jest gotowy: `woocommerce.css` ustawia galerii
 * `position: relative`.
 */
.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-control-nav.flex-control-thumbs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  flex-direction: row;
  gap: 8px;
  height: 64px;
  margin: 0;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-control-nav.flex-control-thumbs > li {
  flex: 0 0 64px;
  float: none;
  margin: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .s24-produkt div.product div.images.woocommerce-product-gallery
    > .flex-control-nav.flex-control-thumbs {
    top: 0;
    right: auto;
    bottom: auto;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    width: 64px;
    height: 100%;
  }

  /*
   * W pionie miniatura moze sie SKURCZYC, zeby caly pasek zmiescil sie obok
   * zdjecia. Zmierzone przy 1024 px: slot ma 467 px, a siedem miniatur po
   * 64 px z odstepami 8 px potrzebuje 496 px — bez kurczenia siodma
   * miniatura wpadala pod pasek przewijania. `flex-basis: 64px` zostaje
   * rozmiarem docelowym (tyle maja przy 1280 px i wyzej), `min-height: 44px`
   * jest podloga celu dotykowego z §12; ponizej niej pasek sie przewija.
   */
  .s24-produkt div.product div.images.woocommerce-product-gallery
    > .flex-control-nav.flex-control-thumbs > li {
    flex: 0 1 64px;
    width: 100%;
    min-height: 44px;
  }
}

/*
 * Miniatura jest kontrolka, nie dekoracja: 64 x 64 px celu, hairline
 * i pelna nieprzezroczystosc. WooCommerce daje jej `opacity: .5`, czyli
 * stan czysto kolorystyczny. `object-fit: contain` jest tu konieczne, bo
 * jedna galeria miesci zdjecia 0,70 / 1,29 / 1,51 (ID 174, ID 32069) —
 * `cover` obcinalby je w kwadracie.
 */
.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-control-nav.flex-control-thumbs > li img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--s24-line);
  border-radius: var(--s24-radius-s);
  background: var(--s24-surface);
  opacity: 1;
  cursor: pointer;
  object-fit: contain;
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-control-nav.flex-control-thumbs > li img:hover {
  border-color: var(--s24-line-strong);
}

/*
 * Aktywna miniatura ma trzy sygnaly naraz, bo stan nie moze byc widoczny
 * wylacznie przez kolor (§12 planu): grubsza ramka atramentowa, wezsze
 * wciecie zdjecia i `aria-current="true"`, ktore czyta czytnik ekranu
 * (ustawia je assets/js/galeria.js, rownolegle do klasy `flex-active`
 * FlexSlidera).
 */
.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-control-nav.flex-control-thumbs > li img.flex-active {
  padding: 1px;
  border: 2px solid var(--s24-ink);
}

/* --- slot duzego zdjecia ------------------------------------------- */

/*
 * SLOT O ZADEKLAROWANEJ PROPORCJI — i dlaczego nie o proporcji konkretnego
 * zdjecia.
 *
 * Katalog nie zna wymiarow swoich zdjec: pliki leza na zewnetrznym CDN,
 * `_wp_attachment_metadata` ma pusta liste rozmiarow, a WooCommerce wypisuje
 * w HTML-u `data-large_image_width="0"`. Serwer nie policzylby wiec
 * proporcji bez zapytania do CDN-a przy kazdym wyswietleniu karty.
 * Zmierzone proporcje prawdziwych plikow (naglowki JPEG/PNG, szesc
 * produktow matrycy): 1:1 na ID 12 (1600x1600), 1153 (2560x2560),
 * 323 (1536x1536) i 29457 (1500x1500), a na ID 32069 i 174 — 0,70 / 1,51
 * / 1,29 W JEDNEJ GALERII. Slot o jednej proporcji 1:1 plus
 * `object-fit: contain` jest wiec jednoczesnie stabilny (wysokosc znana
 * przed pobraniem pierwszego bajtu), uczciwy (nic nie przycina i nie udaje
 * wymiarow, ktorych nie znamy) i przewidywalny dla galerii o mieszanych
 * proporcjach. `--s24-galeria-proporcja` zostaje punktem zaczepienia: gdy
 * katalog dostanie prawdziwe wymiary, wystarczy podac je per produkt.
 *
 * `overflow: hidden` jest funkcjonalne: przed inicjalizacja FlexSlidera
 * (i bez JavaScriptu) zdjecia 2..n stoja pod zdjeciem glownym, a slot
 * pokazuje dokladnie jedno. Dzieki temu wysokosc karty nie zalezy od tego,
 * czy i kiedy skrypt galerii wystartuje.
 */
/*
 * DWA KSZTALTY DOM-u, JEDEN SLOT. FlexSlider w trybie `slide` (domyslnym
 * dla WooCommerce) owija wrapper w tworzony w locie `.flex-viewport`
 * i nadaje samemu wrapperowi styl INLINE `width: 1400%` — wrapper staje sie
 * torem animacji, a nie pudelkiem jednego zdjecia. Przy jednym zdjeciu
 * (ID 1153) i przed startem skryptu FlexSlidera nie ma w ogole, wiec slotem
 * jest wrapper. Dlatego:
 *
 *  - proporcje dostaja OBA elementy, a selektory sa potomkowe, nie dziecka:
 *    dzieki temu kontrola `galeria-stabilny-slot` (czyta wrapper) jest
 *    prawdziwa w obu ksztaltach;
 *  - wysokosc UKLADU trzyma ten element, ktory nie dostaje inline wymiarow,
 *    czyli `.flex-viewport`. Wrapper z `width: 1400%` policzylby z proporcji
 *    wysokosc 14x za duza, ale siedzi w viewporcie z `overflow: hidden`
 *    (inline od FlexSlidera), wiec jest przycinany i nie powieksza karty;
 *  - `min-height: 0` na viewporcie jest konieczne: jako element siatki ma
 *    domyslnie `min-height: auto`, a wtedy wysokosc liczy sie z zawartosci
 *    (zmierzone: 489 px zamiast 342 px przy zdjeciu 420x600).
 *  - `width: 100%` i `height: auto !important` (K7): przy
 *    `prefers-reduced-motion: reduce` FlexSlider wpisywal viewportowi inline
 *    `height` rowna szerokosci toru 1400% (9654 px przy 1440). Element siatki
 *    z `aspect-ratio` ma `justify-self: normal` jak `start`, wiec liczyl
 *    szerokosc z tej wysokosci: dokument 9770 px szerokosci, drugie zdjecie
 *    na panelu zakupu. Szerokosc z toru, wysokosc z proporcji — inline
 *    `height` nie ma juz wplywu na uklad (zmierzone: 1024/1440, oba profile
 *    ruchu, viewport 467/690 px, miniatury przelaczaja slajd).
 */
.s24-produkt div.product div.images.woocommerce-product-gallery
  > .flex-viewport {
  grid-row: 1;
  grid-column: -2 / -1;
  width: 100%;
  height: auto !important;
  min-height: 0;
  aspect-ratio: var(--s24-galeria-proporcja, 1 / 1);
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  .woocommerce-product-gallery__wrapper {
  overflow: hidden;
  aspect-ratio: var(--s24-galeria-proporcja, 1 / 1);
  border-radius: var(--s24-radius-m);
  background: var(--s24-surface);
  /* `transition: all .5s` z woocommerce.css nie ma tu czego animowac —
     slot nie zmienia ani pozycji, ani rozmiaru. */
  transition: none;
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  .woocommerce-product-gallery__image {
  display: block;
  box-sizing: border-box;
  /* `height: auto`, bo w trybie `slide` wrapper ma wysokosc policzona
     z proporcji przy szerokosci 1400% — `height: 100%` wzielaby ja
     doslownie. Wysokosc slajdu ma wynikac z JEGO wlasnej szerokosci,
     ktora FlexSlider ustawia rowna szerokosci viewportu. */
  width: 100%;
  height: auto;
  aspect-ratio: var(--s24-galeria-proporcja, 1 / 1);
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  .woocommerce-product-gallery__image > a {
  display: block;
  height: 100%;
}

.s24-produkt div.product div.images.woocommerce-product-gallery
  .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- mobilny tor scroll-snap i kropki (Kamien 5.6) ----------------- */

.s24-produkt div.product div.images.woocommerce-product-gallery
  > [data-s24-kropki] {
  display: none;
}

@media (max-width: 1023px) {
  .s24-produkt div.product div.images.woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
    display: none;
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper
    > .woocommerce-product-gallery__image {
    flex: 0 0 100%;
    float: none;
    width: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* FlexSlider nie powinien zbudowac miniaturek na mobile. Ta regula jest
     oslona na wypadek opoznionego laczenia skryptow; nie rusza desktopu. */
  .s24-produkt div.product div.images.woocommerce-product-gallery
    > .flex-control-nav.flex-control-thumbs {
    display: none;
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    > [data-s24-kropki] {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0;
    padding: 0;
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    > [data-s24-kropki] > button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    /* Kropka to element UI: >= 3:1 do tla (WCAG 1.4.11). line-strong dawal
       1,67:1 — wyszlo w QA stron informacyjnych (kontrast.py). muted, a nie
       faint (3,26:1), zeby kontrast.py, ktory liczy jak tekst, nie zglaszal
       jej dalej; wybrana kropka i tak rozni sie wypelnieniem. */
    color: var(--s24-muted);
    cursor: pointer;
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    > [data-s24-kropki] > button::before {
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    content: "";
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    > [data-s24-kropki] > button[aria-current="true"] {
    color: var(--s24-ink);
  }

  .s24-produkt div.product div.images.woocommerce-product-gallery
    > [data-s24-kropki] > button[aria-current="true"]::before {
    background: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s24-produkt div.product div.images.woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper {
    scroll-behavior: auto;
  }
}

/* --- oryginalny select wariantu ------------------------------------ */

/*
 * Select zostaje w DOM jako jedyne zrodlo prawdy i jest nadal dostepny dla
 * czytnika; po zbudowaniu pastylek przestaje byc widoczny i przestaje byc
 * celem dla palca. `min-width` jest tu kluczowe, nie `width`: WooCommerce
 * ustawia `min-width: 75%` (specyficznosc 0,4,3), wiec bez nadpisania
 * pudelko zostawalo szerokie nawet przy `width: 1px`. Selektor ma
 * specyficznosc 0,5,2 — wyzsza, bez `!important`.
 */
.s24-produkt.s24-rozmiary.s24-ma-js form.cart .variations select {
  position: absolute;
  width: 1px;
  min-width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
}

/*
 * K8 — CTA przed wyborem rozmiaru, wariant 1 „obrys” (decyzja wlasciciela
 * 29.10.2026). Woo daje `.disabled` `opacity: .5` (`.woocommerce
 * button.button.disabled`, 0,3,1, bez warstwy): czerwien robila sie rozowa,
 * tekst 2,44:1. Przycisk nie jest naprawde wylaczony i jego tekst jest
 * instrukcja, wiec musi spelniac AA: bialy srodek, ramka i tekst #B50D20
 * = 6,9:1. Po wyborze klasa znika i wraca pelna czerwien. Selektor 0,4,2
 * bije Woo bez `!important`.
 */
.s24-produkt form.cart button.single_add_to_cart_button.wc-variation-selection-needed,
.s24-produkt form.cart button.single_add_to_cart_button.wc-variation-selection-needed:hover {
  opacity: 1;
  background: var(--s24-surface);
  color: var(--s24-red-700);
  box-shadow: inset 0 0 0 2px var(--s24-red-700);
}

/* Woo trzyma poprzednia cene przez ok. 300 ms po zmianie selecta. Klasa
   oczekiwania zachowuje jej miejsce (bez CLS), ale nie pokazuje obok nowej
   pastylki danych starej wariacji. */
.s24-produkt form.variations_form.s24-wariacja-laduje
  .woocommerce-variation.single_variation {
  visibility: hidden;
}

/* SKU rodzica w dolnym product_meta jest dla produktu wariacyjnego albo
   nieaktualne, albo doslownym „Brak danych”. Jedyny widoczny region SKU
   lezy przy cenie i jest wypelniany danymi `show_variation` z Woo. */
.s24-produkt.s24-ma-js div.product.product-type-variable .product_meta .sku_wrapper {
  display: none;
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-sku {
  margin: 0 0 8px;
  color: var(--s24-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-sku[hidden] {
  display: none;
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-sku .s24-pdp-sku__etykieta {
  color: var(--s24-ink-soft);
  font-weight: 600;
}

/* --- D4 „Zapisz” na karcie produktu -------------------------------- */

/*
 * Ten sam mechanizm, klucz i schemat rekordu co serduszko listingu
 * (Kamien 4.5, assets/js/zapisane.js) — rozni sie wylacznie miejscem
 * i rozmiarem. Lezy w panelu zakupu, przy H1, ale POZA naglowkiem i POZA
 * `form.cart`: klikniecie nie ma zadnego zwiazku z dodaniem do koszyka.
 * Na karcie jest widoczne bez warunkow (inaczej niz na listingu, gdzie
 * wchodzi na hover) — tu jest jedna, glowna akcja poboczna.
 */
.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--s24-line);
  border-radius: var(--s24-radius-s);
  background: var(--s24-surface);
  color: var(--s24-ink-soft);
  cursor: pointer;
  transition: color var(--s24-motion-fast) var(--s24-motion-easing);
}

/* display:flex wyzej bije domyslne [hidden], dlatego ta regula jest
   funkcjonalna: bez JavaScriptu kontrolka nie moze sie pokazac. */
.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz[hidden] {
  display: none;
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz > svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz:hover {
  border-color: var(--s24-red-700);
  color: var(--s24-red-700);
}

/* Stan zapisany: wypelnione serduszko plus kolor. Sam kolor nie wystarcza. */
.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz[aria-pressed="true"] {
  border-color: var(--s24-red-700);
  color: var(--s24-red-700);
}

.s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz[aria-pressed="true"] > svg {
  fill: currentColor;
}

/* Nazwa produktu siega 109 znakow (ID 1153) i musi sie lamac obok
   serduszka, nie pod nim. */
.s24-produkt div.product .summary.entry-summary > h1.product_title {
  padding-right: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .s24-produkt div.product .summary.entry-summary > .s24-pdp-zapisz,
  .s24-produkt .s24-pastylka {
    transition: none;
  }
}

/* Miniatury produktow powiazanych na karcie.
   Ramka trzyma kadr, zanim plik dojedzie. Selektor siedzi pod
   `.s24-produkt .related.products`, wiec listing, koszyk, kasa i galeria
   zostaja przy swoich obrazach. Reguly nie wymagaja arkuszy WooCommerce. */

.s24-produkt .related.products .s24-powiazane__ramka:not([hidden]) {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 1em;
  overflow: hidden;
  background: var(--s24-surface, #fff);
}

.s24-produkt .related.products .s24-powiazane__ramka > img {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Po wylaczeniu JS przegladarka renderuje img z noscript. Atrybuty 1/1
   opisuja proporcje, a szerokosc kadru bierze stad. */
.s24-produkt .related.products noscript > img.s24-powiazane__proporcja-katalogu {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 0 1em;
}

/* CDN nie podaje pikseli. Klasa jest tylko na zapasowym img bez wymiarow
   (i na jego odpowiedniku wstawianym przez JS). Proporcja 1/1 nie
   odpuszcza po zaladowaniu pliku, wiec kadr sie nie rozjezdza. */
.s24-produkt .related.products img.s24-powiazane__proporcja-katalogu {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--s24-surface, #fff);
}

/* ------------------------------------------------------------------
 * Mobilny pasek zakupu (Kamien 5.6).
 * Rezerwacja miejsca istnieje od pierwszego malowania. Sam pasek ma
 * `position: fixed` rowniez pod `hidden`, ale bez JS pozostaje display:none.
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
  body.single-product {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .s24-pasek-mobilny {
    position: fixed;
    z-index: 100002;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
    align-items: center;
    gap: 12px;
    width: 100%;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--s24-line, #d7d2c8);
    background: var(--s24-surface, #fff);
  }

  .s24-pasek-mobilny[hidden] {
    display: none;
  }

  .s24-pasek-cena {
    overflow: hidden;
    color: var(--s24-ink, #161616);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .s24-pasek-cta {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--s24-red-600, #b3212d);
    border-radius: var(--s24-radius-s, 4px);
    background: var(--s24-red-600, #b3212d);
    color: var(--s24-base, #fff);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
  }

  .s24-pasek-cta:disabled {
    border-color: var(--s24-line-strong, #aaa49a);
    background: var(--s24-line, #d7d2c8);
    color: var(--s24-ink-soft, #4f4b45);
    cursor: not-allowed;
  }
}

/* Bez udanego ulepszenia JS oryginalny select pozostaje widoczny i musi
   spelniac minimum celu dotykowego. Po `.s24-ma-js` nadal obowiazuje
   wczesniejszy kontrakt wizualnie schowanego selecta/pastylek. */
@media (max-width: 480px) {
  .s24-produkt:not(.s24-ma-js) form.cart .variations select:not([hidden]) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (min-width: 1024px) {
  .s24-pasek-mobilny {
    position: static;
    display: none;
  }
}

/* ------------------------------------------------------------------
 * Strony informacyjne: Zakupy / Firma (motyw 1.4.0, etap S1).
 * Szablon templates/page-informacyjna.html, nawigacja z
 * inc/strony-informacyjne.php. Makiety: docs/strony-informacyjne/plan.md.
 * Nawigacja jest w DOM przed treścią — kolejność fokusu zgadza się z
 * widokiem na desktopie; na telefonie JS zwija ją do jednej linii.
 * ------------------------------------------------------------------ */

@layer komponenty {
  .s24-info__uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 28px;
  }

  @media (min-width: 782px) {
    .s24-info__uklad {
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 48px;
      align-items: start;
    }
  }

  /* --- nawigacja boczna ------------------------------------------- */
  .s24-info-nav {
    font-size: var(--wp--preset--font-size--s);
  }

  .s24-info-nav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--s24-line-strong);
    border-radius: var(--s24-radius-s);
    background: var(--s24-surface);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .s24-info-nav__summary::-webkit-details-marker { display: none; }

  .s24-info-nav__summary::after {
    content: "+";
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--s24-muted);
  }

  .s24-info-nav__zwijany[open] > .s24-info-nav__summary::after { content: "−"; }

  .s24-info-nav__zwijany[open] > .s24-info-nav__summary { margin-bottom: 18px; }

  @media (min-width: 782px) {
    /* Na desktopie zawsze rozwinięta; JS zwija ją tylko na wąskim ekranie. */
    .s24-info-nav__summary { display: none; }
  }

  .s24-info-nav__grupa + .s24-info-nav__grupa { margin-top: 22px; }

  .s24-info-nav__naglowek {
    margin: 0 0 6px;
    padding: 0 12px;
    color: var(--s24-muted);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .s24-info-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .s24-info-nav li a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 4px 12px;
    border-radius: var(--s24-radius-s);
    color: var(--s24-ink);
    text-decoration: none;
    line-height: 1.3;
  }

  .s24-info-nav li a:hover { text-decoration: underline; }

  .s24-info-nav li a[aria-current="page"] {
    background: var(--s24-paper-deep);
    font-weight: 700;
  }

  .s24-info-nav__infolinia {
    margin: 22px 0 0;
    padding: 14px 12px 0;
    border-top: 1px solid var(--s24-line);
    color: var(--s24-muted);
    line-height: 1.5;
  }

  .s24-info-nav__infolinia a {
    color: var(--s24-ink);
    font-size: var(--wp--preset--font-size--l);
    font-weight: 700;
    text-decoration: none;
  }

  /* --- treść ------------------------------------------------------- */
  .s24-info__tresc {
    min-width: 0;
    max-width: 760px;
    line-height: 1.6;
  }

  .s24-info__tresc > :first-child { margin-top: 0; }

  .s24-info__tresc :where(ul, ol) { padding-left: 1.25em; }

  .s24-info__tresc :where(li + li) { margin-top: 6px; }

  .s24-info__tresc a { color: var(--s24-red-700); }
  .s24-info__tresc a:hover { color: var(--s24-ink); }

  /* Akapit wprowadzający pod tytułem. */
  .s24-info__tresc .s24-lead {
    margin-bottom: 28px;
    color: var(--s24-ink-soft);
    font-size: var(--wp--preset--font-size--l);
    line-height: 1.5;
  }

  /* Tabele: gołe <table> z importu i blok Tabela. Na wąskim ekranie
     przewija się tabela, nie strona. */
  .s24-info__tresc table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
    font-size: var(--wp--preset--font-size--s);
  }

  .s24-info__tresc :where(th, td) {
    padding: 12px 16px;
    border-bottom: 1px solid var(--s24-paper-deep);
    text-align: left;
    vertical-align: top;
  }

  .s24-info__tresc th {
    background: var(--s24-paper);
    color: var(--s24-muted);
    font-weight: 600;
    white-space: nowrap;
  }

  .s24-info__tresc td { font-variant-numeric: tabular-nums; }

  /* Do 1023 px tabela potrafi nie zmiescic sie obok nawigacji (834 px:
     ~500 px na tresc), wiec przewija sie sama, nie cala strona. */
  @media (max-width: 1023px) {
    .s24-info__tresc table {
      display: block;
      overflow-x: auto;
    }
  }

  /* --- elementy treści (używane od etapu S4) ----------------------- */
  .s24-karta {
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid var(--s24-line);
    border-radius: var(--s24-radius-m);
    background: var(--s24-surface);
  }

  .s24-karta > :first-child { margin-top: 0; }
  .s24-karta > :last-child { margin-bottom: 0; }

  .s24-notka {
    padding: 12px 14px;
    border-radius: var(--s24-radius-s);
    background: var(--s24-info-bg);
    color: var(--s24-info);
    font-size: var(--wp--preset--font-size--s);
  }

  .s24-notka a { color: inherit; }

  .s24-siatka {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 20px 0;
  }

  @media (min-width: 640px) {
    .s24-siatka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s24-siatka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Kroki 1-2-3: numer nad tytułem, kreska u góry zamiast ramki. */
  .s24-kroki {
    counter-reset: s24-krok;
    margin: 20px 0;
    padding: 0;
    list-style: none;
  }

  .s24-kroki > li {
    counter-increment: s24-krok;
    margin: 0;
    padding-top: 14px;
    border-top: 2px solid var(--s24-ink);
  }

  .s24-kroki > li::before {
    content: "KROK " counter(s24-krok);
    display: block;
    margin-bottom: 4px;
    color: var(--s24-red-700);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  /* Trzy liczby w rzędzie (dostawa): linia ink u góry, hairline między. */
  .s24-fakty {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 32px;
    border-top: 1px solid var(--s24-ink);
    border-bottom: 1px solid var(--s24-line);
  }

  .s24-fakty > * {
    margin: 0;
    padding: 16px 0;
  }

  .s24-fakty > * + * { border-top: 1px solid var(--s24-line); }

  .s24-fakty strong {
    display: block;
    font-size: var(--wp--preset--font-size--2-xl);
    font-stretch: 80%;
    line-height: 1.1;
  }

  @media (min-width: 640px) {
    .s24-fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s24-fakty > * { padding: 18px 20px; }
    .s24-fakty > :first-child { padding-left: 0; }
    .s24-fakty > * + * {
      border-top: 0;
      border-left: 1px solid var(--s24-line);
    }
  }
}

/* Rozmiary naglowkow stron informacyjnych POZA warstwa: globalne style
   z theme.json (h1 5-xl, h2 3-xl, h3 2-xl, core/post-title 4-xl) sa
   niewarstwowe, wiec kazda regula z @layer im przegrywa. Strony
   informacyjne celowo maja mniejsza skale niz reszta sklepu.
   `h1` w tresci: regulamin przeniesiony ze Shopera ma w tresci wlasny
   naglowek H1, ktory bez tej reguly dostalby 68 px. */
.s24-info .s24-info__tytul {
  font-size: var(--wp--preset--font-size--3-xl);
  font-stretch: 80%;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.s24-info__tresc h1,
.s24-info__tresc h2 {
  margin: 40px 0 12px;
  font-size: var(--wp--preset--font-size--xl);
  font-stretch: 85%;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.s24-info__tresc h3 {
  margin: 28px 0 8px;
  font-size: var(--wp--preset--font-size--l);
  letter-spacing: 0;
  line-height: 1.3;
}

/* Karta produktu i koszyk zostaja przy rozmiarach odebranych w Kamieniach
   4–6. Do motywu 1.4.0 theme.json wskazywal na nieistniejace zmienne
   (`--5xl` zamiast `--5-xl`), wiec naglowki dziedziczyly rozmiar tekstu
   i w takim ukladzie oba widoki zostaly zaakceptowane. Po poprawce
   zmiennych `inherit` odtwarza ten stan 1:1. Specyficznosc (0,0,2) celowo
   przebija tylko globalne `h1`/`h2`/`h3` z theme.json — kazda regula
   z klasa (tytul produktu od 1024 px, tytuly kafelkow, podsumowanie
   koszyka) dalej wygrywa. */
main:where(.s24-produkt) :is(h1, h2, h3),
:where(.woocommerce-cart) main h2 {
  font-size: inherit;
}

/* Tytul strony z theme.json ma `:root :where(.wp-block-post-title)`,
   czyli (0,1,0). */
:where(.woocommerce-cart) main .wp-block-post-title {
  font-size: inherit;
}

/* Karty w tresci stron informacyjnych: rowne odstepy wewnatrz. Tez poza
   warstwa — odstep miedzy blokami (blockGap) i margines h2 z globalnych
   stylow WP sa niewarstwowe i wygrywaly z regula .s24-karta. */
.s24-info__tresc .s24-karta > * {
  margin-top: 0;
  margin-bottom: 0;
}

.s24-info__tresc .s24-karta > * + * { margin-top: 10px; }

.s24-info__tresc .s24-karta > ul { padding-left: 1.25em; }

/* QA S6 (axe: link-in-text-block): linki w tekscie roznily sie od tekstu
   tylko kolorem. Podkreslenie w tresci, okruszkach i notce RODO formularza.
   K8: to samo w calym sklepie — okruszki listingu i karty produktu, atuty
   koszyka, zgoda w kasie, metadane i krotki opis karty oraz podpowiedz
   pola napisu (#b50d20 przy #141414 to 2,66:1, prog 3:1). */
.s24-info__tresc a:not(.s24f-przycisk),
.woocommerce-breadcrumb a,
.s24-koszyk-atuty a,
.wc-block-components-checkbox__label a,
.s24-produkt .product_meta a,
.s24-produkt .woocommerce-product-details__short-description a,
#s24-napis-projekt-opis a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* QA S6: numer infolinii w nawigacji jako cel dotykowy >= 44 px. */
.s24-info-nav__infolinia a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Polityka prywatnosci: cele przetwarzania jako lista zamiast tabeli
   w trzech kolumnach, nieczytelnej na telefonie. */
.s24-info__tresc .s24-cele {
  padding: 0;
  list-style: none;
}

.s24-info__tresc .s24-cele > li {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--s24-line);
  line-height: 1.6;
}

.s24-info__tresc .s24-cele > li:last-child { border-bottom: 1px solid var(--s24-line); }

/*
 * Strona glowna K7: wiecej pasow produktowych i jedna os 1200 px.
 *
 * Wszystkie sekcje stoja na osi naglowka (min(1200px, 100% - 32px)), zamiast
 * trzech roznych szerokosci (1360 px katalogu, 1200 px sekcji pelnych i
 * dostawy/atutow bez kontenera, ktore przy 1440 px dotykaly krawedzi okna).
 * Poza warstwami z tego samego powodu co reguly `.alignwide` wyzej.
 */
:root {
  --s24-home-os: min(1200px, calc(100% - 32px));
}

.s24-home-dzialy.alignwide,
.s24-home-polecane.alignwide,
.s24-home-motywy.alignwide,
.s24-home-dostawa.alignwide,
.s24-home-atuty.alignwide {
  box-sizing: border-box;
  width: var(--s24-home-os);
  max-width: none;
  margin-inline: auto;
}

.s24-home-pracownia__wewnatrz,
.s24-home-personalizacja__wewnatrz,
.s24-home-newsletter__wewnatrz {
  width: var(--s24-home-os);
}

/* Tekst hero zaczyna sie na tej samej osi co logo. */
.s24-home-hero {
  padding-inline: max(16px, calc((100% - 1200px) / 2));
}

/* Pasy produktowe stoja blizej siebie niz sekcje redakcyjne. */
.s24-home-polecane.s24-home-sekcja,
.s24-home-motywy.s24-home-sekcja {
  margin-block: clamp(48px, 6vw, 80px);
}

.s24-home-karuzela__opis {
  max-width: 52ch;
  margin: 10px 0 0;
  color: var(--s24-muted);
  font-size: 0.9375rem;
}

.s24-home-polecane .wc-block-components-product-image img {
  object-fit: contain;
  background: var(--s24-surface);
}

/* Dzialy: trzy kafle w jednym rzedzie o wspolnym kadrze 4:3. */
.s24-home-dzialy__siatka {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
}

.s24-home-dzial--glowny {
  grid-row: auto;
}

.s24-home-dzial__media {
  aspect-ratio: 4 / 3;
}

.s24-home-dzial__media img {
  height: 100%;
  object-fit: cover;
}

.s24-home-dzial__tresc {
  justify-content: start;
  padding: clamp(18px, 2vw, 28px);
}

.s24-home-dzial__nazwa {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

/* Pracownia: tekst i liczby obok siebie, bez pustej polowy ekranu. */
.s24-home-pracownia__wewnatrz {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
}

.s24-home-pracownia__liczby {
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
}

/* Popularne motywy: 5 × 2 kafle na desktopie, pasek przewijany na telefonie. */
.s24-home-motywy__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s24-home-motyw {
  display: flex;
  flex-direction: column;
  color: var(--s24-ink);
  text-decoration: none;
}

.s24-home-motyw__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
  background: var(--s24-surface);
}

.s24-home-motyw__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--s24-motion-fast) var(--s24-motion-easing);
}

.s24-home-motyw:hover .s24-home-motyw__media img {
  transform: scale(1.04);
}

.s24-home-motyw__nazwa {
  font-weight: 700;
  line-height: 1.3;
}

.s24-home-motyw:hover .s24-home-motyw__nazwa {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s24-home-motyw__licznik {
  margin-top: 2px;
  color: var(--s24-muted);
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .s24-home-motyw__media img {
    transition: none;
  }

  .s24-home-motyw:hover .s24-home-motyw__media img {
    transform: none;
  }
}

@media (max-width: 1099px) {
  .s24-home-motywy__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .s24-home-motywy__lista > li:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 960px) {
  .s24-home-pracownia__wewnatrz {
    grid-template-columns: 1fr;
  }

  .s24-home-pracownia__liczby {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 781px) {
  :root {
    --s24-home-os: calc(100% - 32px);
  }

  .s24-home-dzialy.alignwide,
  .s24-home-polecane.alignwide,
  .s24-home-motywy.alignwide,
  .s24-home-dostawa.alignwide,
  .s24-home-atuty.alignwide,
  .s24-home-pracownia__wewnatrz,
  .s24-home-personalizacja__wewnatrz,
  .s24-home-newsletter__wewnatrz {
    width: var(--s24-home-os);
  }

  .s24-home-hero {
    padding-inline: 16px;
  }

  .s24-home-polecane.s24-home-sekcja,
  .s24-home-motywy.s24-home-sekcja {
    margin-block: 44px;
  }

  /* Dwie i pol karty: wyraznie widac, ze pas sie przewija, a piec pasow
     nie robi z telefonu tasmy pelnoekranowych zdjec. */
  .s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel > .wc-block-product {
    flex-basis: 44%;
  }

  .s24-home-polecane .wc-block-product-template.is-product-collection-layout-carousel {
    gap: 12px;
  }

  .s24-home-polecane .wc-block-components-product-title {
    font-size: 0.875rem;
  }

  .s24-home-polecane .wc-block-components-product-price {
    font-size: 1rem;
  }

  .s24-home-karuzela__opis {
    display: none;
  }

  .s24-home-dzialy__siatka {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Na telefonie kafel dzialu to wiersz: miniatura obok nazwy. */
  .s24-home-dzial,
  .s24-home-dzial--glowny {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-rows: none;
  }

  .s24-home-dzial__media {
    aspect-ratio: 1 / 1;
  }

  .s24-home-dzial__tresc {
    justify-content: center;
    padding: 14px 16px;
  }

  .s24-home-dzial__opis {
    display: none;
  }

  .s24-home-motywy__lista {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-inline: -16px;
    padding: 0 16px 8px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
  }

  .s24-home-motywy__lista > li {
    flex: 0 0 36%;
    scroll-snap-align: start;
  }

  .s24-home-motywy__lista > li:nth-child(n + 9) {
    display: block;
  }

  .s24-home-pracownia__liczby {
    gap: 12px;
  }
}

@media (max-width: 781px) {
  /* Generowany uklad flex (verticalAlignment: bottom) wyrownywal krotki
     naglowek do srodka kolumny — tytul „wisial" na prawo od osi. */
  .s24-home-polecane .s24-home-naglowek.is-layout-flex {
    align-items: stretch;
  }
}

/*
 * Dostawa K7: kafle zamiast tabeli. Tabela miala min-width 620 px, wiec na
 * telefonie przewijala sie w bok i chowala kolumne „Pobranie", a na
 * desktopie jeden wiersz ciagnal sie przez cale 1200 px.
 */
.s24-home-dostawa__metody {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s24-home-dostawa__metoda {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-top: 2px solid var(--s24-ink);
  background: var(--s24-surface);
}

.s24-home-dostawa__nazwa {
  font-weight: 600;
  line-height: 1.3;
}

.s24-home-dostawa__cena {
  margin-top: auto;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.s24-home-dostawa__pobranie {
  color: var(--s24-muted);
  font-size: 0.8125rem;
}

@media (max-width: 1099px) {
  .s24-home-dostawa__metody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Telefon: lista — nazwa i pobranie po lewej, cena po prawej. */
@media (max-width: 781px) {
  .s24-home-dostawa__metody {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--s24-ink);
  }

  .s24-home-dostawa__metoda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
    align-items: center;
    padding: 14px 0;
    border-top: 0;
    border-bottom: 1px solid var(--s24-line-strong);
    background: transparent;
  }

  .s24-home-dostawa__cena {
    grid-row: 1 / 3;
    grid-column: 2;
    margin: 0;
    font-size: 1.125rem;
  }

  .s24-home-dostawa__pobranie {
    grid-column: 1;
  }
}

/*
 * Motywy K7b: jeden pasek malych kafli zamiast siatki 5 × 2. Przy 1200 px
 * kafle mialy ok. 230 px, czyli wiecej niz polowe szerokosci karty produktu,
 * a kadr `cover` powiekszal grafike do krawedzi — sekcja-nawigacja wygladala
 * wazniej niz pasy produktow pod nia.
 */
.s24-home-motywy__lista {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.s24-home-motywy__lista > li,
.s24-home-motywy__lista > li:nth-child(n + 9) {
  display: block;
  flex: 0 0 calc((100% - 9 * 12px) / 10);
  min-width: 104px;
  scroll-snap-align: start;
}

.s24-home-motyw__media {
  margin-bottom: 8px;
  padding: 8px;
}

.s24-home-motyw__media img {
  object-fit: contain;
}

.s24-home-motyw__nazwa {
  font-size: 0.875rem;
}

.s24-home-motyw__licznik {
  font-size: 0.75rem;
}

@media (max-width: 781px) {
  .s24-home-motywy__lista > li,
  .s24-home-motywy__lista > li:nth-child(n + 9) {
    flex-basis: 27%;
    min-width: 0;
  }
}

/*
 * Odstep pod naglowkiem motywow i dostawy. Reguly w warstwie `komponenty`
 * przegrywaly z nieuwarstwionym `margin-block-end: 0` ukladu WordPressa,
 * wiec ogonki „g" i „ą" dotykaly kafli.
 */
.s24-home-motywy > .s24-home-naglowek,
.s24-home-dostawa > .s24-home-dostawa__intro {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Atuty: WordPress doklada block-gap (margin-top) kazdemu atutowi poza
   pierwszym, wiec pierwszy naglowek stal wyzej od trzech pozostalych. */
.s24-home-atuty > .s24-home-atut {
  margin-block: 0;
}

/* Podklad hero idzie za osia tekstu. Mial stale min(800px, 72vw) od lewej
   krawedzi, a tekst od K7 zaczyna sie na osi 1200 px — przy 1920 px okna
   tekst startowal w 360 px i wychodzil poza ukos na zdjecie. */
@media (min-width: 782px) {
  .s24-home-hero__podklad {
    width: min(calc(max(16px, (100% - 1200px) / 2) + 720px), 76vw);
  }
}

/*
 * K7.2 — cele dotykowe >= 44 px. Tylko przy wskazniku `coarse`: na myszy
 * wyglad sie nie zmienia. Pole trafienia rosnie przez `min-height` / `min-width`
 * samego elementu (nie przez pseudoelement), wiec bramka K7 mierzy to, w co
 * faktycznie trafia palec. Nazwa produktu na karcie nie jest tu ruszana:
 * zdjecie karty prowadzi pod ten sam adres (WCAG 2.5.8, „odpowiednik”).
 */
@media (pointer: coarse) {
  .s24-footer__lista {
    gap: 0;
  }

  .s24-footer__lista a,
  a.s24-cookies-link,
  .s24-home-wszystkie a,
  a.s24-home-link,
  .s24-home-dostawa__dol a,
  .woocommerce-breadcrumb a,
  .product_meta .posted_in a,
  a.wc-block-customer-account__link,
  .wp-block-query-pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .woocommerce-breadcrumb a,
  .product_meta .posted_in a {
    vertical-align: middle;
  }

  .s24-nav-toggle {
    width: 44px;
  }

  .woocommerce-pagination a.page-numbers,
  .woocommerce-pagination span.page-numbers,
  .wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    width: 44px;
    height: 44px;
  }

  .wc-block-components-price-slider__amount,
  .wc-block-price-filter__amount {
    min-height: 44px;
  }
}

/*
 * Hamburger w bialym nagłówku telefonu. Poza warstwami, bo style blokow WordPressa
 * (pozycja i marginesy grup, `.is-layout-flex > *`) zawsze wygrywaja z `@layer`:
 * licznik pozycji byl zerowy pasek pod nagłówkiem, wiec ikona ladowala na zdjeciu.
 */
@media (max-width: 781px) {
  .s24-header > .s24-menu {
    position: static;
    margin: 0;
  }

  .s24-header-rzad > .s24-logo {
    flex: 1 1 96px;
    min-width: 0;
    margin-left: 52px;
  }

  .s24-header-rzad > .s24-szukaj,
  .s24-header-rzad > .s24-szukaj input {
    min-width: 0;
    max-width: 100%;
  }
}

/* Powiekszenie: czarny wzor na przezroczystym PNG znikalby na czarnym tle PhotoSwipe. */
.pswp__img:not(.pswp__img--placeholder) {
  background: var(--s24-surface, #fff);
}