/*
 * Theme Name:  Tool Rental Child
 * Theme URI:   https://toolrental.pl
 * Description: Child theme for Blocksy – TOOL RENTAL & SERVICES Sieradz
 * Author:      Tool Rental & Services Sp. z o.o.
 * Author URI:  https://toolrental.pl
 * Template:    blocksy
 * Version:     1.0.0
 * License:     GPL-2.0-or-later
 * Text Domain: toolrental-child
 */

/* =====================================================================
   CSS CUSTOM PROPERTIES
   Kolory, typografia i odstępy zgodne z projektem HTML/CSS.
   Nadpisują domyślne zmienne Blocksy.
   ===================================================================== */

:root {
  /* Kolory główne – pomarańczowa paleta */
  --gold: #e85d04;
  --gold-dark: #c94e00;
  --gold-hover: #ff7a35;
  --gold-pale: rgba(232, 93, 4, 0.08);
  --gold-border: rgba(232, 93, 4, 0.28);

  /* Ciemne odcienie */
  --dark: #1a1a1a;
  --dark-2: #242424;
  --dark-3: #2e2e2e;
  --dark-4: #3a3a3a;

  /* Szarości */
  --gray-700: #555;
  --gray-500: #888;
  --gray-300: #bfc0c0;
  --gray-200: #dcdcdc;
  --gray-100: #ebebeb;
  --gray-50: #f6f6f4;

  /* Tekst i tło */
  --white: #ffffff;
  --text: #252525;
  --text-muted: #6a6a6a;

  /* Status */
  --success: #2dab5f;
  --danger: #d63b3b;
  --warning: #f0a500;

  /* Typografia */
  --font-heading:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rozmiary czcionek */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* Odstępy sekcji */
  --section-py: 80px;
  --section-py-sm: 52px;

  /* Zaokrąglenia */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 9999px;

  /* Cienie */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 5px 24px rgba(0, 0, 0, 0.11);
  --shadow-lg: 0 10px 44px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 18px 64px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 22px rgba(232, 93, 4, 0.35);
  --shadow-gold-lg: 0 8px 44px rgba(232, 93, 4, 0.25);

  /* Przejścia */
  --t-fast: 0.15s ease;
  --t-base: 0.3s ease;
  --t-slow: 0.55s ease;

  /* Header */
  --header-h: 80px;

  /* Kontener */
  --max-w: 1260px;
  --px: 24px;
}

/* =====================================================================
   GUTENBERG – RESET MARGINESÓW MIĘDZY BLOKAMI ROOT
   Usuwa domyślny margin-bottom/margin-block-end który powoduje
   białe przerwy między sekcjami z różnym tłem.
   ===================================================================== */
.wp-site-blocks > *,
.entry-content > *,
.is-root-container > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* =====================================================================
   GRID UTILITIES – .grid .grid-2 .grid-3 .grid-4
   ===================================================================== */

.grid {
  display: grid;
  gap: 28px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   NADPISANIA BLOCKSY – GLOBALNE KOLORY
   Mapowanie zmiennych projektu → tokeny Blocksy (--theme-palette-color-N)
   ===================================================================== */

:root {
  /* Blocksy Global Palette (synchronizowane z Customizer → General → Colors) */
  --theme-palette-color-1: var(--gold); /* akcent główny  */
  --theme-palette-color-2: var(--gold-dark); /* akcent ciemny  */
  --theme-palette-color-3: var(--dark); /* nagłówki       */
  --theme-palette-color-4: var(--text); /* tekst body     */
  --theme-palette-color-5: var(--text-muted); /* tekst wyciszony */
  --theme-palette-color-6: var(--gray-50); /* tło jasne      */
  --theme-palette-color-7: var(--white); /* białe          */
  --theme-palette-color-8: var(--dark-2); /* ciemne tło     */
}

/* =====================================================================
   TYPOGRAFIA BAZOWA
   ===================================================================== */

body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.22;
  color: var(--dark);
}

h1 {
  font-size: clamp(32px, 5.5vw, 60px);
}
h2 {
  font-size: clamp(26px, 3.6vw, 42px);
}
h3 {
  font-size: clamp(20px, 2.5vw, 28px);
}
h4 {
  font-size: clamp(17px, 2vw, 22px);
}

p {
  line-height: 1.78;
  color: var(--text-muted);
}

/* =====================================================================
   PRZYCISKI (klasy zgodne z projektem HTML)
   ===================================================================== */

/* Bazowe style – zwykłe <a class="btn"> w Custom HTML */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--t-base);
  padding: 14px 34px;
}

/* ── SPECTRA Advanced Buttons fix ──────────────────────────────────────
   Spectra generuje: div.btn.btn--primary > div.uagb-button__wrapper > a
   Klasy trafiają na zewnętrzny div – musimy:
   1. Wyzerować wrapper div (brak tła/paddingu)
   2. Przenieść wszystkie style wizualne na sam <a>
   ──────────────────────────────────────────────────────────────────── */

/* Reset warstw pośrednich */
.wp-block-uagb-buttons-child.btn,
.wp-block-uagb-buttons-child .uagb-button__wrapper {
  display: contents; /* przezroczysty wrapper – nie wpływa na layout */
}

/* Bazowe style na <a> gdy klasy są na wrapper-ze */
.wp-block-uagb-buttons-child .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-radius: var(--r-md) !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--t-base) !important;
  padding: 14px 34px !important;
}

/* Rozmiary */
.wp-block-uagb-buttons-child.btn--lg .wp-block-button__link {
  padding: 18px 46px !important;
  font-size: var(--text-base) !important;
}
.wp-block-uagb-buttons-child.btn--sm .wp-block-button__link {
  padding: 10px 24px !important;
  font-size: var(--text-xs) !important;
}

/* Warianty kolorystyczne */
.wp-block-uagb-buttons-child.btn--primary .wp-block-button__link {
  background: var(--gold) !important;
  color: var(--white) !important;
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-gold) !important;
}
.wp-block-uagb-buttons-child.btn--primary:hover .wp-block-button__link,
.wp-block-uagb-buttons-child.btn--primary .wp-block-button__link:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-gold-lg) !important;
  transform: translateY(-2px);
}

.wp-block-uagb-buttons-child.btn--outline .wp-block-button__link {
  background: transparent !important;
  color: var(--gold) !important;
  border-color: var(--gold-border) !important;
}
.wp-block-uagb-buttons-child.btn--outline:hover .wp-block-button__link,
.wp-block-uagb-buttons-child.btn--outline .wp-block-button__link:hover {
  background: var(--gold-pale) !important;
  border-color: var(--gold) !important;
}

.wp-block-uagb-buttons-child.btn--outline-white .wp-block-button__link {
  background: transparent !important;
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}
.wp-block-uagb-buttons-child.btn--outline-white:hover .wp-block-button__link,
.wp-block-uagb-buttons-child.btn--outline-white .wp-block-button__link:hover {
  background: var(--white) !important;
  color: var(--dark) !important;
  border-color: var(--white) !important;
  transform: translateY(-2px);
}

