@charset "UTF-8";
/* ============================================================
   THEME STYLE — entry point. Partiale przez @use (sass scala je przy kompilacji).
   Kompilacja: npx sass theme-style.scss:theme-style.css --style=expanded --no-source-map
   ============================================================ */
/* ============================================================
   DESIGN TOKENS — krótkie aliasy do presetów z theme.json.
   Źródło prawdy: theme.json (settings.spacing.spacingSizes + settings.custom).
   W komponentach używamy var(--space-*), var(--radius-*) itd. — nie sztywnych px.
   ============================================================ */
:root {
  /* Spacing — 1:1 do theme.json spacingSizes (xs4 sm8 md16 lg24 xl40 2xl64 3xl96 4xl128) */
  --space-xs: var(--wp--preset--spacing--xs);
  --space-sm: var(--wp--preset--spacing--sm);
  --space-md: var(--wp--preset--spacing--md);
  --space-lg: var(--wp--preset--spacing--lg);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2-xl);
  --space-3xl: var(--wp--preset--spacing--3-xl);
  --space-4xl: var(--wp--preset--spacing--4-xl);
  /* Radius */
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-xl: var(--wp--custom--radius--xl);
  --radius-full: var(--wp--custom--radius--full);
  /* Shadow */
  --shadow-card: var(--wp--custom--shadow--card);
  --shadow-button: var(--wp--custom--shadow--button);
  /* Motion */
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
  /* Layout (szerokości kontenerów) */
  --layout-narrow: var(--wp--custom--layout--narrow);
  --layout-content: var(--wp--custom--layout--content);
  --layout-wide: var(--wp--custom--layout--wide);
  /* Border (kolor obramowań na bazie primary/gold) */
  --border: var(--wp--custom--border--default);
  --border-soft: var(--wp--custom--border--soft);
  /* ============================================================
     MARKA POQUI — czerwień z makiety landing/css/tokens.css.

     theme.json trzyma jeszcze złotą paletę po bazowym TurboBuildzie
     (primary #C89B3C), a makieta jest czerwona. Do czasu przepisania
     palety te tokeny są źródłem prawdy dla bloków z nowej marki.
     Kolejny przepisywany blok dokłada tu tylko to, czego naprawdę
     potrzebuje — nie przenosimy całego landingu na zapas.

     --brand celuje w preset z theme.json, żeby ta sama czerwień była
     do wyboru w edytorze (kontroler koloru) i w CSS. W data URI kreski
     wartość musi zostać wpisana wprost: var() nie działa wewnątrz url().
     ============================================================ */
  --brand: var(--wp--preset--color--brand);
  /* Krój nagłówkowy makiety. Motyw ma jeszcze --ffont (Cormorant Garamond)
     po bazowym TurboBuildzie — zostaje dla starego toru .heading-N, aż
     zniknie razem z klasami hp-*. Playfair wczytuje includes/homepage-design.php. */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --brand-hover: #a30113;
  --brand-light: #ff8a97;
  /* Odręczna kreska spod hasła w hero. Ta sama ścieżka co w makiecie,
     trzymana jako data URI, żeby szła tłem dowolnego <mark> i nie
     wymagała wklejania <svg> w treść. */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 22' preserveAspectRatio='none' fill='none' stroke='%23BF0117' stroke-linecap='round'%3E%3Cpath d='M4 9.5C52 3 132 2.5 204 6.5c26 1.5 48 3.5 72 6.5' stroke-width='4'/%3E%3Cpath d='M28 18.5c44-4.5 108-5.5 168-3 20 1 36 2 44 3' stroke-width='3' opacity='.85'/%3E%3C/svg%3E");
  --squiggle-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 22' preserveAspectRatio='none' fill='none' stroke='%23ff8a97' stroke-linecap='round'%3E%3Cpath d='M4 9.5C52 3 132 2.5 204 6.5c26 1.5 48 3.5 72 6.5' stroke-width='4'/%3E%3Cpath d='M28 18.5c44-4.5 108-5.5 168-3 20 1 36 2 44 3' stroke-width='3' opacity='.85'/%3E%3C/svg%3E");
}

/* ============================================================
   TYPOGRAFIA — nagłówki (.heading-N / .has-hN-font-size) i tekst (.has-text-*).
   Rozmiar/interlinia nadaje preset (kontroler "Rozmiar liter"), nie znacznik h1-h6
   (reset gołych tagów jest w assets/scss/global.scss). Źródło presetów: theme.json.
   ============================================================ */
