@charset "UTF-8";
/* ==========================================================================
   NOWA MARKA — punkt wejścia. Kompilacja:
   npx sass assets/scss/homepage/homepage-design.scss:assets/css/homepage/homepage-design.css --style=expanded --no-source-map

   Plik wynikowy celowo w podkatalogu assets/css/homepage/ (nie płasko w
   assets/css/) — includes/add-theme-assets.php automatycznie enqueue'uje
   KAŻDY plik *.css leżący bezpośrednio w assets/css/ (bez wersjonowania!),
   więc płaski plik dublowałby się z naszym własnym, wersjonowanym enqueue
   w includes/homepage-design.php.
   ========================================================================== */
/* ==========================================================================
   NOWA MARKA (2026), design tokens.
   Źródło: makieta wp-content/themes/turbobuild/homepage/ (statyczny HTML).
   Wszystko pod przedrostkiem --hp- (Homepage), żeby NIE nadpisać tokenów
   starego motywu (--radius-*, --shadow-*, --space-* to też nazwy w
   assets/scss/_tokens.scss / theme-style.css). Blokom nowej marki wolno
   czytać tylko --hp-*, staremu motywowi te zmienne są niewidoczne (inna nazwa).
   ========================================================================== */
:root {
  /* --- Kolory ---------------------------------------------------------- */
  --hp-c-red: #bf0117;
  --hp-c-red-hover: #a30113;
  --hp-c-red-deep: #8b0309;
  --hp-c-burgundy: #6d040f;
  --hp-c-burgundy-mid: #8c0512;
  --hp-c-burgundy-top: #a30115;
  --hp-c-burgundy-2: #4d0209;
  --hp-c-rose-arc: #f7dcde;
  --hp-c-rose-arc-2: #fdf3f4;
  --hp-c-rose-deep: #eba9b0;
  --hp-c-red-tint: #faeef0;
  --hp-c-red-tint-2: #fdf6f7;
  --hp-c-ink: #111214;
  --hp-c-ink-2: #2c2f33;
  --hp-c-ink-3: #5f656c;
  --hp-c-line: #e7e4e3;
  --hp-c-line-2: #f0eded;
  --hp-c-bg: #fdfcfc;
  --hp-c-surface: #ffffff;
  --hp-c-white: #ffffff;
  --hp-c-rose: #ff8a97;
  --hp-c-rose-hover: #ffb0b9;
  --hp-c-placeholder: #a7adb4;
  /* --- Typografia -------------------------------------------------------- */
  --hp-ff-base: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --hp-ff-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --hp-ff-hand: "Kalam", "Segoe Print", cursive;
  --hp-fw-regular: 400;
  --hp-fw-medium: 500;
  /* 550/750/800 — wagi pośrednie z nowszych makiet (2026), używane
     powtarzalnie w kilku blokach (kontakt-formularz, blad-404, blog-*,
     free-hero) obok klasycznej skali 400/500/700/900. */
  --hp-fw-550: 550;
  --hp-fw-bold: 700;
  --hp-fw-750: 750;
  --hp-fw-800: 800;
  --hp-fw-black: 900;
  --hp-fs-h1: clamp(2.25rem, 1.566rem + 3.04vw, 4rem);
  --hp-fs-h2: clamp(1.75rem, 1.333rem + 1.85vw, 3rem);
  --hp-fs-h3: clamp(1.5rem, 1.25rem + 1.11vw, 2.25rem);
  --hp-fs-h4: clamp(1.25rem, 1.083rem + 0.74vw, 1.75rem);
  --hp-fs-h5: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
  --hp-fs-h6: clamp(1rem, 0.958rem + 0.19vw, 1.125rem);
  --hp-fs-ui: clamp(0.75rem, calc(var(--hp-u) * 0.85), 0.875rem);
  --hp-fs-logo: clamp(1.0625rem, calc(var(--hp-u) * 1.45), 1.5rem);
  --hp-fs-logo-tag: clamp(0.5625rem, calc(var(--hp-u) * 0.765), 0.73rem);
  --hp-fs-hand: clamp(1.0625rem, calc(var(--hp-u) * 1.42), 1.375rem);
  --hp-fs-hand-sm: clamp(0.9375rem, calc(var(--hp-u) * 1.15), 1.125rem);
  --hp-fs-stat: clamp(0.9375rem, calc(var(--hp-u) * 1.15), 1.125rem);
  --hp-fs-social: clamp(0.8125rem, calc(var(--hp-u) * 0.91), 0.9375rem);
  --hp-fs-num: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --hp-fs-lg: clamp(1.0625rem, 0.99rem + 0.28vw, 1.25rem);
  --hp-fs-md: clamp(0.9375rem, 0.90rem + 0.09vw, 1rem);
  --hp-fs-sm: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);
  --hp-lh-tight: 1.1;
  --hp-lh-heading: 1.2;
  --hp-lh-base: 1.55;
  --hp-lh-loose: 1.8;
  --hp-ls-tight: -0.02em;
  --hp-ls-wide: 0.08em;
  /* Bardzo rozstrzelone wersaliki nadtytułów (sekcja Praktyka produktu). */
  --hp-ls-caps: 0.3em;
  /* Duży tytuł sekcji (h2) w blokach moje-zasady/doswiadczenie/moja-historia — świadomie
     większy i bardziej ściśnięty niż --hp-fs-h1/--hp-ls-tight. */
  --hp-fs-display: clamp(2.375rem, 4.2vw, 4.25rem);
  /* Największy tytuł: hero strony produktu (projekt: ok. 100 px na 1440). */
  --hp-fs-display-xl: clamp(2.75rem, 6.2vw, 6.25rem);
  --hp-lh-display: 1.08;
  --hp-ls-display: -0.035em;
  /* --- Odstępy i siatka --------------------------------------------------- */
  --hp-sp-1: 0.25rem;
  --hp-sp-2: 0.5rem;
  --hp-sp-3: 0.75rem;
  --hp-sp-4: 1rem;
  --hp-sp-5: 1.25rem;
  --hp-sp-6: 1.5rem;
  --hp-sp-8: 2rem;
  --hp-sp-10: 2.5rem;
  --hp-sp-12: 3rem;
  --hp-sp-16: 4rem;
  --hp-sp-20: 5rem;
  --hp-sp-24: 6rem;
  --hp-container-max: 1400px;
  --hp-container-pad: clamp(1.25rem, 4vw, 3rem);
  /* Jednostka kompozycji, 1% szerokości makiety (1535px). Liczona z szerokości
     ORAZ wysokości okna (z dolnym limitem 40rem), żeby hero nie kurczył się
     nadmiernie na niskich oknach przeglądarki. Używana tylko przez bloki
     skalowane wg makiety (np. hero). */
  --hp-scene-h: max(100svh, 40rem);
  --hp-u: min(1vw, calc(var(--hp-scene-h) / 66.7));
  /* Wysokość nagłówka. W makiecie header był transparentny/absolutny nałożony
     na hero — u nas jest zwykłym elementem w przepływie, ale ta sama wartość
     nadal ustawia jego min-height i pozycję rozwiniętego menu mobilnego. */
  --hp-header-h: clamp(4.25rem, calc(var(--hp-u) * 6.32), 6rem);
  /* --- Promienie, cienie, animacje ---------------------------------------- */
  --hp-radius-sm: 4px;
  --hp-radius-md: 6px;
  --hp-radius-lg: 12px;
  --hp-radius-pill: 999px;
  --hp-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 22' 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");
  --hp-squiggle-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 22' 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");
  /* Cudzysłów w kółku przed cytatem (.hp-quote, components.scss). */
  --hp-quote-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='%23BF0117'%3E%3Cpath d='M0 20V11.6C0 5.2 3.4 1.3 9.6 0l1.1 2.6C7.2 3.8 5.6 6.3 5.5 9.4H10V20H0Zm13.6 0V11.6c0-6.4 3.4-10.3 9.6-11.6L24 2.6c-3.5 1.2-5 3.7-5.1 6.8h4.5V20h-9.8Z'/%3E%3C/svg%3E");
  --hp-shadow-btn: 0 10px 24px -12px rgba(191, 1, 23, 0.55);
  --hp-shadow-soft: 0 18px 40px -24px rgba(17, 18, 20, 0.35);
  /* Cień okładki produktu (filter, bo PNG/WebP z przezroczystością): karty sklepu i strony głównej. */
  --hp-filter-okladka: drop-shadow(0 16px 14px rgba(40, 32, 26, .18));
  --hp-t-fast: 0.18s ease;
  --hp-t-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --hp-z-header: 100;
  --hp-z-content: 3;
  --hp-z-person: 2;
  --hp-z-decor: 1;
}

/* Na mobile kompozycja przechodzi w pion, jednostka wraca do czystego vw. */
@media (max-width: 900px) {
  :root {
    --hp-u: 1vw;
    --hp-header-h: 4.5rem;
  }
}
/* ==========================================================================
   NOWA MARKA — biblioteka ikon (data-URI SVG, do użycia z mask-image/
   -webkit-mask, kolorowane przez background-color / currentColor).
   Zamiennik za sprite <svg><defs><symbol id="ico-x"> z makiety — bloki ACF
   nie mają gwarancji, że sprite będzie obecny raz na stronę bez kolizji id,
   więc każda ikona to samodzielny, zakodowany base64 SVG w zmiennej CSS.
   ========================================================================== */