.wp-block-uagb-buttons-child.btn--outline-dark .wp-block-button__link {
  background: transparent !important;
  color: var(--dark) !important;
  border-color: var(--dark) !important;
}
.wp-block-uagb-buttons-child.btn--outline-dark:hover .wp-block-button__link,
.wp-block-uagb-buttons-child.btn--outline-dark .wp-block-button__link:hover {
  background: var(--dark) !important;
  color: var(--white) !important;
  border-color: var(--dark) !important;
  transform: translateY(-2px);
}

/* ── Stare selektory (Gutenberg native button block) ──────────────── */
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

/* Rozmiary dla zwykłego .btn */
.btn--lg {
  padding: 18px 46px;
  font-size: var(--text-base);
}
.btn--sm {
  padding: 10px 24px;
  font-size: var(--text-xs);
}
.btn--full {
  width: 100%;
  justify-content: center;
}

.btn--primary {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
  box-shadow: var(--shadow-gold-lg);
  transform: translateY(-2px);
}
.btn--outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}
.btn--outline:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
}
.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn--outline-white:hover {
  background: var(--white);
  color: var(--dark);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn--outline-dark:hover {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  transform: translateY(-2px);
}

/* =====================================================================
   BADGE / TAG (używane w kartach maszyn)
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--available {
  background: #e85d04;
  color: #fff;
  border: none;
}

.badge--unavailable {
  background: rgba(214, 59, 59, 0.1);
  color: var(--danger);
  border: 1px solid rgba(214, 59, 59, 0.22);
}

/* =====================================================================
   HEADER (Blocksy) – nadpisania
   Klasy Blocksy: ct-header, ct-menu-link, ct-button, ct-header-cta
   ===================================================================== */

/* Tło nagłówka – ciemne */
.ct-header [data-row="middle"] {
  background-color: var(--dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Sticky – przyciemniony z blur */
.ct-header.is-sticky [data-row="middle"],
.ct-header[data-sticky="yes"] [data-row="middle"] {
  background-color: rgba(22, 22, 22, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(232, 93, 4, 0.18) !important;
}

/* ── Nawigacja desktop – menu główne ── */

/* Ghost button: absolute żeby nie dodawał wysokości do li */
.ct-header [data-id="menu"] .menu > li {
  position: relative !important;
}

.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop-ghost {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * Strzałka ▾ wewnątrz <a> Oferty: Blocksy nadaje jej height:24px przez
 * regułę [class*=ct-toggle]. Powoduje to że <a> Oferty jest wyższy niż
 * pozostałe linki. Resetujemy do auto.
 */
.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop {
  height: auto !important;
}

/* Top-level link: zaokrąglenie + padding */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a.ct-menu-link {
  padding: 7px 14px !important;
  border-radius: 4px !important;
}

/* Hover i aktywna strona: pomarańczowe tło */
[data-header*="type-1"]
  .ct-header
  [data-id="menu"]
  > ul
  > li:hover
  > a.ct-menu-link,
[data-header*="type-1"]
  .ct-header
  [data-id="menu"]
  > ul
  > li[class*="current-menu"]
  > a.ct-menu-link {
  background-color: rgba(232, 93, 4, 0.09) !important;
}

/* Submenu desktop */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13) !important;
  padding: 6px !important;
  min-width: 220px !important;
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
  border-radius: 6px !important;
}

[data-header*="type-1"]
  .ct-header
  [data-id="menu"]
  .sub-menu
  .menu-item:hover
  > .ct-menu-link,
[data-header*="type-1"]
  .ct-header
  [data-id="menu"]
  .sub-menu
  [class*="current-menu"]
  > .ct-menu-link {
  background-color: rgba(232, 93, 4, 0.08) !important;
}

/* ── Offcanvas (mobile menu) ── */

#offcanvas .ct-menu-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition:
    color 0.15s,
    background-color 0.15s !important;
}

#offcanvas .menu-item:hover > .ct-menu-link,
#offcanvas .current-menu-item > .ct-menu-link {
  color: #e85d04 !important;
  background-color: rgba(232, 93, 4, 0.08) !important;
}

#offcanvas .sub-menu .ct-menu-link {
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-left: 36px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

#offcanvas .sub-menu .menu-item:hover > .ct-menu-link {
  color: #e85d04 !important;
  background-color: rgba(232, 93, 4, 0.07) !important;
}

/* ── Telefon (HTML widget) ── */
.header-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--white) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--r-md) !important;
  text-decoration: none !important;
  transition:
    color var(--t-base),
    border-color var(--t-base) !important;
  white-space: nowrap !important;
}

.header-phone:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.header-phone .ph-icon {
  color: var(--gold) !important;
  font-size: 13px !important;
}

/* ── Przycisk CTA (ct-button) ── */
.ct-header-cta .ct-button,
.ct-header [data-id="button"] .ct-button {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gold) !important;
  color: var(--white) !important;
  border: 2px solid var(--gold) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-gold) !important;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base) !important;
  white-space: nowrap !important;
}

.ct-header-cta .ct-button:hover,
.ct-header [data-id="button"] .ct-button:hover {
  background: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
  box-shadow: var(--shadow-gold-lg) !important;
  transform: translateY(-2px) !important;
}

/* ── Wyrównanie prawej kolumny ── */
.ct-header [data-column="end"] [data-items] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ── Header – statyczny (scrolluje ze stroną, bez sticky)
   Używamy selektora <header> żeby NIE trafić w #offcanvas.ct-header ── */
header.ct-header,
header.ct-header.is-sticky {
  position: static !important;
}

/* ── Mobilny wiersz headera – stała wysokość ── */
.ct-header [data-device="mobile"] [data-row="middle"] {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  overflow: visible !important;
}

/* ── Hamburger mobilny ── */
.ct-header-trigger {
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

.ct-header-trigger:hover {
  border-color: #e85d04 !important;
}

.ct-header-trigger svg rect {
  fill: var(--white) !important;
}

/* =====================================================================
   FOOTER – nadpisania Blocksy + style shortcode [footer_categories]
   ===================================================================== */

/* Reset odstępów między widżetami – Blocksy domyślnie dodaje margin-top 40px */
.ct-footer .ct-widget:not(:first-child) {
  margin-top: 16px !important;
}

/* Rząd dolny (copyright + menu) */
.ct-footer [data-row="bottom"] .ct-container {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Grid 4 kolumn: 2fr 1fr 1fr 1.5fr */
.ct-footer [data-row="middle"] .ct-container {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
  gap: 50px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .ct-footer [data-row="middle"] .ct-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 600px) {
  .ct-footer [data-row="middle"] .ct-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Nagłówki widżetów (H3 z UAGB Advanced Heading) – border pod spodem */
.ct-footer h3.uagb-heading-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin: 0 0 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Menu w widżecie "Szybkie linki" – wyrównaj wygląd do [footer_categories] */
.ct-footer .widget-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-footer .widget-menu a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--t-base);
  text-decoration: none;
}

.ct-footer .widget-menu a::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  flex-shrink: 0;
}

