/* ==========================================================================
 * SAMA MATCHA — sama-refactor.css
 * Komponenty / override Blocksy. Tokeny: sm-tokens.css; baza: sm-base.css (PHASE 1.5).
 * Tu: zero surowych hex / resting box-shadow — tylko var(--c-*) / var(--sp-*).
 * ========================================================================== */

/* Tokeny :root + aliasy legacy → assets/css/sm-tokens.css */

/* ==========================================================================
 * 1.2 TYPOGRAFIA — sanityzacja globalna
 * Fonty: sm-tokens.css (@font-face Inter 400/500/600 + Cormorant 500).
 * ========================================================================== */

/* ——— Body / hierarchia ——— */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--sm-ink);
}

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--sm-forest);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--sm-forest);
}
h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--sm-ink);
}

body, p, li { }
p, li { color: var(--sm-ink); }

/* Eyebrow — nadrzędny wzorzec nagłówka sekcji */
.sm-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--sm-moss);
}

/* Wagi: eliminacja 700/bold globalnie */
strong, b { font-weight: var(--fw-semibold); }

/* Czytelność długich tekstów */
.entry-content p, .entry-content li { max-width: 65ch; }
/* Akapity JAWNIE wyśrodkowane w edytorze (has-text-align-center): ich
   65ch-owy box też na środek — inaczej tekst centruje się w boxie
   dosuniętym do lewej (objaw: „wyśrodkowany" tekst na lewo od osi).
   Dotyczy WYŁĄCZNIE akapitów z decyzją redakcyjną „do środka" —
   zwykłe akapity body zostają przy lewej (rytm czytania). */
.entry-content p.has-text-align-center { margin-inline: auto; }

/* ==========================================================================
 * 1.3 GLOBALNY DE-BOXING (fundament quiet luxury)
 * ========================================================================== */
/* Twarde zdjęcie cieni/ramek — TYLKO oznaczone karty treści (nie UI chrome) */
.sm-flat,
ul.products li.product,
.wp-block-column.has-background,
.hero-card, .usp-bar, .faq-item {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

.sm-hairline-top { border-top: 1px solid var(--sm-hairline); }
.sm-band--cream  { background: var(--sm-cream); }

/* Utility rytmu pionowego sekcji (opt-in — przypisanie do sekcji w dalszych etapach) */
.sm-section { padding-block: var(--section-y); }

/* ==========================================================================
 * 1.4 SYSTEM RUCHU — scroll reveal + standard hoverów
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .sm-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-3) var(--ease-premium),
                transform var(--dur-3) var(--ease-premium);
    will-change: opacity, transform;
  }
  .sm-reveal.is-in { opacity: 1; transform: none; }
  .sm-reveal[data-delay="1"] { transition-delay: 80ms; }
  .sm-reveal[data-delay="2"] { transition-delay: 160ms; }
  .sm-reveal[data-delay="3"] { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
 * 1.5 PRZYCISKI — dwa warianty
 * ========================================================================== */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 2.25rem;
  font: var(--fw-semibold) .8125rem/1 var(--font-body);
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  border-radius: var(--radius-s); text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-premium),
              background-color var(--dur-1), color var(--dur-1),
              border-color var(--dur-1);
}
.sm-btn:hover  { transform: translateY(-2px); }
.sm-btn:active { transform: translateY(0); }
.sm-btn--primary { background: var(--sm-forest); color: var(--sm-cream); border: 0; }
.sm-btn--primary:hover { background: var(--sm-moss); color: var(--sm-cream); }
.sm-btn--ghost { background: transparent; color: var(--sm-forest);
                 border: 1px solid var(--sm-hairline); }
.sm-btn--ghost:hover { border-color: var(--sm-forest); }

/* Wariant tekstowy — animowane podkreślenie */
.sm-link { position: relative; text-decoration: none; }
.sm-link::after {
  content: ""; position: absolute; inset: auto 0 -4px 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-1) var(--ease-premium);
}
.sm-link:hover::after, .sm-link[aria-current]::after { transform: scaleX(1); }

/* Mapowanie CTA motywu/WooCommerce/Gutenberg na wzorzec .sm-btn--primary
   (usuwa zielone pigułki z cieniem; radius 2px, uppercase, brak cienia) */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 2.25rem;
  font: var(--fw-semibold) .8125rem/1 var(--font-body);
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  border-radius: var(--radius-s);
  background: var(--sm-forest); color: var(--sm-cream);
  border: 0; box-shadow: none;
  transition: transform var(--dur-1) var(--ease-premium),
              background-color var(--dur-1), color var(--dur-1),
              border-color var(--dur-1);
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  transform: translateY(-2px);
  background: var(--sm-moss); color: var(--sm-cream);
}

/* ==========================================================================
 * 2.0 PASEK INFORMACYJNY (.sm-infobar) — nad headerem
 *     Markup: functions.php → blocksy:header:before (NIE Top Row Blocksy).
 *     Pełne nieprzezroczyste tło — niezależne od Transparent Header.
 *     Rotacja: jeden komunikat, cross-fade opacity (JS w sama-motion.js).
 * ========================================================================== */
:root { --sm-infobar-h: 32px; }
@media (min-width: 768px) { :root { --sm-infobar-h: 36px; } }

.sm-infobar {
  /* Pełna alfa — zero dziedziczenia transparencji z headera. */
  background-color: var(--sm-forest);
  color: var(--sm-cream);                 /* kontrast vs forest — tokeny design-system */
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: .75rem;                      /* 12px — w widełkach 0.7–0.75rem */
  letter-spacing: .06em;
  line-height: 1.2;
  min-height: var(--sm-infobar-h);
  height: var(--sm-infobar-h);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  /* Nad Hero / absolutnym transparent headerem (~10000); pod admin-barem WP. */
  z-index: 10002;
  isolation: isolate;
  box-sizing: border-box;
}

.sm-infobar__inner {
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Grid stack: wszystkie komunikaty w jednej komórce → wysokość = najdłuższy
   (CLS = 0 od pierwszego painta, zanim JS wystartuje). */
.sm-infobar__viewport {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.sm-infobar__msg {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sm-cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: none;                       /* baza: reduced-motion / no-JS */
  z-index: 0;
}

.sm-infobar__msg.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sm-infobar__msg {
    transform: translateY(4px);           /* max dopuszczalny fade-up */
    transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
  }
  .sm-infobar__msg.is-active {
    transform: translateY(0);
  }
}

/* ==========================================================================
 * 2.1 HEADER — styl (Blocksy)
 * ========================================================================== */
/* Spoczynek: bez cienia i bez hairline. Po scrollu: hairline (--c-line), nie shadow. */
header#header,
.ct-header {
  box-shadow: none !important; /* override Blocksy sticky shadow — Quiet Luxury = hairline only */
  background-color: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease);
  --theme-link-initial-color: var(--c-muted);
  --theme-link-hover-color: var(--c-text);
  --theme-link-active-color: var(--c-text);
}
header#header.is-scrolled,
.ct-header.is-scrolled,
header#header.ct-sticky,
.ct-header.ct-sticky {
  border-bottom-color: var(--c-line);
}

/* Transparent only: aktywna pozycja = ten sam kolor co pozostałe (initial).
   Bez tego --theme-link-active-color:forest z reguły powyżej maluje
   „STRONA GŁÓWNA" na zielono na Hero. Sticky/opaque: data-transparent-row
   nie jest "yes" → forest active zostaje. Nie hardkodujemy bieli — bierzemy
   --theme-link-initial-color z tego samego <a> (Customizer transparent → default). */
.ct-header [data-transparent-row="yes"] .menu > li > .ct-menu-link {
  --theme-link-active-color: var(--theme-link-initial-color);
}

/* Transparent Header + infobar — wspólna przyczyna szczeliny i „zbyt niskiego” menu:
   #header jest w FLOW tuż pod .sm-infobar; absolute jest na [data-device][data-transparent]
   (top:0 względem #header = już pod paskiem). Stary offset top:var(--sm-infobar-h)
   podwójnie zaniżał menu (+36/+32 px nadmiaru) — usunięty.
   Złączony #header ma content-height:0, ale reguła powyżej malowała na nim
   background:var(--sm-white) + border-bottom:1px → 1px kremowa szczelina między
   paskiem a Hero. Neutralizacja TYLKO tego boxa (po regule 2.1, wyższa swoistość).
   Transparent Header w Customizerze nietknięty; bez [data-transparent] zostaje krem. */
.sm-has-infobar #header:has([data-transparent]) {
  background-color: transparent;
  border-bottom: 0;
}

/* Stała wysokość — bez animacji zmniejszania (shrink = layout shift).
   Docelowo: Blocksy → Header → Sticky: shrink OFF. */
.ct-header-inner { min-height: var(--header-h); }

/* Logo tekstowe "SAMA MATCHA" */
.ct-header .site-title,
.ct-header .site-title a {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--sm-forest);
  text-transform: none;
}

/* Linki menu: Inter 400, uppercase, ink-60; stan = kolor + podkreślenie (bez skoków wagi) */
.ct-header nav[class*="menu"] .ct-menu-link {
  position: relative;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-premium);
}

/* Podkreślenie top-level — ZASTĘPUJE wcześniejszy wariant (origin:left, dur-1/ease-premium)
   oraz Blocksy [data-menu=type-2] ::after (opacity/width, 2px). Jeden mechanizm na ::after.
   Markup: <li><a class="ct-menu-link">tekst[+toggle]</a> — toggle jest SIOSTRĄ w <a>,
   więc inset-end na has-children odejmuje szerokość strzałki (sam tekst).
   currentColor → działa na transparentnym Hero i jasnym headerze podstron. */
.ct-header nav[class*="menu"] .menu > li > .ct-menu-link::before {
  content: none; /* Blocksy type-2 też maluje ::before — wyłącz, zero podwójnych linii */
}
.ct-header nav[class*="menu"] .menu > li > .ct-menu-link::after {
  content: "";
  position: absolute;
  left: calc(var(--menu-items-spacing, 25px) / 2);
  right: calc(var(--menu-items-spacing, 25px) / 2);
  width: auto;          /* bije Blocksy --menu-indicator-width */
  margin: 0;
  opacity: 1;           /* bije Blocksy --menu-indicator-opacity: 0 — animujemy scaleX */
  bottom: calc(50% - 0.5em - 5px); /* ~5px pod baseline kapitalików w belce */
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: center; /* spec: od środka na boki */
  transition: transform 280ms ease-out;
  pointer-events: none;
}
/* SKLEP / WIĘCEJ: linia tylko pod tekstem, nie pod .ct-toggle-dropdown-desktop */
.ct-header nav[class*="menu"] .menu > li > .ct-menu-link:has(.ct-toggle-dropdown-desktop)::after {
  right: calc(
    var(--menu-items-spacing, 25px) / 2
    + var(--toggle-button-size, 24px)
    + var(--toggle-button-margin-start, 0.2em)
    + var(--toggle-button-margin-end, -8px)
  );
}
/* Hover + focus-visible (outline Blocksy zostaje — linia jest dodatkowym wskaźnikiem) */
.ct-header nav[class*="menu"] .menu > li:hover > .ct-menu-link::after,
.ct-header nav[class*="menu"] .menu > li > .ct-menu-link:focus-visible::after,
/* Stan aktywny — już istniał; ta sama geometria co hover (bez osobnej warstwy) */
.ct-header nav[class*="menu"] .menu > li[class*="current-menu-"] > .ct-menu-link::after,
.ct-header nav[class*="menu"] .menu > li:is(.current_page_item, .current_page_parent, .current_page_ancestor) > .ct-menu-link::after,
.ct-header nav[class*="menu"] .ct-menu-link[aria-current]::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .ct-header nav[class*="menu"] .menu > li > .ct-menu-link::after { transition: none; }
}