:root {
  --hp-ico-dom: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNSAyMXYtOGExIDEgMCAwIDAtMS0xaC00YTEgMSAwIDAgMC0xIDF2OCIgLz48cGF0aCBkPSJNMyAxMGEyIDIgMCAwIDEgLjcwOS0xLjUyOGw3LTZhMiAyIDAgMCAxIDIuNTgyIDBsNyA2QTIgMiAwIDAgMSAyMSAxMHY5YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yeiIgLz48L3N2Zz4=");
  --hp-ico-koperta: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgeD0iMiIgeT0iNCIgcng9IjIiLz48cGF0aCBkPSJtMjIgNy04Ljk3IDUuN2ExLjk0IDEuOTQgMCAwIDEtMi4wNiAwTDIgNyIvPjwvc3ZnPg==");
  --hp-ico-instagram: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMiIgeT0iMiIgcng9IjUiIHJ5PSI1Ii8+PHBhdGggZD0iTTE2IDExLjM3QTQgNCAwIDEgMSAxMi42MyA4IDQgNCAwIDAgMSAxNiAxMS4zN3oiLz48bGluZSB4MT0iMTcuNSIgeDI9IjE3LjUiIHkxPSI2LjUiIHkyPSI2LjUiLz48L3N2Zz4=");
  --hp-ico-budynek: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02IDIyVjRhMiAyIDAgMCAxIDItMmg4YTIgMiAwIDAgMSAyIDJ2MTgiIC8+PHBhdGggZD0iTTYgMTJINGEyIDIgMCAwIDAtMiAydjZhMiAyIDAgMCAwIDIgMmgyIiAvPjxwYXRoIGQ9Ik0xOCA5aDJhMiAyIDAgMCAxIDIgMnY5YTIgMiAwIDAgMS0yIDJoLTIiIC8+PHBhdGggZD0iTTEwIDZoNCIgLz48cGF0aCBkPSJNMTAgMTBoNCIgLz48cGF0aCBkPSJNMTAgMTRoNCIgLz48cGF0aCBkPSJNMTAgMThoNCIgLz48L3N2Zz4=");
  --hp-ico-umowa: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02IDIyYTIgMiAwIDAgMS0yLTJWNGEyIDIgMCAwIDEgMi0yaDhhMi40IDIuNCAwIDAgMSAxLjcwNC43MDZsMy41ODggMy41ODhBMi40IDIuNCAwIDAgMSAyMCA4djEyYTIgMiAwIDAgMS0yIDJ6IiAvPjxwYXRoIGQ9Ik0xNCAydjVhMSAxIDAgMCAwIDEgMWg1IiAvPjxwYXRoIGQ9Ik0xMCA5SDgiIC8+PHBhdGggZD0iTTE2IDEzSDgiIC8+PHBhdGggZD0iTTE2IDE3SDgiIC8+PC9zdmc+");
  --hp-ico-kalendarz: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDJ2NCIgLz48cGF0aCBkPSJNMTYgMnY0IiAvPjxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iNCIgcng9IjIiIC8+PHBhdGggZD0iTTMgMTBoMTgiIC8+PC9zdmc+");
  --hp-ico-osoba: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIiAvPjxjaXJjbGUgY3g9IjEyIiBjeT0iNyIgcj0iNCIgLz48L3N2Zz4=");
  --hp-ico-tarcza: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxM2MwIDUtMy41IDcuNS03LjY2IDguOTVhMSAxIDAgMCAxLS42Ny0uMDFDNy41IDIwLjUgNCAxOCA0IDEzVjZhMSAxIDAgMCAxIDEtMWMyIDAgNC41LTEuMiA2LjI0LTIuNzJhMS4xNyAxLjE3IDAgMCAxIDEuNTIgMEMxNC41MSAzLjgxIDE3IDUgMTkgNWExIDEgMCAwIDEgMSAxeiIgLz48L3N2Zz4=");
  --hp-ico-klucz: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im0xNS41IDcuNSAyLjMgMi4zYTEgMSAwIDAgMCAxLjQgMGwyLjEtMi4xYTEgMSAwIDAgMCAwLTEuNEwxOSA0IiAvPjxwYXRoIGQ9Im0yMSAyLTkuNiA5LjYiIC8+PGNpcmNsZSBjeD0iNy41IiBjeT0iMTUuNSIgcj0iNS41IiAvPjwvc3ZnPg==");
  --hp-ico-lista: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDEyaC4wMSIgLz48cGF0aCBkPSJNMyAxOGguMDEiIC8+PHBhdGggZD0iTTMgNmguMDEiIC8+PHBhdGggZD0iTTggMTJoMTMiIC8+PHBhdGggZD0iTTggMThoMTMiIC8+PHBhdGggZD0iTTggNmgxMyIgLz48L3N2Zz4=");
  --hp-ico-teczka: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiAyMFY0YTIgMiAwIDAgMC0yLTJoLTRhMiAyIDAgMCAwLTIgMnYxNiIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHg9IjIiIHk9IjYiIHJ4PSIyIiAvPjwvc3ZnPg==");
  --hp-ico-wykres: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDN2MThoMTgiIC8+PHBhdGggZD0iTTE4IDE3VjkiIC8+PHBhdGggZD0iTTEzIDE3VjUiIC8+PHBhdGggZD0iTTggMTd2LTMiIC8+PC9zdmc+");
  --hp-ico-schowek: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjQiIHg9IjgiIHk9IjIiIHJ4PSIxIiByeT0iMSIgLz48cGF0aCBkPSJNMTYgNGgyYTIgMiAwIDAgMSAyIDJ2MTRhMiAyIDAgMCAxLTIgMkg2YTIgMiAwIDAgMS0yLTJWNmEyIDIgMCAwIDEgMi0yaDIiIC8+PC9zdmc+");
  --hp-ico-zegar: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiAvPjxwYXRoIGQ9Ik0xMiA2djZsNCAyIiAvPjwvc3ZnPg==");
  --hp-ico-pobierz: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAzdjEyIiAvPjxwYXRoIGQ9Im03IDExIDUgNSA1LTUiIC8+PHBhdGggZD0iTTQgMjBoMTYiIC8+PC9zdmc+");
  --hp-ico-koszyk: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjgiIGN5PSIyMSIgcj0iMSIgLz48Y2lyY2xlIGN4PSIxOSIgY3k9IjIxIiByPSIxIiAvPjxwYXRoIGQ9Ik0yLjA1IDIuMDVoMmwyLjY2IDEyLjQyYTIgMiAwIDAgMCAyIDEuNThoOS43OGEyIDIgMCAwIDAgMS45NS0xLjU3bDEuNjUtNy40M0g1LjEyIiAvPjwvc3ZnPg==");
  --hp-ico-ptaszek: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCA2IDkgMTdsLTUtNSIgLz48L3N2Zz4=");
  /* Strzałka w prawo (między kartami case study, realizacje-porownanie). */
  --hp-ico-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --hp-ico-pin: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxMGMwIDYtOCAxMi04IDEycy04LTYtOC0xMmE4IDggMCAwIDEgMTYgMFoiIC8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMCIgcj0iMyIgLz48L3N2Zz4=");
  --hp-ico-telefon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMy44MzIgMTYuNTY4YTEgMSAwIDAgMCAxLjIxMy0uMzAzbC4zNTUtLjQ2NUEyIDIgMCAwIDEgMTcgMTVoM2EyIDIgMCAwIDEgMiAydjNhMiAyIDAgMCAxLTIgMkExOCAxOCAwIDAgMSAyIDRhMiAyIDAgMCAxIDItMmgzYTIgMiAwIDAgMSAyIDJ2M2EyIDIgMCAwIDEtLjggMS42bC0uNDY4LjM1MWExIDEgMCAwIDAtLjI5MiAxLjIzMyAxNCAxNCAwIDAgMCA2LjM5MiA2LjM4NCIgLz48L3N2Zz4=");
  --hp-ico-osoba-czat: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjciIGN5PSI3IiByPSIzIi8+PHBhdGggZD0iTTIgMTljLjMtNCAyLjQtNiA1LTZzNC43IDIgNSA2Ii8+PHBhdGggZD0iTTE0IDVoNmEyIDIgMCAwIDEgMiAydjRhMiAyIDAgMCAxLTIgMmgtMmwtMyAyLjVWMTNoLTFhMiAyIDAgMCAxLTItMlY3YTIgMiAwIDAgMSAyLTJaIi8+PHBhdGggZD0iTTE2LjIgOWguMDFNMTguNSA5aC4wMU0yMC44IDloLjAxIi8+PC9zdmc+");
  --hp-ico-tarcza-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAxM2MwIDUtMy41IDcuNS03LjY2IDguOTVhMSAxIDAgMCAxLS42Ny0uMDFDNy41IDIwLjUgNCAxOCA0IDEzVjZhMSAxIDAgMCAxIDEtMWMyIDAgNC41LTEuMiA2LjI0LTIuNzJhMS4xNyAxLjE3IDAgMCAxIDEuNTIgMEMxNC41MSAzLjgxIDE3IDUgMTkgNWExIDEgMCAwIDEgMSAxeiIvPjxwYXRoIGQ9Im05IDEyIDIuMiAyLjJMMTUuNSAxMCIvPjwvc3ZnPg==");
  --hp-ico-cel-strzala: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjExIiBjeT0iMTMiIHI9IjkiLz48Y2lyY2xlIGN4PSIxMSIgY3k9IjEzIiByPSI1LjIiLz48Y2lyY2xlIGN4PSIxMSIgY3k9IjEzIiByPSIxLjYiLz48cGF0aCBkPSJtMTEgMTMgOS05TTE2LjIgNGgzLjh2My44Ii8+PC9zdmc+");
  --hp-ico-schody-strzalka: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yLjUgMjAuNWg0di00aDR2LTRoNHYtNGg0VjQuNSIvPjxwYXRoIGQ9Ik0xNSA0LjVoMy41VjgiLz48L3N2Zz4=");
  --hp-ico-flaga: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02LjUgMjBWMy41TTcgNS41aDlsLTIgMyAyIDNINyIvPjwvc3ZnPg==");
  --hp-ico-nieskonczonosc: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02LjUgMTJjLTIuNSAwLTQgMS41LTQgMy41UzQgMTkgNi41IDE5YzMuNSAwIDUtNi41IDgtNi41IDIuNSAwIDQgMS41IDQgMy41cy0xLjUgMy41LTQgMy41Yy0zLjUgMC01LTYuNS04LTYuNXoiLz48L3N2Zz4=");
  --hp-ico-prezent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDloMTh2MTJIM3pNMi41IDZoMTl2My41aC0xOXpNMTIgNnYxNU02IDZjMC0yLjUgMS41LTQgMy41LTRTMTMgMy41IDEzIDZNMTggNmMwLTIuNS0xLjUtNC0zLjUtNFMxMSAzLjUgMTEgNiIvPjwvc3ZnPg==");
  --hp-ico-checklista: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIxMCIgeT0iOSIgd2lkdGg9IjI4IiBoZWlnaHQ9IjMzIiByeD0iMyIvPjxwYXRoIGQ9Ik0xOCA5VjZoMTJ2M00xNyAyMGwyIDIgNC01TTI3IDIwaDZNMTcgMjlsMiAyIDQtNU0yNyAyOWg2TTE3IDM3aDE2Ii8+PC9zdmc+");
  --hp-ico-klucz-diag: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS42NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSI5Ii8+PHBhdGggZD0iTTI0LjUgMjQuNUw0MSA0MU0zNCAzNGw0LTRNMjkgMjlsNC00Ii8+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMiIvPjwvc3ZnPg==");
  /* --- Sekcje "Moja historia" / "Moje zasady" / "Doświadczenie" (viewBox 32, stroke-width 1.7 — zgodnie z dostarczonym mockupem tych sekcji) --- */
  --hp-ico-historia-dom: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMC40IDYuNGE1LjQgNS40IDAgMCAxIDUuMiA1LjYgNS40IDUuNCAwIDAgMS04LjkgMy45TDcgMjUuNEg0LjN2LTIuN2wxLjktMS45bTMuMS40IDIgMi4yTTIxLjcgMTAuNGguMiIvPjwvc3ZnPg==");
  --hp-ico-historia-system: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDVoMTZ2MjJIOHpNMTEgMTFsMiAyIDMtNG0zIDNoM00xMSAxOGwyIDIgMy00bTMgM2gzIi8+PC9zdmc+");
  --hp-ico-historia-zespol: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjE2IiBjeT0iOCIgcj0iMyIvPjxjaXJjbGUgY3g9IjciIGN5PSIxMyIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iMjUiIGN5PSIxMyIgcj0iMi41Ii8+PHBhdGggZD0iTTExIDI3di01YTUgNSAwIDAgMSAxMCAwdjVNMi41IDI3di01YTQgNCAwIDAgMSA2LTMuNU0yOS41IDI3di01YTQgNCAwIDAgMC02LTMuNSIvPjwvc3ZnPg==");
  --hp-ico-historia-wzrost: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDI3aDI0TTcgMjd2LTdoNXY3bTQgMFYxNWg1djEybTQgMFYxMGg0TTcgMTVsNy03IDUgMyA5LThtLTUgMGg1djUiLz48L3N2Zz4=");
  --hp-ico-wartosc-tarcza: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiA0bDEwIDR2OGMwIDYtNCAxMC0xMCAxM0MxMCAyNiA2IDIyIDYgMTZWOGwxMC00ek0xMSAxNmwzIDMgNy04Ii8+PC9zdmc+");
  --hp-ico-wartosc-dialog: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDZoMjF2MTRIMTJsLTYgNXYtNUg0VjZ6bTggMThoMTBsNSA0di05Ii8+PHBhdGggZD0iTTkgMTFoMTFNOSAxNWg3Ii8+PC9zdmc+");
  --hp-ico-wartosc-system: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDZoMTZ2MjFIOHpNMTIgM2g4djVoLTh6TTExIDEzaDhNMTEgMThoNiIvPjxjaXJjbGUgY3g9IjIzIiBjeT0iMjIiIHI9IjUiLz48cGF0aCBkPSJNMjMgMTl2Nk0yMCAyMmg2Ii8+PC9zdmc+");
  --hp-ico-projekt-zespol: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMyA3aDE0djIwSDEzek0xNyA0aDZ2NWgtNnpNMTYgMTRoOE0xNiAxOWg2Ii8+PGNpcmNsZSBjeD0iNyIgY3k9IjEyIiByPSIzIi8+PHBhdGggZD0iTTIgMjV2LTRhNSA1IDAgMCAxIDEwIDB2NCIvPjwvc3ZnPg==");
  --hp-ico-projekt-budynki: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik01IDI3VjhsMTMtNHYyM00xOCAxMmg5djE1TTIgMjdoMjhNOSAxMWg0bS00IDVoNG0tNCA1aDRtMTMtNGgtNG00IDVoLTQiLz48L3N2Zz4=");
  --hp-ico-projekt-wzrost: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDI3aDE4TTYgMjd2LTdoNHY3bTQgMFYxNWg0djEyTTUgMTRsNi02IDUgMyA4LThtLTQgMGg0djQiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjE5IiByPSI0Ii8+PHBhdGggZD0iTTI1IDIzdjZtMC0xMGguMSIvPjwvc3ZnPg==");
  /* --- Podstrona "Oferta" (viewBox 32, stroke-width 1.7 — spójne z zestawem wyżej) --- */
  --hp-ico-dom-lupa: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDE0IDE2IDRsMTIgMTBNNyAxMnYxNWgxMk0xMiAyN3YtOGg3Ii8+PGNpcmNsZSBjeD0iMjMiIGN5PSIyMiIgcj0iNSIvPjxwYXRoIGQ9Im0yNyAyNiAzIDMiLz48L3N2Zz4=");
  --hp-ico-budynek-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDVoMTZ2MjJIOHpNMTIgM2g4djVoLTh6TTExIDEzaDdNMTEgMThoNSIvPjxjaXJjbGUgY3g9IjIzIiBjeT0iMjIiIHI9IjUiLz48cGF0aCBkPSJtMjAuNSAyMiAxLjcgMS44IDMuNC0zLjgiLz48L3N2Zz4=");
  --hp-ico-wzrost-biznes: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDI3aDI2TTcgMjd2LThoNXY4bTQgMFYxNGg1djEzbTQgMFY5aDRNNiAxNGw3LTcgNSAzIDktOG0tNSAwaDV2NSIvPjwvc3ZnPg==");
  --hp-ico-kosz-zakupy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0zIDZoNGwzIDE0aDE0bDMtMTBIOSIvPjxwYXRoIGQ9Ik0xMyAyNmguMSIvPjxwYXRoIGQ9Ik0yMyAyNmguMSIvPjwvc3ZnPg==");
  --hp-ico-ustawienia-cel: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjciLz48cGF0aCBkPSJNMTYgM3Y0bTAgMTh2NE0zIDE2aDRtMTggMGg0TTcgN2wzIDNtMTIgMTIgMyAzTTI1IDdsLTMgM00xMCAyMmwtMyAzIi8+PC9zdmc+");
  --hp-ico-dialog-kropki: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDZoMjR2MTZIMTVsLTcgNnYtNkg0eiIvPjxwYXRoIGQ9Ik0xMCAxNGguMSIvPjxwYXRoIGQ9Ik0xNiAxNGguMSIvPjxwYXRoIGQ9Ik0yMiAxNGguMSIvPjwvc3ZnPg==");
  --hp-ico-dokument-podpis: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDRoMTJsNSA1djE4SDh6Ii8+PHBhdGggZD0iTTIwIDR2Nmg1Ii8+PHBhdGggZD0iTTEyIDE0aDhtLTggNWg2Ii8+PHBhdGggZD0ibTE5IDI1IDctNyAzIDMtNyA3LTQgMXoiLz48L3N2Zz4=");
  --hp-ico-teczka-firmy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik01IDExaDIydjE2SDV6Ii8+PHBhdGggZD0iTTEyIDExVjdoOHY0Ii8+PHBhdGggZD0iTTUgMTdjNyAyIDE1IDIgMjIgMCIvPjxwYXRoIGQ9Ik0xNCAxN2g0Ii8+PC9zdmc+");
  --hp-ico-budynek-okna: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik01IDI3VjhsMTMtNHYyM00xOCAxMmg5djE1TTIgMjdoMjhNOSAxMWg0bS00IDVoNG0tNCA1aDRtMTMtNGgtNG00IDVoLTQiLz48L3N2Zz4=");
}

/* ==========================================================================
   NOWA MARKA — reset body/typografii globalnej, odtworzone z homepage/css/base.css.
   Ograniczone do:
     - body.tb-nowa-marka — dopisywane przez PHP tylko na stronach z blokami
       nowej marki (patrz includes/homepage-design.php), żeby nie zmienić
       wyglądu stron zbudowanych jeszcze starym motywem;
     - .editor-styles-wrapper — klasa, którą Gutenberg nakłada na wrapper
       treści WEWNĄTRZ iframe'a edytora. Nasz PHP body_class filter nie ma
       tam żadnego wpływu (to inny <body>, wewnątrz iframe'a), więc bez tego
       drugiego selektora podgląd w edytorze nie miałby ani tła, ani resetu
       marginesów — tylko sam front.
   ========================================================================== */
body.tb-nowa-marka, .editor-styles-wrapper {
  font-family: var(--hp-ff-base);
  font-size: var(--hp-fs-md);
  line-height: var(--hp-lh-base);
  font-weight: var(--hp-fw-regular);
  color: var(--hp-c-ink-2);
  background-color: var(--hp-c-bg);
  background-image: radial-gradient(58% 22% at 100% 6%, rgba(247, 205, 206, 0.55) 0%, rgba(247, 205, 206, 0) 100%), radial-gradient(46% 16% at 0% 26%, rgba(246, 201, 205, 0.5) 0%, rgba(246, 201, 205, 0) 100%), radial-gradient(62% 20% at 100% 46%, rgba(251, 232, 233, 0.85) 0%, rgba(251, 232, 233, 0) 100%), radial-gradient(50% 18% at 0% 66%, rgba(246, 201, 205, 0.45) 0%, rgba(246, 201, 205, 0) 100%), radial-gradient(60% 22% at 100% 88%, rgba(247, 205, 206, 0.5) 0%, rgba(247, 205, 206, 0) 100%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
  margin: 0;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(ul[class], ol[class]) {
  list-style: none;
  padding: 0;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(img) {
  height: auto;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(button) {
  background: none;
  border: 0;
  cursor: pointer;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(a) {
  color: inherit;
  text-decoration: none;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) main {
  overflow-x: clip;
}

:where(body.tb-nowa-marka, .editor-styles-wrapper) :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--hp-c-red);
  outline-offset: 3px;
  border-radius: var(--hp-radius-sm);
}

.tb-block {
  padding-block: 60px;
}

@media (max-width: 1050px) {
  .tb-block {
    padding-block: 45px;
  }
}
@media (max-width: 780px) {
  .tb-block {
    padding-block: 30px;
  }
}
/* ==========================================================================
   NOWA MARKA — komponenty wspólne dla kilku bloków (przycisk, eyebrow,
   statystyki, dowód społeczny...). Odtworzone z makiety homepage/css/.
   Klasy pod przedrostkiem .hp-, żeby nie kolidować ze starym motywem
   (który ma własne .container, .btn, .eyebrow o innym wyglądzie).
   ========================================================================== */
.hp-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--hp-container-pad);
}

/* --------------------------------------------------------------------------
   Logo, sygnatura tekstowa. Współdzielone przez nagłówek i stopkę.
   -------------------------------------------------------------------------- */
.hp-logo {
  display: grid;
  justify-items: start;
  justify-self: start;
  width: fit-content;
  gap: 0.5rem;
  flex: none;
  line-height: 1;
}

.hp-logo__name {
  font-family: var(--hp-ff-heading);
  font-size: var(--hp-fs-logo);
  font-weight: var(--hp-fw-bold);
  letter-spacing: -0.015em;
  color: var(--hp-c-ink);
  white-space: nowrap;
}

.hp-logo__accent {
  color: var(--hp-c-red);
}

.hp-logo__tld {
  color: var(--hp-c-ink-3);
  font-weight: var(--hp-fw-medium);
}

.hp-logo__tagline {
  display: block;
  font-size: var(--hp-fs-logo-tag);
  font-weight: var(--hp-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hp-c-ink-3);
}

.hp-logo:hover .hp-logo__accent {
  color: var(--hp-c-red-hover);
}

.hp-logo--light .hp-logo__name,
.hp-logo--light .hp-logo__accent,
.hp-logo--light .hp-logo__tagline {
  color: var(--hp-c-white);
}

.hp-logo--light .hp-logo__tld {
  color: rgba(255, 255, 255, 0.65);
}

.hp-logo--light:hover .hp-logo__accent {
  color: var(--hp-c-rose);
}

.hp-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Nagłówki, tylko wygląd (znacznik dobierany pod strukturę) ---------
   UWAGA: celowo BEZ margin tutaj. Reset (base.scss, zerowa specyficzność
   przez :where()) już zdejmuje domyślny margines z h1-h6/p. Odstępy pionowe
   ustawiają wyłącznie klasy konkretnego bloku (np. .tb-hero__title,
   .tb-hero__lead) przez margin-top. Gdyby te klasy narzędziowe też ustawiały
   margin, przy tej samej specyficzności (0,1,0) o wyniku decydowałaby
   kolejność wczytania arkuszy zamiast reguły bloku — i tak faktycznie
   zgubiły się odstępy w hero (margin:0 z .hp-h1/.hp-text-lg nadpisywał
   margin-top z .tb-hero__title/.tb-hero__lead, bo homepage-design.css
   ładuje się po inline'owanym stylu bloku). --- */
.hp-h1, .hp-h2, .hp-h4, .hp-h5, .hp-h6, .hp-display {
  font-family: var(--hp-ff-heading);
  font-variant-numeric: lining-nums;
  font-weight: var(--hp-fw-bold);
  line-height: var(--hp-lh-heading);
  letter-spacing: var(--hp-ls-tight);
  text-wrap: balance;
}

/* Kolor osobno, w :where() (zerowa specyficzność) — niektóre bloki na ciemnym
   tle nadpisują kolor nagłówka (np. .tb-produkty__title { color: white }).
   Bez tego przy remisie specyficzności (0,1,0) wygrywałaby kolejność
   wczytania arkuszy, nie reguła bloku — tak zgubił się biały nagłówek w
   sekcji Produkty. */
:where(.hp-h1, .hp-h2, .hp-h4, .hp-h5, .hp-h6, .hp-display) {
  color: var(--hp-c-ink);
}

.hp-h1 {
  font-size: var(--hp-fs-h1);
  line-height: var(--hp-lh-tight);
  text-wrap: wrap;
}

.hp-h2 {
  font-size: var(--hp-fs-h2);
}

.hp-h4 {
  font-size: var(--hp-fs-h4);
}

.hp-h5 {
  font-size: var(--hp-fs-h5);
}

.hp-h6 {
  font-size: var(--hp-fs-h6);
}

.hp-display {
  font-size: var(--hp-fs-display);
  line-height: var(--hp-lh-display);
  letter-spacing: var(--hp-ls-display);
  text-wrap: balance;
}

.hp-display--xl {
  font-size: var(--hp-fs-display-xl);
  line-height: 1;
}

.hp-text-lg {
  font-size: var(--hp-fs-lg);
  line-height: var(--hp-lh-loose);
}

.hp-text-md {
  font-size: var(--hp-fs-md);
  line-height: var(--hp-lh-base);
}

.hp-text-sm {
  font-size: var(--hp-fs-sm);
  line-height: 1.45;
}

.hp-text-lg strong, .hp-text-md strong, .hp-text-sm strong {
  font-weight: var(--hp-fw-bold);
  color: var(--hp-c-ink);
}

/* --- Eyebrow, nadtytuł odręczny ----------------------------------------- */
.hp-eyebrow {
  font-family: var(--hp-ff-hand);
  font-size: var(--hp-fs-hand);
  font-weight: var(--hp-fw-bold);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  color: var(--hp-c-red);
  margin: 0;
}

.hp-eyebrow--light {
  color: var(--hp-c-rose);
}

/* Mniejszy odręczny dopisek (np. „bez infolinii” obok telefonu). */
.hp-eyebrow--sm {
  font-size: var(--hp-fs-hand-sm);
  line-height: 1.35;
}

/* --- Czerwony fragment nagłówka w starszych blokach PHP ----------------- */
.hp-u-red {
  color: var(--hp-c-red);
}

/* Odręczna kreska pod nagłówkiem jako ::after (core/heading nie przyjmie
   pustego <span>). Klasa "hp-rule-after" w Dodatkowych klasach CSS. */
.hp-rule-after::after {
  content: "";
  display: block;
  width: 7.5rem;
  aspect-ratio: 280/22;
  margin-top: clamp(0.5rem, 0.9vw, 0.875rem);
  background: var(--hp-squiggle) no-repeat left center/contain;
}

.hp-rule-after--light::after {
  background-image: var(--hp-squiggle-light);
}

/* Cytat z cudzysłowem w różowym kółku (Moja historia, Moje zasady).
   Akapit z klasą "hp-quote"; kolor i rozmiar liter nadają presety
   w treści (textColor brand, fontSize text-l), tu tylko kółko. */
.hp-quote {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.125rem);
}

.hp-quote::before {
  content: "";
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--hp-quote-mark) center/42% no-repeat, var(--hp-c-red-tint);
}