.ct-footer .widget-menu a:hover {
  color: var(--gold);
  padding-left: 4px;
}

/* Shortcode [footer_categories] – lista kategorii */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--t-base);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--gold);
  padding-left: 4px;
}

.footer-link i {
  font-size: 10px;
  flex-shrink: 0;
}

/* Ukryj puste <p> generowane przez WP wokół shortcode'ów w widżetach stopki */
.ct-footer p:empty {
  display: none;
}

/* Social Links block (Gutenberg wp-block-social-links) – styl z demo */
.ct-footer .wp-block-social-links {
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ct-footer .wp-block-social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.ct-footer .wp-block-social-link a {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.ct-footer .wp-block-social-link svg {
  width: 24px !important;
  height: 24px !important;
  fill: rgba(255, 255, 255, 0.58) !important;
  transition: fill 0.2s;
}

.ct-footer .wp-block-social-link:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  transform: translateY(-2px);
}

.ct-footer .wp-block-social-link:hover svg {
  fill: #fff !important;
}

/* Kolumna Kontakt – paragraf z ikoną FA i linkami */
.ct-footer [data-column="widget-area-4"] p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-footer [data-column="widget-area-4"] p:last-child {
  margin-bottom: 0;
}

.ct-footer [data-column="widget-area-4"] a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: var(--t-base);
}

.ct-footer [data-column="widget-area-4"] a:hover {
  color: var(--gold);
}

/* Copyright tekst */
.ct-footer-copyright,
.ct-footer-copyright p,
.ct-footer-copyright a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.38);
}

.ct-footer-copyright a:hover {
  color: var(--gold);
}

/* Menu dolne (Polityka prywatności itp.) */
.ct-footer .footer-menu-inline .ct-menu-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.38);
  transition: var(--t-base);
}

.ct-footer .footer-menu-inline .ct-menu-link:hover {
  color: var(--gold);
}

/* =====================================================================
   SEKCJE – pomocnicze klasy CSS
   Stosów w polu „Additional CSS class(es)” w edytorze bloku Gutenberg.
   ===================================================================== */

/* Etykieta sekcji (nad H2) */
.section-label,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 3.5px; /* NIE 0.1em */
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.section-label.center,
.section-tag.center {
  justify-content: center;
}

.section-label::before,
.section-tag::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Nagłówek sekcji */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  margin-bottom: 16px;
}

/* Opis pod H2 */
.section-desc,
.section-subtitle {
  max-width: 640px; /* NIE 600px */
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.72;
}

/* Złoty separator 48×3px */
.gold-sep {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* =====================================================================
   KARTY PRODUKTÓW / MASZYN
   ===================================================================== */

.machine-card,
.product-card {
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--t-base),
    transform var(--t-base);
}

.machine-card:hover,
.product-card:hover {
  box-shadow: var(--shadow-gold-lg);
  transform: translateY(-6px);
  border-color: var(--gold-border);
}

/* =====================================================================
   SHORTCODE [machine_categories] – siatka kategorii na /oferta/
   ===================================================================== */

.category-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: var(--t-base);
  cursor: pointer;
  display: grid;
  grid-template-rows: auto 1fr;
}

.category-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-gold-lg);
}

.category-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.category-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.category-card:hover .category-card-image img {
  transform: scale(1.09);
}

/* Placeholder gdy brak zdjęcia */
.category-card-placeholder {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  font-size: 60px;
  color: var(--gold);
  opacity: 0.5;
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.6) 0%,
    transparent 55%
  );
}

.category-card-body {
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.category-card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
  /* Stała wysokość = 2 linie × line-height 1.3 × 20px = 52px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
  line-height: 1.3;
}

.category-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.category-card-title-link:hover {
  color: var(--gold);
}

.category-card-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.category-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.category-card-price {
  font-size: 13px;
  color: var(--text-muted);
}

.category-card-price strong {
  color: var(--gold-dark);
}

.price-brutto-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.75;
  vertical-align: middle;
}

.category-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: var(--t-base);
}

.category-card-link:hover {
  gap: 10px;
  color: var(--gold);
}

/* =====================================================================
   MACHINE CATEGORIES GRID – elastyczny flex-grid
   Desktop: 3 na rząd | Tablet: 2 na rząd | Mobile: 1 na rząd
   Ostatni rząd zawsze centruje się dzięki justify-content: center
   ===================================================================== */

.machine-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1024px) {
  .machine-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .machine-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* Wariant ciemny – klasa dodawana przez ACF (cat_dark = true) */
.category-card--dark {
  background: var(--dark);
}

/* .category-card--dark .category-card-overlay {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.82) 0%,
    rgba(10, 10, 10, 0.35) 100%
  );
} */

.category-card--dark .category-card-body {
  background: var(--dark);
  flex: 1;
}

.category-card--dark .category-card-title {
  color: var(--white);
}

.category-card--dark .category-card-desc {
  color: rgba(255, 255, 255, 0.72);
}

.category-card--dark .category-card-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.category-card--dark .category-card-price {
  color: rgba(255, 255, 255, 0.65);
}

.category-card--dark .category-card-price strong {
  color: var(--gold);
}

.category-card--dark .category-card-link {
  color: var(--gold);
}

/* Karta CTA – "Nie znalazłeś sprzętu?" */
.category-card--cta {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
  min-height: 300px;
  border-radius: var(--radius, 8px);
}

.category-card--cta .cta-card-icon {
  font-size: 36px;
  color: var(--gold);
  margin-bottom: 20px;
}

.category-card--cta .cta-card-title {
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.category-card--cta .cta-card-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* =====================================================================
   FORMULARZE – Contact Form 7 + klasy .form-*
   ===================================================================== */

/* Wrapper CF7 – usuń domyślne marginesy */
.wpcf7 {
  margin: 0 !important;
}

/* Ukryj fieldset z ukrytymi polami CF7 */
.wpcf7-form fieldset.hidden-fields-container {
  display: none !important;
}

/* Ukryj ogólną listę błędów (screen-reader-response) – błędy są pod każdym polem */
.wpcf7 .screen-reader-response {
  display: none !important;
}

/* CF7 owija pola w <p> – resetujemy marginesy i ukrywamy <br> */
.form-group p,
.form-group > p {
  margin: 0 !important;
  padding: 0 !important;
  display: contents;
}

.form-group p br {
  display: none;
}

/* RODO row – checkbox obok etykiety */
.form-group[style*="flex-direction:row"] p,
.form-group[style*="flex-direction: row"] p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Submit – <p> wokół buttona */
.wpcf7-form > p {
  margin: 0 !important;
}

/* Wszystkie pola: input, select, textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select,
.wpforms-field input,
.wpforms-field textarea,
.form-input,
.form-select,
.form-textarea {
  display: block !important;
  width: 100% !important;
  background: var(--white) !important;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--r-md) !important;
  color: var(--text) !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  line-height: 1.5 !important;
  min-height: 52px !important;
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

/* Placeholder kolor */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--gray-300);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.1);
  outline: none;
}