/* Ikony headera (lupa / konto / koszyk) — PAKIET A (A2).
   Blocksy renderuje wszystkie trzy jako <svg width="15" height="15"
   viewBox="0 0 15 15">. To ikony wypełnieniowe (fill), nie konturowe — spójna
   „grubość kreski" wynika więc z jednolitej skali, nie ze stroke-width.

   BŁĄD, KTÓRY TU BYŁ: selektor `[data-id="search"] > *` trafiał w sam <svg>,
   bo w przycisku szukania svg jest BEZPOŚREDNIM dzieckiem (w koncie i koszyku
   dzieckiem jest <a>). Lupa dostawała więc 44 px glifu zamiast 24 px glifu
   w 44 px celu — stąd dwukrotna różnica względem konta.
   Cel dotykowy należy do elementu klikalnego; glif ma swój własny rozmiar. */
header#header :is(
    [data-id="search"].ct-header-search,
    [data-id="account"] > a.ct-account-item,
    [data-id="cart"] > a.ct-cart-item
  ),
.ct-header-trigger {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sm-ink);
}
.ct-header .ct-header-trigger { color: var(--sm-ink); }

/* Logo to też link — na mobile miał 228×24, poniżej celu dotykowego. Wysokość
   dobiera padding, nie skala logotypu: obrazek zostaje 24 px. Wiersz headera
   ma ≥72 px, więc nic się nie przesuwa. */
header#header a.site-logo-container {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Jeden rozmiar glifu dla WSZYSTKICH ikon headera + wyrównanie w osi pionowej.
   Hamburger też — na wierszu mobilnym stoi obok koszyka, więc 18 px vs 24 px
   było tą samą niespójnością co lupa vs konto na desktopie. */
/* PAKIET N5 — glif koszyka tylko w triggerze (`.ct-cart-item`). Bez tego
   zawężenia ta sama reguła maluje SVG kosza *wewnątrz* `.ct-cart-content`
   i na nieprzezroczystym wierszu ikona usuwania dostaje `--c-text` na
   ciemnym tle panelu (zmierzone 1.01:1). */
header#header
  :is(
    [data-id="search"] svg,
    [data-id="account"] svg,
    [data-id="cart"] .ct-cart-item svg,
    [data-id="trigger"] svg
  ) {
  width: 24px;  /* cel dotykowy robi padding elementu klikalnego, nie glif */
  height: 24px;
  flex: 0 0 auto;
}

/* PAKIET G · 1 + PAKIET H · 0 — kolor ikon headera z JEDNEGO źródła na stan wiersza.
 *
 * Stan wyjściowy (zmierzony): trzy różne źródła koloru dla trzech ikon —
 * koszyk `--theme-icon-color: #FAF8F2` z Customizera, lupa
 * `var(--theme-palette-color-4)` z inline'u Blocksy dla wiersza przezroczystego,
 * konto bez żadnej wartości → domyślne #2d2d2d. Stąd „konto to plama, a koszyk
 * kontur”. Glif konta jest poprawnym konturem w obu regułach wypełnienia
 * (dowód: docs/shots/pakiet-g/probe-account-fillrule.png) — problemem był kolor.
 *
 * Zmienną ustawiamy NA svg, bo Blocksy definiuje ją na .ct-cart-item (bliżej
 * glifu niż wrapper); kolor idzie przez `color` + `fill: currentColor`.
 *
 * KOREKTA (pakiet H): wcześniejszy pomiar dał tło wiersza rgb(255,255,255)
 * i doprowadził do wniosku, że header leży na białym pasie, a nie na hero.
 * Pomiar był wykonany na nieustabilizowanej stronie (preloader, hero
 * jeszcze nie namalowane). Po dociągnięciu obrazów: wiersz ma
 * `background-color: rgba(255,255,255,0)`, a stos pod ikoną schodzi do
 * `IMG.sm-hero__img` / `SECTION.sm-hero` (rgb(46,46,46)) — header NAPRAWDĘ
 * leży na hero. Dlatego wracają dwa stany. */

/* Wiersz nieprzezroczysty (podstrony, sticky po przewinięciu): ciemny glif. */
header#header [data-row]:not([data-transparent-row="yes"])
  :is(
    [data-id="search"] svg,
    [data-id="account"] svg,
    [data-id="cart"] .ct-cart-item svg,
    [data-id="trigger"] svg
  ) {
  color: var(--c-text);
  --theme-icon-color: currentColor;
  fill: currentColor;
}

/* Wiersz przezroczysty (strona główna nad hero): glif w kolorze NAWIGACJI.
   Blocksy nadaje linkom tego wiersza `--theme-link-initial-color:
   var(--theme-palette-color-7)` — bierzemy tę samą zmienną, więc zmiana palety
   w Customizerze przestawi ikony i menu razem. Fallback: --c-paper. */
header#header [data-row][data-transparent-row="yes"]
  :is(
    [data-id="search"] svg,
    [data-id="account"] svg,
    [data-id="cart"] .ct-cart-item svg,
    [data-id="trigger"] svg
  ) {
  color: var(--theme-palette-color-7, var(--c-paper));
  --theme-icon-color: currentColor;
  fill: currentColor;
}

/* Licznik koszyka — realny selektor na tej instalacji to `.ct-dynamic-count-cart`
   (patrz docs/blocksy-selectors.md). Przy pustym koszyku badge „0" jest szumem,
   więc pokazujemy go dopiero od pierwszej pozycji. */
header#header [data-id="cart"] .ct-dynamic-count-cart {
  background: var(--sm-matcha);
  color: var(--sm-white);
  font: var(--fw-semibold) 11px/1 var(--font-body);
}
header#header [data-id="cart"] .ct-dynamic-count-cart[data-count="0"] {
  display: none;
}

/* ==========================================================================
 * 2.3b MINI-KOSZYK — dropdown `.ct-cart-content` (E · 5, N5)
 *
 * PAKIET N5, zmierzone w czterech kontekstach (1440):
 *   tło panelu JEST stałe (`--mini-cart-background-color: #202628` z inline
 *   Blocksy na `[data-id="cart"] .ct-cart-content`) — nie dziedziczy z
 *   przezroczystości headera. Zmienia się ikona usuwania: reguła koloru
 *   glifów headera celowała we WSZYSTKIE `svg` wewnątrz `[data-id="cart"]`,
 *   więc na nieprzezroczystym wierszu kosz w panelu dostawał `--c-text`
 *   (1.01:1). Na `/koszyk/` dochodził `.sm-cart-item__format { color:
 *   var(--c-muted) }` z arkusza koszyka — wariant gasł na ciemnym.
 *
 * Tokeny `--on-dark-*` jak w stopce: krotności cream na `--c-ink`, bez
 * dziedziczenia `--theme-*` z wiersza. Aliasy `--mc-*` zostają, żeby
 * starsze reguły (pasek dostawy) nie rozjechały się przy podmianie.
 * ========================================================================== */
:is(header#header, #offcanvas) .ct-cart-content {
  --on-dark:        var(--c-cream);
  --on-dark-muted:  color-mix(in srgb, var(--c-cream) 64%, transparent);
  --on-dark-faint:  color-mix(in srgb, var(--c-cream) 54%, transparent);
  --on-dark-field:  color-mix(in srgb, var(--c-cream) 38%, transparent);
  --on-dark-line:   color-mix(in srgb, var(--c-cream) 16%, transparent);

  --mc-text:  var(--on-dark);
  --mc-muted: var(--on-dark-muted);
  --mc-line:  var(--on-dark-line);

  /* Strefa przycisków — wyłącznie color-mix z --c-cream / --c-ink. */
  --mc-btn-fill:        color-mix(in srgb, var(--c-cream) 92%, var(--c-ink));
  --mc-btn-fill-hover:  var(--c-cream);
  --mc-btn-fill-active: color-mix(in srgb, var(--c-cream) 88%, var(--c-ink));
  --mc-btn-ghost-text:  color-mix(in srgb, var(--c-cream) 85%, transparent);
  --mc-btn-ghost-line:  color-mix(in srgb, var(--c-cream) 30%, transparent);
  --mc-btn-ghost-line-hover: color-mix(in srgb, var(--c-cream) 55%, transparent);
  --mc-btn-ghost-bg-hover:   color-mix(in srgb, var(--c-cream) 12%, var(--c-ink));
  --mc-btn-ghost-bg-active:  color-mix(in srgb, var(--c-cream) 18%, var(--c-ink));

  /* Twardo, nie przez zmienną Customizera — jeden wygląd w każdym kontekście. */
  --mini-cart-background-color: var(--c-ink);
  --mini-cart-divider-color: var(--on-dark-line);
  --theme-text-color: var(--on-dark);
  --theme-link-initial-color: var(--on-dark);
  --theme-link-hover-color: var(--on-dark);
  --theme-icon-color: currentColor;

  background: var(--c-ink);
  color: var(--on-dark);
  box-shadow: none; /* doktryna: zero cienia w spoczynku; kontrast tła wystarcza */

  max-width: calc(100vw - 2 * var(--sp-3));
  display: flex;
  flex-direction: column;
  max-height: min(70vh, calc(100dvh - var(--sp-6)));
  overflow: hidden;
}
:is(header#header, #offcanvas) .ct-cart-content[data-count="0"] {
  display: none;
}
/* Blocksy chowa dropdown w menu mobilnym (`#offcanvas .ct-cart-content`).
   `:is(header#header, #offcanvas)` ma swoistość (1,1,1) i przebiłoby
   `display: none` motywu — przywracamy schowanie, style przycisków zostają. */
#offcanvas.ct-panel .ct-cart-content {
  display: none;
}

/* Lista przewija się; suma i CTA zostają. `max-height: none` zdejmuje 40vh
   Blocksy — wysokość rządzi panel, nie sam <ul>. */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

:is(header#header, #offcanvas) .ct-cart-content ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  border-bottom: 1px solid var(--on-dark-line);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart li {
  grid-template-columns: var(--sp-5) 1fr;
  align-items: start;
  grid-column-gap: var(--sp-3);
}

:is(header#header, #offcanvas) .ct-cart-content :is(.woocommerce-mini-cart-item, .woocommerce-mini-cart__total, .woocommerce-mini-cart__empty-message) {
  color: var(--on-dark);
}

:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a:not(.remove) {
  color: var(--on-dark);
  text-decoration: none;
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a:not(.remove):hover,
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a:not(.remove):focus-visible {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(header#header, #offcanvas) .ct-cart-content a.product-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-inline-end: 44px; /* cel usuwania — wyjątek 44 px */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
:is(header#header, #offcanvas) .ct-cart-content .sm-cart-item__nazwa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Format musi wygrać z `.sm-cart-item__format { color: var(--c-muted) }`
   z sm-cart.css (ładowany na /koszyk/). */
:is(header#header, #offcanvas) .ct-cart-content .sm-cart-item__format,
:is(header#header, #offcanvas) .ct-cart-content .sm-cart-item__sztuka {
  display: block;
  margin-top: var(--sp-1);
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--on-dark-muted);
}

:is(header#header, #offcanvas) .ct-cart-content :is(.woocommerce-mini-cart-item .variation, .woocommerce-mini-cart-item .variation dt, .woocommerce-mini-cart-item .variation dd, .woocommerce-mini-cart__total strong) {
  color: var(--on-dark-muted);
}
:is(header#header, #offcanvas) .ct-cart-content .quantity,
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__total .amount {
  color: var(--on-dark);
}

/* Ikona usuwania: glif bez zmiany wymiarów; cel 44 px niesie ::before.
   Kolor = ten sam krem 85% co etykieta wtórna — nie --on-dark-muted (64%). */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  inset-inline-end: 0;
  color: var(--mc-btn-ghost-text);
  --theme-icon-color: currentColor;
  --theme-link-initial-color: currentColor;
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a.remove::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a.remove svg {
  width: 16px;
  height: 16px;
  color: inherit;
  fill: currentColor;
  --theme-icon-color: currentColor;
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a.remove:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: 3px;
  color: var(--c-cream);
}
@media (hover: hover) and (pointer: fine) {
  :is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart-item a.remove:hover {
    color: var(--c-cream);
  }
}

/* Miniatura 4:5. Proporcję inline ustawia `$blocksy_mini_cart_ratio` (PHP).
   Opakowanie z `height: auto` zdejmujemy `display: contents` — ten sam chwyt
   co w koszyku; bez `!important` na aspect-ratio. */
:is(header#header, #offcanvas) .ct-cart-content .ct-media-container {
  display: block;
  overflow: hidden;
  width: 100%;
  border-radius: var(--r-sm);
  background: var(--c-cream);
}
:is(header#header, #offcanvas) .ct-cart-content .ct-media-container > div {
  display: contents;
}
:is(header#header, #offcanvas) .ct-cart-content .ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pasek darmowej dostawy: dropdown już nosi kontrast tła, więc pasek
   dostaje sam hairline. */
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--on-dark-line);
  border-radius: 0;
  padding-inline: 0;
  color: var(--on-dark-muted);
  flex: 0 0 auto;
}
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping__label,
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping__msg {
  color: var(--on-dark-muted);
}
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping__label strong,
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping .amount {
  color: var(--on-dark);
}
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping__bar {
  background: var(--on-dark-line);
}
:is(header#header, #offcanvas) .ct-cart-content .sama-free-shipping__bar-fill {
  background: var(--c-sage);
}

:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__total {
  flex: 0 0 auto;
}

/* Przyciski: jedna kolumna, ten sam box (szerokość / 48 px / promień 2 px
   z globalnego kształtu). Hierarchia: primary zawsze głośniejszy niż ghost.
   Hover tylko na precyzyjnym wskaźniku; na ciemnym zawsze rozjaśnia. */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  border-top: 1px solid var(--on-dark-line);
  padding-top: var(--sp-3);
  flex: 0 0 auto;
  --theme-button-text-transform: none;
  --theme-button-font-size: inherit;
  --theme-button-font-weight: inherit;
  --theme-button-shadow: none;
  --theme-button-transform: none;
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 48px;
  min-height: 44px;
  text-transform: none;
  letter-spacing: 0;
  transform: none;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  --theme-button-text-transform: none;
  --theme-button-font-size: inherit;
  --theme-button-font-weight: inherit;
  --theme-button-letter-spacing: 0;
  --theme-button-min-height: 48px;
  --theme-button-padding: 0 var(--sp-4);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: 3px;
}
/* Reset sticky-hover z sm-base (primary → --c-ink, ghost → biała poświata,
   .sm-btn → translateY(-2px)). Prawdziwy hover jest w zapytaniu niżej. */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn:hover {
  transform: none;
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--primary:hover {
  background: var(--mc-btn-fill);
  border-color: var(--mc-btn-fill);
  color: var(--c-ink);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--ghost:hover {
  background: transparent;
  border-color: var(--mc-btn-ghost-line);
  color: var(--mc-btn-ghost-text);
}

/* Główny: krem 92% na tle panelu — zostawia zapas jasności na hover. */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--primary {
  background: var(--mc-btn-fill);
  color: var(--c-ink);
  border-color: var(--mc-btn-fill);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--primary:active {
  background: var(--mc-btn-fill-active);
  border-color: var(--mc-btn-fill-active);
  color: var(--c-ink);
  transform: translateY(1px);
}

/* Wtórny: ta sama geometria co primary, hairline i tekst w kremie. */
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--ghost {
  background: transparent;
  border: 1px solid var(--mc-btn-ghost-line);
  color: var(--mc-btn-ghost-text);
}
:is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--ghost:active {
  background: var(--mc-btn-ghost-bg-active);
  border-color: var(--mc-btn-ghost-line-hover);
  color: var(--c-cream);
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  :is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--primary:hover {
    background: var(--mc-btn-fill-hover);
    border-color: var(--mc-btn-fill-hover);
    color: var(--c-ink);
    transform: none;
  }
  :is(header#header, #offcanvas) .ct-cart-content .woocommerce-mini-cart__buttons .sm-btn--ghost:hover {
    background: var(--mc-btn-ghost-bg-hover);
    border-color: var(--mc-btn-ghost-line-hover);
    color: var(--c-cream);
    transform: none;
  }
}

/* Koszyk i kasa mają pełny widok — panel dubluje i zasłania podsumowanie.
   Ikona zostaje linkiem do /koszyk/. Swoistość bije `:hover [data-placement]`
   Blocksy (0,2,0). */
body.woocommerce-cart header#header .ct-header-cart .ct-cart-content,
body.woocommerce-checkout header#header .ct-header-cart .ct-cart-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
}

/* Mobile: panel otwiera klasa .is-sm-cart-open (sm-mini-cart.js).
   N5 chowało dropdown (`display: none`) i zostawiało touch → /koszyk/.
   Nie używamy .ct-header — ta klasa siedzi też na #offcanvas. */
@media (max-width: 999.98px) {
  header#header [data-device="mobile"] .ct-header-cart.is-sm-cart-open > .ct-cart-content:not([data-count="0"]) {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    right: 0;
    left: auto;
  }
}

/* ==========================================================================
 * 2.4 MENU MOBILNE (off-canvas Blocksy → pełnoekranowe, quiet luxury)
 * ========================================================================== */
#offcanvas .ct-panel-inner,
.ct-panel .ct-panel-inner {
  background: var(--c-cream);
  /* PHASE 1.5: cień panelu/drawera zostaje (nie kill) */
}

.mobile-menu .ct-menu-link {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-text, var(--c-paper));
}

/* --------------------------------------------------------------------------
 * PAKIET G · 3 — KONTRAST W PANELU OFF-CANVAS
 *
 * Realny stan (zweryfikowany w DOM, nie zgadywany):
 *   • tło panelu ustawia inline CSS Blocksy:
 *     `[data-header*="type-1"] #offcanvas .ct-panel-inner{background:rgba(18,21,25,.98)}`
 *     — swoistość (1,2,0) bije naszą regułę `--c-cream` wyżej, więc panel JEST
 *     ciemny i takim zostaje (zmiana tła dzień przed launchem to nie poprawka).
 *   • Blocksy podaje tylko kolor SPOCZYNKOWY:
 *     `[data-id="mobile-menu"]{--theme-link-initial-color:#ffffff}`.
 *     Hover, pozycja bieżąca i rodzic bieżącej spadają na globalne kolory
 *     linków motywu — dobrane pod JASNE tło. Stąd objaw: ciemny tekst na
 *     ciemnym panelu, w różnych pozycjach w różnych momentach.
 *
 * Dlatego ustawiamy KOMPLET stanów, dwiema drogami naraz i bez !important:
 *   1) zmienne Blocksy na `#offcanvas` (1,1,0 > 0,1,0 inline'u),
 *   2) jawny `color` na selektorach z id (odporne na zmianę nazw zmiennych
 *      między wersjami Blocksy).
 * Stan bieżący wyróżnia akcent + podkreślenie, nigdy pociemnienie.
 * Kontrast na tle rgba(18,21,25,.98): paper 15.3:1, sage 9.8:1, muted 6.9:1.
 * -------------------------------------------------------------------------- */
#offcanvas {
  --mm-text: var(--c-paper);
  --mm-accent: var(--c-sage);
  --mm-muted: rgba(255, 255, 255, 0.62);
}
#offcanvas [data-id="mobile-menu"],
#offcanvas .ct-panel-content {
  --theme-link-initial-color: var(--mm-text);
  --theme-link-hover-color: var(--mm-accent);
  --theme-link-active-color: var(--mm-accent);
  --theme-text-color: var(--mm-text);
  --theme-heading-color: var(--mm-text);
}

/* spoczynek + rodzic pozycji rozwijalnej (<span class="ct-sub-menu-parent">) */
#offcanvas .mobile-menu .ct-menu-link,
#offcanvas .mobile-menu .ct-sub-menu-parent > .ct-menu-link {
  color: var(--mm-text);
  text-decoration: none;
}

/* hover / focus — akcent, bez ruchu i bez pociemnienia */
#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible,
#offcanvas .mobile-menu .ct-sub-menu-parent > .ct-menu-link:hover {
  color: var(--mm-accent);
}

/* Pozycja bieżąca — akcent + podkreślenie.
   Uwaga na markup: pozycja z rozwijaniem ma <a> owinięte w
   <span class="ct-sub-menu-parent">, więc `li > a` jej NIE łapie. Stąd druga
   linia selektora — bez niej rodzic pozycji bieżącej zostawał bez wyróżnienia. */