@media (max-width: 680px) {
  .hp-quote {
    align-items: flex-start;
  }
}
/* Pasek statystyk hero (ikona | liczba nad podpisem, pionowe separatory).
   Wspólny dla hero strony głównej i hero podstron: core/columns z klasą
   .hp-stats, kolumny .hp-stat, w środku core/image .hp-stat__icon
   i akapity .hp-stat__value / .hp-stat__label. Rozmiar i kolor liter
   nadają presety w treści, tu tylko układ. Podwójne klasy biją własne
   odstępy kolumn i układu WordPressa. */
.hp-stats.wp-block-columns {
  max-width: calc(var(--hp-u) * 50);
  gap: clamp(0.75rem, var(--hp-u) * 2, 2.25rem);
  /* Tylko dół: odstęp od elementu nad paskiem ustawia blok, w którym stoi. */
  margin-bottom: 0;
}

.hp-stat.wp-block-column {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Nadwyżka wysokości ikony idzie w drugi wiersz, więc liczba i podpis
     stoją zawsze ciasno jeden pod drugim, niezależnie od kształtu ikony. */
  grid-template-rows: min-content 1fr;
  column-gap: clamp(0.5rem, var(--hp-u) * 0.85, 0.875rem);
  row-gap: 0.1rem;
  align-items: start;
  padding-left: clamp(0.75rem, var(--hp-u) * 1.8, 2rem);
  border-left: 1px solid var(--hp-c-line);
}

.hp-stat.wp-block-column:first-child {
  padding-left: 0;
  border-left: 0;
}

.hp-stat .hp-stat__icon {
  grid-row: span 2;
  margin: 0.1rem 0 0;
}

.hp-stat .hp-stat__icon img {
  display: block;
  width: clamp(1.625rem, var(--hp-u) * 2.2, 2.25rem);
  height: clamp(1.625rem, var(--hp-u) * 2.2, 2.25rem);
  object-fit: contain;
}

.hp-stat .hp-stat__value,
.hp-stat .hp-stat__label {
  margin: 0;
}

@media (max-width: 900px) {
  .hp-stats.wp-block-columns {
    max-width: none;
  }
}
/* Poniżej 782 px WordPress układa kolumny jedna pod drugą. Lewy odstęp
   i pionowa kreska z układu poziomego robiły wtedy schodek (pierwsza
   pozycja ich nie ma), więc separator przechodzi na poziomy. */
@media (max-width: 781px) {
  .hp-stat.wp-block-column {
    padding-left: 0;
    border-left: 0;
  }
  .hp-stat.wp-block-column + .hp-stat.wp-block-column {
    padding-top: var(--hp-sp-3);
    border-top: 1px solid var(--hp-c-line);
  }
}
/* Ikona w jasnoróżowym kółku: core/image z czerwonym SVG z biblioteki
   (tytuły „Ikona marki: …”). Rozmiar kółka i ikony blok ustawia
   zmiennymi --hp-icon-size / --hp-icon-fill. Podwójna klasa bije
   .wp-block-image img z WordPressa. */
.hp-icon-circle.wp-block-image {
  --hp-icon-size: 3rem;
  --hp-icon-fill: 50%;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hp-icon-size);
  height: var(--hp-icon-size);
  margin: 0;
  border-radius: 50%;
  background: var(--hp-c-red-tint);
}

.hp-icon-circle.wp-block-image img {
  width: var(--hp-icon-fill);
  height: var(--hp-icon-fill);
  object-fit: contain;
}

.hp-num {
  font-family: var(--hp-ff-heading);
  font-variant-numeric: lining-nums;
  font-size: var(--hp-fs-num);
  font-weight: var(--hp-fw-bold);
  line-height: 1;
  letter-spacing: var(--hp-ls-tight);
  color: var(--hp-c-red);
}

/* --------------------------------------------------------------------------
   Przycisk
   -------------------------------------------------------------------------- */
/* Przycisk marki dla linków z PHP. Wymiary, krój i warianty 1:1 z przyciskami
   core/button ze strony głównej (is-style-marka / -outline / -ghost
   w assets/scss/_buttons.scss). Zmieniasz jedno, zmień drugie. */
.hp-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-sp-3);
  padding: var(--hp-sp-3) var(--hp-sp-5);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: var(--hp-radius-sm);
  transition: background-color var(--hp-t-fast), transform var(--hp-t-fast), box-shadow var(--hp-t-fast);
}

.hp-btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.hp-btn--primary {
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  box-shadow: var(--hp-shadow-btn);
}

.hp-btn--primary:hover {
  background: var(--hp-c-red-hover);
  transform: translateY(-1px);
}

.hp-btn--primary:active {
  transform: translateY(0);
}

.hp-btn--lg {
  padding: clamp(0.9375rem, var(--hp-u) * 1.17, 1.125rem) clamp(1.25rem, var(--hp-u) * 2.2, 2rem);
  gap: var(--hp-sp-4);
}

.hp-btn--outline {
  justify-content: center;
  width: 100%;
  color: var(--hp-c-red);
  background: transparent;
  border: 1px solid var(--hp-c-red);
  box-shadow: none;
}

.hp-btn--outline:hover {
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  transform: translateY(-1px);
}

.hp-btn--outline .hp-icon {
  stroke-width: 2;
}

.hp-btn--ghost {
  justify-content: center;
  color: var(--hp-c-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.hp-btn--ghost:hover {
  color: var(--hp-c-burgundy);
  background: var(--hp-c-white);
  border-color: var(--hp-c-white);
  transform: translateY(-1px);
}

/* Biały, wypełniony, na ciemnym tle (bordowe belki CTA). */
.hp-btn--light {
  background: var(--hp-c-white);
  color: var(--hp-c-red);
  box-shadow: 0 13px 28px rgba(65, 0, 9, 0.22);
}

.hp-btn--light:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Formularz (pola) — wspólny wygląd pól dla wszystkich formularzy
   kontaktowych CF7 w nowej marce (np. kontakt-formularz).
   Klasa .hp-form idzie na element, który
   bezpośrednio opakowuje <form>/shortcode CF7 — każdy blok dodaje własne
   tło/padding/cień/tytuł na TYM SAMYM elemencie przez swoją klasę BEM,
   .hp-form odpowiada tylko za same pola (floating labels, przycisk).

   Etykieta "unosi się" nad polem przy fokusie/wypełnieniu. CF7 renderuje
   <label> PRZED polem (nie po nim), więc zamiast selektora rodzeństwa (~)
   stan pola łapiemy przez :has() na wspólnym rodzicu (.form-field/<p>).
   placeholder=" " (wymagany do zadziałania :placeholder-shown) dopisuje
   assets/js/homepage/floating-labels.js polom, które go nie mają.
   -------------------------------------------------------------------------- */
/* Grubość ramki pola — jedno źródło dla ramki i dla spoczynkowej pozycji
   etykiety (patrz .hp-form label), która liczy się od jej krawędzi. */
.hp-form {
  --hp-form-bw: 1.5px;
}

.hp-form form,
.hp-form .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Od 3. pola w górę (wiadomość i dalsze) — na całą szerokość. */
.hp-form .form-field:nth-of-type(n+3),
.hp-form p:nth-of-type(n+3) {
  grid-column: 1/-1;
}

.hp-form .form-field,
.hp-form p {
  position: relative;
  margin: 0;
}

.hp-form label {
  position: absolute;
  z-index: 1;
  left: 0.9375rem;
  /* Pozycja spoczynkowa = środek linii tekstu w polu: ramka + padding pola
     + połowa różnicy między line-height pola (--hp-lh-base) a labela (1).
     Bez tego label (line-height: 1) siedział ~5px nad środkiem pola. */
  top: calc(var(--hp-form-bw) + 0.9375rem + (var(--hp-lh-base) - 1) * var(--hp-fs-md) / 2);
  margin: 0;
  padding-inline: 0.375rem;
  background: var(--hp-c-white);
  color: var(--hp-c-ink-3);
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-medium);
  line-height: 1;
  pointer-events: none;
  transition: top var(--hp-t-fast), font-size var(--hp-t-fast), font-weight var(--hp-t-fast), color var(--hp-t-fast);
}

/* select nie wspiera :placeholder-shown (zawsze coś "wybrane") — jego
   etykieta unosi się więc zawsze, bezwarunkowo, niezależnie od fokusu. */
.hp-form .form-field:has(input:focus) label,
.hp-form .form-field:has(textarea:focus) label,
.hp-form .form-field:has(input:not(:placeholder-shown)) label,
.hp-form .form-field:has(textarea:not(:placeholder-shown)) label,
.hp-form .form-field:has(select) label,
.hp-form p:has(input:focus) label,
.hp-form p:has(textarea:focus) label,
.hp-form p:has(input:not(:placeholder-shown)) label,
.hp-form p:has(textarea:not(:placeholder-shown)) label,
.hp-form p:has(select) label {
  top: -0.5625rem;
  font-size: 0.75rem;
  font-weight: var(--hp-fw-bold);
  color: var(--hp-c-red);
}

.hp-form input:not([type=checkbox]):not([type=submit]),
.hp-form select,
.hp-form textarea {
  width: 100%;
  padding: 0.9375rem 1.0625rem;
  font-family: inherit;
  font-size: var(--hp-fs-md);
  color: var(--hp-c-ink);
  background: var(--hp-c-white);
  border: var(--hp-form-bw) solid var(--hp-c-line);
  border-radius: var(--hp-radius-md);
  transition: border-color var(--hp-t-fast), box-shadow var(--hp-t-fast);
}

/* Jawny line-height — spoczynkowa pozycja labela (wyżej) liczy się właśnie
   od niego; bez tego zależałaby od tego, co akurat wygra w kaskadzie. */
.hp-form input:not([type=checkbox]):not([type=submit]),
.hp-form textarea {
  line-height: var(--hp-lh-base);
}

/* height wygrywa z atrybutem rows="10" z CF7 (dawał ~275px). 12.5rem = 200px. */
.hp-form textarea {
  height: 12.5rem;
  min-height: 9.375rem;
  resize: vertical;
}

.hp-form input:focus,
.hp-form select:focus,
.hp-form textarea:focus {
  outline: none;
  border-color: var(--hp-c-red);
  box-shadow: 0 0 0 3px rgba(191, 1, 23, 0.1);
}

/* appearance: none — CF7 renderuje submit jako <input type="submit">, które
   domyślnie ma natywny wygląd przycisku systemowego (biały, ramka OS)
   nadpisujący background/border mimo poprawnego CSS. */
.hp-form .wpcf7-submit,
.hp-form button[type=submit] {
  grid-column: 1/-1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.625rem;
  margin-top: 0.375rem;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: var(--hp-radius-md);
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  font: inherit;
  font-size: var(--hp-fs-ui);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--hp-shadow-btn);
  transition: background var(--hp-t-fast), transform var(--hp-t-fast);
}

.hp-form .wpcf7-submit:hover,
.hp-form button[type=submit]:hover {
  background: var(--hp-c-red-hover);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .hp-form form,
  .hp-form .wpcf7-form {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------------------------------
   Modal (natywny <dialog>), współdzielony. Wewnątrz .hp-modal__form renderuje
   się formularz Contact Form 7 — style pól celują też w jego domyślne klasy
   (.wpcf7-form-control itd.), żeby wyglądał jak reszta makiety bez modyfikacji
   samego formularza w CF7.
   -------------------------------------------------------------------------- */
.hp-modal {
  width: min(34rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--hp-radius-lg);
  background: transparent;
  overflow: visible;
}

.hp-modal::backdrop {
  background: rgba(30, 6, 9, 0.55);
  backdrop-filter: blur(3px);
}

.hp-modal__card {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--hp-c-surface);
  border-radius: var(--hp-radius-lg);
  box-shadow: 0 40px 80px -40px rgba(17, 18, 20, 0.6);
}

.hp-modal__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--hp-c-ink-3);
  transition: background var(--hp-t-fast), color var(--hp-t-fast);
}

.hp-modal__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.hp-modal__close:hover {
  background: var(--hp-c-red-tint);
  color: var(--hp-c-red);
}

.hp-modal__title {
  margin-top: clamp(0.375rem, 1vw, 0.75rem);
}

.hp-modal__lead:empty {
  display: none;
}

.hp-modal__lead {
  margin-top: 0.5rem;
  color: var(--hp-c-ink-3);
}

.hp-modal__form,
.hp-modal__form .wpcf7-form {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
}

.hp-modal__form form,
.hp-modal__form .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.125rem);
}

.hp-modal__form p {
  grid-column: 1/-1;
  margin: 0;
}

.hp-modal__form label,
.hp-modal__form legend,
.hp-modal__form .wpcf7-form label {
  display: grid;
  gap: 0.375rem;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-c-ink);
}

.hp-modal__form input:not([type=checkbox]):not([type=submit]),
.hp-modal__form select,
.hp-modal__form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-regular);
  color: var(--hp-c-ink);
  background: var(--hp-c-white);
  border: 1px solid var(--hp-c-line);
  border-radius: var(--hp-radius-sm);
  transition: border-color var(--hp-t-fast), box-shadow var(--hp-t-fast);
}

.hp-modal__form input::placeholder,
.hp-modal__form textarea::placeholder {
  color: var(--hp-c-placeholder);
}

.hp-modal__form input:focus,
.hp-modal__form select:focus,
.hp-modal__form textarea:focus {
  outline: none;
  border-color: var(--hp-c-red);
  box-shadow: 0 0 0 3px rgba(191, 1, 23, 0.12);
}

.hp-modal__form textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Globalny reset (global.scss: input { appearance: none }) chowa checkboxy,
   dlatego w okienkach przywracamy natywny wygląd. */
.hp-modal__form input[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: auto;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  accent-color: var(--hp-c-red);
}

/* Kafelek wyboru w okienku (checkbox + opis + mała etykieta z prawej),
   np. lista materiałów w okienku newslettera. Zaznaczony kafelek dostaje
   różowe tło i czerwoną ramkę. */
.hp-modal__form .hp-modal__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: var(--hp-fs-md);
  font-weight: var(--hp-fw-medium);
  line-height: 1.35;
  color: var(--hp-c-ink);
  background: var(--hp-c-white);
  border: 1px solid var(--hp-c-line);
  border-radius: var(--hp-radius-md);
  cursor: pointer;
  transition: border-color var(--hp-t-fast), background var(--hp-t-fast), box-shadow var(--hp-t-fast);
}

.hp-modal__form .hp-modal__choice:hover {
  border-color: rgba(191, 1, 23, 0.4);
}

.hp-modal__form .hp-modal__choice:has(input:checked) {
  background: var(--hp-c-red-tint-2);
  border-color: var(--hp-c-red);
  box-shadow: 0 0 0 3px rgba(191, 1, 23, 0.08);
}

.hp-modal__form .hp-modal__choice input[type=checkbox] {
  margin-top: 0;
}

.hp-modal__form .hp-modal__choice small {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  color: var(--hp-c-red);
  background: var(--hp-c-red-tint);
  border-radius: var(--hp-radius-sm);
}

/* Zgoda: zwykły tekst, nie etykieta pola. .hp-modal__consent to ten sam
   wygląd dla formularzy spoza CF7 (okienko newslettera). */
.hp-modal__form .wpcf7-acceptance label,
.hp-modal__form .hp-modal__consent {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-regular);
  color: var(--hp-c-ink-2);
}

.hp-modal__form input[type=submit],
.hp-modal__form .wpcf7-submit {
  grid-column: 1/-1;
}

/* Pole na całą szerokość okienka (klasa na <label> w formularzu CF7),
   akceptacja też idzie w pełnej linii. */
.hp-modal__form .hp-modal__wide,
.hp-modal__form .wpcf7-acceptance,
.hp-modal__form .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
  grid-column: 1/-1;
}

/* Zawijak CF7 wokół submitu i spinner nie mogą zająć komórki siatki obok. */
.hp-modal__form .wpcf7-spinner {
  grid-column: 1/-1;
  justify-self: center;
}