/* Textarea – minimalna wysokość */
.wpcf7-form textarea,
.form-textarea {
  min-height: 140px !important;
  resize: vertical;
}

/* Walidacja CF7 – błędy pokazuj dopiero po próbie wysłania formularza */
.wpcf7-form:not(.was-submitted) .wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7-form:not(.was-submitted) .wpcf7-not-valid {
  border-color: var(--gray-200) !important;
  box-shadow: none !important;
}

/* Przycisk submit – zablokowany gdy pola nie wypełnione */
.wpcf7-form .wpcf7-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Select – strzałka niestandardowa */
.wpcf7-form select,
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M8 11L2 5h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 44px;
  cursor: pointer;
  color: var(--text);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Select – placeholder (pierwsza opcja) */
.wpcf7-form select option[value=""] {
  color: var(--gray-300);
}

/* Checkbox RODO – złoty accent */
.wpcf7-form input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  accent-color: var(--gold);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Etykiety */
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}

.form-label.required::after {
  content: " *";
  color: var(--gold);
}

/* Grupa pola */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

/* Dwa pola obok siebie */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Błąd walidacji CF7 – pod polem */
.wpcf7-not-valid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(214, 59, 59, 0.1) !important;
}

.wpcf7-not-valid-tip {
  font-size: var(--text-xs);
  color: var(--danger);
  margin-top: 4px;
  display: block;
}

/* Komunikat po wysłaniu */
.wpcf7-response-output {
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: var(--text-sm);
  margin-top: 16px !important;
  border: none !important;
}

.wpcf7-mail-sent-ok {
  background: rgba(45, 171, 95, 0.1);
  color: var(--success);
}

.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked {
  background: rgba(214, 59, 59, 0.1);
  color: var(--danger);
}

/* Submit */
.wpcf7-form .wpcf7-submit {
  width: 100%;
  background: var(--gold);
  color: var(--white);
  border: 2px solid var(--gold);
  border-radius: var(--r-md);
  padding: 16px 32px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--t-base);
  box-shadow: var(--shadow-gold);
  margin-top: 8px;
}

.wpcf7-form .wpcf7-submit:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  box-shadow: var(--shadow-gold-lg);
  transform: translateY(-2px);
}

/* Responsive formularza */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   FAQ ACCORDION – własny shortcode [toolrental_faq]
   Struktura: .faq-accordion > .faq-item > button.faq-question + div.faq-answer > div.faq-answer-inner
   JS toggluje klasę .is-open na .faq-item (animations.js).
   Animacja: grid-template-rows 0fr→1fr – płynne otwieranie i zamykanie.
   ===================================================================== */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-sm);
}

.faq-item.is-open {
  border-color: var(--gold-border);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
}

/* Przycisk pytania */
.faq-question {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.faq-question:hover,
.faq-item.is-open .faq-question {
  color: var(--gold-dark);
}

.faq-icon {
  color: var(--gold);
  font-size: 15px;
  flex-shrink: 0;
}

.faq-question span {
  flex: 1;
}

.faq-arrow {
  font-size: 12px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
  color: var(--gold);
}

/* Animacja odpowiedzi – grid-template-rows trick */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
  overflow: hidden;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

/* .faq-answer-inner – min-height:0 wymagany przez grid trick.
   ZERO padding i border tutaj – inaczej zajmują miejsce przy 0fr.
   Padding i border są na .faq-answer-body wewnątrz. */
.faq-answer-inner {
  min-height: 0;
}

/* Właściwy wrapper treści – jego border i padding są klipowane przez
   overflow:hidden na .faq-answer gdy grid-template-rows: 0fr */
.faq-answer-body {
  border-top: 1px solid var(--gray-100);
  padding: 16px 24px 20px 40px;
}

.faq-answer-body p,
.faq-answer-body ul,
.faq-answer-body ol {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 8px;
}

.faq-answer-body p:last-child,
.faq-answer-body ul:last-child,
.faq-answer-body ol:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   BREADCRUMBS (Blocksy / Yoast / RankMath)
   ===================================================================== */

.ct-breadcrumbs,
.blocksy-breadcrumb,
.yoast-breadcrumb,
#breadcrumbs {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.ct-breadcrumbs a,
.blocksy-breadcrumb a,
.yoast-breadcrumb a {
  color: var(--gray-500);
}

.ct-breadcrumbs a:hover,
.blocksy-breadcrumb a:hover,
.yoast-breadcrumb a:hover {
  color: var(--gold);
}

/* =====================================================================
   FEATURED MACHINES SLIDER – shortcode [featured_machines]
   Poziomy scroll-snap slider, 3 karty widoczne jednocześnie na desktop.
   ===================================================================== */

.featured-slider-wrap {
  position: relative;
  overflow: hidden; /* trzyma slajdy w środku */
}

/* Track – overflow hidden, slider przesuwa się transform-em */
.featured-slider-track {
  overflow: hidden;
  padding: 12px 0;
}

/* Flex-kontener – nie scrolluje, przesuwa się przez transform */
.featured-slider {
  display: flex;
  gap: 24px;
  will-change: transform;
}

/* Karta – desktop: 3, tablet: 2, mobil: 1 */
.featured-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}

@media (max-width: 1024px) {
  .featured-slide {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 600px) {
  .featured-slide {
    flex: 0 0 100%;
  }
}

/* Nawigacja: strzałki + dots */
.featured-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.featured-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--dark);
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.featured-nav-btn:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--white);
}

.featured-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Dots */
.featured-dots {
  display: flex;
  gap: 8px;
}

.featured-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.featured-dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 1024px) {
  .featured-slide {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 600px) {
  .featured-slide {
    flex: 0 0 85%;
  }
}

/* =====================================================================
   UTILITIES
   ===================================================================== */

.text-gold {
  color: var(--gold);
}
.bg-dark {
  background-color: var(--dark);
}
.bg-dark-2 {
  background-color: var(--dark-2);
}
.bg-light {
  background-color: var(--gray-50);
}
.rounded-xl {
  border-radius: var(--r-xl);
}

/* Karta – cień + ramka (dodaj do dowolnego Spectra Container) */
.card-box {
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--gray-200) !important;
}

.card-box a {
  width: 100%;
}

.card-box:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--gold-border) !important;
}

/* =====================================================================
   KONTAKT – karty aside
   Klasy: contact-quick-card / contact-hours-card / contact-area-card
   Dodaj do Custom HTML lub Spectra Container.
   ===================================================================== */

/* Złoty pasek na górze pierwszej karty */
.contact-quick-card {
  border-top: 3px solid var(--gold) !important;
}

/* Tabela godzin – Gutenberg wp-block-table */
.contact-hours-card .wp-block-table {
  margin: 0;
  overflow: visible !important;
}