#offcanvas .mobile-menu :is(.current-menu-item, .current_page_item) > .ct-menu-link,
#offcanvas .mobile-menu
  :is(.current-menu-item, .current_page_item)
  > .ct-sub-menu-parent
  > .ct-menu-link {
  color: var(--mm-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Rodzic / przodek pozycji bieżącej — sam akcent, bez podkreślenia.
   Podkreślenie zostaje zarezerwowane dla strony, na której faktycznie jesteś:
   akcent mówi „jesteś w tej gałęzi”, podkreślenie „to jest ta strona”. */
#offcanvas .mobile-menu
  :is(.current-menu-ancestor, .current-menu-parent, .current_page_ancestor, .current_page_parent)
  > .ct-menu-link,
#offcanvas .mobile-menu
  :is(.current-menu-ancestor, .current-menu-parent, .current_page_ancestor, .current_page_parent)
  > .ct-sub-menu-parent
  > .ct-menu-link {
  color: var(--mm-accent);
  text-decoration: none;
}

/* submenu — wyciszone, ale czytelne (6.9:1) */
#offcanvas .mobile-menu .sub-menu .ct-menu-link {
  color: var(--mm-muted);
}
#offcanvas .mobile-menu .sub-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .sub-menu .ct-menu-link:focus-visible {
  color: var(--mm-text);
}
#offcanvas .mobile-menu .sub-menu :is(.current-menu-item, .current_page_item) > .ct-menu-link {
  color: var(--mm-accent);
}

/* strzałka rozwijania submenu + przycisk zamknięcia */
#offcanvas .ct-toggle-dropdown-mobile,
#offcanvas .ct-toggle-close {
  color: var(--mm-text);
  --theme-icon-color: currentColor;
}
#offcanvas .ct-toggle-dropdown-mobile svg,
#offcanvas .ct-toggle-close svg {
  fill: currentColor;
}
#offcanvas .ct-toggle-dropdown-mobile:hover,
#offcanvas .ct-toggle-close:hover {
  color: var(--mm-accent);
}

/* ikony społecznościowe — Customizer podaje im palette-color-5 (ciemny) */
#offcanvas [data-id="socials"] .ct-social-box {
  --theme-icon-color: var(--mm-text);
  --background-color: rgba(255, 255, 255, 0.1);
  --background-hover-color: rgba(255, 255, 255, 0.22);
}
#offcanvas [data-id="socials"] .ct-social-box a {
  color: var(--mm-text);
}
#offcanvas [data-id="socials"] .ct-social-box a:hover {
  color: var(--mm-accent);
}

/* Wejście listy: stagger opacity + translateY, wyłącznie gdy panel .active
   (keyframes stosowane TYLKO przy otwarciu → zero ryzyka niewidocznego menu) */
@media (prefers-reduced-motion: no-preference) {
  #offcanvas.active .mobile-menu > li {
    animation: sm-menu-in var(--dur-2) var(--ease-premium) both;
  }
  #offcanvas.active .mobile-menu > li:nth-child(1) { animation-delay: 40ms; }
  #offcanvas.active .mobile-menu > li:nth-child(2) { animation-delay: 80ms; }
  #offcanvas.active .mobile-menu > li:nth-child(3) { animation-delay: 120ms; }
  #offcanvas.active .mobile-menu > li:nth-child(4) { animation-delay: 160ms; }
  #offcanvas.active .mobile-menu > li:nth-child(5) { animation-delay: 200ms; }
  #offcanvas.active .mobile-menu > li:nth-child(6) { animation-delay: 240ms; }
  #offcanvas.active .mobile-menu > li:nth-child(7) { animation-delay: 280ms; }
  #offcanvas.active .mobile-menu > li:nth-child(8) { animation-delay: 320ms; }
}
@keyframes sm-menu-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Hamburger: cel dotykowy 44×44, kolor ink (morph do X obsługuje natywnie Blocksy) */
.ct-header-trigger .ct-icon { color: var(--sm-ink); }

/* ==========================================================================
 * ==========================================================================
 * SEKCJA 3 — HERO SECTION & "O MATCHY"
 * Wzorce komponentów (.sm-*) do naniesienia na bloki Gutenberga
 * (pole "Zaawansowane → Dodatkowa klasa CSS"). Realne klasy strony głównej
 * (.hero-fullscreen / .hero-cta / .hero-badges) targetowane bezpośrednio.
 * ==========================================================================
 * ========================================================================== */

/* ==========================================================================
 * 3.3 GLOBALNY WZORZEC NAGŁÓWKA SEKCJI (eyebrow → h2 serif → subline)
 *     Stosuj wszędzie: Nasza Matcha, Dlaczego, Od cienia…, Sposoby…, O Matchy.
 * ========================================================================== */
.sm-section-head { margin-bottom: var(--space-8); }
.sm-section-head--center { text-align: center; }
.sm-section-head .sm-eyebrow { margin-bottom: var(--space-2); }
.sm-section-head h2 { margin: 0 0 var(--space-2); }
.sm-section-head__sub {
  font-size: var(--text-small);
  color: var(--sm-ink-60);
  max-width: 60ch;
}
.sm-section-head--center .sm-section-head__sub { margin-inline: auto; }

/* BUG 3.3 — zdublowany nagłówek "Nasza Matcha": ukryj tytuł wbudowany w
   komponent karuzeli (functions.php → .sama-carousel). Zostaje nagłówek sekcji.
   Alternatywa bez CSS: w shortcode [sama_matcha_carousel] podaj title="". */
.sama-carousel .sama-head__titles { display: none; }
.sama-carousel .sama-head { justify-content: flex-end; }

/* 3.3a WYŚRODKOWANIE tekstów sekcji custom-HTML strony głównej.
   Markup tych sekcji siedzi w bazie (bloki „Własny HTML"), więc atrybutu
   wyrównania nie da się wyklikać — CSS po WŁASNYCH, stabilnych klasach
   sekcji jest tu właściwym miejscem naprawy.
   – „Dlaczego SaMa Matcha" (h2.why-title): rodzic .why-head nie ustawia
     text-align → celujemy w sam tytuł (eyebrow/lead bez zmian).
   – .sq-lead / .sama-process__lead / .sama-trust__note: to <p> objęte capem
     65ch wyżej → box na środek; leadowi procesu trzeba też text-align
     (rodzic go nie centruje). margin-TOP/BOTTOM zostają z CSS sekcji.
   Swoistość celowo o oczko wyżej niż w <style> sekcji (te siedzą w treści,
   więc wygrywają kolejnością — musimy wygrać swoistością, bez !important). */
.sama-why .why-title { text-align: center; }
.sama-quiz .sq-head .sq-lead { margin-inline: auto; }  /* bije .sama-quiz .sq-lead{margin:0} */
.sama-process .sama-process__lead { text-align: center; margin-inline: auto; }
/* bije #sama-trustbar-final .sama-trust__note{margin:10px 0 0} */
#sama-trustbar-final .sama-trust__inner .sama-trust__note { margin-inline: auto; }

/* ==========================================================================
 * 3.1 HERO STRONY GŁÓWNEJ
 *     REALNY markup (zweryfikowany): blok STACKABLE
 *       .wp-block-stackable-hero.hero-fullscreen            ← korzeń (klasa z edytora)
 *         └ .stk-block-hero__content (inline: min-height:100vh, flex)
 *             └ .stk-inner-blocks    ← treść: heading / text / button-group / .hero-badges
 *     SZEROKOŚĆ: przez natywny align "Pełna szerokość" (.alignfull) ustawiony
 *     na bloku w edytorze — theme.json Blocksy (settings.layout) już to
 *     obsługuje. ŻADNYCH hacków 100vw / calc(50% - 50vw) — poprzednia próba
 *     liczyła margines względem wypaddingowanego kontenera Blocksy i się
 *     rozjeżdżała. CSS pilnuje tylko wysokości, tła i wnętrza.
 *     Selektory .sm-hero / .wp-block-cover__inner-container zostają dla
 *     heroesów opartych o Cover na podstronach.
 * ========================================================================== */
.hero-fullscreen, .sm-hero {
  position: relative;
  min-height: 100vh;                 /* fallback: przeglądarki bez jednostek sv* */
  min-height: 100svh;                /* Small Viewport Height — dokładnie ekran,
                                        bez skoków przy chowaniu paska adresu */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0;
}

/* Stackable generuje <style> z min-height:100vh !important na __content —
   wyrównujemy do svh. !important konieczny: przebija wygenerowaną regułę
   Stackable (też !important); wygrywamy specyficznością + kolejnością. */
body .hero-fullscreen .stk-block-hero__content {
  min-height: 100vh !important;
  min-height: 100svh !important;
  width: 100%;                  /* pełna szerokość flex-itemu w rodzicu (root hero = flex) */
  align-items: center;
  justify-content: center;
}

/* Media jako obraz pod treścią (LCP: <img> + fetchpriority w treści/wp_head) */
.hero-fullscreen .hero-media, .sm-hero .sm-hero__media,
.hero-fullscreen > img, .sm-hero > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Statyczny gradient kontrastowy — TYLKO stare .hero-fullscreen (Cover/Stackable).
   NIE na .sm-hero: produkcyjny hero (Custom HTML) ma własny opcjonalny scrim
   (.sm-hero__media::after, --sm-scrim-strength: 0). Motywowy ::after z
   rgba(12,18,14,.15→.45) przyciemniał/desaturował jaskrawą zieleń matchy. */
.hero-fullscreen::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-forest) 15%, transparent),
    color-mix(in srgb, var(--c-forest) 45%, transparent)
  );
}

/* Treść ponad gradientem (Cover) / ponad media (sm-hero) */
.hero-fullscreen > *:not(.hero-media):not(img),
.sm-hero > *:not(.sm-hero__media):not(img) {
  position: relative; z-index: 2;
}

/* WRAPPER TREŚCI HERO — wyśrodkowana kolumna o czytelnej szerokości.
   max-width na wrapperze, NIE na sekcji (tło zostaje edge-to-edge).
   Kolejność i odstępy przez flow + gap — zero pozycjonowania absolutnego,
   więc CTA i odznaki fizycznie nie mogą na siebie nachodzić. */
.hero-fullscreen .stk-block-hero__content > .stk-inner-blocks,
.hero-fullscreen .wp-block-cover__inner-container,
.hero-fullscreen__content,
.sm-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  position: relative;
  z-index: 2;
}

/* Stackable dokleja blokom hero wygenerowane marginesy z !important
   (button-group: 100px desktop / 45% mobile — plaster pod stare, absolutnie
   pozycjonowane odznaki). To ONE powodowały nakładanie się CTA i pigułek.
   !important konieczny (bije wygenerowany <style> Stackable); odstępy
   przejmuje gap wrappera powyżej. Zakres: WYŁĄCZNIE wnętrze hero. */
body .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > * {
  margin: 0 !important;
}

/* Pas odznak ODROBINĘ niżej — tylko tablet+desktop (mobile-first: baza bez
   zmian, poniżej 768px zostaje sam gap wrappera = var(--space-3)).
   Wartość ze skali projektu: var(--space-2) = 1rem (razem z gap 1.5rem daje
   2.5rem pod CTA — subtelnie, bez dramatu). Breakpoint 768 = istniejąca
   siatka projektu (480/768/1024/1280).
   !important konieczny: musi przebić reset `margin: 0 !important` powyżej. */
@media (min-width: 768px) {
  body .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > .hero-badges {
    margin-top: var(--space-2) !important;
  }
}