.hp-modal__form .wpcf7-not-valid-tip {
  grid-column: 1/-1;
  margin-top: -0.5rem;
  font-size: var(--hp-fs-sm);
  color: var(--hp-c-red);
}

.hp-modal__form .wpcf7-response-output {
  grid-column: 1/-1;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--hp-radius-sm);
  font-size: var(--hp-fs-sm);
}

@media (max-width: 520px) {
  .hp-modal__form form,
  .hp-modal__form .wpcf7-form {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* --------------------------------------------------------------------------
   Podstrona Oferta — komponenty wspólne dla kilku bloków (tb-oferta-*).
   Odtworzone z makiety homepage/Oferta/oferta-nowe-bloki.html.
   -------------------------------------------------------------------------- */
/* Tło sekcji: delikatne różowe poświaty + cienkie owalne obrysy, na przemian
   wg pozycji sekcji na stronie (parzysta/nieparzysta w makiecie). Każdy blok
   deklaruje wariant na sztywno (--odd/--even), nie przez :nth-of-type, żeby
   kolejność bloków w edytorze nigdy nie mieszała wariantów. */
.hp-offer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hp-offer-bg--odd {
  background: radial-gradient(circle at 3% 40%, rgba(245, 202, 207, 0.5), transparent 31%), radial-gradient(circle at 97% 12%, rgba(250, 224, 227, 0.72), transparent 34%);
}

.hp-offer-bg--even {
  background: radial-gradient(circle at 94% 68%, rgba(247, 213, 217, 0.62), transparent 31%), radial-gradient(circle at 8% 0%, rgba(251, 233, 235, 0.62), transparent 28%);
}

.hp-offer-bg__ring {
  position: absolute;
  border: 1px solid rgba(191, 1, 23, 0.12);
  border-radius: 48% 52% 43% 57%/56% 44% 56% 44%;
}

.hp-offer-bg__ring--1 {
  width: 700px;
  height: 520px;
  left: -430px;
  top: -210px;
  transform: rotate(18deg);
}

.hp-offer-bg__ring--2 {
  width: 760px;
  height: 570px;
  right: -470px;
  bottom: -270px;
  transform: rotate(-22deg);
}

/* Kropki dekoracyjne, róg sekcji. */
.hp-dots {
  position: absolute;
  z-index: -1;
  width: 92px;
  height: 92px;
  opacity: 0.36;
  background-image: radial-gradient(var(--hp-c-red) 1.5px, transparent 1.7px);
  background-size: 14px 14px;
  pointer-events: none;
}

.hp-dots--tr {
  top: 56px;
  right: 5%;
}

.hp-dots--bl {
  bottom: 38px;
  left: 2%;
}

/* Karta: powierzchnia na tle sekcji (ścieżki, drabinka, konsultacja, dowody, FAQ). */
.hp-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-soft);
}

/* Koło z ikoną (SVG jako mask, currentColor). */
.hp-icon-circle {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--hp-c-red);
  background: var(--hp-c-red-tint);
}

.hp-icon-circle__mask {
  display: block;
  width: 36px;
  height: 36px;
  background-color: currentColor;
  -webkit-mask: var(--hp-icon) center/contain no-repeat;
  mask: var(--hp-icon) center/contain no-repeat;
}

/* Krótka pozioma kreska, akcent pod tytułem karty (nie mylić z .hp-rule-after,
   odręcznym podkreśleniem — to prosta 2px linia z makiety Oferty). */
.hp-rule-flat {
  display: block;
  width: 38px;
  height: 2px;
  background: var(--hp-c-red);
}

/* ==========================================================================
   Okienko zapisu na newsletter (#tb-nl-okienko, includes/newsletter.php).
   Karta, pola, kafelki wyboru (.hp-modal__choice) i zgoda
   (.hp-modal__consent) z components.scss. Tu tylko rytm odstępów,
   pułapka na boty i stan po wysłaniu.
   ========================================================================== */
.tb-nl__form.hp-modal__form {
  display: grid;
  gap: 1.25rem;
}
.tb-nl__form.hp-modal__form[hidden] {
  display: none;
}
.tb-nl__materialy {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tb-nl__materialy legend {
  margin-bottom: 0.375rem;
  padding: 0;
}
.tb-nl__zgoda a {
  text-decoration: underline;
}
.tb-nl__pulapka {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}
.tb-nl__komunikat {
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--hp-c-red);
  background: var(--hp-c-red-tint-2);
  border-radius: var(--hp-radius-md);
}
.tb-nl__komunikat:empty {
  display: none;
}
.tb-nl__wyslij.hp-btn {
  width: 100%;
  margin-top: 0.25rem;
}
.tb-nl .tb-nl__stopka {
  margin: -0.5rem 0 0;
  text-align: center;
}
.tb-nl__gotowe {
  margin-top: 1.5rem;
}
.tb-nl__pliki {
  display: grid;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.tb-nl__pliki .hp-btn {
  width: 100%;
}

/* ==========================================================================
   Okienko „Dodano do koszyka” (#tb-koszyk-okienko, includes/koszyk-okienko.php).
   Karta i zamykanie z .hp-modal, ikona z .hp-icon-circle, przyciski .hp-btn.
   Tu tylko układ: produkt w ramce, podsumowanie, przyciski jeden pod drugim.
   ========================================================================== */
.tb-koszyk-okno .hp-modal__card {
  text-align: center;
}
.tb-koszyk-okno__ikona {
  margin: 0 auto var(--hp-sp-4);
}
.tb-koszyk-okno__produkt {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  margin-top: var(--hp-sp-6);
  padding: var(--hp-sp-4);
  border: 1px solid var(--hp-c-line);
  border-radius: var(--hp-radius-md);
  background: var(--hp-c-red-tint-2);
  text-align: left;
}
.tb-koszyk-okno__produkt:empty {
  display: none;
}
.tb-koszyk-okno__miniatura {
  flex: none;
  width: var(--hp-sp-16);
  height: var(--hp-sp-16);
  object-fit: cover;
  border-radius: var(--hp-radius-sm);
}
.tb-koszyk-okno__opis {
  min-width: 0;
}
.tb-koszyk-okno .tb-koszyk-okno__nazwa {
  margin: 0;
  color: var(--hp-c-ink);
  font-weight: var(--hp-fw-bold);
  line-height: var(--hp-lh-heading);
}
.tb-koszyk-okno .tb-koszyk-okno__cena {
  margin: var(--hp-sp-1) 0 0;
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
}
.tb-koszyk-okno .tb-koszyk-okno__podsumowanie {
  margin: var(--hp-sp-4) 0 0;
  color: var(--hp-c-ink-3);
}
.tb-koszyk-okno .tb-koszyk-okno__podsumowanie strong {
  color: var(--hp-c-ink);
}
.tb-koszyk-okno__akcje {
  display: grid;
  gap: var(--hp-sp-3);
  margin-top: var(--hp-sp-6);
}
.tb-koszyk-okno__akcje .hp-btn {
  width: 100%;
}
.tb-koszyk-okno__dalej {
  justify-self: center;
  padding: var(--hp-sp-2);
  border: 0;
  background: none;
  color: var(--hp-c-ink-3);
  text-decoration: underline;
  cursor: pointer;
}
.tb-koszyk-okno__dalej:hover {
  color: var(--hp-c-red);
}

/* Przycisk koszyka w trakcie wysyłki AJAX. */
.single_add_to_cart_button.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Strona z samym tekstem (Regulamin, Polityka prywatności): nagłówek
   hero-podstrona, pod nim .tb-dokument z treścią w stylu wpisu bloga
   (.tb-blog-single__content, blog-single.scss). */
.tb-dokument {
  padding-block: var(--hp-sp-12) var(--hp-sp-20);
}

/* ==========================================================================
   NOWA MARKA — nagłówek strony. Odtworzone z homepage/index.html (<header
   class="site-header">) + homepage/css/components.css. Renderowany przez
   templates/default/header/header.php (patrz też header.php w korzeniu
   motywu). Zawsze aktywny (nie owinięty w body.tb-nowa-marka) — nagłówek
   jest teraz jednym, docelowym designem na całej witrynie.
   ========================================================================== */
.tb-header {
  /* Przyklejony do góry: CTA zostaje w zasięgu przez całą stronę.
     Na samej górze pas jest przezroczysty, żeby nie odcinać hero
     własnym tłem — tło i cień dokłada dopiero .is-condensed. */
  position: sticky;
  top: 0;
  z-index: var(--hp-z-header);
  background: transparent;
  transition: background-color var(--hp-t-base), box-shadow var(--hp-t-base);
  padding: 0;
}

.tb-header__inner {
  /* Odniesienie dla mega menu: panel ma trzymać szerokość kontenera,
     a nie pozycji menu, pod którą się rozwija. */
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, var(--hp-u) * 2, 2.25rem);
  min-height: var(--hp-header-h);
  transition: min-height var(--hp-t-base);
}

/* --------------------------------------------------------------------------
   Ikony konta i koszyka (templates/default/header/header.php), na lewo
   od przycisku. Licznik: .tb-topbar__count (nazwa z fragmentu WC).
   -------------------------------------------------------------------------- */
.tb-header__icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.tb-header__icons + .tb-header__cta {
  margin-left: 0;
}

@media (max-width: 1200px) {
  .tb-header__icons {
    order: 2;
  }
  .tb-header .tb-nav-toggle {
    order: 3;
    margin-left: 0;
  }
}
.tb-header .tb-header__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--hp-c-ink);
  transition: background var(--hp-t-fast), color var(--hp-t-fast);
}
.tb-header .tb-header__icon:hover {
  background: var(--hp-c-red-tint);
  color: var(--hp-c-red);
}
.tb-header .tb-header__icon .hp-icon {
  stroke-width: 1.7;
}

.tb-topbar__count {
  position: absolute;
  top: 0.125rem;
  right: 0.0625rem;
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  font-size: 0.6875rem;
  font-weight: var(--hp-fw-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--hp-c-surface);
}
.tb-topbar__count.is-empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Stan skondensowany (klasa dokładana przez assets/js/homepage/header-nav.js)
   -------------------------------------------------------------------------- */
.tb-header.is-condensed {
  background-color: var(--hp-c-surface);
  box-shadow: 0 1px 0 var(--hp-c-line), 0 10px 30px -22px rgba(17, 18, 20, 0.45);
}

.tb-header.is-condensed .tb-header__inner {
  min-height: clamp(3.75rem, var(--hp-u) * 4.9, 4.5rem);
}

/* Tagline znika pierwszy: to element budujący markę na wejściu,
   a nie informacja potrzebna w trakcie czytania strony. */
.tb-header.is-condensed .hp-logo__tagline {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.hp-logo__tagline {
  transition: opacity var(--hp-t-fast), max-height var(--hp-t-base);
  max-height: 2em;
}

/* --------------------------------------------------------------------------
   Nawigacja
   -------------------------------------------------------------------------- */
.tb-nav {
  margin-left: auto;
}

.tb-header__cta.hp-btn {
  /* Rozmiar jak każdy przycisk na stronie (.hp-btn z components.scss),
     bez własnych paddingów i wielkości liter. */
  flex: none;
  white-space: nowrap;
}

.tb-header__cta {
  margin-left: auto;
}

.tb-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, var(--hp-u) * 2, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-nav__list li {
  display: block;
}

.tb-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  font-size: clamp(0.8125rem, var(--hp-u) * 0.95, 0.9375rem);
  font-weight: var(--hp-fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hp-c-ink);
  white-space: nowrap;
  transition: color var(--hp-t-fast);
}

.tb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 2px;
  background: var(--hp-c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hp-t-base);
}

.tb-nav__link:hover {
  color: var(--hp-c-red);
}

.tb-nav__link:hover::after,
.tb-nav__link[aria-current=page]::after {
  transform: scaleX(1);
}

.tb-nav__list li.menu-item-has-children > .tb-nav__link {
  padding-right: 1.125em;
}

.tb-nav__list li.menu-item-has-children > .tb-nav__link::after {
  content: "";
}

.tb-nav__list li.menu-item-has-children > .tb-nav__link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.3em;
  border-right: 1.5px solid var(--hp-c-red);
  border-bottom: 1.5px solid var(--hp-c-red);
  transform: rotate(45deg);
  transition: transform var(--hp-t-fast);
}

/* Przyciski nagłówka (hamburger, rozwijanie podmenu) bez wyglądu
   przeglądarki. Reset przycisków z base.scss działa tylko na stronach nowej
   marki (.tb-nowa-marka), a nagłówek jest wszędzie: na Moim koncie i 404
   hamburger dostawał szare tło i obramowanie „outset”. */
.tb-nav-toggle,
.tb-nav__sub-toggle {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Przycisk rozwijania podmenu (akordeon, header-nav.js). Tylko w menu
   mobilnym, na desktopie podmenu otwiera się na hover. */
.tb-nav__sub-toggle {
  display: none;
}

/* Hamburger */
.tb-nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
}

.tb-nav-toggle span {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hp-c-red);
  transition: background var(--hp-t-fast);
}

.tb-nav-toggle span::before,
.tb-nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--hp-c-red);
  transition: transform var(--hp-t-base), top var(--hp-t-base);
}

.tb-nav-toggle span::before {
  top: -7px;
}

.tb-nav-toggle span::after {
  top: 7px;
}

.tb-nav-toggle[aria-expanded=true] span {
  background: transparent;
}

.tb-nav-toggle[aria-expanded=true] span::before {
  top: 0;
  transform: rotate(45deg);
}

.tb-nav-toggle[aria-expanded=true] span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1200px) {
  .tb-nav-toggle {
    display: inline-flex;
  }
  .tb-nav {
    position: fixed;
    inset: var(--hp-header-h) 0 auto 0;
    margin: 0;
    padding: var(--hp-sp-6) var(--hp-container-pad) var(--hp-sp-8);
    background: var(--hp-c-surface);
    border-bottom: 1px solid var(--hp-c-line);
    box-shadow: var(--hp-shadow-soft);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hp-t-base), transform var(--hp-t-base), visibility var(--hp-t-base);
  }
  .tb-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Stary arkusz (templates/default/header/style.scss) daje każdemu
     `header nav` poniżej 991px max-height: 0 i overflow: hidden oraz
     puste ::before/::after po 32px. Przez to panel otwierał się pusty.
     Tu wysokość do dołu ekranu i przewijanie, bo lista jest długa. */
  .tb-header .tb-nav {
    max-height: calc(100dvh - var(--hp-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .tb-header .tb-nav::before, .tb-header .tb-nav::after {
    content: none;
  }
  /* Menu mobilne: wszystko do lewej, podmenu jako wcięta lista samych
     nazw. Opisy i miniatury są dla mega menu na desktopie, tu tylko
     wydłużały panel. Długie selektory: przebijają stary arkusz
     (`header nav ul li.menu-item-has-children .sub-menu`, waga 0,2,4). */
  .tb-header .tb-nav .tb-nav__list > li {
    width: 100%;
    text-align: left;
  }
  .tb-header .tb-nav .tb-nav__list li .sub-menu {
    position: static;
    display: grid;
    /* Stary arkusz nagłówka daje listom justify-content: center: kolumna
       kurczyła się do najdłuższej nazwy i lądowała na środku. */
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    gap: 0;
    width: auto;
    min-width: 0;
    margin: 0 0 var(--hp-sp-2);
    padding: 0 0 0 var(--hp-sp-4);
    border-left: 2px solid var(--hp-c-red-tint);
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .tb-header .tb-nav .tb-nav__list li .sub-menu a {
    display: block;
    min-height: 0;
    padding: var(--hp-sp-2) 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: var(--hp-fs-sm);
    text-transform: none;
    letter-spacing: 0;
  }
  .tb-header .tb-nav .tb-nav__list li .sub-menu a::before,
  .tb-header .tb-nav .tb-nav__list li .sub-menu a::after,
  .tb-header .tb-nav .tb-nav__desc,
  .tb-header .tb-nav .tb-nav__thumb {
    display: none;
  }
  .tb-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-sp-2);
  }
  /* Akordeon: pozycja z podmenu to wiersz [nazwa | przycisk ze strzałką],
     podmenu pod spodem na całą szerokość, widoczne tylko po otwarciu. */
  .tb-header .tb-nav.has-accordion .tb-nav__list > li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .tb-header .tb-nav.has-accordion .tb-nav__list > li.menu-item-has-children > .tb-nav__link {
    flex: 1 1 auto;
    padding-right: 0;
  }
  .tb-header .tb-nav.has-accordion .tb-nav__list > li.menu-item-has-children > .tb-nav__link::before {
    content: none;
  }
  .tb-header .tb-nav.has-accordion .tb-nav__list li .sub-menu {
    display: none;
    flex-basis: 100%;
  }
  .tb-header .tb-nav.has-accordion .tb-nav__list li.is-sub-open > .sub-menu {
    display: grid;
  }
  .tb-nav.has-accordion .tb-nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: calc(var(--hp-sp-3) * -1);
  }
  .tb-nav.has-accordion .tb-nav__sub-toggle::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-right: 1.5px solid var(--hp-c-red);
    border-bottom: 1.5px solid var(--hp-c-red);
    transform: rotate(45deg);
    transition: transform var(--hp-t-fast), margin var(--hp-t-fast);
  }
  .tb-nav.has-accordion .tb-nav__sub-toggle[aria-expanded=true]::before {
    margin-top: 0.25rem;
    transform: rotate(-135deg);
  }
  .tb-nav__link {
    padding-block: var(--hp-sp-3);
    font-size: var(--hp-fs-md);
  }
  .tb-header__cta {
    display: none;
  }
}
/* ==========================================================================
   MEGA MENU

   Pozycja, której podstrony mają wypełniony opis, dostaje z PHP klasę
   .tb-nav__item--mega (includes/header-nav.php) i rozwija się jako panel
   na pełną szerokość kontenera: ikona, nazwa usługi i jedno zdanie.
   Przy ofercie to konieczne — „Obsługa najmu” i „Wynajem mieszkania”
   brzmią podobnie, a dotyczą czego innego.

   Ikony są maskami SVG barwionymi currentColor, nie obrazkami w treści:
   przejmują kolor kafelka przy najechaniu i zostają ostre w każdej skali.
   Każdą wiąże ze stroną klasa tb-mega-ico--{slug}, więc nowa usługa to
   jedna reguła niżej, bez dotykania PHP.

   Selektory są celowo długie. Stary, wciąż wczytywany arkusz
   templates/default/header/style.css pozycjonuje podmenu regułą
   `header nav ul li.menu-item-has-children .sub-menu` o wadze (0,2,4)
   i krótszy zapis przegrywał z nią na `left`.
   ========================================================================== */