.contact-hours-card .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: none !important;
  table-layout: fixed;
}

.contact-hours-card .wp-block-table td {
  padding: 10px 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  border: none !important;
  background: none !important;
  outline: none !important;
}

.contact-hours-card .wp-block-table tr {
  border: none !important;
  border-bottom: 1px solid var(--gray-100) !important;
}

.contact-hours-card .wp-block-table tr:last-child {
  border-bottom: none !important;
}

.contact-hours-card .wp-block-table td:first-child {
  color: var(--text);
  font-weight: 500;
}

.contact-hours-card .wp-block-table td:last-child {
  text-align: right;
  color: var(--gold);
  font-weight: 700;
  white-space: normal;
  word-break: break-word;
}

/* Lista obszarów – Spectra Icon + Heading w row containers */
.contact-hours-card + .wp-block-uagb-container,
.card-box .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
  display: flex;
  align-items: center;
}

/* Ikona SVG w kartach kontakt */
.contact-hours-card .uagb-svg-wrapper svg,
.card-box .uagb-icon-wrapper svg {
  fill: var(--gold);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1024px) {
  :root {
    --section-py: 60px;
  }

  .section-label.center,
  .section-tag.center {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 50px; /* NIE 48px */
    --section-py-sm: 40px;
    --header-h: 64px; /* NIE 68px */
  }

  .section-header {
    margin-bottom: 36px; /* NIE 56px */
  }
}

/* =====================================================================
   HERO BADGE
   Klasa .hero-badge – dodaj do bloku Paragraph lub Custom HTML.
   ===================================================================== */
.hero-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
}

.hero-badge {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px; /* NIE 7px 18px */
  border-radius: var(--r-full);
  background: rgba(200, 169, 74, 0.13); /* amber, NIE --gold-pale */
  border: 1px solid rgba(200, 169, 74, 0.32);
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 2.5px; /* NIE 0.1em */
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* =====================================================================
   HERO – SEKCJA GŁÓWNA
   Tylko style niemożliwe w panelu Spectra Free: clamp() i letter-spacing.
   Kolory, padding, marginesy, gap, flex direction → ustaw w panelu bloku.
   ===================================================================== */

.hero-title .uagb-heading-text {
  font-size: clamp(
    36px,
    6.5vw,
    72px
  ) !important; /* max 72px, NIE 60px jak globalne h1 */
  line-height: 1.08 !important;
  letter-spacing: -1.5px; /* Spectra Free nie ma letter-spacing */
}

/* Tylko clamp – panel Spectra Free nie obsługuje płynnych rozmiarów */
.hero-stat-num .wp-block-uagb-counter__number {
  font-size: clamp(26px, 4vw, 42px) !important; /* max 42px, NIE 48px */
}

/* =====================================================================
   SPECTRA (UAG) – NADPISANIA BLOCKÓW
   Wyrównanie wyjścia HTML Spectra z projektem demo.
   ===================================================================== */

/* Advanced Button – uppercase + letter-spacing jak .btn */
.wp-block-uagb-buttons-child a.wp-block-uagb-buttons-child__link {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* Post Grid – karty maszyn z hover */
.wp-block-uagb-post-grid .uagb-post__inner-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--t-base),
    transform var(--t-base);
}

.wp-block-uagb-post-grid .uagb-post__inner-wrap:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.wp-block-uagb-post-grid .uagb-post__image img {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* USP bar – separator między ikonami
   • "usp-bar" → klasa na kontenerze zewnętrznym (już dodana)
   • > * celuje we wszystkie bezpośrednie dzieci wrappera,
     niezależnie od tego czy są info-box czy container */
.usp-bar .uagb-container-inner-blocks-wrap > *:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Responsive – gdy Spectra przestawia na kolumnę */
@media (max-width: 767px) {
  .usp-bar .uagb-container-inner-blocks-wrap > *:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 16px;
  }
}

/* =====================================================================
   MASZYNA – STRONA PRODUKTU (CPT: machine)
   Template: blocksy-child/single-machine.php
   ===================================================================== */

.machine-banner {
  background: var(--dark);
  padding: 60px var(--px);
  text-align: center;
}

.machine-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.machine-banner__breadcrumb {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: 12px;
}

.machine-banner__breadcrumb a {
  color: var(--gray-500);
  text-decoration: none;
}

.machine-banner__breadcrumb a:hover {
  color: var(--gold);
}

.machine-banner__breadcrumb > span {
  margin: 0 5px;
}

.machine-banner__title {
  color: var(--white);
  margin: 8px 0 16px;
}

.machine-banner__badge {
  margin-top: 4px;
}

/* Treść 2-kolumnowa */
.machine-content {
  background: var(--gray-50);
  padding: var(--section-py) var(--px);
}

.machine-content__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 860px) {
  .machine-content__inner {
    grid-template-columns: 1fr;
  }
}

.machine-thumb img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: block;
  background: var(--gray-50);
}

/* Lightbox trigger */
.machine-thumb__lightbox-trigger {
  position: relative;
  display: block;
  cursor: zoom-in;
}

.machine-thumb__zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.machine-thumb__lightbox-trigger:hover .machine-thumb__zoom {
  opacity: 1;
}

/* Lightbox overlay */
.machine-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.machine-lightbox.is-open {
  display: flex;
}

.machine-lightbox__img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  cursor: default;
  animation: lightbox-in 0.25s ease;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.93);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.machine-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.machine-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.machine-thumb--empty {
  aspect-ratio: 4 / 3;
  background: var(--gray-100);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  font-size: 48px;
}

.machine-content__title {
  font-size: clamp(22px, 3vw, 34px);
  color: var(--dark);
  margin: 12px 0 8px;
}

.machine-content__excerpt {
  color: var(--text-muted);
}

/* Tabela cenowa */
.machine-price {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 24px 0;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
}

.machine-price__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 14px;
  font-weight: 700;
}

.machine-price__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--gray-100);
}

.machine-price__row:last-child {
  border-bottom: none;
}

.machine-price__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}

.machine-price__label i {
  color: var(--gold);
  width: 15px;
  text-align: center;
}

.machine-price__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
}

.machine-price__row--deposit .machine-price__value {
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* CTA przyciski */
.machine-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 20px;
}

/* Meta info pod CTA */
.machine-meta {
  border-top: 1px solid var(--gray-100);
  padding-top: 16px;
}

.machine-meta p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.machine-meta i {
  color: var(--gold);
  width: 14px;
  flex-shrink: 0;
}

/* Opis */
.machine-description {
  background: var(--white);
  padding: var(--section-py) var(--px);
}

.machine-description__inner,
.machine-specs__inner,
.machine-cta-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.machine-description__content {
  max-width: 780px;
  line-height: 1.8;
}

/* Dane techniczne */
.machine-specs {
  background: var(--gray-50);
  padding: var(--section-py) var(--px);
}

.machine-specs__heading {
  margin-bottom: 24px;
}