/* H1 — biały, serif 300 */
.hero-fullscreen h1, .sm-hero h1 {
  color: var(--c-paper);
  font-weight: var(--fw-light);
}
/* Subline */
.hero-fullscreen .sm-hero__subline, .sm-hero .sm-hero__subline {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 1.125rem;
  line-height: var(--lh-body);
  max-width: 46ch;
  color: var(--c-paper);
  opacity: .92;
}

/* CTA "Kup Matchę" — wariant inwersyjny (jasne tło na ciemnym hero) */
.hero-fullscreen .hero-cta, .sm-hero .sm-btn--hero {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 3rem;
  font: var(--fw-semibold) .8125rem/1 var(--font-body);
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  border-radius: var(--radius-s); text-decoration: none;
  background: var(--sm-cream); color: var(--sm-forest);
  border: 0; box-shadow: none;
  transition: transform var(--dur-1) var(--ease-premium),
              background-color var(--dur-1), color var(--dur-1);
}
.hero-fullscreen .hero-cta:hover, .sm-hero .sm-btn--hero:hover {
  transform: translateY(-2px);
  background: var(--sm-white); color: var(--sm-forest);
}

/* 3.1 — PREMIUM BADGES: pas zaufania jako minimalistyczne pigułki
   (subtelny glassmorphism: 10% bieli + obrys 20% bieli + blur 8px).
   Koniec „zielonego na zielonym” — czysty biały tekst, matowy szklany sznyt.
   Obejmuje wszystkie warianty markupu: .hero-badges / .sm-trust-line /
   .sm-hero__trust. Kaskadowy reveal pigułek definiuje sekcja CINEMATIC niżej. */
.hero-badges, .sm-hero__trust, .sm-trust-line {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem;
  text-align: center;
}
.hero-badges .badge,
.sm-hero__trust > *,
.sm-trust-line > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                                  /* cel dotykowy (5.3) */
  margin: 0 !important;
  padding: 0 1.375rem !important;
  background: color-mix(in srgb, var(--c-paper) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--c-paper) 20%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: .875rem;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--c-paper) !important;
  text-shadow: none;
  white-space: nowrap;
}
/* Wnętrza pigułek: czysta biel także na zagnieżdżonych spanach/linkach */
.hero-badges .badge *,
.sm-hero__trust > * *,
.sm-trust-line > * * { color: var(--c-paper) !important; }
/* Ikony/✓/kropki w pigułkach = szum — tekst wystarczy */
.hero-badges .badge :is(svg,img,i,.dot),
.sm-hero__trust > * :is(svg,img,i,.dot),
.sm-trust-line > * :is(svg,img,i,.dot) { display: none; }
/* Belt: stary hero-badges.js wstrzykiwał INLINE opacity:0 + blur(2px) + pulse.
   Skrypt nie jest już enqueue'owany, ale gdyby optymalizator/cache go wskrzesił —
   !important w arkuszu bije style inline (bez !important) i pigułki nigdy
   nie zostaną rozmyte ani niewidoczne. */
.hero-badges .badge {
  filter: none !important;
  -webkit-filter: none !important;
}

/* ==========================================================================
 * 3.1 CINEMATIC REVEAL — czyste keyframes CSS, ZERO zależności od JS.
 *     (Poprzednia mechanika body.is-loaded chowała treść do czasu wykonania
 *     sama-motion.js — gdy skrypt się nie załadował, hero zostawał pusty.)
 *     animation-fill-mode: backwards = element ukryty tylko podczas delay,
 *     po animacji wraca do NATURALNYCH stylów → hover CTA działa bez lagów,
 *     a przy prefers-reduced-motion animacje po prostu nie istnieją (treść
 *     widoczna od 1. klatki). Sekwencja: H1 → subline → CTA → pigułki
 *     kaskadowo (+100 ms każda), krzywa var(--ease-premium).
 * ========================================================================== */

/* KILL BLUR — media hero ostre od 1. klatki (LQIP/lazy-pluginy). Celowo NIE
   globalnie na .wp-block-cover img: karty „Sposoby na Matchę" mają własny
   efekt hover-darken, którego nie wolno im zdejmować. */
.hero-fullscreen > img, .sm-hero > img,
.hero-fullscreen .hero-media, .sm-hero .sm-hero__media,
.hero-fullscreen > .wp-block-cover__image-background,
.sm-hero > .wp-block-cover__image-background {
  filter: none !important;
  -webkit-filter: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes sm-hero-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes sm-hero-zoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  /* Tło typu <img> (heroesy Cover na podstronach): kinowy zoom-out.
     Stackable hero ma tło jako background-image — zoom celowo pomijamy
     (transform na kontenerze poruszyłby też treść). */
  .hero-fullscreen > img, .sm-hero > img,
  .hero-fullscreen .hero-media, .sm-hero .sm-hero__media,
  .hero-fullscreen > .wp-block-cover__image-background,
  .sm-hero > .wp-block-cover__image-background {
    animation: sm-hero-zoom 1.8s var(--ease-premium) backwards;
  }

  /* TREŚĆ HERO: wyłanianie z dołu, sekwencyjnie wg kolejności w DOM */
  .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > *,
  .hero-fullscreen .wp-block-cover__inner-container > *,
  .hero-fullscreen__content > *,
  .sm-hero .wp-block-cover__inner-container > * {
    animation: sm-hero-in .9s var(--ease-premium) backwards;
  }
  .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > :nth-child(1),
  .hero-fullscreen .wp-block-cover__inner-container > :nth-child(1),
  .hero-fullscreen__content > :nth-child(1),
  .sm-hero .wp-block-cover__inner-container > :nth-child(1) { animation-delay: 100ms; }

  .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > :nth-child(2),
  .hero-fullscreen .wp-block-cover__inner-container > :nth-child(2),
  .hero-fullscreen__content > :nth-child(2),
  .sm-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 250ms; }

  .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > :nth-child(3),
  .hero-fullscreen .wp-block-cover__inner-container > :nth-child(3),
  .hero-fullscreen__content > :nth-child(3),
  .sm-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 400ms; }

  /* KONTENER pigułek nie animuje się jako całość — kaskadę robią pojedyncze
     pigułki (reguła niżej wygrywa kolejnością w kaskadzie). */
  .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > .hero-badges,
  .hero-fullscreen .wp-block-cover__inner-container > :is(.hero-badges, .sm-trust-line, .sm-hero__trust),
  .hero-fullscreen__content > :is(.hero-badges, .sm-trust-line, .sm-hero__trust),
  .sm-hero .wp-block-cover__inner-container > :is(.hero-badges, .sm-trust-line, .sm-hero__trust) {
    animation: none;
  }

  /* PIGUŁKI — kaskada: translateY(20px)→0 + opacity 0→1, start po CTA,
     każda kolejna +100 ms. !important na animation: belt przeciw inline'om
     starego hero-badges.js (styl inline przegrywa z !important arkusza). */
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > * {
    animation: sm-hero-in .9s var(--ease-premium) backwards !important;
  }
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > :nth-child(1) { animation-delay: 550ms !important; }
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > :nth-child(2) { animation-delay: 650ms !important; }
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > :nth-child(3) { animation-delay: 750ms !important; }
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > :nth-child(4) { animation-delay: 850ms !important; }
  :is(.hero-fullscreen, .sm-hero) :is(.hero-badges, .sm-trust-line, .sm-hero__trust) > :nth-child(5) { animation-delay: 950ms !important; }
}

/* ==========================================================================
 * 3.2 PAS USP (de-boxing: goły rząd + hairline góra/dół)
 * ========================================================================== */
.sm-usp, .usp-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-6);
  /* !important — bije globalny de-boxing `.usp-bar { border:0 !important }` z 1.3 */
  border-top: 1px solid var(--sm-hairline) !important;
  border-bottom: 1px solid var(--sm-hairline) !important;
}
.sm-usp__item { display: flex; flex-direction: column; gap: .5rem; }
.sm-usp__item :is(svg, img) { width: 24px; height: 24px; color: var(--sm-moss); }
.sm-usp__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: .875rem; }
.sm-usp__desc  { font-size: .8125rem; color: var(--sm-ink-60); }

/* ==========================================================================
 * 3.4 QUIZ "Nie wiesz od czego zacząć?"
 * ========================================================================== */
/* Przycisk "Uruchom quiz" — pełny kontrast (zdjęcie wyblakłego "disabled" wyglądu) */
.sm-quiz-launch,
.sm-quiz .wp-block-button__link {
  background: var(--sm-forest) !important;
  color: var(--sm-cream) !important;
  opacity: 1 !important;
  filter: none !important;
  border: 0 !important;
}
.sm-quiz-launch:hover,
.sm-quiz .wp-block-button__link:hover {
  background: var(--sm-moss) !important;
  transform: translateY(-2px);
}

/* Trzy kafle wyboru — struktura otwarta, bez obrysów/teł */
.sm-quiz-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.sm-quiz-tile {
  display: flex; flex-direction: column; gap: .5rem;
  width: 100%; min-height: 44px;
  text-align: left; cursor: pointer;
  background: transparent; border: 0; box-shadow: none;
  padding: var(--space-3) 0;
  transition: transform var(--dur-1) var(--ease-premium);
}
.sm-quiz-tile:hover { transform: translateY(-4px); }
.sm-quiz-tile :is(svg, img) { width: 24px; height: 24px; color: var(--sm-moss); }
.sm-quiz-tile__title { font-family: var(--font-body); font-weight: var(--fw-semibold); }
.sm-quiz-tile__desc  { color: var(--sm-ink-60); }

/* ==========================================================================
 * 3.5 "DLACZEGO" (korzyści 2×2) + "OD CIENIA DO MISECZKI" (kroki 1–4)
 * ========================================================================== */
.sm-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-12);
  row-gap: var(--space-10);
}
.sm-benefit { text-align: left; }
.sm-benefit :is(svg, img) { width: 28px; height: 28px; color: var(--sm-moss); margin-bottom: var(--space-2); display: block; }
.sm-benefit__title { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-h3); margin-bottom: .5rem; }
.sm-benefit__desc  { color: var(--sm-ink-60); }

/* Kroki procesu — numer serif 300, 4rem, sage (bez kafli/kółek) */
.sm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.sm-step { text-align: left; }
.sm-step__num {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: 4rem; line-height: 1; color: var(--sm-sage);
  display: block; margin-bottom: var(--space-2);
}
.sm-step__title { font-family: var(--font-body); font-weight: var(--fw-semibold); margin-bottom: .5rem; }
.sm-step__desc  { color: var(--sm-ink-60); }
.sm-italic { font-family: var(--font-display); font-style: italic; }

/* ==========================================================================
 * 3.6 "JAK PRZYGOTOWAĆ IDEALNĄ MATCHĘ"
 * ========================================================================== */