/* Ikony usług (Lucide-like, 24x24, sam kontur). */
.tb-mega-ico--obsluga-najmu {
  --tb-mega-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E");
}

.tb-mega-ico--wynajem-mieszkania {
  --tb-mega-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E");
}

.tb-mega-ico--biznes-w-nieruchomosciach {
  --tb-mega-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
}

@media (min-width: 1201px) {
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu {
    --tb-mega-pad: clamp(.75rem, calc(var(--hp-u) * 1.15), 1.0625rem);
    --tb-mega-kolo: 2.75rem;
    --tb-mega-ikona: 1.375rem;
  }
  /* Panel trzyma szerokość kontenera, więc odniesieniem jest
     .tb-header__inner, a nie <li>. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega {
    position: static;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.375rem, var(--hp-u) * 0.7, 0.75rem);
    top: calc(100% + 0.5rem);
    /* Kontener ma własny padding poziomy, a element pozycjonowany
       absolutnie liczy się od padding-boxa — bez tego przesunięcia
       panel sięgałby krawędzi okna, podczas gdy logo i menu zaczynają
       się dopiero za paddingiem. */
    left: var(--hp-container-pad);
    right: var(--hp-container-pad);
    width: auto;
    min-width: 0;
    transform: translateY(0.5rem);
    padding: clamp(0.625rem, var(--hp-u) * 1, 1rem);
    background: var(--hp-c-surface);
    border: 1px solid var(--hp-c-line);
    border-radius: var(--hp-radius-lg);
    box-shadow: 0 28px 70px -34px rgba(17, 18, 20, 0.6);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega:hover > .sub-menu,
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega:focus-within > .sub-menu {
    transform: translateY(0);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li {
    display: block;
    width: auto;
  }
  /* Kafelek: ikona w kolumnie z lewej, pod nią nazwa i opis.
     Link nawigacji ma wersaliki i zakaz zawijania — w panelu to nazwa
     usługi i całe zdanie, więc oba trzeba zdjąć. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(0.625rem, var(--hp-u) * 1, 0.875rem);
    align-items: start;
    position: relative;
    height: 100%;
    padding: var(--tb-mega-pad);
    border: 1px solid transparent;
    border-radius: var(--hp-radius-md);
    font-size: var(--hp-fs-md);
    font-weight: var(--hp-fw-bold);
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
    white-space: normal;
    color: var(--hp-c-ink);
    transition: background-color var(--hp-t-fast), border-color var(--hp-t-fast), color var(--hp-t-fast);
  }
  /* Ikona w kółku, dwoma pseudoelementami: ::before to samo kółko
     (zwykłe tło), ::after to ikona wycięta maską i wypełniona kolorem.
     Maska przycina tło elementu do kształtu ścieżki, więc nie da się
     jedną warstwą zrobić kółka i ikony naraz — stąd podział.
     Ikona leży absolutnie na kółku, a jej przesunięcie liczy się z tego
     samego paddingu co kafelek, żeby nie rozjechało się przy skalowaniu. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a::before {
    content: "";
    grid-row: span 2;
    width: var(--tb-mega-kolo);
    height: var(--tb-mega-kolo);
    /* 50%, nie token: motyw ma --hp-radius-pill (999px) do pigułek,
       a tu chodzi o koło na kwadracie. Wcześniej stało tu
       --hp-radius-full, którego w tokenach nie ma, więc deklaracja
       była nieprawidłowa i tło wychodziło kwadratem. */
    border-radius: 50%;
    background-color: var(--hp-c-red-tint);
    transition: background-color var(--hp-t-fast);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a::after {
    content: "";
    position: absolute;
    top: calc(var(--tb-mega-pad) + (var(--tb-mega-kolo) - var(--tb-mega-ikona)) / 2);
    left: calc(var(--tb-mega-pad) + (var(--tb-mega-kolo) - var(--tb-mega-ikona)) / 2);
    /* Reset po regule podkreślenia pozycji menu. Ona też celuje
       w .tb-nav__link::after i ustawia transform: scaleX(0) oraz
       bottom — a linki w panelu mają tę samą klasę. Bez tego ikona
       była ściśnięta do zerowej szerokości i pokazywała się dopiero
       pod kursorem, gdy podkreślenie rozwijało się do scaleX(1). */
    bottom: auto;
    transform: none;
    width: var(--tb-mega-ikona);
    height: var(--tb-mega-ikona);
    background-color: var(--hp-c-red);
    mask: var(--tb-mega-ico) center/contain no-repeat;
    -webkit-mask: var(--tb-mega-ico) center/contain no-repeat;
    transition: background-color var(--hp-t-fast);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a:hover {
    background: var(--hp-c-surface);
    border-color: var(--hp-c-rose-deep);
    color: var(--hp-c-red);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a:hover::before {
    background-color: var(--hp-c-red);
  }
  /* Na czerwonym kółku ikona musi się wybielić, inaczej znika.
     transform powtórzony, bo hover podkreślenia ustawia scaleX(1). */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a:hover::after,
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a:focus::after {
    background-color: var(--hp-c-white);
    transform: none;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li > a:hover .tb-nav__desc {
    color: var(--hp-c-ink-2);
  }
}
/* Opis pod nazwą usługi. Reset wersalików, odstępów liter i zakazu
   zawijania dziedziczonych po .tb-nav__link — to zdanie, nie etykieta. */
.tb-header .tb-nav .tb-nav__desc {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-regular);
  letter-spacing: normal;
  line-height: 1.45;
  text-transform: none;
  white-space: normal;
  color: var(--hp-c-ink-3);
}

/* ==========================================================================
   MEGA MENU — WARIANT KART (realizacje)

   Pozycja, której dzieci mają obrazek wyróżniający, rozwija się jako
   siatka kart: miniatura i tytuł. Przy case studies sama nazwa nie
   wystarcza — tytuły mają po 50+ znaków i w pionowej liście wyglądają
   jak ściana tekstu, a zdjęcie osiedla rozpoznaje się od razu.

   Wpis bez zdjęcia dostaje kafelek zastępczy (--brak) z tłem marki
   i ikoną budynku, żeby menu było spójne zanim zdjęcia zostaną
   uzupełnione. Po dodaniu obrazka w panelu miniatura pojawia się sama.
   ========================================================================== */
@media (min-width: 1201px) {
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--hp-fs-sm);
    line-height: 1.35;
  }
  /* Podkreślenie pozycji menu (.tb-nav__link::after) nie ma tu czego
     podkreślać — bez tego wchodziło czerwoną kreską w kadr zdjęcia. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a::before,
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a::after {
    content: none;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a:hover {
    background: none;
    color: var(--hp-c-red);
  }
  .tb-nav__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 0.5rem;
    border-radius: var(--hp-radius-md);
    background: var(--hp-c-line-2);
  }
  .tb-nav__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--hp-t-base);
  }
  /* Delikatne zbliżenie kadru zamiast ruszania całą kartą: układ
     nie drga, a widać, że kafelek jest klikalny. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a:hover .tb-nav__thumb-img {
    transform: scale(1.06);
  }
  /* Kafelek zastępczy: tło marki + ikona budynku maską. */
  .tb-nav__thumb--brak {
    position: relative;
    background: linear-gradient(150deg, var(--hp-c-red-tint-2) 0%, var(--hp-c-red-tint) 100%);
  }
  .tb-nav__thumb--brak::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    /* Wcześniej --hp-c-rose-deep (#eba9b0) na różowym tle: kontur
       ginął i kafelek wyglądał na pusty. Przygaszona czerwień marki
       jest czytelna, a nadal nie udaje prawdziwego zdjęcia. */
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--hp-c-red);
    opacity: 0.42;
    mask: var(--tb-ico-budynek) center/contain no-repeat;
    -webkit-mask: var(--tb-ico-budynek) center/contain no-repeat;
  }
}
/* Ikona kafelka zastępczego — ten sam rysunek co w pasku statystyk hero. */
.tb-nav__thumb--brak {
  --tb-ico-budynek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   MEGA MENU — KOLUMNA WPROWADZENIA I KARTY REALIZACJI

   Pierwszy <li> panelu to wprowadzenie (TB_Mega_Walker, header-nav.php):
   nadtytuł odręczny, zdanie z pola „Opis” pozycji rodzica i link do jej
   strony. Karty realizacji mają tytuł rozbity na nazwę i wynik.
   Na mobile (menu jako lista) wprowadzenie i podpisy kart są ukryte.
   ========================================================================== */
.tb-header .tb-nav .tb-nav__intro,
.tb-header .tb-nav .tb-nav__card-sub {
  display: none;
}

@media (min-width: 1201px) {
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-opisy > .sub-menu {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu {
    grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: var(--hp-sp-5);
    padding: var(--hp-sp-5);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    gap: var(--hp-sp-2);
    text-align: left;
    padding: var(--hp-sp-5);
    border-radius: var(--hp-radius-md);
    background: var(--hp-c-red-tint-2);
  }
  .tb-nav__intro-eyebrow,
  .tb-nav__intro-text {
    text-align: left;
  }
  .tb-nav__intro-eyebrow {
    font-family: var(--hp-ff-hand);
    font-size: var(--hp-fs-hand);
    font-weight: var(--hp-fw-bold);
    line-height: 1.2;
    color: var(--hp-c-red);
  }
  .tb-nav__intro-text {
    font-size: var(--hp-fs-sm);
    line-height: var(--hp-lh-base);
    color: var(--hp-c-ink-2);
  }
  /* Link do strony sekcji. Selektor celowo tak długi jak reguła kafelków
     (li.tb-nav__item--mega > .sub-menu > li > a) i o klasę mocniejszy:
     ona daje linkom w panelu grid, padding, ramkę oraz kółko (::before)
     i ikonę (::after) — tu wszystko to trzeba zdjąć. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro > a.tb-nav__intro-link {
    display: inline-flex;
    flex-direction: row;
    align-self: flex-start;
    align-items: center;
    gap: var(--hp-sp-2);
    height: auto;
    margin-top: auto;
    padding: var(--hp-sp-3) 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--hp-fs-ui);
    font-weight: var(--hp-fw-bold);
    letter-spacing: var(--hp-ls-wide);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hp-c-red);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro > a.tb-nav__intro-link::before {
    content: none;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro > a.tb-nav__intro-link::after {
    content: "";
    position: static;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    transform: none;
    background-color: currentColor;
    -webkit-mask: var(--hp-ico-strzalka) center/contain no-repeat;
    mask: var(--hp-ico-strzalka) center/contain no-repeat;
    transition: transform var(--hp-t-fast);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro > a.tb-nav__intro-link:hover {
    color: var(--hp-c-red-hover);
    background: none;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega > .sub-menu > li.tb-nav__intro > a.tb-nav__intro-link:hover::after {
    transform: translateX(0.2em);
    background-color: currentColor;
  }
  /* Karta realizacji: zdjęcie, nazwa serifem, wynik pod spodem. */
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a {
    display: flex;
    flex-direction: column;
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty .tb-nav__thumb {
    margin-bottom: var(--hp-sp-3);
    box-shadow: var(--hp-shadow-soft);
  }
  .tb-nav__card-name {
    font-family: var(--hp-ff-heading);
    font-size: var(--hp-fs-h6);
    font-weight: var(--hp-fw-bold);
    line-height: var(--hp-lh-heading);
    color: var(--hp-c-ink);
    transition: color var(--hp-t-fast);
  }
  .tb-header .tb-nav .tb-nav__card-sub {
    display: block;
    margin-top: var(--hp-sp-1);
    font-size: var(--hp-fs-sm);
    font-weight: var(--hp-fw-regular);
    line-height: 1.45;
    color: var(--hp-c-ink-3);
  }
  .tb-header .tb-nav .tb-nav__list li.tb-nav__item--mega-karty > .sub-menu > li > a:hover .tb-nav__card-name {
    color: var(--hp-c-red);
  }
}
/* ==========================================================================
   NOWA MARKA — stopka. Odtworzone z homepage/index.html (<footer class="footer">)
   + homepage/css/sections/stopka.css. Renderowana przez templates/default/footer/footer.php
   (patrz też footer.php w korzeniu motywu). Zawsze aktywna, tak jak nagłówek.
   ========================================================================== */
.tb-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.75rem, 5vw, 5rem);
  color: rgba(255, 255, 255, 0.78);
  background: radial-gradient(120% 90% at 8% 0%, #8a0716 0%, rgba(138, 7, 22, 0) 55%), linear-gradient(160deg, var(--hp-c-burgundy) 0%, var(--hp-c-burgundy-2) 100%);
}

.tb-footer__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tb-footer__blob {
  position: absolute;
  border-radius: 50%;
}

.tb-footer__blob--1 {
  top: -34%;
  right: -8%;
  width: 44%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(191, 1, 23, 0.55) 0%, rgba(191, 1, 23, 0) 100%);
}

.tb-footer__blob--2 {
  bottom: -46%;
  left: -10%;
  width: 38%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
}

.tb-footer__dots {
  position: absolute;
  top: 12%;
  right: 4%;
  width: clamp(5rem, 9vw, 9rem);
  height: clamp(4rem, 7vw, 7rem);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px);
  background-size: 16px 16px;
}

@media (max-width: 1023px) {
  .tb-footer__dots {
    display: none;
  }
}
.tb-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.tb-footer__about {
  max-width: 34ch;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  font-size: var(--hp-fs-md);
  line-height: 1.8;
}

.tb-footer__contact {
  display: grid;
  gap: clamp(0.625rem, 1.2vw, 1rem);
  margin-top: clamp(1.25rem, 2.2vw, 2rem);
  padding: 0;
  list-style: none;
}

.tb-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--hp-fs-md);
}

.tb-footer__contact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--hp-c-white);
}

.tb-footer__contact-icon-mask {
  display: block;
  width: 48%;
  height: 48%;
  background-color: currentColor;
}

.tb-footer__contact-icon-mask--telefon {
  -webkit-mask: var(--hp-ico-telefon) center/contain no-repeat;
  mask: var(--hp-ico-telefon) center/contain no-repeat;
}

.tb-footer__contact-icon-mask--umowa {
  -webkit-mask: var(--hp-ico-umowa) center/contain no-repeat;
  mask: var(--hp-ico-umowa) center/contain no-repeat;
}

.tb-footer__contact a {
  color: var(--hp-c-white);
  transition: color var(--hp-t-fast);
}

.tb-footer__contact a:hover {
  color: var(--hp-c-rose);
}

.tb-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.tb-footer__col-title {
  font-family: var(--hp-ff-heading);
  font-size: var(--hp-fs-h6);
  font-weight: var(--hp-fw-bold);
  letter-spacing: 0.01em;
  color: var(--hp-c-white);
  margin: 0;
}
.tb-footer__col-title::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--hp-c-rose);
}

.tb-footer__links {
  display: grid;
  gap: 0.625rem;
  margin-top: clamp(1rem, 1.6vw, 1.375rem);
  padding: 0;
  list-style: none;
  font-size: var(--hp-fs-md);
}

.tb-footer__links a {
  position: relative;
  display: inline-block;
  color: var(--hp-c-white);
  transition: color var(--hp-t-fast), transform var(--hp-t-fast);
}
.tb-footer__links a:hover {
  color: var(--hp-c-white);
  transform: translateX(3px);
}

.tb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(1.125rem, 2vw, 1.625rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--hp-fs-sm);
  color: rgba(255, 255, 255, 0.6);
}

.tb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--hp-t-fast);
}

.tb-footer__legal a:hover {
  color: var(--hp-c-white);
}

@media (max-width: 900px) {
  .tb-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-footer__about {
    max-width: 46ch;
  }
}
@media (max-width: 620px) {
  .tb-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tb-footer__bottom {
    justify-content: flex-start;
  }
}
/* ==========================================================================
   Pojedynczy wpis bloga (CPT natywny "post"). Stały nagłówek (okruszki/
   tytuł/data/czas czytania) generowany z danych wpisu + "prose" styl dla
   the_content() (rdzenne bloki Gutenberga: nagłówki, akapity, listy,
   cytaty, tabele, obrazy). Pod treścią blok newslettera i "Pozostałe
   wpisy" w kartach z bloku blog-posts. Renderowane przez
   templates/cpt/post/single/config.php, body dostaje .tb-nowa-marka
   (includes/blog.php), więc działa reset z base.scss: zerowe marginesy
   p/h/ul i brak kropek na ul[class], stąd własne odstępy i punktory niżej.
   ========================================================================== */