.machine-specs__content {
  max-width: 740px;
}

.machine-specs__content p {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}

/* CTA bar dolny */
.machine-cta-bar {
  background: linear-gradient(135deg, rgb(26, 26, 26) 0%, rgb(46, 46, 46) 100%);
  padding: 72px var(--px);
}

.machine-cta-bar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: var(--max-w);
  margin: 0 auto;
}

.machine-cta-bar__text .section-label p {
  margin: 0;
  color: var(--gold);
}

.machine-cta-bar__h2 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  margin: 12px 0 14px;
  line-height: 1.2;
}

.machine-cta-bar__desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}

.machine-cta-bar__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .machine-cta-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
   CTA BANNER
   Klasa "cta-banner" na zewnętrznym Container → Advanced → CSS Class.
   Wewnątrz: 2 Containery (cta-banner-text / cta-banner-actions) w row.
   Ozdobny gradient jest pseudo-elementem – nie wymaga dodatkowych bloków.
   ===================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
}

/* Ozdobny rozmyty krąg w prawym górnym rogu */
.cta-banner::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -8%;
  width: 640px;
  height: 640px;
  background: radial-gradient(
    circle,
    rgba(200, 169, 74, 0.09) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Wrapper wymuszający z-index ponad ::before */
.cta-banner > .uagb-container-inner-blocks-wrap {
  position: relative;
  z-index: 1;
}

.cta-banner-desc {
  max-width: 520px;
}

/* Na szerokościach 1100px i mniejszych: sekcja tekstowa + przyciski
   przechodzą do nowej linii (column), przyciski wyrównane do lewej. */
@media (max-width: 1100px) {
  .cta-banner > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
  }

  .cta-banner .wp-block-uagb-advanced-heading {
    justify-content: center !important;
    text-align: center;
  }

  .cta-banner-desc {
    max-width: 100%;
  }
}

/* =====================================================================
   ANIMACJE SCROLL – FADE IN
   Użycie w edytorze Spectra: Advanced → Additional CSS Class(es)

   Klasy wejścia:
     fade-in          → fade + slide up (domyślny)
     fade-in-left     → fade + slide z lewej
     fade-in-right    → fade + slide z prawej
     fade-in-scale    → fade + lekkie powiększenie

   Klasy opóźnienia (stagger):
     fd1 → 0.1s   fd2 → 0.2s   fd3 → 0.3s
     fd4 → 0.4s   fd5 → 0.5s   fd6 → 0.6s

   JS (animations.js) dodaje klasę .visible przez Intersection Observer.
   ===================================================================== */

.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-scale {
  opacity: 0;
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.fade-in {
  transform: translateY(28px);
}
.fade-in-left {
  transform: translateX(-32px);
}
.fade-in-right {
  transform: translateX(32px);
}
.fade-in-scale {
  transform: scale(0.94);
}

.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.fade-in-scale.visible {
  opacity: 1;
  transform: none;
}

/* Delay – stagger dzieci w rzędzie */
.fd1 {
  transition-delay: 0.1s;
}
.fd2 {
  transition-delay: 0.2s;
}
.fd3 {
  transition-delay: 0.3s;
}
.fd4 {
  transition-delay: 0.4s;
}
.fd5 {
  transition-delay: 0.5s;
}
.fd6 {
  transition-delay: 0.6s;
}

/* Na hover resetuj delay — stagger działa tylko przy wejściu, nie na hover */
.fd1:hover,
.fd2:hover,
.fd3:hover,
.fd4:hover,
.fd5:hover,
.fd6:hover {
  transition-delay: 0s;
}

/* Wyłącz animacje dla użytkowników z prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   STRONA 404
   WordPress: plik blocksy-child/404.php
   ===================================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 120px;
  min-height: 64vh;
}

.error-page__code {
  font-size: clamp(96px, 18vw, 200px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px var(--gold);
  letter-spacing: -4px;
  margin-bottom: 16px;
  user-select: none;
}

.error-page__title {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 16px;
}

.error-page__desc {
  color: var(--text-muted);
  font-size: var(--text-lg);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.72;
}

.error-page__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =====================================================================
   INNER BANNER – baner wewnętrzny podstron
   Klasy dodawane na bloki Spectra Advanced Heading wewnątrz sekcji.
   Spectra daje klasę na wrapper <div>, więc selektory celują w
   .klasa .uagb-heading-text, a nie bezpośrednio na .klasa.
   ===================================================================== */

/* H1 – główny tytuł banera */
.inner-banner::after {
  height: 56px;
  clip-path: ellipse(55% 100% at 50% 100%);
}

.inner-banner-title .uagb-heading-text {
  font-size: clamp(28px, 4vw, 50px) !important;
}

/* Opis pod tytułem */
.inner-banner-desc .uagb-heading-text {
  max-width: 560px;
}

/* =====================================================================
   FEATURE BOX – Spectra Info Box (klasa: feature-box)
   Struktura: .feature-box > .uagb-ifb-content > .uagb-ifb-icon-wrap svg
                                                > .uagb-ifb-title-wrap > .uagb-ifb-title
                                                > .uagb-ifb-desc
   ===================================================================== */

.feature-box {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.feature-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-border);
}

/* Kontener ikony */
.feature-box .uagb-ifb-icon-wrap {
  width: 74px;
  height: 74px;
  border-radius: var(--r-lg);
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: var(--t-base);
  /* reset Spectra default padding */
  padding: 0;
}

/* SVG ikona */
.feature-box .uagb-ifb-icon-wrap svg {
  fill: var(--gold);
  transition: var(--t-base);
}

/* Hover – tło ikony */
.feature-box:hover .uagb-ifb-icon-wrap {
  background: var(--gold);
  border-color: var(--gold);
}

/* Hover – kolor SVG na biały */
.feature-box:hover .uagb-ifb-icon-wrap svg {
  fill: var(--white);
}

.contact-info-box {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

.contact-info-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-border);
}

.contact-info-box a {
  color: var(--dark);
}

.contact-info-box a:hover {
  color: var(--gold);
}

.contact-info-box .uagb-ifb-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: var(--r-lg);
  background: var(--gold-pale);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: var(--t-base);
  /* reset Spectra default padding */
  padding: 0;
}

/* =====================================================================
   TESTIMONIAL CARD – karta opinii klienta
   Użycie w edytorze Spectra: Advanced → Additional CSS Class(es):
     Zewnętrzny Container (karta):  testimonial-card
     Tekst cytatu (Heading → <p>):  testimonial-quote
     Rząd autora (Container row):   testimonial-author
     Awatar (Heading z literą):     testimonial-avatar
     Info autora (Container col):   (brak – style przez dziedziczenie)
     Imię i nazwisko (Heading):     testimonial-author__name
     Rola / lokalizacja (Heading):  testimonial-author__role
   ===================================================================== */