/* Segmented control (Tradycyjnie/Latte) — thumb przesuwany transformem */
.sm-segmented {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--sm-hairline);
  border-radius: 999px;
  padding: var(--sp-1);
  isolation: isolate;
}
.sm-segmented__thumb {
  position: absolute; z-index: -1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--sm-seg-count, 2));
  background: var(--sm-forest);
  border-radius: 999px;
  transform: translateX(calc(var(--sm-seg-index, 0) * 100%));
  transition: transform var(--dur-2) var(--ease-premium);
}
.sm-segmented__btn {
  min-height: 44px; padding: 0 1.5rem;
  background: transparent; border: 0; cursor: pointer;
  font: var(--fw-semibold) .8125rem/1 var(--font-body);
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  color: var(--sm-ink-60);
  transition: color var(--dur-1) var(--ease-premium);
}
.sm-segmented__btn[aria-selected="true"] { color: var(--sm-cream); }

/* Kroki 1–3 — lista z hairline + cienki okrąg numeru 32px */
.sm-brew-steps { list-style: none; margin: 0; padding: 0; counter-reset: brew; }
.sm-brew-steps > li {
  counter-increment: brew;
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding-block: var(--space-3);
  border-top: 1px solid var(--sm-hairline);
}
.sm-brew-steps > li::before {
  content: counter(brew);
  flex: 0 0 32px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sm-sage); border-radius: 999px;
  font: var(--fw-semibold) .8125rem/1 var(--font-body); color: var(--sm-sage);
}

/* Ramka mediów / placeholder (zero CLS) */
.sm-media-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--sm-cream-deep);
}
.sm-media-frame > img { width: 100%; height: 100%; object-fit: cover; }

/* Kropki paginacji karuzeli */
.sm-dots { display: flex; gap: 10px; align-items: center; }
.sm-dots button, .sm-dots .sm-dot {
  width: 44px; height: 44px; padding: 0;         /* cel dotykowy */
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sm-dots .sm-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--sm-forest); opacity: .4;
  transition: opacity var(--dur-1) var(--ease-premium);
}
.sm-dots .sm-dot[aria-current="true"]::before,
.sm-dots .sm-dot.is-active::before { opacity: 1; }

/* Kafle "Sposoby na Matchę" — overlay statyczny, tytuł na dole, hover scale */
.sm-way {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-m);
  overflow: hidden;
  text-decoration: none;
}
.sm-way > img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease-premium); }
.sm-way::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    color-mix(in srgb, var(--c-forest) 55%, transparent)
  );
}
.sm-way__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  align-items: flex-start;
}
.sm-way__title { color: var(--c-paper); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--text-h3); }
.sm-way .sm-btn--ghost { color: var(--c-paper); border-color: color-mix(in srgb, var(--c-paper) 60%, transparent); }
.sm-way .sm-btn--ghost:hover { border-color: var(--c-paper); }
.sm-way:hover > img { transform: scale(1.04); }

/* „SPOSOBY NA MATCHĘ" — wykończenie siatki 4 kart (klasa opt-in .sm-ways,
   nadawana w edytorze NA ZEWNĘTRZNYM bloku Columns przez „Dodatkowa klasa
   CSS"). Strukturę siatki (4 równe kolumny, zjazd 2/1) robi blok w edytorze;
   CSS pilnuje tylko RÓWNYCH WYSOKOŚCI kart: jednolity kadr przez aspect-ratio
   na coverach — selektory po stabilnych klasach Stackable/core, nie po
   autogenerowanych hashach stk-xxx. */
.sm-ways .stk-row { align-items: stretch; }
.sm-ways .wp-block-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;                /* aspect-ratio rządzi, nie domyślne 430px covera */
  border-radius: var(--radius-m);
  overflow: hidden;
}
.sm-ways .wp-block-cover .wp-block-cover__image-background { object-fit: cover; }

/* ==========================================================================
 * 3.7 PODSTRONA "O MATCHY" (+ współdzielone: O nas)
 * ========================================================================== */
/* Hero O Matchy — grid 6/6 tekst | media */
.sm-about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
.sm-about-hero__media { aspect-ratio: 3 / 2; background: var(--sm-cream-deep); border-radius: var(--radius-m); overflow: hidden; }
.sm-about-hero__media > img { width: 100%; height: 100%; object-fit: cover; }

/* Pasek kotwic — sticky pod headerem, linki .sm-link */
.sm-anchor-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--sm-white);
  border-bottom: 1px solid var(--sm-hairline);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding-block: .75rem;
}
.sm-anchor-nav a {
  min-height: 44px; display: inline-flex; align-items: center;
  font: var(--fw-semibold) .8125rem/1 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sm-ink-60); text-decoration: none;
  transition: color var(--dur-1) var(--ease-premium);
}
.sm-anchor-nav a:hover, .sm-anchor-nav a[aria-current] { color: var(--sm-forest); }
/* Offset kotwic pod sticky (header + pasek) */
.sm-anchor-target { scroll-margin-top: calc(var(--header-h) + 76px); }

/* Karty "Czym jest matcha?" (3) — hairline top zamiast ramek */
.sm-cards-hairline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap);
}
.sm-cards-hairline > * {
  border-top: 1px solid var(--sm-hairline);
  padding-top: var(--space-4);
  background: transparent; box-shadow: none; border-radius: 0;
}

/* "Korzyści zdrowotne" (6) — grid 3×2, de-box */
.sm-benefits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-8); row-gap: var(--space-6);
}
.sm-benefits-grid > * { background: transparent; box-shadow: none; border: 0; }
.sm-benefits-grid .sm-benefit__title,
.sm-benefits-grid h3 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 1.0625rem; }
.sm-disclaimer { font-size: .8125rem; color: var(--sm-ink-60); max-width: 70ch; }

/* "Regiony upraw" — grid 5/7 */
.sm-regions { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: center; }
.sm-regions__media { aspect-ratio: 3 / 2; border-radius: var(--radius-m); overflow: hidden; background: var(--sm-cream-deep); }
.sm-regions__media > img { width: 100%; height: 100%; object-fit: cover; }

/* "Jak parzyć matchę?" — 2 kolumny bez kart, separator hairline na drugiej */
.sm-brew-guide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (min-width: 1024px) {
  .sm-brew-guide > :nth-child(2) {
    border-left: 1px solid var(--sm-hairline);
    padding-left: var(--space-8);
  }
}

/* FAQ — refaktor natywnego <details> (bez markera, bez boxów, +/× ikona) */
.sm-faq details {
  /* !important — bije globalny de-boxing `.faq-item { border:0 !important }` z 1.3 */
  border-top: 1px solid var(--sm-hairline) !important;
  background: transparent; border-radius: 0; box-shadow: none;
}
.sm-faq details:last-of-type { border-bottom: 1px solid var(--sm-hairline) !important; }
.sm-faq summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: 1.375rem; padding-inline-end: 2rem;
  min-height: 44px;
  font: var(--fw-semibold) 1rem/1.3 var(--font-body); color: var(--sm-ink);
}
.sm-faq summary::-webkit-details-marker { display: none; }
/* A5 — pierścień focusu na wiersz akordeonu.
 * Globalna reguła z sm-base.css (`outline-offset: 3px; border-radius: --r-sm`)
 * rysowała wokół pełnej szerokości wiersza zaokrągloną pigułkę, która czytała
 * się jak ramka karty i łamała listę rozdzieloną hairline'ami. Obwódka wchodzi
 * do wnętrza wiersza i traci promień: to wskaźnik pozycji, nie powierzchnia. */
.sm-faq summary:focus-visible {
  outline: 2px solid var(--sm-ink);
  outline-offset: -2px;
  border-radius: 0;
}
/* Aktywacja wskaźnikiem nie zapala obwódki (klasę ustawia sama-motion.js). */
.sm-faq summary.is-pointer-activated:focus-visible {
  outline: none;
}
.sm-faq summary::after {
  content: "+"; position: absolute; inset-inline-end: 0;
  font-weight: var(--fw-regular); font-size: 16px; line-height: 1;
  color: var(--sm-moss);
  transition: transform var(--dur-1) var(--ease-premium);
}
.sm-faq details[open] summary::after { transform: rotate(45deg); }
/* Animowane rozwijanie (wrapper .sm-faq__body > .sm-faq__inner dokłada sama-motion.js) */
.sm-faq__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-premium);
}
.sm-faq details[open] .sm-faq__body { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .sm-faq__body { transition: none; } }
.sm-faq__inner {
  overflow: hidden;
  padding-bottom: 1.375rem; max-width: 65ch;
  color: var(--sm-ink-60);
}
/* Fallback bez JS: natywna treść <details> (nieopakowana) */
.sm-faq details > *:not(summary):not(.sm-faq__body) {
  padding-bottom: 1.375rem; max-width: 65ch;
  color: var(--sm-ink-60);
}

/* "O nas" / karta "Kontakt" — de-box + przyciski ghost */
.sm-contact { background: transparent; box-shadow: none; border: 0; }
.sm-contact .sm-btn--ghost, .sm-contact-actions .sm-btn--ghost { min-height: 44px; }

/* Placeholder ilustracji marki (O nas) */
.sm-brand-illustration { aspect-ratio: 4 / 3; background: var(--sm-cream-deep); border-radius: var(--radius-m); }

/* Utility: usunięcie osieroconego/pustego elementu wskazanego ręcznie */
.sm-hide { display: none !important; }

/* ==========================================================================
 * 3.x RESPONSYWNOŚĆ Sekcji 3 (drobne — pełna logika w Sekcji 5)
 * ========================================================================== */
@media (max-width: 767.98px) {
  .sm-usp, .usp-bar        { grid-template-columns: repeat(2, 1fr); }
  .sm-quiz-tiles           { grid-template-columns: 1fr; }
  .sm-benefits             { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--space-8); }
  .sm-steps                { grid-template-columns: 1fr; gap: var(--space-6); }
  .sm-about-hero,
  .sm-regions,
  .sm-brew-guide           { grid-template-columns: 1fr; gap: var(--space-6); }
  .sm-cards-hairline,
  .sm-benefits-grid        { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * ==========================================================================
 * SEKCJA 4 — "/przepisy-z-matcha" GRID & PRODUCT CARDS
 * Klasy .sm-* nanosisz na bloki Gutenberga (Dodatkowa klasa CSS).
 * Karty produktów targetują natywny markup WooCommerce (ul.products li.product).
 * ==========================================================================
 * ========================================================================== */

/* ==========================================================================
 * 4.2 NAGŁÓWEK STRONY /przepisy-z-matcha (zrzut 8)
 * ========================================================================== */
.sm-recipes-intro { text-align: center; margin-bottom: var(--space-8); }
.sm-recipes-intro h1 { font-family: var(--font-display); font-weight: var(--fw-light); }
.sm-recipes-intro__desc { max-width: 60ch; margin-inline: auto; color: var(--sm-ink-60); }

/* Jeden rząd filtrów + osobny cichy link "FAQ ↓" po prawej */
.sm-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.sm-filters__faq { margin-inline-start: auto; }

/* Chip filtra — stan aktywny BEZ zmiany rozmiaru/wagi (zero shiftu) */
.sm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.25rem;
  border: 1px solid var(--sm-hairline); border-radius: 999px;
  background: transparent; cursor: pointer;
  font: var(--fw-regular) .875rem/1 var(--font-body); color: var(--sm-ink);
  transition: background-color var(--dur-1) var(--ease-premium),
              color var(--dur-1) var(--ease-premium),
              border-color var(--dur-1) var(--ease-premium);
}
.sm-chip:hover { border-color: var(--sm-forest); }
.sm-chip[aria-pressed="true"], .sm-chip.is-active {
  background: var(--sm-forest); color: var(--sm-cream); border-color: var(--sm-forest);
}