.tb-blog-single__header {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.tb-blog-single__header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tb-blog-single__crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  text-transform: uppercase;
}
.tb-blog-single__crumbs a {
  transition: color var(--hp-t-fast);
}
.tb-blog-single__crumbs a:last-child {
  color: var(--hp-c-red);
}
.tb-blog-single__crumbs a:hover {
  color: var(--hp-c-red-hover);
}
.tb-blog-single .tb-blog-single__title {
  max-width: 22ch;
  margin-top: 1.25rem;
  color: var(--hp-c-ink);
  text-wrap: balance;
}
.tb-blog-single__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.tb-blog-single .tb-blog-single__meta {
  margin-top: 1.25rem;
}
.tb-blog-single__image {
  box-sizing: border-box;
  max-width: calc(65rem + var(--hp-container-pad) * 2);
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--hp-container-pad);
}
.tb-blog-single__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: var(--hp-radius-lg);
  object-fit: cover;
  box-shadow: 0 30px 60px -40px rgba(17, 18, 20, 0.45);
}
.tb-blog-single__content {
  max-width: 46.25rem;
  margin-inline: auto;
  padding-block: 0 clamp(1rem, 3vw, 2rem);
  color: var(--hp-c-ink-2);
  font-size: var(--wp--preset--font-size--text-bigger);
  line-height: 1.75;
}
.tb-blog-single__content > * + * {
  margin-top: 1.25em;
}
.tb-blog-single__content > p:first-child {
  color: var(--hp-c-ink);
  font-size: 1.15em;
  line-height: 1.65;
}
.tb-blog-single__content h2, .tb-blog-single__content h3, .tb-blog-single__content h4 {
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  line-height: var(--hp-lh-heading);
  letter-spacing: var(--hp-ls-tight);
  text-wrap: balance;
}
.tb-blog-single__content > h2 {
  margin-top: 2em;
  font-size: var(--hp-fs-h3);
}
.tb-blog-single__content > h3 {
  margin-top: 1.75em;
  font-size: var(--hp-fs-h4);
}
.tb-blog-single__content > h4 {
  margin-top: 1.5em;
  font-size: var(--hp-fs-h5);
}
.tb-blog-single__content > :is(h2, h3, h4) + * {
  margin-top: 0.75em;
}
.tb-blog-single__content strong {
  color: var(--hp-c-ink);
  font-weight: var(--hp-fw-bold);
}
.tb-blog-single__content a {
  color: var(--hp-c-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--hp-t-fast);
}
.tb-blog-single__content a:hover {
  color: var(--hp-c-red-hover);
}
.tb-blog-single__content ul, .tb-blog-single__content ol {
  padding-left: 0;
  list-style: none;
}
.tb-blog-single__content li {
  position: relative;
  padding-left: 1.75em;
}
.tb-blog-single__content li + li {
  margin-top: 0.5em;
}
.tb-blog-single__content ul > li::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.7em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--hp-c-red);
}
.tb-blog-single__content ol {
  counter-reset: tb-ol;
}
.tb-blog-single__content ol > li {
  counter-increment: tb-ol;
}
.tb-blog-single__content ol > li::before {
  content: counter(tb-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
  font-variant-numeric: tabular-nums;
}
.tb-blog-single__content li > ul, .tb-blog-single__content li > ol {
  margin-top: 0.5em;
}
.tb-blog-single__content blockquote,
.tb-blog-single__content .wp-block-pullquote {
  margin-inline: 0;
  padding: 1.5em 1.75em;
  border: 0;
  border-left: 3px solid var(--hp-c-red);
  border-radius: 0 var(--hp-radius-lg) var(--hp-radius-lg) 0;
  background: var(--hp-c-red-tint-2);
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-size: 1.1em;
  font-style: italic;
  line-height: 1.55;
  text-align: left;
}
.tb-blog-single__content blockquote p + p,
.tb-blog-single__content .wp-block-pullquote p + p {
  margin-top: 0.75em;
}
.tb-blog-single__content blockquote cite,
.tb-blog-single__content .wp-block-pullquote cite {
  display: block;
  margin-top: 1em;
  color: var(--hp-c-ink-3);
  font-family: var(--hp-ff-base);
  font-size: var(--wp--preset--font-size--text-smaller);
  font-style: normal;
  font-weight: var(--hp-fw-bold);
}
.tb-blog-single__content .wp-block-pullquote blockquote {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}
.tb-blog-single__content .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tb-blog-single__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.5;
}
.tb-blog-single__content th, .tb-blog-single__content td {
  padding: 0.75em 1em;
  border: 0;
  border-bottom: 1px solid var(--hp-c-line);
  text-align: left;
  vertical-align: top;
}
.tb-blog-single__content thead th,
.tb-blog-single__content tr:first-child th {
  border-bottom: 2px solid var(--hp-c-red);
  background: var(--hp-c-red-tint-2);
  color: var(--hp-c-ink);
  font-weight: var(--hp-fw-bold);
}
.tb-blog-single__content tbody tr:nth-child(even) td {
  background: var(--hp-c-bg);
}
.tb-blog-single__content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
  background: var(--hp-c-red-tint-2);
}
.tb-blog-single__content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--hp-radius-md);
}
.tb-blog-single__content figcaption,
.tb-blog-single__content .wp-element-caption {
  margin-top: 0.75em;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
  text-align: center;
}
.tb-blog-single__content hr {
  width: 4rem;
  margin: 2.5em auto;
  border: 0;
  border-top: 2px solid var(--hp-c-rose-deep);
}
.tb-blog-single__content code {
  padding: 0.1em 0.35em;
  border-radius: var(--hp-radius-sm);
  background: var(--hp-c-red-tint);
  color: var(--hp-c-red-deep);
  font-size: 0.9em;
}
.tb-blog-single__related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.tb-blog-single__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}
.tb-blog-single__all .hp-icon {
  transition: transform var(--hp-t-fast);
}
.tb-blog-single__all:hover .hp-icon {
  transform: translateX(4px);
}

@media (max-width: 560px) {
  .tb-blog-single__content {
    font-size: var(--wp--preset--font-size--text);
  }
  .tb-blog-single__content blockquote,
  .tb-blog-single__content .wp-block-pullquote {
    padding: 1.25em;
  }
}
/* ==========================================================================
   Checkout WooCommerce (nowa marka) — blok woocommerce/checkout (React/
   Interactivity API), NIE klasyczny shortcode [woocommerce_checkout].
   Odtworzone z dostarczonej makiety "Zamówienie — projekt". Cała logika
   zakupu (walidacja, kroki, przeliczanie sumy, płatności) zostaje w 100%
   po stronie WooCommerce — tu tylko przestylowujemy jego wrappery
   (.wp-block-woocommerce-checkout-*, dodawane automatycznie przez sam
   blok — potwierdzone w realnym markupie) i dobrze udokumentowane, stabilne
   klasy komponentów (.wc-block-components-*) naszymi tokenami.

   Uwaga: pola formularza renderują się dopiero po hydracji Reacta w
   przeglądarce (surowy HTML z serwera ma puste divy ze stanem "is-loading"),
   więc dokładny wygląd był sprawdzany na żywo, nie w statycznym podglądzie
   jak przy pozostałych blokach ACF w tym projekcie.
   ========================================================================== */
:root {
  --hp-c-checkout-label: #75636b;
  --hp-c-checkout-border: #dfd3d2;
  --hp-c-checkout-bg: #fffaf9;
  --hp-c-checkout-ink: #352930;
}

.tb-checkout-hero {
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3rem);
  padding-inline: var(--hp-container-pad);
}
.tb-checkout-hero__crumbs {
  margin: 0 0 0.875rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.tb-checkout-hero__crumbs b {
  color: var(--hp-c-ink);
}
.tb-checkout-hero__title {
  margin: 0;
}
.tb-checkout-hero__lead {
  margin-top: 0.75rem;
  color: var(--hp-c-ink-2);
}

.wc-block-components-sidebar-layout.wc-block-checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 1.875rem);
  align-items: start;
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding-inline: var(--hp-container-pad);
}

.wc-block-components-main.wc-block-checkout__main {
  grid-column: 1;
  width: 100% !important;
  min-width: 0;
}

.wc-block-components-sidebar.wc-block-checkout__sidebar {
  grid-column: 2;
  width: 100% !important;
  min-width: 0;
}

.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
  display: none !important;
}

.wc-block-components-main.wc-block-checkout__main {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hp-c-line);
  border-radius: 1.125rem;
  background: var(--hp-c-white);
  box-shadow: 0 1rem 2.8125rem rgba(74, 25, 16, 0.04);
}

.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-shipping-methods-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-additional-information-block {
  padding-bottom: 1.625rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hp-c-line);
}

.wc-block-components-checkout-step__title {
  margin: 0 0 1.25rem;
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.wc-block-components-checkout-step__description {
  margin: -0.75rem 0 1.25rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
}

.wc-block-components-checkout-step__heading-container,
.wc-block-components-checkout-step__content {
  display: block;
  width: 100%;
}

.wc-block-components-address-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox {
  grid-column: 1/-1;
  margin: 0 0 1rem;
  position: relative;
}

.wc-block-components-text-input.wc-block-components-address-form__first_name,
.wc-block-components-text-input.wc-block-components-address-form__postcode {
  grid-column: 1;
}

.wc-block-components-text-input.wc-block-components-address-form__last_name,
.wc-block-components-text-input.wc-block-components-address-form__city {
  grid-column: 2;
}

.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-combobox {
  display: flex;
  flex-direction: column;
}

.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox input,
input.wc-block-components-text-input,
.wc-block-checkout input[type=text],
.wc-block-checkout input[type=email],
.wc-block-checkout input[type=tel],
.wc-block-checkout select,
.wc-block-checkout textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 3.125rem !important;
  padding: 0 0.875rem !important;
  border: 1px solid var(--hp-c-checkout-border) !important;
  border-radius: 0.5rem !important;
  background: var(--hp-c-checkout-bg) !important;
  color: var(--hp-c-checkout-ink) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  font-family: inherit !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-country-input input:focus,
.wc-block-components-state-input input:focus,
.wc-block-checkout input[type=text]:focus,
.wc-block-checkout input[type=email]:focus,
.wc-block-checkout input[type=tel]:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus {
  background: var(--hp-c-checkout-bg) !important;
  border-color: var(--hp-c-red) !important;
}

.wc-block-checkout textarea {
  height: auto;
  min-height: 6rem;
  padding-block: 0.75rem !important;
}

.wc-block-components-text-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  position: static !important;
  transform: none !important;
  order: -1 !important;
  display: block !important;
  margin: 0 0 0.5rem !important;
  color: var(--hp-c-checkout-label) !important;
  font-size: var(--wp--preset--font-size--text-xs) !important;
}

.wc-block-components-address-form__address_2-toggle {
  display: inline-block;
  grid-column: 1/-1;
  margin: -0.5rem 0 1rem;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-smaller);
  font-weight: var(--hp-fw-bold);
  cursor: pointer;
}

.wc-block-components-radio-control__option {
  padding: 1rem 1.125rem;
  border: 1px solid var(--hp-c-line);
  border-radius: 0.5rem;
}
.wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
  margin-top: 0.625rem;
}

.wc-block-components-radio-control__option-checked {
  border-color: var(--hp-c-red);
  background: var(--hp-c-red-tint);
}

.wc-block-components-notice-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hp-c-rose-deep);
  border-radius: 0.5rem;
  background: var(--hp-c-red-tint);
  color: var(--hp-c-burgundy);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.6;
}
.wc-block-components-notice-banner svg {
  flex: none;
  color: var(--hp-c-red);
}

.wc-block-components-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--wp--preset--font-size--text-smaller);
  color: var(--hp-c-ink-2);
  cursor: pointer;
}

.wc-block-components-checkbox__input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--hp-c-red);
}

.wc-block-components-checkbox__mark {
  display: none;
}

.wc-block-checkout__terms {
  margin-top: 1.25rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.7;
}
.wc-block-checkout__terms a {
  color: var(--hp-c-red);
}

.wp-block-woocommerce-checkout-actions-block {
  margin-top: 1.25rem;
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wp-block-woocommerce-checkout-actions-block button[type=submit] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: var(--hp-radius-sm);
  color: var(--hp-c-white);
  background: var(--hp-c-red);
  font-size: var(--hp-fs-ui);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover,
.wp-block-woocommerce-checkout-actions-block button[type=submit]:hover {
  background: var(--hp-c-red-hover);
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:disabled, .wp-block-woocommerce-checkout-actions-block .wc-block-components-button[aria-disabled=true],
.wp-block-woocommerce-checkout-actions-block button[type=submit]:disabled,
.wp-block-woocommerce-checkout-actions-block button[type=submit][aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--hp-c-ink-3);
}

.wp-block-woocommerce-checkout-order-summary-block {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hp-c-line);
  border-radius: 1.125rem;
  background: var(--hp-c-white);
  box-shadow: 0 1rem 2.8125rem rgba(74, 25, 16, 0.04);
}

.wc-block-components-order-summary-item.wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hp-c-line);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.wc-block-components-order-summary-item.wc-block-components-order-summary-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.wc-block-components-order-summary-item__image {
  position: relative;
  width: 3rem;
}
.wc-block-components-order-summary-item__image img {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: var(--hp-radius-sm);
  object-fit: cover;
}

.wc-block-components-order-summary-item__quantity {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--hp-c-ink);
  color: var(--hp-c-white);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  line-height: 1;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
  padding-inline: 0;
}

.wc-block-components-order-summary-item__description.wc-block-components-order-summary-item__description {
  min-width: 0 !important;
  flex: 1 1 auto;
}

.wc-block-components-product-name {
  margin: 0;
  color: var(--hp-c-ink);
  font-family: inherit;
  font-weight: var(--hp-fw-medium);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.35;
}

.wc-block-cart-item__prices {
  display: none;
}

.wc-block-components-product-metadata__description {
  margin-top: 0.375rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.5;
}
.wc-block-components-product-metadata__description p {
  margin: 0;
}
.wc-block-components-product-metadata__description p + p {
  margin-top: 0.25rem;
}

.wc-block-components-order-summary-item__total-price {
  color: var(--hp-c-ink);
  font-weight: var(--hp-fw-medium);
  white-space: nowrap;
}

@media (min-width: 901px) and (max-width: 1150px) {
  .wc-block-components-order-summary-item.wc-block-components-order-summary-item {
    grid-template-columns: 1fr !important;
    grid-template-areas: "image" "desc" "price";
    row-gap: 0.5rem;
  }
  .wc-block-components-order-summary-item__image {
    grid-area: image;
    width: 4rem;
  }
  .wc-block-components-order-summary-item__image img {
    width: 4rem;
    height: 4rem;
  }
  .wc-block-components-order-summary-item__description.wc-block-components-order-summary-item__description {
    grid-area: desc;
  }
  .wc-block-components-order-summary-item__total-price {
    grid-area: price;
    justify-self: start;
  }
}
.wc-block-components-checkout-order-summary__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.25rem;
  cursor: pointer;
}

.wc-block-components-checkout-order-summary__title-text {
  margin: 0;
  flex: 1;
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.wc-block-components-checkout-order-summary__title-price {
  display: none;
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
}

.wc-block-components-checkout-order-summary__title-icon {
  flex: none;
  color: var(--hp-c-ink-3);
}

.wc-block-components-totals-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  font-size: var(--wp--preset--font-size--text-smaller);
  color: var(--hp-c-ink-2);
}

.wc-block-components-totals-wrapper {
  border-top: none !important;
  padding: 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: 0 !important;
  padding-bottom: 0 !important;
}

.wc-block-components-checkout-order-summary__content > * + * {
  padding-top: 1rem !important;
  border-top: 1px solid var(--hp-c-line) !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block > *:empty {
  display: none !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block > * + * {
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--hp-c-line) !important;
}

.wc-block-components-totals-footer-item {
  margin-top: 0.5rem !important;
  padding-top: 1.125rem !important;
  font-size: var(--wp--preset--font-size--text-bigger);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--hp-c-red);
  font-family: var(--hp-ff-heading);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.wc-block-components-panel {
  margin-top: 1rem;
}
.wc-block-components-panel.has-border {
  border: 0 !important;
}
.wc-block-components-panel .wc-block-components-panel__button {
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-smaller);
  font-weight: var(--hp-fw-bold);
}

@media (max-width: 900px) {
  .wc-block-components-sidebar-layout.wc-block-checkout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .wc-block-components-main.wc-block-checkout__main,
  .wc-block-components-sidebar.wc-block-checkout__sidebar {
    grid-column: 1;
  }
  .wc-block-components-address-form {
    grid-template-columns: 1fr;
  }
  .wc-block-components-text-input.wc-block-components-address-form__first_name,
  .wc-block-components-text-input.wc-block-components-address-form__last_name,
  .wc-block-components-text-input.wc-block-components-address-form__postcode,
  .wc-block-components-text-input.wc-block-components-address-form__city {
    grid-column: 1;
  }
}
/* ==========================================================================
   Koszyk WooCommerce (nowa marka) — blok woocommerce/cart (React/
   Interactivity API), TEN SAM system co checkout — patrz checkout.scss dla
   pełniejszego opisu pułapek (specyficzność WC vs !important, sidebar-
   layout grid + width:100%, NIGDY container-type — wchodzi w konflikt z
   ResizeObserver WC Blocks i zawiesza treść w stanie ładowania).
   Odtworzone z makiety "Koszyk — projekt". Realna struktura potwierdzona
   przez surowy HTML z serwera (curl na pustym koszyku): każda sekcja to
   własny .wp-block-woocommerce-cart-*-block, tak jak przy checkout.

   Kolory tekstu/tła specyficzne dla stron sklepu (kontakt/koszyk/checkout)
   celowo reużywają lokalnych tokenów --hp-c-checkout-* zdefiniowanych w
   checkout.scss (ładowanym wcześniej w tym samym @use) zamiast tworzyć
   kolejny prawie identyczny zestaw — makiety obu stron używają tej samej
   rodziny ciepłych szaro-różowych odcieni.
   ========================================================================== */