body .heading,
body .heading * {
  font-family: var(--ffont);
}
body {
  /* Stary tor: klasy .heading-N pisane ręcznie w szablonach. Zostaje
     do czasu, aż bloki przejdą na presety. Nowych nie dokładamy. */
}
body .heading-1,
body .heading-1 * {
  font-size: 40px;
  font-weight: bold;
  line-height: 150%;
  font-family: var(--ffont);
}
body .heading-2,
body .heading-2 * {
  font-size: 30px;
  font-weight: bold;
  line-height: 150%;
  font-family: var(--ffont);
}
body .heading-4,
body .heading-4 * {
  font-size: 19px;
  font-weight: bold;
  line-height: 150%;
  font-family: var(--ffont);
}
body .heading-5,
body .heading-5 * {
  font-size: 16px;
  font-weight: bold;
  line-height: 150%;
  font-family: var(--ffont);
}
body {
  /* ========================================================
     PRESETY NAGŁÓWKA (kontroler „Wielkość liter" w edytorze).

     Rozmiar nadaje theme.json (settings.blocks."core/heading"), skalą
     z makiety: płynny clamp 36→64 px dla Heading 1. Tutaj NIE ma
     font-size, bo dublowałby preset i rozjeżdżał edytor z frontem —
     redaktor wybiera rozmiar z listy, nie z CSS.
     ======================================================== */
}
body .has-heading-1-font-size,
body .has-heading-2-font-size,
body .has-heading-3-font-size,
body .has-heading-4-font-size,
body .has-heading-5-font-size,
body .has-heading-6-font-size {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  text-wrap: balance;
}
body {
  /* Kolor nagłówka z makiety (--hp-c-ink), jak dawniej w .hp-h1..h6.
     W :where(), czyli bez wagi: kolor wybrany w edytorze albo
     nadpisanie na ciemnym tle wygrywa zawsze. */
}
body :where(.has-heading-1-font-size,
.has-heading-2-font-size,
.has-heading-3-font-size,
.has-heading-4-font-size,
.has-heading-5-font-size,
.has-heading-6-font-size) {
  color: var(--hp-c-ink);
}
body {
  /* Hasło w hero łamie się na dwie linie i ma ciaśniejszą interlinię,
     stąd osobna wartość i zgoda na zwykłe łamanie. */
}
body .has-heading-1-font-size {
  line-height: 1.1;
  text-wrap: wrap;
}
body .description {
  line-height: 24px;
}
body .eyebrow {
  font-family: var(--sfont);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
body .has-text-xs-font-size {
  font-size: 12px;
  line-height: 18px;
  font-family: var(--sfont);
}
body .has-text-smaller-font-size {
  font-size: 14px;
  line-height: 22px;
  font-family: var(--sfont);
}
body .has-text-font-size {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--sfont);
}
body .has-text-bigger-font-size {
  font-size: 20px;
  line-height: 30px;
  font-family: var(--sfont);
}
body .has-text-l-font-size {
  font-size: 24px;
  line-height: 34px;
  font-family: var(--sfont);
}
body .has-text-xl-font-size {
  font-size: 30px;
  line-height: 40px;
  font-family: var(--sfont);
}
body {
  /* ========================================================
     WARIANTY TEKSTU NOWEJ MARKI.

     Dopinane klasą (Zaawansowane → Dodatkowe klasy CSS) obok presetu
     rozmiaru. Bloki nie mają własnych reguł od fontów, więc wszystko,
     co zmienia wygląd liter, a nie jest rozmiarem, trafia tutaj.

     Muszą stać PO presetach: mają tę samą wagę (body + klasa),
     a presety też ustawiają interlinię.
     ======================================================== */
}
body .text-loose {
  line-height: 1.8;
}
body .text-soft {
  color: var(--hp-c-ink-3);
}
body .text-dim {
  color: color-mix(in srgb, currentColor 72%, transparent);
}
body .text-caps {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body .text-tight {
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body .text-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
  line-height: 1;
}
body .wp-element-caption {
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.5;
}
body {
  /* Linki wpisane w akapit w edytorze biorą kolor akapitu (np. czerwony
     numer telefonu), a nie czarny z bazowego `body a` w theme-style.scss.
     Tylko linki bez klasy: przyciski (.wp-block-button__link) i linki
     z PHP starszych bloków (.hp-btn, .tb-*__link) mają własne kolory. */
}
body .tb-block a:not([class]) {
  color: inherit;
  transition: color var(--hp-t-fast);
}
body .tb-block a:not([class]):hover {
  color: var(--brand);
}
body {
  /* ========================================================
     PODKREŚLENIE ODRĘCZNE — kreska spod hasła w hero.

     W makiecie podkreślony fragment miał własny <span> z wklejonym
     <svg> w środku, a w bloku było na to osobne pole ACF. Znaczyło to
     jedno sztywne miejsce: redaktor nie mógł podkreślić czego innego
     ani dwóch fragmentów naraz. Teraz zaznacza dowolny fragment
     i klika „Podkreślenie odręczne" w pasku formatowania.

     Dlaczego własna klasa, a nie wbudowane „Podświetlenie" Gutenberga:
     tamto generuje <mark>, ale tym SAMYM znacznikiem Gutenberg oznacza
     zwykłą zmianę koloru tekstu. W hero potrzebujemy obu naraz —
     „500+" ma być tylko czerwone, „dobrze" czerwone i podkreślone.
     Na jednym <mark> nie da się ich rozróżnić.

     Kreskę rysuje background-image, więc nie ma <svg> w treści i nic
     nie psuje zaznaczania tekstu. Wysokość idzie z proporcji viewBox
     (280x22), stąd `auto`: kreska zostaje tej samej grubości
     niezależnie od długości frazy.
     ======================================================== */
}
body .tb-underline {
  /* Fragment ma być tym samym krojem co nagłówek, w którym siedzi.
     Bez tego łapie go `body *` z theme-style (font tekstowy) i w środku
     szeryfowego hasła pojawia się bezszeryfowa wstawka, w dodatku innej
     szerokości niż reszta wiersza. */
  font-family: inherit;
  background-image: var(--squiggle);
  background-repeat: no-repeat;
  background-position: left bottom;
  /* Wysokość kreski stała względem liter (0,25em), szerokość z frazy.
     Wcześniej było `100% auto`, czyli wysokość z proporcji 280x22:
     przy krótkim słowie w hero wychodziło ok. 0,25em, ale przy
     dłuższej frazie („do Twojego etapu” w sklepie) kreska rosła
     prawie trzykrotnie i przecinała litery. Teraz jest taka sama
     w każdym nagłówku, dłuższa fraza tylko ją rozciąga w poziomie.

     Kreska ma zachodzić na dolne wydłużenia liter, nie wisieć pod
     nimi: górna krawędź ok. 0,15em nad dolną krawędzią glifów
     (pomiar na makiecie, font 64 px), pod literami zostaje 0,1em,
     żeby nie weszła w następny wiersz. */
  background-size: 100% 0.25em;
  padding-bottom: 0.1em;
  padding-inline: 0.04em;
  color: var(--brand);
}
body {
  /* Kolor fragmentu Gutenberg zapisuje jako <mark>. Ten sam problem
     z `body *`, więc również przywracamy dziedziczenie kroju. */
}
body mark {
  font-family: inherit;
}
body {
  /* Na ciemnym tle czerwień kreski ginie — jaśniejszy wariant, a tekst
     zostaje z koloru otoczenia, bo to podkreślenie, nie zakreślacz:
     litera nie leży na plamie koloru. */
}
body .on-dark .tb-underline {
  background-image: var(--squiggle-light);
  color: inherit;
}

/* ============================================================
   PRZYCISKI — Gutenberg core/button. 4 warianty (Typ 1/2 + Outline)
   zarejestrowane w includes/cli/button-styles.php (is-style-typ-*). theme.json
   NIE definiuje wyglądu przycisku (filtr usuwa core elements.button). Wygląd
   w całości tutaj, po klasach, na tokenach.
   ============================================================ */
body .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  box-sizing: border-box;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--sfont);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  border-style: solid;
  border-width: 1px;
  transition: var(--transition);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link::after, body .wp-block-button.is-style-typ-2-outline .wp-block-button__link::after {
  content: "→";
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--wp--custom--transition--duration) var(--wp--custom--transition--ease);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover::after, body .wp-block-button.is-style-typ-2-outline .wp-block-button__link:hover::after {
  transform: translateX(4px);
}
body .wp-block-button.has-icon-gift .wp-block-button__link::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiA3djE0IiAvPjxwYXRoIGQ9Ik0yMCAxMXY4YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0ydi04IiAvPjxwYXRoIGQ9Ik03LjUgN2ExIDEgMCAwIDEgMC01QTQuOCA4IDAgMCAxIDEyIDdhNC44IDggMCAwIDEgNC41LTUgMSAxIDAgMCAxIDAgNSIgLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiIC8+PC9zdmc+") center/contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiA3djE0IiAvPjxwYXRoIGQ9Ik0yMCAxMXY4YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0ydi04IiAvPjxwYXRoIGQ9Ik03LjUgN2ExIDEgMCAwIDEgMC01QTQuOCA4IDAgMCAxIDEyIDdhNC44IDggMCAwIDEgNC41LTUgMSAxIDAgMCAxIDAgNSIgLz48cmVjdCB4PSIzIiB5PSI3IiB3aWR0aD0iMTgiIGhlaWdodD0iNCIgcng9IjEiIC8+PC9zdmc+") center/contain no-repeat;
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link {
  background: linear-gradient(135deg, var(--wp--preset--color--gold-400), var(--wp--preset--color--gold-600));
  border-color: transparent;
  color: var(--wp--preset--color--on-gold);
  box-shadow: var(--shadow-button);
}
body .wp-block-button.is-style-typ-1 .wp-block-button__link:hover {
  background: linear-gradient(135deg, var(--wp--preset--color--gold-500), var(--wp--preset--color--gold-700));
  color: var(--wp--preset--color--on-gold);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link {
  background: var(--wp--preset--color--white);
  border-color: var(--border-soft);
  color: var(--wp--preset--color--black);
}
body .wp-block-button.is-style-typ-1-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}
body .wp-block-button.is-style-typ-2 .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--gray);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-typ-2-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-marka .wp-block-button__link, body .wp-block-button.is-style-marka-outline .wp-block-button__link, body .wp-block-button.is-style-marka-ghost .wp-block-button__link {
  gap: var(--hp-sp-3);
  min-height: 0;
  padding: var(--hp-sp-3) var(--hp-sp-5);
  border: 1px solid transparent;
  border-radius: var(--hp-radius-sm);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color var(--hp-t-fast), color var(--hp-t-fast), border-color var(--hp-t-fast), transform var(--hp-t-fast);
}
body .wp-block-button.is-style-marka .wp-block-button__link:hover, body .wp-block-button.is-style-marka-outline .wp-block-button__link:hover, body .wp-block-button.is-style-marka-ghost .wp-block-button__link:hover {
  transform: translateY(-1px);
}
body .wp-block-button.is-style-marka .wp-block-button__link:active, body .wp-block-button.is-style-marka-outline .wp-block-button__link:active, body .wp-block-button.is-style-marka-ghost .wp-block-button__link:active {
  transform: translateY(0);
}
body .wp-block-button.is-style-marka.has-size-lg .wp-block-button__link, body .wp-block-button.is-style-marka-outline.has-size-lg .wp-block-button__link, body .wp-block-button.is-style-marka-ghost.has-size-lg .wp-block-button__link {
  gap: var(--hp-sp-4);
  padding: clamp(0.9375rem, var(--hp-u) * 1.17, 1.125rem) clamp(1.25rem, var(--hp-u) * 2.2, 2rem);
}
body .wp-block-button.is-style-marka .wp-block-button__link {
  border-width: 0;
  background: var(--brand);
  box-shadow: var(--hp-shadow-btn);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-marka .wp-block-button__link:hover {
  background: var(--brand-hover);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-marka-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
body .wp-block-button.is-style-marka-outline .wp-block-button__link:hover {
  background: var(--brand);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-marka-ghost .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--wp--preset--color--white);
}
body .wp-block-button.is-style-marka-ghost .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--hp-c-burgundy);
}
body .wp-block-button.has-icon-arrow .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 16h20.4'/%3E%3Cpath d='m19.4 9.2 6.7 6.8-6.7 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 16h20.4'/%3E%3Cpath d='m19.4 9.2 6.7 6.8-6.7 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
body .wp-block-button.has-icon-cart .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--hp-ico-koszyk) center/contain no-repeat;
  mask: var(--hp-ico-koszyk) center/contain no-repeat;
}
body .wp-block-button.has-icon-download .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
}

body {
  background-color: var(--wp--preset--color--page);
}
body img,
body svg {
  max-width: 100%;
  height: auto;
}
body a {
  color: #000;
  text-decoration: none;
}
body ol {
  list-style-type: auto;
  padding-left: 15px;
  margin: 15px 0px;
}
body ul {
  padding-left: 15px;
  list-style-type: disc;
  margin: 15px 0px;
}
body table {
  width: 100%;
}
body .container {
  width: min(90%, var(--layout-content));
  margin-inline: auto;
}
body * {
  font-family: var(--sfont);
}
body strong,
body b {
  font-weight: 700;
}