/* CTA "Kup matchę do przepisów" — przeniesione pod siatkę (opt-in wrapper) */
.sm-recipes-cta { text-align: center; margin-top: var(--space-10); }

/* ==========================================================================
 * 4.3 KARTY PRZEPISÓW — SIATKA (zrzuty 8–9)
 * ========================================================================== */
.sm-recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
.sm-recipe {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0;                         /* figure reset */
  background: transparent; border: 0; box-shadow: none;
}
.sm-recipe__media {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m);
  background: var(--sm-cream-deep);
}
.sm-recipe__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-3) var(--ease-premium);
}
.sm-recipe:hover .sm-recipe__media img { transform: scale(1.03); }
.sm-recipe__title {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 1.5rem; line-height: 1.15;
  min-height: 2lh;                   /* równe rzędy — rezerwa na 2 linie */
  margin: 0;
}
.sm-recipe__tags { font: var(--fw-regular) .8125rem/1.4 var(--font-body); color: var(--sm-ink-60); }
.sm-recipe__link { align-self: flex-start; }

/* Cała karta klikalna (stretched-link) — nadpisuje animowane podkreślenie .sm-link
   wyłącznie w obrębie karty; nie zagnieżdżaj drugiego <a> */
.sm-recipe .sm-link::after {
  content: ""; position: absolute; inset: 0;
  height: auto; background: transparent; transform: none;
}

/* Stan ukryty przy filtrowaniu (JS ustawia hidden) */
.sm-recipe[hidden] { display: none !important; }

/* ==========================================================================
 * 4.4 PEŁNE BLOKI PRZEPISÓW (zrzut 9, np. "Karmelowa Matcha")
 * ========================================================================== */
.sm-recipe-block {
  border-top: 1px solid var(--sm-hairline);
  padding-block: var(--space-12);
  scroll-margin-top: calc(var(--header-h) + 24px);
  background: transparent; box-shadow: none; border-radius: 0;
}
.sm-recipe-block__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-10); }
.sm-recipe-block__media {
  aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden;
  background: var(--sm-cream-deep);
}
.sm-recipe-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1024px) {
  .sm-recipe-block__media { position: sticky; top: calc(var(--header-h) + 24px); }
}
.sm-recipe-block h2 { font-family: var(--font-display); }
.sm-recipe-block__meta { font: var(--fw-regular) .875rem/1.4 var(--font-body); color: var(--sm-ink-60); }

/* Składniki — lista z hairline; ilości w <strong> (600, globalnie) */
.sm-ingredients { list-style: none; margin: 0; padding: 0; }
.sm-ingredients li { padding-block: .5rem; }
.sm-ingredients li + li { border-top: 1px solid var(--sm-hairline); }

/* Przygotowanie — ol z custom counterem (numer Inter 600, sage) */
.sm-preparation { list-style: none; margin: 0; padding: 0; counter-reset: prep; }
.sm-preparation > li {
  counter-increment: prep;
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin-bottom: .75rem;
}
.sm-preparation > li::before {
  content: counter(prep);
  flex: 0 0 auto;
  font: var(--fw-semibold) 1rem/1.5 var(--font-body); color: var(--sm-sage);
}

/* Makro — bez boldów poza wartościami */
.sm-macro { font: var(--fw-regular) .8125rem/1.5 var(--font-body); color: var(--sm-ink-60); }

.sm-recipe-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

/* ==========================================================================
 * 4.5 KARTY PRODUKTÓW WOOCOMMERCE (zrzut 4 + archiwum sklepu)
 * ========================================================================== */
/* Karta: bez tła/cienia/ramki (de-boxing 1.3 już zdejmuje), wyrównanie do lewej */
.woocommerce ul.products li.product {
  text-align: left;
  transition: transform var(--dur-2) var(--ease-premium);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }

/* PAKIET I · 1 — KAFEL ZDJĘCIA USUNIĘTY STĄD (świadomie, nie przypadkiem).
 *
 * Stała tu reguła pisana pod NATYWNY markup Woo, z czasów przed `.sm-card`:
 *   .woocommerce ul.products li.product a img,
 *   .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
 *     aspect-ratio: 1/1; width: 100%; height: auto;
 *     object-fit: contain; padding: 8%;
 *     background: var(--sm-cream-deep); border-radius: var(--radius-m);
 *   }
 * Nasza karta ma `<a class="sm-card__media"><img class="sm-card__img">`, więc
 * selektor `li.product a img` (0,3,4) trafiał w nią nadal i bił
 * `.sm-card__media img` (0,1,1) z sm-shop.css. Stąd TRZY objawy naraz, wszystkie
 * z jednej reguły: `contain` + `aspect-ratio: 1/1` + `height: auto` dawały
 * w kadrze 4:5 kwadrat (mierzone: obraz 357×357 w polu 343×429, martwy pas
 * 127 px), `padding: 8%` odsuwał packshot od krawędzi, a `background:
 * var(--sm-cream-deep)` malował DRUGIE tło (#EAF1E8) w środku kremowego pola
 * (#F5F2EA) — czyli „ramkę w ramce”.
 *
 * Poprawka jest usunięciem, nie nadpisaniem: podnoszenie swoistości albo
 * `!important` zostawiłoby dwie sprzeczne definicje kadru w dwóch plikach.
 * Kadr karty ma JEDNO miejsce — `.sm-card__media` w sm-shop.css.
 *
 * Reszta sekcji 4.5 zostaje bez zmian: `a.button` nadaje CTA karty wygląd ghost
 * i tego pakiet I nie rusza (zlecenie: „bez zmiany stylu przycisku”). */
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* Tytuł + cena */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font: var(--fw-regular) .9375rem/1.3 var(--font-body); color: var(--sm-ink);
  min-height: 2lh;
}
.woocommerce ul.products li.product .price {
  font: var(--fw-semibold) 1rem/1.2 var(--font-body); color: var(--sm-forest);
}

/* CTA karty produktu → GHOST pełnej szerokości (nadpisuje mapowanie primary z 1.5) */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: flex; width: 100%; min-height: 44px;
  background: transparent; color: var(--sm-forest);
  border: 1px solid var(--sm-hairline);
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: transparent; color: var(--sm-forest);
  border-color: var(--sm-forest); transform: translateY(-2px);
}

/* Ukryj zdublowany "Dowiedz się więcej »" (loop Blocksy + custom karuzela) */
.woocommerce ul.products li.product .ct-woocommerce-excerpt,
.sama-carousel .sama-more { display: none; }

/* Ukryj puste gwiazdki (brak recenzji) — dopasuj do markupu Blocksy/Woo */
.woocommerce ul.products li.product .star-rating:empty,
.woocommerce ul.products li.product .rating-count-0,
.woocommerce ul.products li.product .star-rating[aria-label=""] { display: none; }

/* Strzałki karuzeli produktów (custom .sama-nav) — 44×44 okrąg, hairline, biel */
.sama-carousel .sama-nav {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--sm-hairline); background: var(--sm-white);
  color: var(--sm-ink); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .7;
  transition: opacity var(--dur-1) var(--ease-premium),
              transform var(--dur-1) var(--ease-premium),
              border-color var(--dur-1) var(--ease-premium);
}
.sama-carousel .sama-nav:hover { opacity: 1; transform: translateY(-2px); border-color: var(--sm-forest); }

/* ==========================================================================
 * 4.x RESPONSYWNOŚĆ Sekcji 4 (drobne — pełna logika w Sekcji 5)
 * ========================================================================== */
@media (max-width: 767.98px) {
  .sm-recipe-block__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sm-recipe-block__media { order: -1; }               /* obraz nad treścią w blokach przepisów (5.1) */
  .sm-filters__faq { margin-inline-start: 0; }
}

/* ==========================================================================
 * ==========================================================================
 * SEKCJA 5 — MOBILE & RESPONSIVE LOGIC
 * Mobile-first. Breakpointy: 480 / 768 / 1024 / 1280 (--header-h → 88px od 1024, 1.1).
 * ==========================================================================
 * ========================================================================== */

/* ==========================================================================
 * 5.3 CELE DOTYKOWE (twarde reguły globalne)
 * ========================================================================== */
.sm-btn, .sm-link, .sm-chip, summary,
.sm-anchor-nav a, .sm-carousel-arrow, .sama-nav,
.sm-dots .sm-dot, .sm-segmented__btn, .sm-quiz-tile {
  min-height: 44px; min-width: 44px;
}
/* Generyczne button/nav: gwarantuj wysokość + padding, bez wymuszania szerokości
   (chroni drobne steppery ilości Woo przed rozpychaniem) */
button, nav a { min-height: 44px; }
nav a { padding-block: .75rem; }

/* PAKIET J · 2 — POTRÓJNE „OKO” PRZY POLU HASŁA.
 *
 * WooCommerce renderuje jeden `button.show-password-input`, a Blocksy maluje go
 * maską SVG w kwadracie 14×14 px:
 *   form:is(.login,.register,.edit-account,.lost_reset_password)
 *   [class*=password-input] .show-password-input
 *   { width:14px; height:14px; -webkit-mask-image: url(oko.svg) }
 * Reguła wyżej (`button { min-height: 44px }`) rozciąga ten przycisk do 44 px,
 * a Blocksy nie ustawia `mask-repeat` ani `mask-size` — maska ma domyślne
 * `repeat`, więc w słupku 14×44 px oko powtarza się TRZY razy. W DOM jest jeden
 * przycisk; troi się sam obraz maski. Nie ma tu drugiego ani trzeciego źródła
 * ikony do wyłączenia.
 *
 * Nie zdejmujemy globalnego celu dotykowego — zamiast tego domykamy maskę
 * (`no-repeat` + jawny rozmiar) i robimy z przycisku uczciwe pole 44×44 px
 * z jednym glifem 14 px w środku. Pionowe centrowanie liczymy od opakowania
 * (`.password-input` ma `position: relative`), a nie od
 * `--theme-form-field-height` — ta zmienna ma inną wartość na koncie i na kasie.
 *
 * Swoistość: reguła Blocksy to (0,3,1); nasza (0,3,2) — wygrywa bez `!important`. */
/* Zapas na przycisk rośnie z 38 px do 44 px, żeby pole 44×44 zmieściło się CAŁE
   w wewnętrznym marginesie inputa i nie łapało kliknięć nad tekstem hasła. */