/* Karta */
.testimonial-card {
  box-shadow: var(--shadow-md) !important;
  transition:
    box-shadow var(--t-base),
    transform var(--t-base);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 130px;
  color: var(--gold-pale);
  font-family: serif;
  line-height: 1;
  z-index: 0;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--gold-border);
}

/* Awatar – okrągły inicjał */
.testimonial-avatar .uagb-heading-text {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--gold-pale);
  border: 2px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 !important;
}

.testimonial-author-container {
  flex: 1;
}
.about-list-item {
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  gap: 14px;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    transform var(--t-base);
}

.about-list-item:hover {
  background: var(--gold-pale) !important;
  border-left-color: var(--gold-dark);
  transform: translateX(4px);
}

.about-list-item .uagb-ifb-icon-wrap svg {
  transition: fill var(--t-base);
}

.about-list-item:hover .uagb-ifb-icon-wrap svg {
  fill: var(--gold-dark);
}
.about-image {
  overflow: hidden;
  border-radius: 22px;
}

.about-image img {
  border-radius: 22px;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition:
    transform var(--t-slow),
    box-shadow var(--t-slow);
  box-shadow: var(--shadow-md);
}

.about-image:hover img {
  transform: scale(1.04);
  box-shadow: var(--shadow-xl);
}

/* Google Maps embed */
.uagb-google-map__wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.uagb-google-map__iframe {
  width: 100% !important;
  height: 480px !important;
  display: block;
}

.about-image-badge {
  width: auto !;
  position: absolute !important;
  bottom: 28px !important;
  left: -22px !important; /* "wystaje" poza krawędź zdjęcia */
  background: #e85d04 !important;
  color: #ffffff !important;
  padding: 16px 22px !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 44px rgba(232, 93, 4, 0.25) !important;
}

/* =====================================================================
   SEKCJA PROCESU – "Prosty wynajem w 3 krokach"

   Struktura bloków (bez Custom HTML):
     Spectra Container [process-steps-row fade-in]  ← row, 3 kolumny
       Spectra Container [process-step]  ×3          ← każdy krok
         Kadence/Spectra Heading [process-step__num] ← liczba "1"/"2"/"3"
         Spectra Info Box [process-step__box]        ← ikona + tytuł + opis
     Spectra Container [process-terms fade-in]       ← warunki
       Spectra Info Box [process-term]  ×6           ← ikona po lewej
   ===================================================================== */

/* ── Siatka 3 kroków ─────────────────────────────────────────────────
   Klasa process-steps-row na zewnętrznym Spectra Container.
   Nadpisujemy inner-blocks-wrap (to ten element jest flex-rowem w Spectra) */
.process-steps-row > .uagb-container-inner-blocks-wrap {
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

/* Każda kolumna kroku – wewnętrzny Spectra Container z klasą process-step */
.process-step {
  flex: 1 !important;
  min-width: 0;
  text-align: center !important;
  position: relative;
}

.process-step > .uagb-container-inner-blocks-wrap {
  align-items: center !important;
  padding: 0 16px !important;
}

/* Mała linia łącząca kroki */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -30px;
  width: 60px;
  height: 2px;
  background: var(--gold);
  opacity: 0.4;
  z-index: 1;
}

/* ── Kółko z numerem ─────────────────────────────────────────────────
   Kadence Advanced Heading (lub Spectra Heading) z klasą process-step__num.
   Wrapper bloku jest flex-em, wewnętrzny tag (p/h3/h4) staje się kółkiem. */
.process-step__num {
  display: flex;
  justify-content: center;
}

/* Kadence Advanced Heading */
.process-step__num .kt-adv-heading,
/* Spectra Heading */
.process-step__num .uagb-heading-text {
  width: 72px !important;
  height: 72px !important;
  background: var(--gold) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--white) !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition:
    background var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base) !important;
}

.process-step:hover .process-step__num .kt-adv-heading,
.process-step:hover .process-step__num .uagb-heading-text {
  background: var(--gold-dark) !important;
  box-shadow: var(--shadow-gold) !important;
  transform: scale(1.1);
}

.process-step__box .uagb-ifb-icon-wrap svg {
  fill: var(--gold) !important;
  width: 28px !important;
  height: 28px !important;
}

/* Hover na process-term (Info Box w pasku warunków) */
.process-term {
  transition: var(--t-base);
}

.process-term:hover {
  transform: translateY(-3px);
}

.process-term .uagb-ifb-icon-wrap svg {
  transition: fill var(--t-base) !important;
}

.process-term:hover .uagb-ifb-icon-wrap svg {
  fill: var(--gold-hover) !important;
}

/* ── Pasek warunków wynajmu ──────────────────────────────────────────
   Klasa process-terms na Spectra Container.
   Grid 3 kolumny nakładamy na inner-blocks-wrap. */
.process-terms {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── Responsive procesu ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Przełącz na kolumnę */
  .process-steps-row > .uagb-container-inner-blocks-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .process-step {
    width: 100% !important;
  }

  /* Odstęp między krokami – margin-bottom, linia wchodzi w obszar marginesu */
  .process-step:not(:last-child) {
    margin-bottom: 48px !important;
  }

  /* Poziomy separator – środek 48px marginesu = -24px od dołu elementu */
  .process-step:not(:last-child)::after {
    top: auto;
    bottom: -24px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
  }
}

@media (max-width: 768px) {
  .process-terms > .uagb-container-inner-blocks-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }
}

@media (max-width: 480px) {
  .process-terms > .uagb-container-inner-blocks-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   GALERIA – FILTRY, SIATKA, LIGHTBOX
   Custom HTML block na stronie Galeria.
   JS: blocksy-child/gallery.js
   ===================================================================== */

/* Filtry */
.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}

.gallery-filter-btn {
  padding: 8px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-base);
}

.gallery-filter-btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.gallery-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* Siatka – 3 kolumny masonry-like */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gallery-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
}

.gallery-item.wide {
  grid-column: span 2;
}
.gallery-item.tall {
  grid-row: span 2;
}

/* Ukrywanie podczas filtrowania */
.gallery-item.hidden {
  display: none;
}

/* Reset wide/tall gdy aktywny filtr – brak dziur w siatce */
.gallery-grid.is-filtered .gallery-item.wide {
  grid-column: span 1;
}
.gallery-grid.is-filtered .gallery-item.tall {
  grid-row: span 1;
}

/* Obraz */
.gallery-item-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gallery-item.tall .gallery-item-image {
  aspect-ratio: auto;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Overlay */
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--t-base);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-zoom-icon {
  width: 54px;
  height: 54px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-xl);
  transform: scale(0.65);
  transition: transform var(--t-base);
}

.gallery-item:hover .gallery-zoom-icon {
  transform: scale(1);
}

/* Komunikat "brak zdjęć" */
#galleryEmpty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
}

.lightbox-img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
}

.lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.7;
  background: none;
  border: none;
  transition: var(--t-base);
  padding: 6px;
  line-height: 1;
}

.lightbox-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  color: var(--dark);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.82;
  transition: var(--t-base);
  font-size: 16px;
}