.tb-cart-hero {
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3rem);
  padding-inline: var(--hp-container-pad);
}
.tb-cart-hero__crumbs {
  margin: 0 0 0.875rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.tb-cart-hero__crumbs b {
  color: var(--hp-c-ink);
}
.tb-cart-hero__title {
  margin: 0;
}
.tb-cart-hero__lead {
  margin-top: 0.75rem;
  color: var(--hp-c-ink-2);
}

.wc-block-components-sidebar-layout.wc-block-cart {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 1.875rem);
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: 0 auto clamp(3rem, 6vw, 5rem) !important;
  padding-inline: var(--hp-container-pad);
}

.wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-main {
  box-sizing: border-box;
  width: 63.6% !important;
  margin: 0;
}

.wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-sidebar {
  box-sizing: border-box;
  width: 36.4% !important;
  padding: 0 !important;
  margin: 0;
}

.wp-block-woocommerce-cart-items-block {
  padding: 1.625rem 1.875rem !important;
  border: 1px solid var(--hp-c-line);
  border-radius: 1.125rem;
  background: var(--hp-c-white);
  box-shadow: 0 1rem 2.8125rem rgba(74, 25, 16, 0.04);
}

.wc-block-cart-items__header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tb-cart__table-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.125rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--hp-c-line);
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wc-block-cart-items {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.wc-block-cart-items__row.wc-block-cart-items__row {
  display: grid !important;
  grid-template-columns: 6.25rem minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 1.375rem !important;
  padding: 1.625rem 0 !important;
  border-bottom: 1px solid var(--hp-c-line) !important;
}
.wc-block-cart-items__row.wc-block-cart-items__row:last-of-type {
  border-bottom: 0 !important;
}

.wc-block-cart-item__image,
.wc-block-cart-item__product,
.wc-block-cart-item__total {
  padding: 0 !important;
  min-width: 0;
}

.wc-block-cart-item__image {
  display: grid;
  place-items: center;
  height: 7.875rem !important;
  border-radius: 0 !important;
  background: var(--hp-c-red-tint) !important;
}
.wc-block-cart-item__image img {
  width: 5.625rem !important;
  height: 6.875rem !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

.wc-block-cart-item__product {
  width: 100% !important;
}

.wc-block-components-product-name {
  display: block !important;
  max-width: 22.5rem;
  margin: 0.5625rem 0 0.5rem !important;
  color: var(--hp-c-checkout-ink) !important;
  font-family: inherit;
  font-weight: var(--hp-fw-medium);
  font-size: var(--wp--preset--font-size--text-bigger);
  line-height: 1.4;
  text-decoration: none !important;
}

.wc-block-components-product-metadata__description {
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.7;
}
.wc-block-components-product-metadata__description p {
  margin: 0;
}

.wc-block-cart-item__prices {
  display: none !important;
}

.wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-top: 0.9375rem !important;
}

.wc-block-components-quantity-selector {
  display: flex !important;
  align-items: stretch;
  height: 2rem;
  border: 1px solid var(--hp-c-checkout-border) !important;
  border-radius: 0.3125rem;
  overflow: hidden;
  background: var(--hp-c-checkout-bg) !important;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  width: 2.125rem;
  border: 0;
  background: none;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text);
  cursor: pointer;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  width: 2.75rem !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--hp-c-checkout-border) !important;
  border-right: 1px solid var(--hp-c-checkout-border) !important;
  background: transparent !important;
  color: var(--hp-c-checkout-ink) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  text-align: center;
}

.wc-block-cart-item__remove-link {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 0;
  padding: 0;
  background: none;
  color: var(--hp-c-checkout-label);
  cursor: pointer;
}
.wc-block-cart-item__remove-link svg {
  width: 1.125rem;
  height: 1.125rem;
}
.wc-block-cart-item__remove-link:hover {
  color: var(--hp-c-red);
}

.wc-block-cart-item__total {
  padding-top: 1.5625rem !important;
  color: var(--hp-c-checkout-ink) !important;
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
  white-space: nowrap;
  text-align: right !important;
}

.tb-cart__continue {
  display: inline-block;
  margin-top: 1.375rem;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
}

.wp-block-woocommerce-cart-order-summary-block {
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 1.75rem !important;
  border: 1px solid var(--hp-c-line);
  border-bottom: 0 !important;
  border-radius: 1.125rem 1.125rem 0 0 !important;
  background: var(--hp-c-white) !important;
}

.wp-block-woocommerce-cart-order-summary-heading-block h2 {
  margin: 0 0 1.5rem !important;
  color: var(--hp-c-checkout-ink) !important;
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.wc-block-components-totals-item {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  padding: 1.0625rem 0 !important;
  border-bottom: 1px solid var(--hp-c-line) !important;
  color: var(--hp-c-ink-2);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.wc-block-components-totals-item__label {
  color: var(--hp-c-ink-2);
}
.wc-block-components-totals-item small {
  display: block !important;
  margin-top: 0.125rem !important;
  color: #99808c !important;
  font-size: var(--wp--preset--font-size--text-xs);
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
  margin: 1.4375rem 0 !important;
}

.wc-block-components-totals-coupon {
  --tb-coupon-h: 2.75rem;
}
.wc-block-components-totals-coupon.wc-block-components-panel {
  padding-inline: 0 !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__content {
  padding-top: var(--hp-sp-4);
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--hp-sp-2) !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input.wc-block-components-text-input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input input {
  height: var(--tb-coupon-h) !important;
  padding: 0 var(--hp-sp-3) !important;
  border: 1px solid var(--hp-c-checkout-border) !important;
  border-radius: var(--hp-radius-md) !important;
  background: var(--hp-c-white) !important;
  box-shadow: none !important;
  color: var(--hp-c-checkout-ink) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  transition: border-color var(--hp-t-fast), box-shadow var(--hp-t-fast);
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input input:focus, .wc-block-components-totals-coupon .wc-block-components-totals-coupon__input input:focus-visible {
  outline: none !important;
  border-color: var(--hp-c-red) !important;
  box-shadow: 0 0 0 3px var(--hp-c-red-tint) !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input label {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--hp-sp-3) + 1px) !important;
  order: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  color: var(--hp-c-placeholder) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  line-height: 1;
  pointer-events: none;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input:has(input:focus) label,
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__input:has(input:not([value=""])) label {
  opacity: 0;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button {
  flex: none;
  box-sizing: border-box;
  height: var(--tb-coupon-h) !important;
  min-height: 0 !important;
  padding: 0 var(--hp-sp-5) !important;
  border: 1px solid var(--hp-c-red) !important;
  border-radius: var(--hp-radius-md) !important;
  background: var(--hp-c-red) !important;
  box-shadow: none !important;
  color: var(--hp-c-white) !important;
  font-size: var(--wp--preset--font-size--text-xs) !important;
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  text-transform: uppercase;
  opacity: 1 !important;
  transition: background-color var(--hp-t-fast), border-color var(--hp-t-fast);
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button:hover:not([disabled]) {
  border-color: var(--hp-c-red-hover) !important;
  background: var(--hp-c-red-hover) !important;
}
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__button.wc-block-components-button[disabled] {
  border-color: var(--hp-c-rose-deep) !important;
  background: var(--hp-c-red-tint) !important;
  color: var(--hp-c-red) !important;
}

.wc-block-cart__payment-options:empty {
  display: none !important;
}

.wc-block-components-panel .wc-block-components-panel__button {
  padding: 0.9375rem 0 !important;
  border-bottom: 1px solid var(--hp-c-line) !important;
  color: var(--hp-c-red) !important;
  font-size: var(--wp--preset--font-size--text-smaller);
  font-weight: var(--hp-fw-bold);
}

.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item {
  align-items: baseline !important;
  margin: 0 !important;
  padding: var(--hp-sp-5) 0 0 !important;
  border: 0 !important;
  background: none !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--hp-c-checkout-ink) !important;
  font-family: var(--hp-ff-heading);
  font-size: var(--wp--preset--font-size--text-bigger);
  font-weight: var(--hp-fw-bold);
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  margin-left: auto;
  color: var(--hp-c-red) !important;
  font-family: var(--hp-ff-heading);
  font-size: var(--hp-fs-h5);
  font-weight: var(--hp-fw-bold);
  white-space: nowrap;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__description:empty {
  display: none;
}

.wp-block-woocommerce-cart-order-summary-totals-block:not(:has(.wc-block-components-totals-discount, .wc-block-components-totals-fees)) .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-checkout-order-summary-totals-block:not(:has(.wc-block-components-totals-discount, .wc-block-components-totals-fees)) .wp-block-woocommerce-checkout-order-summary-subtotal-block {
  display: none !important;
}

.wp-block-woocommerce-cart-express-payment-block {
  display: none !important;
}

.wp-block-woocommerce-proceed-to-checkout-block {
  margin: 0 !important;
  padding: 1.25rem 1.75rem 1.75rem !important;
  border: 1px solid var(--hp-c-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 1.125rem 1.125rem !important;
  background: var(--hp-c-white) !important;
  box-shadow: 0 1rem 2.8125rem rgba(74, 25, 16, 0.04) !important;
}
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.875rem;
  width: 100% !important;
  padding: 1.0625rem 1.375rem !important;
  border: 0 !important;
  border-radius: 0.4375rem !important;
  color: var(--hp-c-white) !important;
  background: var(--hp-c-red) !important;
  font-size: var(--wp--preset--font-size--text-smaller);
  font-weight: var(--hp-fw-bold);
  text-decoration: none !important;
}
.wp-block-woocommerce-proceed-to-checkout-block a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
  background: var(--hp-c-red-hover) !important;
}
.wp-block-woocommerce-proceed-to-checkout-block p {
  margin: 0.8125rem 0 0 !important;
  color: #947985 !important;
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.6;
  text-align: center !important;
}

.tb-cart__trust {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1.25rem 0.375rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.5;
}
.tb-cart__trust span {
  position: relative;
  padding-left: 1.375rem;
}
.tb-cart__trust span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
}

.tb-cart-hero:has(+ .wp-block-woocommerce-cart:not(.is-loading) > .wp-block-woocommerce-empty-cart-block) {
  display: none;
}

.wp-block-woocommerce-empty-cart-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(100% - var(--hp-container-pad) * 2);
  max-width: var(--hp-container-max);
  margin: var(--hp-sp-10) auto var(--hp-sp-20) !important;
  padding: var(--hp-sp-16) var(--hp-sp-12) var(--hp-sp-12) !important;
  border: 0 !important;
  border-radius: var(--hp-radius-lg) !important;
  background: var(--hp-c-red) url("../../img/homepage/produkt-praktyka-tlo.jpg") center/cover no-repeat !important;
  box-shadow: var(--hp-shadow-soft) !important;
  color: var(--hp-c-white);
  text-align: center;
}

.wc-block-cart__empty-cart__title.wc-block-cart__empty-cart__title {
  position: relative;
  margin: 0 !important;
  padding-top: calc(var(--hp-sp-20) + var(--hp-sp-4)) !important;
  color: var(--hp-c-white) !important;
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-h2);
  line-height: var(--hp-lh-heading);
  letter-spacing: var(--hp-ls-tight);
}
.wc-block-cart__empty-cart__title.wc-block-cart__empty-cart__title::before {
  content: "0";
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--hp-sp-20);
  height: var(--hp-sp-20);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--hp-c-white);
  box-shadow: 0 13px 28px rgba(65, 0, 9, 0.22);
  color: var(--hp-c-red);
  font-family: var(--hp-ff-heading);
  font-size: var(--hp-fs-h3);
  -webkit-mask: none;
  mask: none;
}

.tb-empty-cart__lead {
  max-width: 36rem;
  margin: var(--hp-sp-4) auto 0;
  color: color-mix(in srgb, var(--hp-c-white) 82%, transparent);
  font-size: var(--wp--preset--font-size--text-bigger);
  line-height: var(--hp-lh-base);
}

.tb-empty-cart__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hp-sp-4);
  margin-top: var(--hp-sp-8);
}

.wp-block-woocommerce-empty-cart-block hr {
  max-width: none;
  margin: var(--hp-sp-12) 0 var(--hp-sp-10);
  border: 0;
  border-top: 1px solid var(--hp-c-rose-deep);
  opacity: 0.6;
}
.wp-block-woocommerce-empty-cart-block hr::before {
  content: none;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
  margin: 0 0 var(--hp-sp-6);
  color: var(--hp-c-white);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--hp-fs-h4);
  text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hp-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce liczy kafelek jak w swoim flexie (max-width: 25%, reguła
   .wc-block-grid.has-4-columns .wc-block-grid__product o wadze 0,3,0),
   co w naszej siatce ściskało go do ~56 px. Szerokość daje siatka. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wc-block-grid .wc-block-grid__product {
  display: flex;
  flex-direction: column;
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--hp-sp-4);
  border: 0;
  border-radius: var(--hp-radius-md);
  background: var(--hp-c-surface);
  box-shadow: 0 13px 28px rgba(65, 0, 9, 0.22);
  text-align: left;
  font-size: var(--wp--preset--font-size--text-smaller);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--hp-sp-3) !important;
  padding: var(--hp-sp-4);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-c-red-tint-2);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: auto !important;
  height: 10rem !important;
  object-fit: contain;
  filter: var(--hp-filter-okladka);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  margin: 0;
  color: var(--hp-c-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text);
  line-height: var(--hp-lh-heading);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  margin: var(--hp-sp-2) 0 0;
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
}

/* „Dodaj do koszyka” w kafelkach: przycisk marki z konturem, jak
   .hp-btn--outline / core/button „Marka (kontur)”. Markup WooCommerce,
   więc wartości powtórzone; podwójna klasa bije bazę z _buttons.scss. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button {
  margin: auto 0 0;
  padding-top: var(--hp-sp-4);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: var(--hp-sp-3) var(--hp-sp-5);
  border: 1px solid var(--hp-c-red);
  border-radius: var(--hp-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--hp-c-red);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
  gap: var(--hp-sp-2);
  transition: background-color var(--hp-t-fast), color var(--hp-t-fast), transform var(--hp-t-fast);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button .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;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after {
  content: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .wp-block-woocommerce-empty-cart-block {
    padding: var(--hp-sp-12) var(--hp-sp-6) var(--hp-sp-8) !important;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 590px) {
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-empty-cart__actions .hp-btn {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .wc-block-components-sidebar-layout.wc-block-cart {
    flex-wrap: wrap !important;
  }
  .wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-main,
  .wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-sidebar {
    width: 100% !important;
  }
}
@media (max-width: 560px) {
  .wc-block-cart-items__row.wc-block-cart-items__row {
    grid-template-columns: 4.75rem minmax(0, 1fr) !important;
  }
  .wc-block-cart-item__image {
    height: 5.5rem;
  }
  .wc-block-cart-item__image {
    grid-row: 1/span 2 !important;
  }
  .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding-top: 0;
    text-align: left;
  }
}
/* ==========================================================================
   Moje konto WooCommerce (nowa marka) — KLASYCZNY shortcode
   [woocommerce_my_account] (szablony PHP w woocommerce/myaccount/), NIE
   blok React jak koszyk/checkout. Zwykłe, stabilne klasy WC
   (.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) +
   nasze własne klasy z nadpisanych szablonów dashboard.php/navigation.php
   (.tb-account-*). Odtworzone z makiety "Moje konto — projekt".

   Kolory tekstu/tła reużywają lokalnych tokenów --hp-c-checkout-*
   zdefiniowanych w checkout.scss — ta sama rodzina ciepłych szaro-różowych
   odcieni co reszta stron sklepu (koszyk/checkout/konto).
   ========================================================================== */
.tb-account-hero {
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3rem);
  padding-inline: var(--hp-container-pad);
}
.tb-account-hero__crumbs {
  margin: 0 0 0.875rem;
  color: var(--hp-c-ink-3);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.tb-account-hero__crumbs b {
  color: var(--hp-c-ink);
}
.tb-account-hero__title {
  margin: 0;
}
.tb-account-hero__lead {
  margin-top: 0.75rem;
  color: var(--hp-c-ink-2);
}

.woocommerce-MyAccount-content-wrapper,
.woocommerce-account .woocommerce {
  display: grid !important;
  grid-template-columns: 16.25rem minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(1.5rem, 3vw, 1.875rem) !important;
  box-sizing: border-box;
  max-width: calc(var(--hp-container-max) + var(--hp-container-pad) * 2);
  margin: 0 auto clamp(3rem, 6vw, 5rem) !important;
  padding-inline: var(--hp-container-pad) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-column: 1 !important;
  grid-row: 1 !important;
  float: none !important;
  width: 100% !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

.woocommerce-MyAccount-navigation {
  padding: 1.5rem 0.875rem;
  border: 1px solid var(--hp-c-line);
  border-radius: 1rem;
  background: var(--hp-c-white);
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04);
}

.tb-account-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.625rem 1.5rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--hp-c-line);
}
.tb-account-identity__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fae7e6;
  color: var(--hp-c-red);
  font-family: var(--hp-ff-heading);
  font-size: var(--hp-fs-h5);
}
.tb-account-identity b {
  display: block;
  font-size: var(--wp--preset--font-size--text-smaller);
  color: var(--hp-c-checkout-ink);
}
.tb-account-identity small {
  display: block;
  margin-top: 0.3125rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
}