:is(.woocommerce, .woocommerce-page) form [class*="password-input"] input {
  padding-inline-end: 44px;
}
:is(.woocommerce, .woocommerce-page) form [class*="password-input"] button.show-password-input {
  width: 44px;
  height: 44px;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

/* ==========================================================================
 * 5.2 KARUZELE SWIPE + SCROLL-SNAP (mobile) — .sm-snap
 * ========================================================================== */
@media (max-width: 767.98px) {
  .sm-snap {
    display: flex; overflow-x: auto; gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .sm-snap::-webkit-scrollbar { display: none; }
  .sm-snap > * { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
  .sm-steps.sm-snap > * { flex-basis: 68vw; }         /* kroki 1–4 "Od cienia do miseczki" */
  /* Wyjątek: pas USP zostaje jako grid 2×2 (nie zamieniaj na .sm-snap) */
}

/* ==========================================================================
 * 5.5 STICKY NAWIGACJA KOTWIC (O Matchy / O nas) na mobile
 * ========================================================================== */
@media (max-width: 767.98px) {
  .sm-anchor-nav {
    flex-wrap: nowrap; align-items: center;
    height: 52px; padding-block: 0;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sp-4), #000 calc(100% - var(--sp-4)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--sp-4), #000 calc(100% - var(--sp-4)), transparent);
  }
  .sm-anchor-nav::-webkit-scrollbar { display: none; }
  .sm-anchor-nav a { scroll-snap-align: start; white-space: nowrap; }
}

/* ==========================================================================
 * 5.4 STICKY "DODAJ DO KOSZYKA" na karcie produktu (mobile)
 *     Markup wstrzykuje functions.php (wp_footer, is_product). Pokazywanie: JS.
 * ========================================================================== */
.sm-sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--sp-2) + var(--sp-1)) var(--gutter) calc(var(--sp-2) + var(--sp-1) + env(safe-area-inset-bottom));
  background: var(--sm-white); border-top: 1px solid var(--sm-hairline);
  transform: translateY(100%); opacity: 0;
  transition: transform var(--dur-2) var(--ease-premium),
              opacity var(--dur-2) var(--ease-premium);
}
.sm-sticky-cta.is-visible { transform: none; opacity: 1; }
.sm-sticky-cta__price { font: var(--fw-semibold) 1rem/1.2 var(--font-body); color: var(--sm-forest); }
.sm-sticky-cta .sm-btn { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .sm-sticky-cta { transition: none; } }
@media (min-width: 1024px) { .sm-sticky-cta { display: none; } }
/* Anty-nakładka: stała rezerwa = zero CLS przy pojawieniu się paska (tylko mobile) */
@media (max-width: 1023.98px) { body.single-product { padding-bottom: 88px; } }

/* ==========================================================================
 * 5.6 HERO I TYPOGRAFIA NA MOBILE
 *     Hero min-height 100svh (3.1) — svh ignoruje pasek adresu przeglądarki,
 *     więc zero skoków layoutu. Pigułki zawijają się do kolejnych wierszy
 *     (flex-wrap, 3.1). --section-y skaluje się przez clamp() — NIE
 *     nadpisujemy paddingów sekcji.
 * ========================================================================== */
/* (Reguły bazowe zdefiniowane w 3.1. Brak dodatkowych nadpisań.) */

/* ==========================================================================
 * 5.7 ZERO-CLS — utility content-visibility dla sekcji poniżej folda
 *     Nadaj .sm-cv-auto: FAQ, bloki przepisów, "O nas".
 * ========================================================================== */
.sm-cv-auto { content-visibility: auto; contain-intrinsic-size: 1px 800px; }

/* ==========================================================================
 * ==========================================================================
 * ENFORCEMENT — KOREKTA FRONTENDU (agresywne nadpisania buildera)
 * Prefiks `body` (podbicie specyficzności) + !important tam, gdzie Blocksy /
 * Gutenberg / WooCommerce / karuzela (sama-carousel.css) stawiają opór.
 * Chronimy naprzemienne tła sekcji: .sm-band--cream / .sm-band--white.
 * ==========================================================================
 * ========================================================================== */

/* ---- 1) DE-BOXING — zawężone (PHASE 1.5)
 * Kill resting shadow TYLKO na kartach/sekcjach treści.
 * NIE ruszamy: .sub-menu, .ct-panel, #woo-cart-panel / drawer, #search-modal,
 * #account-modal, sticky header, :focus-visible.
 */
body .wp-block-columns,
body .wp-block-column,
body .wp-block-group,
body .wp-block-cover:not(.sm-hero):not(.hero-fullscreen),
body [class*="wp-block"].has-background,
body .sama-card,
body .sama-chip,
body .sama-btn,
body .woocommerce ul.products li.product,
body .sm-flat, body .hero-card, body .usp-bar, body .faq-item,
body .sm-step, body .sm-steps > *, body .sm-brew-steps > li,
body .sm-recipe, body .sm-recipe-block,
body .sm-cards-hairline > *, body .sm-benefits-grid > *,
body .sm-quiz-tile, body .sm-way {
  box-shadow: none !important; /* override Blocksy/Woo resting card shadow */
}

/* Strzałki karuzeli: flat (bez cienia). Hover = border/opacity — nie --shadow-lift.
 * --shadow-lift / hairline scroll → header.is-scrolled (sekcja 2.1). */
body .sama-nav { box-shadow: none !important; }

/* 1b. Karty (kolumny / karty-styl): ZDEJMIJ ramkę + radius + tło.
       Bandy sekcji (.sm-band--*) i grupy-tła są chronione. */
body .wp-block-column,
body .wp-block-group.is-style-card,
body .wp-block-group.has-border-color,
body .wp-block-column.has-border-color,
body .sm-flat, body .hero-card, body .faq-item,
body .sm-step, body .sm-brew-steps > li,
body .sm-recipe, body .sm-recipe-block,
body .sm-cards-hairline > *, body .sm-benefits-grid > *,
body .sama-card {
  border: none !important;
  border-radius: 0 !important;
}
body .wp-block-column.has-background:not(.sm-band--cream):not(.sm-band--white),
body .wp-block-group.is-style-card,
body .sm-flat, body .hero-card, body .sama-card {
  background-color: transparent !important;
}

/* 1c. Karuzela produktów (home) — matowy kafel zamiast pływającego rendera z cieniem */
body .sama-media { background: var(--sm-cream-deep) !important; border-radius: var(--radius-m) !important; }
body .sama-chip  { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
body .sama-nav   { background: var(--sm-white) !important; border: 1px solid var(--sm-hairline) !important;
                   -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body .sama-more  { display: none !important; }
body .sama-title { display: none !important; }   /* twarde: zdublowany "Nasza Matcha" */

/* 1d. Numeracja kroków = czysta typografia (bez obrysów/kółek) */
body .sm-step__num { border: none !important; background: transparent !important; }
body .sm-brew-steps > li::before {
  border: none !important; background: transparent !important;
  width: auto !important; height: auto !important;
  color: var(--sm-sage) !important;
}

/* ---- 2) KSZTAŁT PRZYCISKÓW — technicznie, radius 2px --------------------- */
body .sm-btn,
body .wp-block-button__link,
body .wp-element-button, body button.wp-element-button,
body .ct-button, body .ct-button-ghost,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce .single_add_to_cart_button,
body .woocommerce ul.products li.product a.add_to_cart_button,
body .sama-btn, body .sama-btn.sama-store, body .sama-btn.sama-checkout,
body .sama-cta-sub .sama-btn {
  border-radius: 2px !important;
}

/* 2b. Karuzelowe .sama-btn: forest/cream, waga 600, bez wewn. cienia (zgodność z regułami) */
body .sama-btn {
  background: var(--sm-forest) !important; color: var(--sm-cream) !important;
  border: 0 !important; font-weight: var(--fw-semibold) !important;
}
body .sama-btn:hover { background: var(--sm-moss) !important; }
body .sama-btn--ghost, body .sama-btn.sama-store {
  background: transparent !important; color: var(--sm-forest) !important;
  border: 1px solid var(--sm-hairline) !important;
}

/* ---- 3) KAFLE "Sposoby na Matchę" — treść zjechana na dół --------------- */
body .sm-way .wp-block-cover__inner-container,
body .wp-block-cover:not(.hero-fullscreen):not(.sm-hero):not([class*="hero"]) .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* ---- 4) STRONA PRZEPISÓW ------------------------------------------------- */
/* 4a. Zdublowany rząd kotwic/filtrów — twarde ukrycie (klasę .sm-dupe-row
       nadaje sama-motion.js; hook dostępny też do użycia ręcznego) */
body .sm-dupe-row { display: none !important; }

/* 4b. Tagi na kartach: bez pigułek — inline-block + separator "·" + ink-60 */
body .sm-recipe__tags > * {
  display: inline-block !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  font: var(--fw-regular) .8125rem/1.4 var(--font-body) !important;
  color: var(--sm-ink-60) !important;
}
body .sm-recipe__tags > *:not(:last-child)::after {
  content: " · "; color: var(--sm-ink-60);
}

/* ---- 5) WYRÓWNANIE HERO --------------------------------------------------- */

/* 5a. FULL-BLEED — USUNIĘTE. Hack width:100vw + margin calc(50% - 50vw) liczył
       ujemne marginesy względem WYPADDINGOWANEGO kontenera Blocksy i sekcja się
       rozjeżdżała (do tego 100vw wlicza pasek przewijania → poziomy scroll).
       Właściwa naprawa jest w EDYTORZE: blok hero → toolbar → Wyrównanie →
       "Pełna szerokość" (.alignfull). theme.json Blocksy deklaruje
       settings.layout (contentSize/wideSize), więc alignfull działa natywnie,
       a wnętrze hero i tak ma własny max-width (wrapper treści w 3.1). */

/* 5b. RESET DZIECI HERO — koniec rozstrzeliwania. position:relative (NIE
       static) → kasuje rogue position:absolute, zachowuje z-index nad
       gradientem. Nie ruszamy transform/opacity (keyframes reveal z 3.1). */
body .hero-fullscreen .stk-block-hero__content > .stk-inner-blocks > *,
body .hero-fullscreen .wp-block-cover__inner-container > *,
body .hero-fullscreen__content > *,
body .sm-hero .wp-block-cover__inner-container > * {
  align-self: center;
  position: relative !important; /* !important: bije rogue position:absolute z bloków/pluginów */
  z-index: 2;
  float: none;
}

/* 5c. LIMIT SZEROKOŚCI sublinu/paragrafów pod H1 (czytelna miara), wyśrodkowane */
body .hero-fullscreen .sm-hero__subline,
body .sm-hero .sm-hero__subline,
body .hero-fullscreen .stk-block-text,
body .hero-fullscreen__content > p,
body .hero-fullscreen .wp-block-cover__inner-container > p {
  max-width: min(60ch, 100%);
  margin-inline: auto;
}

/* 5d. GLOBALNY nagłówek sekcji — zunifikowane wyśrodkowanie.
       Opt-out: dodaj .sm-section-head--split dla układów dwukolumnowych. */
body .sm-section-head:not(.sm-section-head--split) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  max-width: 800px;
}
body .sm-section-head:not(.sm-section-head--split) > * {
  margin-inline: auto;
}