.lightbox-nav:hover {
  opacity: 1;
}
.lightbox-prev {
  left: -64px;
}
.lightbox-next {
  right: -64px;
}

/* Responsive galeria */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Na mobile zawsze 1 kolumna dla wide/tall */
  .gallery-item.wide,
  .gallery-grid.is-filtered .gallery-item.wide {
    grid-column: span 2;
  }
  .gallery-item.tall,
  .gallery-grid.is-filtered .gallery-item.tall {
    grid-row: span 1;
  }

  .lightbox-prev {
    left: -52px;
  }
  .lightbox-next {
    right: -52px;
  }
}

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

  .gallery-item.wide {
    grid-column: span 1;
  }

  .lightbox-prev,
  .lightbox-next {
    display: none;
  }
}
.privacy-content {
  max-width: 820px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* H2 – każda sekcja z linią oddzielającą */
.privacy-content h2,
.privacy-content .wp-block-heading:is(h2) {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 48px 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--gray-100) !important;
  line-height: 1.3 !important;
}

/* Pierwsze H2 – bez górnego marginesu */
.privacy-content h2:first-of-type,
.privacy-content .wp-block-heading:is(h2):first-of-type {
  margin-top: 0 !important;
}

/* H3 – podsekcje (np. typy cookies) */
.privacy-content h3,
.privacy-content .wp-block-heading:is(h3) {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 28px 0 8px !important;
  border-bottom: none !important;
}

/* Paragraf */
.privacy-content p {
  margin-bottom: 14px !important;
  line-height: 1.78 !important;
  color: var(--text) !important;
}

/* Lista – Gutenberg dodaje klasę wp-block-list */
.privacy-content ul,
.privacy-content ol,
.privacy-content .wp-block-list {
  padding-left: 24px !important;
  margin-bottom: 16px !important;
  list-style: disc !important;
}

.privacy-content ol,
.privacy-content .wp-block-list:is(ol) {
  list-style: decimal !important;
}

.privacy-content li {
  line-height: 1.72 !important;
  color: var(--text-muted) !important;
  margin-bottom: 6px !important;
}

/* Linki */
.privacy-content a {
  color: var(--gold) !important;
  text-decoration: underline !important;
}

.privacy-content a:hover {
  color: var(--gold-dark) !important;
}

/* Data aktualizacji */
.privacy-date {
  display: inline-block;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 8px 18px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 40px;
}

/* =====================================================================
   TAXONOMY-MACHINE_CAT — strona archiwum kategorii sprzętu
   URL: /kategoria-sprzetu/{slug}/
   Template: taxonomy-machine_cat.php
   ===================================================================== */

/* Kontener wewnętrzny – odpowiednik .container w demo */
.inner-banner-container {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── BANER ─────────────────────────────────────────────────────── */
.machine-taxonomy .inner-banner {
  position: relative;
  padding: 120px 0 76px;
  background-image: url("https://renttool.kingsittest.eu/wp-content/uploads/2026/05/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--dark);
  overflow: hidden;
}

/* Gdy jest zdjęcie z ACF – inline style nadpisuje, overlay zostaje */
.machine-taxonomy .inner-banner--has-image {
  background-color: var(--dark) !important;
}

.machine-taxonomy .inner-banner-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgba(22, 22, 22, 0.95) 0%,
    rgba(36, 36, 36, 0.9) 100%
  );
  z-index: 0;
}

/* Wave dolny */
.machine-taxonomy .inner-banner::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--gray-50);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 1;
}

.machine-taxonomy .inner-banner-content {
  position: relative;
  z-index: 2;
}

.machine-taxonomy .inner-banner-label {
  display: inline-block;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.machine-taxonomy .inner-banner-title {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 40px;
}

.machine-taxonomy .inner-banner-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-lg);
  max-width: 560px;
}

/* ── BREADCRUMBS ────────────────────────────────────────────────── */
.machine-taxonomy .breadcrumbs {
  padding: 13px 0;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.machine-taxonomy .breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.machine-taxonomy .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.machine-taxonomy .breadcrumb-item a {
  color: var(--text-muted);
  transition: var(--t-base);
  text-decoration: none;
}

.machine-taxonomy .breadcrumb-item a:hover {
  color: var(--gold);
}

.machine-taxonomy .breadcrumb-item.active {
  color: var(--gold-dark);
  font-weight: 600;
}

.machine-taxonomy .breadcrumb-sep {
  color: var(--gray-300);
  font-size: 10px;
}

/* ── SEKCJA TŁO ─────────────────────────────────────────────────── */
.machine-taxonomy .section--gray {
  background-color: var(--gray-50);
  padding: 56px 0 80px;
}

/* ── LISTING LAYOUT ─────────────────────────────────────────────── */
.listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.listing-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 12px;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.sidebar-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--t-base);
}

.sidebar-back-link:hover {
  color: var(--gold);
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  border-radius: var(--r-md);
  transition: var(--t-base);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(232, 93, 4, 0.08);
  color: var(--gold);
}

.filter-btn.active {
  font-weight: 600;
}

.filter-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--gray-100);
  padding: 2px 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.filter-btn.active .filter-count {
  background: rgba(232, 93, 4, 0.18);
  color: var(--gold);
}

.listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.listing-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.listing-count strong {
  color: var(--dark);
}

/* ── PRODUCT CARD ───────────────────────────────────────────────── */
.product-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition:
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold-lg);
  border-color: var(--gold-border);
}

.product-card-image {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--gray-100);
  border-radius: var(--r-lg) var(--r-lg) 0 0; /* dopasuj do karty, eliminuje lukę */
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.product-card:hover .product-card-image img {
  transform: scale(1.06);
}

/* Placeholder gdy brak zdjęcia */
.product-card-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: var(--gold);
  opacity: 0.35;
}

.product-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
}

.product-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dark);
}

.product-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-base);
}

.product-card-title a:hover {
  color: var(--gold);
}

.product-card-params {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.product-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  margin-top: auto;
}

.product-card-footer .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ── CENA ────────────────────────────────────────────────────────── */
.product-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-price-label {
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-price-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--gold-dark);
  line-height: 1;
}

.product-price-unit {
  font-size: 11px;
  color: var(--gray-500);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .listing-layout {
    grid-template-columns: 240px 1fr;
    gap: 28px;
  }
}

@media (max-width: 860px) {
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-sidebar {
    position: static;
  }
}

@media (max-width: 680px) {
  .machine-taxonomy .inner-banner {
    padding: 80px 0 60px;
  }

  .machine-taxonomy .inner-banner-title {
    font-size: clamp(24px, 6vw, 36px);
  }
}

/* =====================================================================
   SCROLL TO TOP
   Przycisk pojawia się po przewinięciu >300px. JS w functions.php.
   ===================================================================== */

.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  z-index: 9990;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background 0.2s ease;
}

.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-to-top:hover {
  background: var(--gold-dark);
  box-shadow: var(--shadow-gold-lg);
}