.woocommerce-MyAccount-navigation ul {
  display: grid !important;
  gap: 0.3125rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation li a {
  display: grid !important;
  grid-template-columns: 1.125rem minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0.625rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0.8125rem 0.875rem !important;
  border-radius: 0.5rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.4;
  text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover {
  background: #fff6f4;
}
.woocommerce-MyAccount-navigation li a::before {
  padding-top: 0.0625rem;
  font-size: var(--wp--preset--font-size--text-bigger);
  line-height: 1;
  text-align: center;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
  content: "▦";
}

.woocommerce-MyAccount-navigation-link--orders a::before {
  content: "≡";
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
  content: "↓";
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
  content: "⌂";
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: "⚙";
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  content: "↪";
}

.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
  background: #fcf0ee;
}

.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.875rem;
  padding-top: 1.3125rem;
  border-top: 1px solid var(--hp-c-line);
}

.woocommerce-MyAccount-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.tb-account-welcome {
  padding: clamp(1.5rem, 3vw, 1.875rem) clamp(1.25rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hp-c-line);
  border-radius: 1rem;
  background: linear-gradient(110deg, var(--hp-c-white), var(--hp-c-red-tint-2));
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04);
}
.tb-account-welcome::after {
  content: "";
  position: absolute;
  right: -1.875rem;
  top: -4.6875rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid var(--hp-c-rose-arc);
  border-radius: 50%;
  pointer-events: none;
}
.tb-account-welcome__tag {
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tb-account-welcome__title {
  margin: 0.8125rem 0 0.75rem;
  letter-spacing: -0.05em;
}
.tb-account-welcome__lead {
  max-width: 35rem;
  margin: 0;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.7;
  position: relative;
}
.tb-account-welcome__lead a {
  color: var(--hp-c-red);
  text-decoration: underline;
}

.tb-account-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tb-account-stats__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--hp-c-line);
  border-radius: 1rem;
  background: var(--hp-c-white);
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04);
}
.tb-account-stats__item strong {
  color: var(--hp-c-red);
  font-family: inherit;
  font-variant-numeric: slashed-zero;
  font-size: var(--hp-fs-h3);
  font-weight: var(--hp-fw-bold);
}
.tb-account-stats__item span {
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  line-height: 1.6;
}

.tb-account-card {
  padding: clamp(1.5rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.875rem);
  border: 1px solid var(--hp-c-line);
  border-radius: 1rem;
  background: var(--hp-c-white);
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04);
}
.tb-account-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.4375rem;
}
.tb-account-card__heading h2 {
  margin: 0;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}
.tb-account-card__heading a {
  flex: none;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
}
.tb-account-card__empty {
  margin: 0;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-smaller);
}

.tb-account-materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}
.tb-account-materials__item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.125rem;
  border: 1px solid var(--hp-c-line);
  border-radius: 0.625rem;
}
.tb-account-materials__item h3 {
  margin: 0.1875rem 0 0.5rem;
  color: var(--hp-c-checkout-ink);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.45;
}
.tb-account-materials__item p {
  margin: 0 0 0.75rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
}
.tb-account-materials__cover {
  display: grid;
  place-items: center;
  height: 6.25rem;
  border-radius: 0.375rem;
  background: var(--hp-c-red-tint);
}
.tb-account-materials__cover img {
  width: 4.625rem;
  height: 5.625rem;
  object-fit: contain;
}
.tb-account-materials__download {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.8125rem;
  border: 1px solid var(--hp-c-red);
  border-radius: 0.3125rem;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
}
.tb-account-materials__download:hover {
  background: var(--hp-c-red);
  color: var(--hp-c-white);
}

.tb-account-orders {
  overflow-x: auto;
}
.tb-account-orders table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--text-xs);
  text-align: left;
}
.tb-account-orders th {
  padding: 0 0.75rem 0.875rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
}
.tb-account-orders td {
  padding: 1.0625rem 0.75rem;
  border-top: 1px solid var(--hp-c-line);
  color: var(--hp-c-ink-2);
  white-space: nowrap;
}
.tb-account-orders td:first-child {
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
}
.tb-account-orders__status {
  display: inline-block;
  padding: 0.375rem 0.5625rem;
  border: 1px solid #cfe2d4;
  border-radius: 1.25rem;
  background: #f2f8f3;
  color: #52715d;
  font-size: var(--wp--preset--font-size--text-xs);
}
.tb-account-orders__details {
  color: var(--hp-c-red);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
}

.woocommerce-MyAccount-content > p:first-child {
  margin: 0;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-smaller);
}
.woocommerce-MyAccount-content > p:first-child mark {
  background: none;
  color: var(--hp-c-checkout-ink);
  font-weight: var(--hp-fw-bold);
}

.woocommerce-order-details,
.woocommerce-order-downloads,
.woocommerce-customer-details {
  padding: clamp(1.5rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.875rem);
  border: 1px solid var(--hp-c-line);
  border-radius: 1rem;
  background: var(--hp-c-white);
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04);
}

.woocommerce-order-details__title,
.woocommerce-order-downloads__title,
.woocommerce-column__title {
  margin: 0 0 1.25rem;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--text-smaller);
}
.woocommerce-table--order-details th, .woocommerce-table--order-details td,
.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--hp-c-line);
  text-align: left;
}
.woocommerce-table--order-details thead th,
.woocommerce-table--order-downloads thead th {
  padding-top: 0;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
}
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-downloads tbody td {
  color: var(--hp-c-ink-2);
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-downloads tfoot th {
  color: var(--hp-c-checkout-label);
  font-weight: normal;
  text-align: left;
}
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-downloads tfoot td {
  color: var(--hp-c-checkout-ink);
  font-weight: var(--hp-fw-bold);
  text-align: right;
}
.woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-table--order-details tfoot tr:last-of-type td,
.woocommerce-table--order-downloads tfoot tr:last-of-type th,
.woocommerce-table--order-downloads tfoot tr:last-of-type td {
  border-bottom: 0;
}
.woocommerce-table--order-details .product-quantity,
.woocommerce-table--order-downloads .product-quantity {
  color: var(--hp-c-checkout-label);
  font-weight: normal;
}
.woocommerce-table--order-details a,
.woocommerce-table--order-downloads a {
  color: var(--hp-c-red);
}
.woocommerce-table--order-details .button,
.woocommerce-table--order-downloads .button {
  display: inline-flex;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: 0.4375rem;
  background: var(--hp-c-red);
  color: var(--hp-c-white) !important;
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
}
.woocommerce-table--order-details .button:hover,
.woocommerce-table--order-downloads .button:hover {
  background: var(--hp-c-red-hover) !important;
}

.woocommerce-customer-details address {
  font-style: normal;
  color: var(--hp-c-ink-2);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.8;
}
.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.woocommerce-customer-details .woocommerce-column + .woocommerce-column {
  margin-top: 1.5rem;
}

.woocommerce-MyAccount-content form {
  padding: clamp(1.5rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.875rem) !important;
  border: 1px solid var(--hp-c-line) !important;
  border-radius: 1rem !important;
  background: var(--hp-c-white) !important;
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04) !important;
}

.woocommerce-MyAccount-content form:has(> .form-row-first),
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 1.25rem !important;
}

.woocommerce-MyAccount-content form > .form-row,
.woocommerce-MyAccount-content form > fieldset,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row {
  grid-column: 1/-1;
}

.woocommerce-MyAccount-content form > .form-row-first:has(+ .form-row-last),
.woocommerce-MyAccount-content form > .form-row-last,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first:has(+ .form-row-last),
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last {
  grid-column: auto;
}

.woocommerce-MyAccount-content form > h2 {
  margin: 0 0 1.5rem;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.woocommerce-MyAccount-content form > .clear {
  display: none !important;
}

.woocommerce-MyAccount-content .form-row {
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 1.125rem !important;
}

.woocommerce-MyAccount-content .form-row label {
  display: block !important;
  margin: 0 0 0.5rem !important;
  color: var(--hp-c-checkout-label) !important;
  font-size: var(--wp--preset--font-size--text-xs) !important;
  font-weight: normal !important;
}
.woocommerce-MyAccount-content .form-row label .required {
  color: var(--hp-c-red);
  text-decoration: none;
}

.woocommerce-MyAccount-content form em {
  display: block;
  margin-top: 0.5rem;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
}

.woocommerce-MyAccount-content form fieldset {
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
}

.woocommerce-MyAccount-content form fieldset legend {
  margin-bottom: 1.125rem;
  padding: 0;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}

.woocommerce-MyAccount-content input[type=text],
.woocommerce-MyAccount-content input[type=email],
.woocommerce-MyAccount-content input[type=tel],
.woocommerce-MyAccount-content input[type=password],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 3.125rem !important;
  padding: 0 0.875rem !important;
  border: 1px solid var(--hp-c-checkout-border) !important;
  border-radius: 0.5rem !important;
  background: var(--hp-c-checkout-bg) !important;
  color: var(--hp-c-checkout-ink) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease;
}
.woocommerce-MyAccount-content input[type=text]:focus,
.woocommerce-MyAccount-content input[type=email]:focus,
.woocommerce-MyAccount-content input[type=tel]:focus,
.woocommerce-MyAccount-content input[type=password]:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  outline: none !important;
  background: var(--hp-c-checkout-bg) !important;
  border-color: var(--hp-c-red) !important;
}

.woocommerce-MyAccount-content textarea {
  height: auto !important;
  min-height: 6rem !important;
  padding-block: 0.75rem !important;
}

.woocommerce-MyAccount-content form .woocommerce-Button,
.woocommerce-MyAccount-content form button[type=submit],
.woocommerce-MyAccount-content form input[type=submit] {
  grid-column: 1/-1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  margin-top: 0.375rem;
  padding: 0.9375rem 1.75rem !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: var(--hp-c-red) !important;
  color: var(--hp-c-white) !important;
  font-size: var(--wp--preset--font-size--text-smaller) !important;
  font-weight: var(--hp-fw-bold) !important;
  text-decoration: none !important;
  cursor: pointer;
}
.woocommerce-MyAccount-content form .woocommerce-Button:hover,
.woocommerce-MyAccount-content form button[type=submit]:hover,
.woocommerce-MyAccount-content form input[type=submit]:hover {
  background: var(--hp-c-red-hover) !important;
}

@media (max-width: 560px) {
  .woocommerce-MyAccount-content form:has(> .form-row-first),
  .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
}
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .u-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
}

.woocommerce-MyAccount-content .col2-set::before,
.woocommerce-MyAccount-content .col2-set::after {
  content: none !important;
  display: none !important;
}

.woocommerce-MyAccount-content .col2-set .col-1,
.woocommerce-MyAccount-content .col2-set .col-2,
.woocommerce-MyAccount-content .woocommerce-Address {
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .u-column1,
.woocommerce-MyAccount-content .u-column2 {
  padding: clamp(1.5rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.875rem) !important;
  border: 1px solid var(--hp-c-line) !important;
  border-radius: 1rem !important;
  background: var(--hp-c-white) !important;
  box-shadow: 0 0.75rem 2.5rem rgba(74, 25, 16, 0.04) !important;
}

.woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-MyAccount-content .u-column1 header,
.woocommerce-MyAccount-content .u-column2 header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title::before, .woocommerce-MyAccount-content .woocommerce-Address-title::after,
.woocommerce-MyAccount-content .u-column1 header::before,
.woocommerce-MyAccount-content .u-column1 header::after,
.woocommerce-MyAccount-content .u-column2 header::before,
.woocommerce-MyAccount-content .u-column2 header::after {
  content: none !important;
  display: none !important;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-MyAccount-content .woocommerce-Address-title h3,
.woocommerce-MyAccount-content .u-column1 header h2,
.woocommerce-MyAccount-content .u-column1 header h3,
.woocommerce-MyAccount-content .u-column2 header h2,
.woocommerce-MyAccount-content .u-column2 header h3 {
  margin: 0;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-bold);
  font-size: var(--wp--preset--font-size--text-bigger);
}
.woocommerce-MyAccount-content .woocommerce-Address-title a,
.woocommerce-MyAccount-content .u-column1 header a,
.woocommerce-MyAccount-content .u-column2 header a {
  flex: none;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  color: var(--hp-c-ink-2);
  font-size: var(--wp--preset--font-size--text-smaller);
  line-height: 1.8;
}

.woocommerce-MyAccount-content .woocommerce-Address em {
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-smaller);
  font-style: italic;
}

@media (max-width: 720px) {
  .woocommerce-MyAccount-content .woocommerce-Addresses,
  .woocommerce-MyAccount-content .u-columns {
    grid-template-columns: 1fr !important;
  }
}
.tb-account-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 1.75rem;
  border: 1px solid var(--hp-c-rose-deep);
  border-radius: 0.75rem;
  background: var(--hp-c-red-tint);
}
.tb-account-help h3 {
  margin: 0 0 0.4375rem;
  color: var(--hp-c-checkout-ink);
  font-family: var(--hp-ff-heading);
  font-weight: var(--hp-fw-medium);
  font-size: var(--hp-fs-h5);
}
.tb-account-help p {
  margin: 0;
  color: var(--hp-c-checkout-label);
  font-size: var(--wp--preset--font-size--text-xs);
}
.tb-account-help a {
  flex: none;
  color: var(--hp-c-red);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
  white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  margin: 0 !important;
  padding: 1.125rem 1.5rem !important;
  border: 1px solid var(--hp-c-line) !important;
  border-radius: 0.75rem !important;
  background: var(--hp-c-white) !important;
  color: var(--hp-c-checkout-ink);
  font-size: var(--wp--preset--font-size--text-smaller);
  list-style: none !important;
}
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
  display: none !important;
}
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-error .button {
  flex: none;
  margin-left: auto;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: 0.4375rem;
  background: var(--hp-c-red);
  color: var(--hp-c-white);
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-message .button:hover,
.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-MyAccount-content .woocommerce-error .button:hover {
  background: var(--hp-c-red-hover);
  color: var(--hp-c-white);
}

@media (max-width: 900px) {
  .woocommerce-MyAccount-content-wrapper,
  .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 1 !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-row: 2 !important;
  }
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
  }
  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .tb-account-materials {
    grid-template-columns: 1fr;
  }
  .tb-account-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-MyAccount-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}
/* ==========================================================================
   PRZYCISKI WOOCOMMERCE w strefie klienta, w kolorach marki.
   WC renderuje własne .button (szary) i .button.alt (fioletowy #7f54b2),
   których markupu nie da się okleić klasami .hp-btn. Wymiary i krój 1:1
   z .hp-btn / .hp-btn--outline (components.scss): zmieniasz jedno,
   zmień drugie.
   ========================================================================== */
.woocommerce-account .woocommerce :is(a.button, button.button, input.button, .woocommerce-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--hp-c-red);
  border-radius: var(--hp-radius-md);
  background: var(--hp-c-white);
  color: var(--hp-c-red);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--text-xs);
  font-weight: var(--hp-fw-bold);
  letter-spacing: var(--hp-ls-wide);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  transition: background var(--hp-t-fast), color var(--hp-t-fast), border-color var(--hp-t-fast);
}
.woocommerce-account .woocommerce :is(a.button, button.button, input.button, .woocommerce-button):hover {
  background: var(--hp-c-red);
  border-color: var(--hp-c-red);
  color: var(--hp-c-white);
}

.woocommerce-account .woocommerce :is(.button.alt, .woocommerce-form-login__submit, .woocommerce-Button[type=submit], .woocommerce-MyAccount-downloads-file) {
  background: var(--hp-c-red);
  border-color: var(--hp-c-red);
  color: var(--hp-c-white);
  box-shadow: var(--hp-shadow-btn);
}
.woocommerce-account .woocommerce :is(.button.alt, .woocommerce-form-login__submit, .woocommerce-Button[type=submit], .woocommerce-MyAccount-downloads-file):hover {
  background: var(--hp-c-red-hover);
  border-color: var(--hp-c-red-hover);
  color: var(--hp-c-white);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-downloads-file::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  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;
}

/* ==========================================================================
   LOGOWANIE (gość). Nagłówek strony dokłada includes/woocommerce-my-account.php
   (woocommerce_before_customer_login_form). Jedna karta na środku zamiast
   siatki z pustą kolumną nawigacji.
   ========================================================================== */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  max-width: 30rem;
}

body.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  display: none;
}

.tb-login-intro {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.tb-login-intro .tb-login-intro__lead {
  margin-top: 0.75rem;
}
.tb-login-intro .wp-block-heading {
  margin-top: 0.5rem;
}

body.woocommerce-account:not(.logged-in) .woocommerce-form-login {
  margin: 0 !important;
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  border: 0 !important;
  border-radius: var(--hp-radius-lg) !important;
  background: var(--hp-c-surface);
  box-shadow: 0 22px 44px -38px rgba(17, 18, 20, 0.4);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row {
  margin: 0 0 1rem;
  padding: 0;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--hp-fs-sm);
  font-weight: var(--hp-fw-bold);
  color: var(--hp-c-ink);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .input-text {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hp-c-line);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-c-white);
  font-size: var(--hp-fs-md);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .input-text:focus {
  outline: none;
  border-color: var(--hp-c-red);
  box-shadow: 0 0 0 3px rgba(191, 1, 23, 0.12);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
  font-weight: var(--hp-fw-regular);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__rememberme input {
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--hp-c-red);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit {
  width: 100%;
  float: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .lost_password {
  margin: 1rem 0 0;
  text-align: center;
  font-size: var(--hp-fs-sm);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .lost_password a {
  color: var(--hp-c-red);
  text-decoration: underline;
}

.tb-login-note {
  margin-top: 1.25rem;
  text-align: center;
}