/*
Theme Name:  Gryfny Gybis
Theme URI:   https://biegunstudio.pl
Author:      Biegun Studio
Author URI:  https://biegunstudio.pl
Description: Autorski motyw WordPress dla Gabinetu Protetycznego „Gryfny Gybis" w Katowicach. Nowoczesny design medyczny zorientowany na pacjenta — dostępność WCAG, budowanie zaufania i pełna transparentność oferty.
Version:     1.0.0
Requires at least: 6.2
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       gryfnygybis
Tags: medical, dental, accessibility, custom-logo, custom-menu, featured-images, responsive-layout
*/

/* =========================================================
   1. CSS CUSTOM PROPERTIES
   Paleta kolorów: głęboka czerwień + aktywna czerwień + ciepłe akcenty
   Wszystkie kombinacje tekst/tło weryfikowane pod WCAG AA
   ========================================================= */

:root {
    /* Kolory główne */
    --gg-dark:           #5C0E04;   /* głęboka czerwień — hero, stopka, nagłówki stron  */
    --gg-dark-mid:       #7A1509;   /* średnia czerwień — gradienty                      */
    --gg-primary:        #D12511;   /* główna czerwień marki — CTA, linki (6.8:1 ✓)     */
    --gg-primary-hover:  #A81D0D;   /* czerwień hover                                    */
    --gg-accent:         #A81D0D;   /* czerwień akcentowa — ikony, bordery               */
    --gg-accent-light:   #FAE5E2;   /* bardzo jasna czerwień — tło ikon                  */
    --gg-pale:           #FDF0EE;   /* jasna kremowa — tło sekcji                        */

    /* Tekst */
    --gg-text:           #1C0A08;   /* główny tekst (ciemna czerwień-czerń)              */
    --gg-text-muted:     #5C4140;   /* tekst drugorzędny (7.8:1 na białym ✓)            */
    --gg-text-light:     #FFFFFF;   /* tekst na ciemnym tle                              */
    --gg-text-pale:      #F5C0B8;   /* subtelny tekst na ciemnym czerwonym tle           */

    /* Tła i obramowania */
    --gg-white:       #FFFFFF;
    --gg-bg-section:  #FDF8F7;   /* alternatywne tło sekcji                            */
    --gg-border:      #E8C4BF;
    --gg-border-light:#F5E5E2;
    --gg-white-half:  #ffffff80;


    /* Cień */
    --gg-shadow-sm:   0 2px 8px rgba(92,14,4,.08);
    --gg-shadow-md:   0 4px 24px rgba(92,14,4,.12);
    --gg-shadow-lg:   0 8px 48px rgba(92,14,4,.16);

    /* Typografia */
    --gg-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --gg-font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Skala typograficzna (fluid) */
    --gg-text-sm:   0.875rem;   /* 14px */
    --gg-text-base: 1rem;       /* 16px — minimum WCAG */
    --gg-text-md:   1.125rem;   /* 18px */
    --gg-text-lg:   1.25rem;    /* 20px */
    --gg-text-xl:   1.5rem;     /* 24px */
    --gg-text-2xl:  2rem;       /* 32px */
    --gg-text-3xl:  2.5rem;     /* 40px */
    --gg-text-4xl:  3.25rem;    /* 52px */

    /* Odstępy (skala 8px) */
    --gg-sp-1:  0.5rem;    /* 8px  */
    --gg-sp-2:  1rem;      /* 16px */
    --gg-sp-3:  1.5rem;    /* 24px */
    --gg-sp-4:  2rem;      /* 32px */
    --gg-sp-5:  2.5rem;    /* 40px */
    --gg-sp-6:  3rem;      /* 48px */
    --gg-sp-8:  4rem;      /* 64px */
    --gg-sp-10: 5rem;      /* 80px */
    --gg-sp-12: 6rem;      /* 96px */

    /* Wysokość headera — używana do kompensacji position:fixed */
    --gg-header-height: 116px;
    --gg-header-top-height: 116px;

    /* Promienie */
    --gg-radius-sm: 6px;
    --gg-radius-md: 12px;
    --gg-radius-lg: 20px;
    --gg-radius-xl: 32px;

    /* Transitions */
    --gg-ease: cubic-bezier(.4,0,.2,1);
    --gg-duration: 200ms;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--gg-font-body);
    font-size: var(--gg-text-base);
    line-height: 1.75;
    color: var(--gg-text);
    background-color: var(--gg-white);
    -webkit-font-smoothing: antialiased;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* SVG reset — ikony inline nigdy nie powinny dziedziczyć height:auto */
svg {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    flex-shrink: 0;
}

/* Domyślny rozmiar ikon w całej stronie */
.site-header svg,
.site-footer svg,
.site-main svg,
.page-hero svg {
    width: 20px;
    height: 20px;
}

/* =========================================================
   3. TYPOGRAFIA
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gg-font-display);
    margin: 0 0 0.6em;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gg-text);
}

h1 { font-size: var(--gg-text-3xl); }
h2 { font-size: var(--gg-text-2xl); }
h3 { font-size: var(--gg-text-xl); }
h4 { font-size: var(--gg-text-lg); }
h5, h6 { font-size: var(--gg-text-base); }

p {
    margin: 0 0 1.25em;
    max-width: 70ch;
}

a {
    color: var(--gg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--gg-duration) var(--gg-ease);
}

a:hover,
a:focus {
    color: var(--gg-primary-hover);
}

strong { font-weight: 600; }

/* =========================================================
   4. LAYOUT UTILITIES
   ========================================================= */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


.site-content {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gg-sp-3);
}

.container--narrow {
    max-width: 780px;
}

.section {
    padding: var(--gg-sp-10) 0;
}

.section--tight {
    padding: var(--gg-sp-8) 0;
}

.section-label {
    display: inline-block;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gg-accent);
    margin-bottom: var(--gg-sp-2);
}

.section-title {
    font-size: var(--gg-text-2xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-2);
}

.section-lead {
    font-size: var(--gg-text-md);
    color: var(--gg-text-muted);
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: 0;
}

/* Odstęp między kolejnymi akapitami wprowadzenia */
.section-lead + .section-lead {
    margin-top: var(--gg-sp-3);
}

.section-header {
    margin-bottom: var(--gg-sp-8);
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-lead {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   5. DOSTĘPNOŚĆ — ACCESSIBILITY
   ========================================================= */

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Skip link — widoczny po Tab */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--gg-sp-2);
    background: var(--gg-primary);
    color: var(--gg-white) !important;
    padding: var(--gg-sp-1) var(--gg-sp-2);
    font-weight: 600;
    font-size: var(--gg-text-sm);
    text-decoration: none;
    border-radius: 0 0 var(--gg-radius-sm) var(--gg-radius-sm);
    z-index: 9999;
    transition: top var(--gg-duration) var(--gg-ease);
}

.skip-link:focus {
    top: 0;
}

/* Focus outline — widoczny dla nawigacji klawiaturą */
:focus-visible {
    outline: 3px solid var(--gg-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* =========================================================
   6. PRZYCISKI — BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-sp-1);
    padding: 0.8125em 1.75em;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--gg-radius-sm);
    cursor: pointer;
    transition: background var(--gg-duration) var(--gg-ease),
                border-color var(--gg-duration) var(--gg-ease),
                color var(--gg-duration) var(--gg-ease),
                transform var(--gg-duration) var(--gg-ease);
    min-height: 48px; /* WCAG touch target */
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 3px solid var(--gg-primary);
    outline-offset: 3px;
}

.btn--primary {
    background: var(--gg-primary);
    border-color: var(--gg-primary);
    color: var(--gg-white);
}

.btn--primary:hover,
.btn--primary:focus {
    background: var(--gg-primary-hover);
    border-color: var(--gg-primary-hover);
    color: var(--gg-white);
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    border-color: var(--gg-primary);
    color: var(--gg-primary);
}

.btn--outline:hover,
.btn--outline:focus {
    background: var(--gg-primary);
    border-color: var(--gg-primary);
    color: var(--gg-white);
    transform: translateY(-1px);
}

.btn--ghost-white {
    background: transparent;
    border-color: rgba(255,255,255,.6);
    color: var(--gg-white);
}

.btn--ghost-white:hover,
.btn--ghost-white:focus {
    background: rgba(255,255,255,.12);
    border-color: var(--gg-white);
    color: var(--gg-white);
    transform: translateY(-1px);
}

.btn--phone {
    background: var(--gg-accent);
    border-color: var(--gg-accent);
    color: var(--gg-white);
    font-size: var(--gg-text-lg);
    letter-spacing: .01em;
}

.btn--phone:hover,
.btn--phone:focus {
    background: var(--gg-primary-hover);
    border-color: var(--gg-primary-hover);
    color: var(--gg-white);
    transform: translateY(-1px);
}

.btn--phone-sm {
    background: var(--gg-pale);
    border-color: var(--gg-accent);
    color: var(--gg-accent);
    padding: 0.6em 1.2em;
    font-size: var(--gg-text-sm);
    min-height: 44px;
}

.btn--phone-sm:hover,
.btn--phone-sm:focus {
    background: var(--gg-accent-light);
    border-color: var(--gg-accent);
    color: var(--gg-accent);
}

.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   7. HEADER — NAGŁÓWEK STRONY
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: var(--gg-white);
    border-bottom: 1px solid var(--gg-primary);
    box-shadow: none;
    transition: box-shadow var(--gg-duration) var(--gg-ease);
}

.site-header.is-scrolled {
    box-shadow: var(--gg-shadow-sm);
}

/* Header — 2-kolumnowy układ: logo po lewej, reszta po prawej */
.site-header__inner {
    display: flex;
    align-items: stretch;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gg-sp-3);
}

/* Logo / Branding — lewa kolumna, pełna wysokość headera */
.site-branding {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: var(--gg-sp-2) var(--gg-sp-4) var(--gg-sp-2) 0;
}

.site-branding a {
    display: flex;
    align-items: center;
    gap: var(--gg-sp-2);
    text-decoration: none;
}

/* Prawa kolumna: telefon na górze + menu na dole */
.site-header__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--gg-border-light);
}

/* Pasek z przyciskiem telefonu */
.site-header__top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--gg-sp-2) var(--gg-sp-3);
    flex: 1;
}

.site-branding .custom-logo {
    height: 100px;
    width: auto;
    display: block;
}

.site-branding .site-title {
    font-family: var(--gg-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gg-dark);
    margin: 0;
    line-height: 1.2;
}

.site-branding .site-tagline {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    display: block;
    font-weight: 400;
}

/* Nawigacja główna — desktop: poziomy pasek zakładek pod telefonem */
.main-navigation {
    background: var(--gg-white);
    border-top: 1px solid var(--gg-border-light);
}

.main-navigation .nav-inner {
    display: flex;
    padding: 0 var(--gg-sp-3);
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.main-navigation ul li {
    flex: 1;
    display: flex;
}

.main-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.4em 0.5em;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-text);
    text-decoration: none;
    border-radius: var(--gg-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--gg-duration) var(--gg-ease),
                border-color var(--gg-duration) var(--gg-ease),
                color var(--gg-duration) var(--gg-ease);
    white-space: nowrap;
    text-align: center;
}

.main-navigation ul li a:hover {
    color: var(--gg-primary);
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
    background: var(--gg-pale);
    border-color: var(--gg-accent);
    color: var(--gg-primary);
}

/* CTA w headerze */
.header-cta {
    display: flex;
    align-items: center;
    gap: var(--gg-sp-2);
    flex-shrink: 0;
    position: relative;
}

/* ---- Pasek „Raty 0%" w headerze ---- */

.gg-raty-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-right: var(--gg-sp-3);

    /* Punkt odniesienia dla jednostki cqw poniżej — dzięki niemu grupa
       zna szerokość samego paska, a nie toru. */
    container-type: inline-size;

    /* Wygaszenie na krawędziach — napis nie urywa się ostro,
       tylko wtapia w tło headera. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.gg-raty-ticker__track {
    display: flex;
    /* Tor ma szerokość dwóch grup, nie sztywne 200% paska — dzięki temu
       przesunięcie o połowę zawsze odpowiada dokładnie jednej grupie. */
    width: max-content;
    animation: gg-raty-scroll 18s linear infinite;
}

/* Każda grupa wypełnia całą szerokość paska — dwie grupy dają dokładnie
   200% toru, więc przesunięcie o połowę zapętla się bez widocznego szwu
   przy dowolnej szerokości ekranu. */
/* Grupa jest szeroka na tyle, ile trzeba na treść, ale nigdy węższa
   niż sam pasek. Wcześniejsze sztywne 50% dusiło ją na wąskich ekranach:
   elementy mają white-space:nowrap, więc nie mogły się zwęzić i wylewały
   się poza swoje pole, a druga grupa wchodziła na nie. */
.gg-raty-ticker__group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gg-sp-5);
    min-width: 100cqw;
}

.gg-raty-ticker:hover .gg-raty-ticker__track {
    animation-play-state: paused;
}

.gg-raty-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-sp-1);
    white-space: nowrap;
    flex: 0 0 auto;
}

.gg-raty-ticker__text {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 800;
    letter-spacing: .02em;
    color: #5DA132;
}

.gg-raty-ticker__logo {
    display: block;
    width: auto;
    height: 20px;
}

/* Ruch w prawo: tor startuje przesunięty o połowę (czyli o jedną kopię)
   i wraca do zera — dzięki dwóm identycznym kopiom pętla jest niewidoczna. */
@keyframes gg-raty-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gg-raty-ticker__track {
        animation: none;
        transform: none;
    }
}

/* CTA w mobilnym menu — ukryte na desktop */
.nav-mobile-cta {
    display: none;
}

/* Hamburger — tylko mobile */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 2px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    cursor: pointer;
    padding: 0;
    color: var(--gg-text);
    transition: border-color var(--gg-duration) var(--gg-ease),
                background var(--gg-duration) var(--gg-ease);
}

.nav-toggle:hover {
    background: var(--gg-pale);
    border-color: var(--gg-primary);
}

.nav-toggle__icon {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: background var(--gg-duration) var(--gg-ease);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: absolute;
    left: 0;
    transition: transform var(--gg-duration) var(--gg-ease),
                top var(--gg-duration) var(--gg-ease);
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top:  6px; }

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

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

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

/* =========================================================
   8. HERO SECTION
   ========================================================= */

.gg-hero {
    background: var(--gg-white);
    padding: var(--gg-sp-6) 0 var(--gg-sp-10);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Zdjęcie na pełną szerokość sekcji, bez nakładki kolorystycznej. */
.gg-hero__image {
    position: relative;
    width: 100%;
    margin: var(--gg-sp-5) 0 var(--gg-sp-6);
    line-height: 0;
}

.gg-hero__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Biały łuk siedzi na dole zdjęcia, nie na dole całej sekcji —
   pod zdjęciem jest jeszcze opis i kostki płatności. */
.gg-hero__image::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--gg-white);
    clip-path: ellipse(55% 100% at 50% 100%);
    pointer-events: none;
}

/* Subtelny wzór geometryczny w tle */

/* Dekoracyjny łuk na dole hero */

.gg-hero .container {
    position: relative;
    z-index: 1;
}

.gg-hero__inner {
    max-width: 780px;
    margin: 0 auto;
}

.gg-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-sp-1);
    background: rgba(209,37,17,.18);
    border: 1px solid rgba(209,37,17,.4);
    color: #FFB0A6;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35em 1em;
    border-radius: 100px;
    margin-bottom: var(--gg-sp-4);
}

.gg-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #FFB0A6;
    border-radius: 50%;
    flex-shrink: 0;
}

.gg-hero__title {
    font-size: clamp(2rem, 5.2vw, 3.75rem);
    font-weight: 800;
    color: var(--gg-dark);
    line-height: 1.15;
    margin-bottom: var(--gg-sp-3);
    letter-spacing: -.02em;
}

.gg-hero__title span {
    color: var(--gg-primary); /* akcent na słowie kluczowym */
}

.gg-hero__tagline {
    font-size: var(--gg-text-md);
    color: var(--gg-dark);
    line-height: 1.65;
    margin-bottom: var(--gg-sp-6);
    max-width: 58ch;
    margin-left: auto;
    margin-right: auto;
}

.gg-hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-sp-3);
    align-items: center;
}

.gg-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-sp-5);
    margin-top: var(--gg-sp-8);
    padding-top: var(--gg-sp-6);
    border-top: 1px solid rgba(255,255,255,.12);
}

.gg-hero__trust-item {
    display: flex;
    flex-direction: column;
}

.gg-hero__trust-num {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 800;
    color: var(--gg-white);
    line-height: 1;
}

.gg-hero__trust-label {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    margin-top: .25rem;
}

/* =========================================================
   9. SEKCJA: "DLACZEGO MY" — FEATURES
   ========================================================= */

/* Pasek statystyk pod hero */
.gg-trust-bar {
    background: var(--gg-white);
    padding: var(--gg-sp-6) 0;
    border-bottom: 1px solid var(--gg-border-light);
}

.gg-trust-bar .gg-hero__trust {
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.gg-trust-bar .gg-hero__trust-num {
    color: var(--gg-dark);
}

.gg-trust-bar .gg-hero__trust-label {
    color: var(--gg-text-muted);
}

.gg-features {
    background: var(--gg-white);
    padding-top: var(--gg-sp-12);
}

.gg-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gg-sp-4);
}

.gg-feature-card {
    background: var(--gg-bg-section);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-5);
    transition: box-shadow var(--gg-duration) var(--gg-ease),
                transform var(--gg-duration) var(--gg-ease);
}

.gg-feature-card:hover {
    box-shadow: var(--gg-shadow-md);
    transform: translateY(-3px);
}

.gg-feature-card__icon {
    width: 56px;
    height: 56px;
    background: var(--gg-accent-light);
    border-radius: var(--gg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gg-sp-3);
    flex-shrink: 0;
}

.gg-feature-card__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--gg-accent);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-feature-card__title {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-2);
}

.gg-feature-card__text {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: none;
}

/* =========================================================
   10. SEKCJA: OFERTA — SERVICES
   ========================================================= */

.gg-services {
    background: var(--gg-pale);
}

.gg-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gg-sp-4);
}

.gg-service-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-3);
    transition: box-shadow var(--gg-duration) var(--gg-ease),
                transform var(--gg-duration) var(--gg-ease);
}

.gg-service-card:hover {
    box-shadow: var(--gg-shadow-md);
    transform: translateY(-3px);
}

.gg-service-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-3);
}

.gg-service-card__icon {
    width: 52px;
    height: 52px;
    background: var(--gg-pale);
    border-radius: var(--gg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gg-service-card__icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--gg-primary);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-service-card__title {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin: 0;
    line-height: 1.3;
}

.gg-service-card__text {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.7;
    flex: 1;
    margin: 0;
    max-width: none;
}

.gg-service-card__link {
    align-self: flex-start;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .4em 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--gg-duration) var(--gg-ease),
                color var(--gg-duration) var(--gg-ease);
}

.gg-service-card__link:hover,
.gg-service-card__link:focus {
    color: var(--gg-primary-hover);
    border-bottom-color: var(--gg-primary-hover);
}

.gg-service-card__link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--gg-duration) var(--gg-ease);
}

.gg-service-card__link:hover svg {
    transform: translateX(3px);
}

/* Accordion — szczegóły karty */
.gg-service-card__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.gg-service-card__details.is-open {
    max-height: 600px;
}

.gg-service-card__list-label {
    margin: var(--gg-sp-3) 0 var(--gg-sp-2);
    font-size: var(--gg-text-sm);
    color: var(--gg-text);
    line-height: 1.5;
}

.gg-service-card__list {
    list-style: none;
    margin: var(--gg-sp-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-2);
}

.gg-service-card__list li {
    padding-left: 1.25rem;
    position: relative;
    font-size: var(--gg-text-sm);
    color: var(--gg-text);
    line-height: 1.6;
}

.gg-service-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--gg-accent);
    border-radius: 50%;
}

/* Przycisk "Czytaj dalej" */
.gg-service-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    background: none;
    border: none;
    padding: .4em 0;
    margin-top: var(--gg-sp-4);
    cursor: pointer;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-primary);
    border-bottom: 2px solid transparent;
    transition: border-color var(--gg-duration) var(--gg-ease),
                color var(--gg-duration) var(--gg-ease);
}

.gg-service-card__toggle:hover,
.gg-service-card__toggle:focus {
    color: var(--gg-primary-hover);
    border-bottom-color: var(--gg-primary-hover);
}

.gg-service-card__toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--gg-duration) var(--gg-ease);
}

.gg-service-card__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* =========================================================
   11. SEKCJA: MOBILNA OBSŁUGA — REACH
   ========================================================= */

.gg-reach {
    background: var(--gg-white);
}

/* Górna część: 3 kroki + blok info */
.gg-reach__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-10);
    align-items: start;
}

/* Kroki (jak to działa) */
.gg-reach__steps {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-3);
}

.gg-reach__step {
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-4);
    padding: var(--gg-sp-4);
    background: var(--gg-bg-section);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-lg);
}

.gg-reach__step-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gg-accent-light);
    border: 2px solid var(--gg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 800;
    color: var(--gg-accent);
    line-height: 1;
}

.gg-reach__step-content {
    flex: 1;
}

.gg-reach__step-title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-md);
    font-weight: 700;
    color: var(--gg-dark);
    margin-bottom: .35em;
}

.gg-reach__step-desc {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: none;
}

/* Blok z korzyściami + zasięgiem */
.gg-reach__info-block {
    background: var(--gg-pale);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    border: 1px solid var(--gg-border-light);
}

.gg-reach__info-title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-4);
}

/* Korzyści */
.gg-reach__benefits {
    list-style: none;
    margin: 0 0 var(--gg-sp-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-2);
}

.gg-reach__benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-2);
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.55;
}

.gg-reach__benefit svg {
    width: 20px;
    height: 20px;
    stroke: var(--gg-accent);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: .1em;
}

/* Zasięg — chipy miast */
.gg-reach__coverage-label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gg-text-muted);
    margin-bottom: var(--gg-sp-2);
    display: block;
}

.gg-reach__cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-sp-1);
    margin-bottom: var(--gg-sp-5);
}

.gg-reach__city-chip {
    background: var(--gg-white);
    border: 1px solid var(--gg-border);
    color: var(--gg-text);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    padding: .35em .9em;
    border-radius: 100px;
}

.gg-reach__city-chip--more {
    background: var(--gg-accent-light);
    border-color: var(--gg-accent);
    color: var(--gg-accent);
}

/* =========================================================
   12. SEKCJA: ZESPÓŁ — TEAM
   ========================================================= */

.gg-team {
    background: var(--gg-dark);
}

.gg-team .section-label {
    color: #FFB0A6;
}

.gg-team .section-title {
    color: var(--gg-white);
}

.gg-team .section-lead {
    color: var(--gg-text-pale);
}

.gg-team__inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--gg-sp-10);
    align-items: start;
}

.gg-team__expert {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-5);
    text-align: center;
}

.gg-team__expert-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gg-accent) 0%, var(--gg-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gg-sp-4);
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-3xl);
    font-weight: 800;
    color: var(--gg-white);
    letter-spacing: -.02em;
}

.gg-team__expert-name {
    font-size: var(--gg-text-xl);
    color: var(--gg-white);
    margin-bottom: var(--gg-sp-1);
}

.gg-team__expert-title {
    font-size: var(--gg-text-sm);
    color: #FFB0A6;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: var(--gg-sp-3);
}

.gg-team__expert-bio {
    font-size: var(--gg-text-base);
    color: var(--gg-text-pale);
    line-height: 1.7;
    text-align: left;
    margin: 0;
    max-width: none;
}

.gg-team__expert-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-sp-1);
    margin-top: var(--gg-sp-3);
    justify-content: center;
}

.gg-team__expert-tag {
    background: rgba(209,37,17,.18);
    border: 1px solid rgba(209,37,17,.4);
    color: #FFB0A6;
    font-size: var(--gg-text-sm);
    font-weight: 600;
    padding: .3em .8em;
    border-radius: 100px;
}

/* Opinie — Testimonials */
.gg-testimonials {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-4);
}

.gg-testimonial {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 4px solid var(--gg-accent);
    border-radius: 0 var(--gg-radius-md) var(--gg-radius-md) 0;
    padding: var(--gg-sp-4);
}

.gg-testimonial__quote {
    font-size: var(--gg-text-md);
    color: var(--gg-text-pale);
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 var(--gg-sp-3);
    max-width: none;
}

.gg-testimonial__quote::before {
    content: '\201E'; /* „ */
    font-style: normal;
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -.3em;
    color: #FFB0A6;
    margin-right: .1em;
}

.gg-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--gg-sp-2);
}

.gg-testimonial__author-name {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-white);
}

.gg-testimonial__author-meta {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    margin-top: .1em;
}

.gg-testimonial__stars {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.gg-testimonial__stars svg {
    width: 16px;
    height: 16px;
    fill: #F5A623;
    stroke: none;
}

/* =========================================================
   13. SEKCJA: KONTAKT — CONTACT FORM
   ========================================================= */

.gg-contact {
    background: var(--gg-bg-section);
}

.gg-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-10);
    align-items: start;
}

.gg-contact__info-title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-4);
}

.gg-contact__info-lead {
    font-size: var(--gg-text-md);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--gg-sp-5);
    max-width: none;
}

.gg-contact__info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-3);
}

.gg-contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-3);
}

.gg-contact__info-icon {
    width: 44px;
    height: 44px;
    background: var(--gg-pale);
    border-radius: var(--gg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gg-contact__info-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gg-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-contact__info-label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: .2em;
}

.gg-contact__info-value {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.5;
}

.gg-contact__info-value a {
    color: var(--gg-text);
    font-weight: 600;
    text-decoration: none;
}

.gg-contact__info-value a:hover {
    color: var(--gg-primary);
    text-decoration: underline;
}

/* Formularz kontaktowy */
.gg-form {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    box-shadow: var(--gg-shadow-md);
}

.gg-form__title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-5);
}

.gg-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-3);
}

.gg-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-1);
    margin-bottom: var(--gg-sp-3);
}

.gg-form__group--full {
    grid-column: 1 / -1;
}

.gg-form__label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-text);
    display: flex;
    align-items: center;
    gap: .3em;
}

.gg-form__label abbr {
    color: #C0392B;
    text-decoration: none;
    font-size: 1.2em;
    line-height: 0;
}

.gg-form__input,
.gg-form__select,
.gg-form__textarea {
    width: 100%;
    padding: 0.875em 1em;
    font-family: var(--gg-font-body);
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    background: var(--gg-white);
    border: 2px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    transition: border-color var(--gg-duration) var(--gg-ease),
                box-shadow var(--gg-duration) var(--gg-ease);
    min-height: 52px; /* WCAG touch target */
    -webkit-appearance: none;
    appearance: none;
}

.gg-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.gg-form__input:focus,
.gg-form__select:focus,
.gg-form__textarea:focus {
    border-color: var(--gg-primary);
    box-shadow: 0 0 0 3px rgba(209,37,17,.15);
    outline: none;
}

.gg-form__input::placeholder,
.gg-form__textarea::placeholder {
    color: #C0A09B;
}

.gg-form__helper {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    margin: 0;
    max-width: none;
}

.gg-form__submit {
    width: 100%;
    justify-content: center;
    margin-top: var(--gg-sp-2);
}

.gg-form__privacy {
    text-align: center;
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    margin-top: var(--gg-sp-2);
    margin-bottom: 0;
    max-width: none;
}

.gg-form__privacy a {
    color: var(--gg-text-muted);
    font-weight: 600;
}

/* Komunikaty formularza */
.gg-form-notice {
    padding: var(--gg-sp-3) var(--gg-sp-4);
    border-radius: var(--gg-radius-md);
    margin-bottom: var(--gg-sp-4);
    font-size: var(--gg-text-base);
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-2);
}

.gg-form-notice--success {
    background: #ECFDF5;
    border: 1px solid #10B981;
    color: #065F46;
}

.gg-form-notice--error {
    background: #FEF2F2;
    border: 1px solid #F87171;
    color: #991B1B;
}

.gg-form-notice svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   14. FOOTER — STOPKA
   ========================================================= */

.site-footer {
    background: var(--gg-dark);
    color: var(--gg-text-pale);
    padding: var(--gg-sp-10) 0 0;
    position: relative;
}

/* Łuk przejścia z białej treści w ciemną stopkę */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--gg-white);
    clip-path: ellipse(55% 100% at 50% 0%);
    pointer-events: none;
}

/* Gdy ostatnia sekcja ma ciemne tło (gg-cta-section), łuk dopasowuje kolor do stopki */
#content:has(.gg-cta-section:last-child) + .site-footer::before {
    background: var(--gg-dark);
}

/* Statystyki zaufania w stopce */
.site-footer .gg-hero__trust {
    justify-content: center;
    margin-top: 0;
    padding-top: var(--gg-sp-6);
    border-top: none;
    padding-bottom: var(--gg-sp-6);
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: var(--gg-sp-8);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--gg-sp-8);
    padding-bottom: var(--gg-sp-8);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-footer__brand .site-title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 800;
    color: var(--gg-white);
    margin-bottom: var(--gg-sp-1);
}

/* Białe logo stopki (Kustomizator → Stopka). Zastępuje nazwę witryny. */
.site-footer__logo-link {
    display: inline-block;
    margin-bottom: var(--gg-sp-2);
    line-height: 0;
}

.site-footer__logo-link:focus-visible {
    outline: 2px solid var(--gg-white);
    outline-offset: 4px;
    border-radius: var(--gg-radius-sm);
}

.site-footer__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 90px;

    /* Zabezpieczenie dla plików SVG bez własnych wymiarów — bez tego
       przeglądarka nadaje im domyślne 300×150 i logo byłoby rozciągnięte. */
    object-fit: contain;
    object-position: left center;
}

.site-footer__brand .site-tagline {
    font-size: var(--gg-text-sm);
    color: #FFB0A6;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: var(--gg-sp-3);
}

.site-footer__brand p {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    line-height: 1.65;
    max-width: none;
}

.site-footer__col-title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gg-white);
    margin-bottom: var(--gg-sp-3);
}

/* Kontakt w stopce */
.site-footer__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-2);
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gg-sp-2);
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    line-height: 1.5;
}

.site-footer__contact-item svg {
    width: 16px;
    height: 16px;
    stroke: #FFB0A6;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: .1em;
}

.site-footer__contact-item a {
    color: var(--gg-text-pale);
    text-decoration: none;
    font-weight: 600;
}

.site-footer__contact-item a:hover {
    color: var(--gg-white);
    text-decoration: underline;
}

/* Godziny otwarcia */
.site-footer__hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-1);
}

.site-footer__hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    padding: .25em 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.site-footer__hours-item:last-child {
    border-bottom: none;
}

.site-footer__hours-item span:first-child {
    font-weight: 600;
    color: var(--gg-white);
}

/* Menu w stopce */
.site-footer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-1);
}

.site-footer__nav-list a {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    text-decoration: none;
    transition: color var(--gg-duration) var(--gg-ease);
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .2em 0;
}

.site-footer__nav-list a::before {
    content: '›';
    font-size: 1.2em;
    color: #FFB0A6;
    line-height: 1;
}

.site-footer__nav-list a:hover {
    color: var(--gg-white);
}

/* Pasek dolny stopki */
.site-footer__bottom {
    padding: var(--gg-sp-4) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-sp-3);
    font-size: var(--gg-text-sm);
    color: var(--gg-text-pale);
    flex-wrap: wrap;
}

.site-footer__bottom a {
    color: #FFB0A6;
    text-decoration: none;
    font-weight: 600;
}

.site-footer__bottom a:hover {
    color: var(--gg-white);
    text-decoration: underline;
}

.site-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    padding: .35em .9em;
    border-radius: 100px;
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: #FFB0A6;
    text-decoration: none;
}

.site-footer__badge:hover {
    background: rgba(255,255,255,.1);
    color: var(--gg-white);
    text-decoration: none;
}

/* =========================================================
   15. RESPONSYWNOŚĆ — MOBILE FIRST
   ========================================================= */

/* --- Tablet (≤ 1024px) --- */
@media (max-width: 1024px) {

    .gg-hero__title {
        font-size: var(--gg-text-3xl);
    }

    .gg-features__grid {
        grid-template-columns: 1fr 1fr;
    }

    .gg-team__inner {
        grid-template-columns: 300px 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--gg-sp-6);
    }
}

/* --- Mobile (≤ 768px) --- */
@media (max-width: 768px) {

    :root {
        --gg-text-4xl: 2.25rem;
        --gg-text-3xl: 1.875rem;
        --gg-text-2xl: 1.5rem;
    }

    .section { padding: var(--gg-sp-8) 0; }

    /* Header mobile — logo + hamburger w jednym rzędzie */
    :root {
        --gg-header-top-height: 68px;
    }

    .site-header__inner {
        padding: 0 var(--gg-sp-2);
    }

    .site-branding {
        padding: var(--gg-sp-1) var(--gg-sp-2) var(--gg-sp-1) 0;
    }

    .site-branding .custom-logo {
        height: 78px;
    }

    .site-header__right {
        border-left: none;
    }

    .site-branding .site-tagline {
        display: none;
    }

    .site-header__top {
        padding: var(--gg-sp-1) 0;
        flex: 0 0 auto;
    }

    /* Na mobile telefon jest ukryty, więc ticker dostaje zwolnione miejsce
       obok hamburgera — musi tylko odsunąć się od krawędzi. */
    .gg-raty-ticker {
        margin-left: var(--gg-sp-2);
        margin-right: var(--gg-sp-2);
    }

    .gg-raty-ticker__logo {
        height: 16px;
    }

    .gg-raty-ticker__text {
        font-size: 13px;
    }

    .btn--phone-sm {
        display: none;
    }

    .main-navigation {
        position: fixed;
        top: var(--gg-header-top-height);
        left: 0;
        right: 0;
        background: var(--gg-white);
        box-shadow: var(--gg-shadow-lg);
        padding: var(--gg-sp-3);
        border-top: 2px solid var(--gg-primary);
        z-index: 101;
        overflow-x: hidden;
        transform: translateY(-110%);
        opacity: 0;
        transition: transform .3s var(--gg-ease),
                    opacity .3s var(--gg-ease);
    }

    .main-navigation .nav-inner {
        display: block;
        padding: 0;
    }

    .main-navigation.is-open {
        transform: translateY(0);
        opacity: 1;
    }

    .main-navigation ul {
        flex-direction: column;
        width: 100%;
        gap: var(--gg-sp-1);
        padding: 0;
    }

    .main-navigation ul li {
        flex: none;
        display: block;
    }

    .main-navigation ul li a {
        display: block;
        font-size: var(--gg-text-base);
        padding: .45em 1em;
        width: 100%;
        text-align: left;
        border-radius: var(--gg-radius-sm);
        color: var(--gg-text);
        background: none;
        border-color: transparent;
    }

    .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a {
        background: var(--gg-pale);
        border-color: transparent;
        color: var(--gg-primary);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-mobile-cta {
        display: block;
        margin-top: var(--gg-sp-3);
        padding-top: var(--gg-sp-3);
        border-top: 1px solid var(--gg-border-light);
    }

    .nav-mobile-cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Hero mobile */
    .gg-hero {
        padding: var(--gg-sp-8) 0;
    }

    .gg-hero::after {
        height: 40px;
    }

    .gg-hero__cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .gg-hero__cta-group .btn {
        justify-content: center;
        width: 100%;
    }

    .gg-hero__trust {
        gap: var(--gg-sp-4);
    }

    /* Features mobile */
    .gg-features__grid {
        grid-template-columns: 1fr;
    }

    /* Services mobile */
    .gg-services__grid {
        grid-template-columns: 1fr;
    }

    /* Reach mobile */
    .gg-reach__inner {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-6);
    }

    /* Team mobile */
    .gg-team__inner {
        grid-template-columns: 1fr;
    }

    /* Contact mobile */
    .gg-contact__inner {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-6);
    }

    .gg-form__row {
        grid-template-columns: 1fr;
    }

    /* Footer mobile */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-5);
    }

    .site-footer__logo {
        max-width: 200px;
        max-height: 72px;
    }

    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Small mobile (≤ 480px) --- */
@media (max-width: 480px) {

    .container {
        padding: 0 var(--gg-sp-2);
    }

    .gg-hero__title {
        font-size: 1.875rem;
    }

    .gg-hero__tagline {
        font-size: var(--gg-text-base);
    }

    .gg-form {
        padding: var(--gg-sp-4);
    }

    .gg-form__title {
        font-size: var(--gg-text-lg);
    }
}

/* =========================================================
   16. WSPARCIE PRZEGLĄDAREK — PRINT & REDUCED MOTION
   ========================================================= */

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

@media print {
    .site-header, .site-footer, .gg-hero, .gg-form, .nav-toggle {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
    }
}

/* =========================================================
   17. ANIMACJE SCROLL — SCROLL ANIMATIONS
   Intersection Observer dodaje .is-visible po wejściu w viewport
   ========================================================= */

/* Animacje aktywne tylko gdy JS załadowany — bez JS elementy zawsze widoczne */
html.js .animate-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
                transform .7s cubic-bezier(.4, 0, .2, 1);
}

html.js .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
                transform .7s cubic-bezier(.4, 0, .2, 1);
}

/* Stagger dla kart wewnątrz widocznych sekcji */
.is-visible .gg-feature-card:nth-child(2)  { transition-delay: .13s; }
.is-visible .gg-feature-card:nth-child(3)  { transition-delay: .26s; }

.is-visible .gg-service-card:nth-child(2)  { transition-delay: .1s; }
.is-visible .gg-service-card:nth-child(3)  { transition-delay: .2s; }
.is-visible .gg-service-card:nth-child(4)  { transition-delay: .1s; }
.is-visible .gg-service-card:nth-child(5)  { transition-delay: .2s; }
.is-visible .gg-service-card:nth-child(6)  { transition-delay: .3s; }

.is-visible .gg-reach__step:nth-child(2)   { transition-delay: .15s; }
.is-visible .gg-reach__step:nth-child(3)   { transition-delay: .3s; }

.is-visible .gg-testimonial:nth-child(2)   { transition-delay: .15s; }
.is-visible .gg-testimonial:nth-child(3)   { transition-delay: .3s; }

/* Karty i kroki — ukryte tylko gdy NIE są jeszcze widoczne */
html.js .gg-feature-card.animate-on-scroll:not(.is-visible),
html.js .gg-service-card.animate-on-scroll:not(.is-visible),
html.js .gg-reach__step.animate-on-scroll:not(.is-visible),
html.js .gg-testimonial.animate-on-scroll:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1),
                transform .6s cubic-bezier(.4, 0, .2, 1);
}

/* Wyłącz animacje gdy użytkownik woli brak ruchu */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-on-scroll.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   18. WORDPRESS — WYRÓWNANIA I CORE CLASSES
   ========================================================= */

.alignleft   { float: left;  margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em;  }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignwide   { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull   { max-width: 100%; width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--gg-text-sm); color: var(--gg-text-muted); text-align: center; margin-top: .4em; }

/* =========================================================
   19. PAGE TEMPLATES — PODSTRONY
   ========================================================= */

/* Wrapper podstron */
.page-inner {
    padding-top: 0;
}

/* Hero podstrony */
.page-hero {
    background: var(--gg-dark);
    padding: var(--gg-sp-8) 0;
    /* Treść hero podstron wyśrodkowana — bez tego ograniczenia szerokości
       niżej zostawiały szeroki pusty pas po prawej stronie. */
    text-align: center;
}

.page-hero--compact {
    padding: var(--gg-sp-5) 0;
}

.page-hero .section-label {
    color: #FFB0A6;
}

.page-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--gg-white);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--gg-sp-4);
    line-height: 1.2;
}

.page-hero__lead {
    font-size: var(--gg-text-lg);
    color: var(--gg-text-pale);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Wariant z grafiką obok tekstu (strona „O nas") — tu tekst wraca
   do wyrównania do lewej, bo pustkę po prawej wypełnia grafika. */
.page-hero--with-media {
    text-align: left;
}

.page-hero--with-media .page-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gg-sp-6);
    align-items: center;
}

.page-hero--with-media .page-hero__title,
.page-hero--with-media .page-hero__lead {
    margin-left: 0;
    margin-right: 0;
}

/* Wariant z grafiką po lewej — autko jest zwrócone w prawo,
   więc z tej strony "patrzy" na tekst. */
.page-hero--media-left .page-hero__inner {
    grid-template-columns: auto 1fr;
}

.page-hero--media-left .page-hero__media {
    order: -1;
}

.page-hero__media img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

@media (max-width: 860px) {
    .page-hero--with-media .page-hero__inner,
    .page-hero--media-left .page-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-4);
    }

    /* W jednej kolumnie tekst zawsze pierwszy — inaczej grafika
       spychałaby nagłówek poniżej pierwszego ekranu. */
    .page-hero--media-left .page-hero__media {
        order: 0;
    }

    .page-hero__media img {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* ---- Oferta — karty usług ---- */

.gg-offer-section--alt {
    background: var(--gg-pale);
}

/* Wstęp sekcji z grafiką (lub wideo) obok opisu.
   Używane w page-oferta.php i na stronie głównej. */
.gg-offer-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-8);
    align-items: center;
    margin-bottom: var(--gg-sp-8);
}

.gg-offer-intro .section-header {
    margin-bottom: 0;
}

/* Sam nagłówek wyśrodkowany w kolumnie; akapity zostają do lewej,
   bo wyśrodkowany długi tekst czyta się gorzej. */
.gg-offer-intro .section-title {
    text-align: center;
}

/* Tekst wypełnia własną kolumnę — bez tego limit 60ch zostawiałby
   pustkę między opisem a grafiką. */
.gg-offer-intro .section-lead {
    max-width: none;
}

.gg-offer-intro__media img,
.gg-offer-intro__video {
    width: 100%;
    height: auto;
    display: block;
}

/* Zdjęcia sekcyjne bez ramki i cienia — mają być zlane z tłem strony,
   a nie wyglądać jak kafelek położony na niej. */
.gg-offer-intro__media img {
    border-radius: 0;
    box-shadow: none;
}

.gg-offer-intro__video {
    background: var(--gg-dark);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-md);
}

/* Grafika po lewej stronie opisu */
.gg-offer-intro--media-left .gg-offer-intro__media {
    order: -1;
}

@media (max-width: 900px) {
    .gg-offer-intro {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-5);
    }

    /* Na jednej kolumnie grafika zawsze pod tekstem — również w wariancie
       „media-left", gdzie na desktopie stoi po lewej. */
    .gg-offer-intro--media-left .gg-offer-intro__media {
        order: 0;
    }
}

/* Grafika ilustrująca usługę — pod opisem w karcie */
.gg-offer-card__media,
.gg-extra-service__media {
    margin-top: var(--gg-sp-3);
    border-radius: var(--gg-radius-md);
    overflow: hidden;
}

.gg-offer-card__media img,
.gg-extra-service__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Karta z kilkoma zdjęciami — kadry leżą na sobie i przenikają się.
   content-box jest tu celowe: proporcje 4:3 mają dotyczyć samego kadru,
   bez górnego paddingu, który odsuwa zdjęcie od opisu. */
[data-media-slideshow] {
    position: relative;
    aspect-ratio: 4 / 3;
    box-sizing: content-box;
}

[data-media-slideshow] img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s var(--gg-ease);
}

/* Pierwsze zdjęcie ma tę klasę już w HTML, więc bez JS też coś widać. */
[data-media-slideshow] img.is-active {
    opacity: 1;
}

.gg-offer-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gg-sp-5);
}

/* Pięć kart: trzy krótkie w górnym rzędzie, dwie z długim opisem
   w dolnym — każda na pół szerokości, żeby rząd nie miał dziury.
   Siatka sześciokolumnowa: 3 x 2 kolumny, potem 2 x 3 kolumny. */
.gg-offer-cards--3-2 {
    grid-template-columns: repeat(6, 1fr);
}

.gg-offer-cards--3-2 > .gg-offer-card {
    grid-column: span 2;
}

.gg-offer-cards--3-2 > .gg-offer-card:nth-child(n+4) {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .gg-offer-cards {
        grid-template-columns: 1fr;
    }

    /* Siatka sześciokolumnowa też schodzi do jednej kolumny —
       inaczej karty zostałyby przyklejone do lewej krawędzi. */
    .gg-offer-cards--3-2 {
        grid-template-columns: 1fr;
    }

    .gg-offer-cards--3-2 > .gg-offer-card,
    .gg-offer-cards--3-2 > .gg-offer-card:nth-child(n+4) {
        grid-column: auto;
    }
}

.gg-offer-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    box-shadow: var(--gg-shadow-sm);
    transition: box-shadow .25s var(--gg-ease), transform .25s var(--gg-ease);

    /* Kolumna + margin-top:auto na grafice — zdjęcia w sąsiednich kartach
       wyrównują się do dołu mimo różnej długości opisów. */
    display: flex;
    flex-direction: column;
}

/* Zdjęcie zaraz pod opisem — bez dociskania do dolnej krawędzi karty.
   Kosztem jest to, że przy różnej długości opisów zdjęcia w rzędzie
   nie stoją w jednej linii; taka była prośba klientki. */
.gg-offer-card__media {
    margin-top: var(--gg-sp-2);
}

.gg-offer-card:hover {
    box-shadow: var(--gg-shadow-lg);
    transform: translateY(-3px);
}

.gg-offer-card__icon {
    width: 52px;
    height: 52px;
    background: var(--gg-pale);
    border-radius: var(--gg-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gg-sp-4);
}

.gg-offer-card__icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--gg-primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-offer-card__title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-3);
}

.gg-offer-card__desc {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--gg-sp-4);
    max-width: none;
}

.gg-offer-card__desc:last-child {
    margin-bottom: 0;
}

/* Link do opisu materiału u producenta */
.gg-offer-card__material-link {
    color: var(--gg-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--gg-duration) var(--gg-ease);
}

.gg-offer-card__material-link:hover,
.gg-offer-card__material-link:focus {
    color: var(--gg-primary-hover);
}

/* Nagłówek listy w karcie, np. „Korony mogą być wykonane z:" */
.gg-offer-card__features-label {
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-dark);
    margin: 0 0 var(--gg-sp-3);
    border-top: 1px solid var(--gg-border-light);
    padding-top: var(--gg-sp-4);
    max-width: none;
}

/* Gdy nad listą jest nagłówek, kreska należy do nagłówka */
.gg-offer-card__features-label + .gg-offer-card__features {
    border-top: none;
    padding-top: 0;
}

.gg-offer-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-2);
    border-top: 1px solid var(--gg-border-light);
    padding-top: var(--gg-sp-4);
}

.gg-offer-card__features li {
    font-size: var(--gg-text-sm);
    color: var(--gg-text);
    padding-left: 1.4em;
    position: relative;
}

.gg-offer-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gg-accent);
    font-weight: 700;
}

/* Usługi dodatkowe */
.gg-extra-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gg-sp-5);
}

/* Ten sam próg co karty protez — trzy kafelki napraw robią się
   za wąskie dokładnie w tym samym miejscu. */
@media (max-width: 900px) {
    .gg-extra-services {
        grid-template-columns: 1fr;
    }
}

.gg-extra-service {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-left: 4px solid var(--gg-accent);
    border-radius: 0 var(--gg-radius-md) var(--gg-radius-md) 0;
    padding: var(--gg-sp-5);

    display: flex;
    flex-direction: column;
}

/* Wariant kafelkowy — wygląd taki sam jak karty protez, bez czerwonej
   kreski z lewej strony. */
.gg-extra-service--card {
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    box-shadow: var(--gg-shadow-sm);
    transition: box-shadow .25s var(--gg-ease), transform .25s var(--gg-ease);
}

.gg-extra-service--card:hover {
    box-shadow: var(--gg-shadow-lg);
    transform: translateY(-3px);
}

.gg-extra-service__media {
    margin-top: var(--gg-sp-2);
}

.gg-extra-service__title {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-2);
}

.gg-extra-service p {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: none;
}

/* CTA box — sekcja wezwania do działania */
.gg-cta-section {
    background: var(--gg-white);
}

.gg-cta-box {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    background: var(--gg-accent-light);
    border: 2px solid var(--gg-accent);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
}

.gg-cta-box__title {
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-3);
}

.gg-cta-box__desc {
    font-size: var(--gg-text-lg);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin-bottom: var(--gg-sp-6);
    max-width: none;
}

.gg-cta-box__actions {
    display: flex;
    gap: var(--gg-sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

.gg-cta-box .btn--outline {
    border-color: var(--gg-primary);
    color: var(--gg-primary);
}

.gg-cta-box .btn--outline:hover {
    background: var(--gg-primary);
    border-color: var(--gg-primary);
    color: var(--gg-white);
}

/* ---- O nas — sekcja historia ---- */

.gg-story__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-10);
    align-items: start;
}

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

.gg-story__text p {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.8;
    margin-bottom: var(--gg-sp-4);
    max-width: none;
}

.gg-story__values {
    background: var(--gg-pale);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
}

.gg-story__values-title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-4);
}

.gg-story__values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-4);
}

.gg-story__values-list li {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.65;
    padding-left: 1em;
    border-left: 3px solid var(--gg-accent);
}

/* O nas — team grid */
.gg-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gg-sp-5);
}

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

.gg-team__member {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    text-align: center;
    box-shadow: var(--gg-shadow-sm);
}

.gg-team__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gg-accent) 0%, var(--gg-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gg-sp-4);
}

.gg-team__initials {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 800;
    color: var(--gg-white);
    letter-spacing: -.02em;
}

.gg-team__name {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-1);
}

.gg-team__role {
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-accent);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--gg-sp-3);
}

.gg-team__bio {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    line-height: 1.7;
    text-align: left;
    margin: 0;
    max-width: none;
}

/* Wyposażenie */
.gg-equipment {
    background: var(--gg-pale);
}

.gg-equipment__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gg-sp-4);
    max-width: 880px;
}

@media (max-width: 640px) {
    .gg-equipment__list {
        grid-template-columns: 1fr;
    }
}

.gg-equipment__item {
    display: flex;
    gap: var(--gg-sp-3);
    align-items: flex-start;
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.65;
}

.gg-equipment__item svg {
    width: 22px;
    height: 22px;
    stroke: var(--gg-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: .1em;
}

/* ---- Kontakt — podstrona ---- */

.gg-contact-page__grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--gg-sp-10);
    align-items: start;
}

@media (max-width: 900px) {
    .gg-contact-page__grid {
        grid-template-columns: 1fr;
    }
}

.gg-contact-page__info {
    background: var(--gg-pale);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
}

.gg-contact-page__info-title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-5);
    text-align: center;
}

.gg-contact-page__details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-4);
    margin-bottom: var(--gg-sp-5);
}

/* Autko z godzinami otwarcia w kolumnie danych kontaktowych */
.gg-contact-page__mascot {
    margin-top: var(--gg-sp-4);
}

.gg-contact-page__mascot img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}

.gg-contact-page__detail {
    display: flex;
    gap: var(--gg-sp-3);
    align-items: flex-start;
}

.gg-contact-page__detail svg {
    width: 20px;
    height: 20px;
    stroke: var(--gg-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: .15em;
}

.gg-contact-page__detail div {
    display: flex;
    flex-direction: column;
    gap: .2em;
}

.gg-contact-page__detail strong {
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-dark);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.gg-contact-page__detail a,
.gg-contact-page__detail span {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
}

.gg-contact-page__detail a {
    font-weight: 600;
    text-decoration: none;
}

.gg-contact-page__detail a:hover {
    color: var(--gg-primary);
    text-decoration: underline;
}

.gg-contact-page__response-note {
    display: flex;
    gap: var(--gg-sp-2);
    align-items: flex-start;
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-md);
    padding: var(--gg-sp-3);
}

.gg-contact-page__response-note svg {
    width: 16px;
    height: 16px;
    stroke: var(--gg-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: .1em;
}

/* Formularz kontaktowy — podstrona */
.gg-contact-page__form-title {
    font-size: var(--gg-text-2xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-5);
}

.gg-contact-form {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
    box-shadow: var(--gg-shadow-md);
}

.gg-contact-form__row {
    margin-bottom: var(--gg-sp-3);
}

.gg-contact-form__row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-3);
}

@media (max-width: 540px) {
    .gg-contact-form__row--half {
        grid-template-columns: 1fr;
    }
}

.gg-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-1);
    margin-bottom: var(--gg-sp-3);
}

.gg-contact-form__label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-text);
}

.gg-contact-form__label .required {
    color: #C0392B;
    margin-left: .2em;
}

.gg-contact-form__input,
.gg-contact-form__select,
.gg-contact-form__textarea {
    width: 100%;
    padding: 0.875em 1em;
    font-family: var(--gg-font-body);
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    background: var(--gg-white);
    border: 2px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    transition: border-color var(--gg-duration) var(--gg-ease),
                box-shadow var(--gg-duration) var(--gg-ease);
    min-height: 52px;
    -webkit-appearance: none;
    appearance: none;
}

.gg-contact-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.gg-contact-form__input:focus,
.gg-contact-form__select:focus,
.gg-contact-form__textarea:focus {
    border-color: var(--gg-primary);
    box-shadow: 0 0 0 3px rgba(209,37,17,.15);
    outline: none;
}

.gg-contact-form__input::placeholder,
.gg-contact-form__textarea::placeholder {
    color: #C0A09B;
}

.gg-contact-form__privacy {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    margin: 0 0 var(--gg-sp-4);
    max-width: none;
    line-height: 1.6;
}

.gg-contact-form__privacy a {
    color: var(--gg-text-muted);
    font-weight: 600;
}

.btn--submit {
    width: 100%;
    justify-content: center;
}

/* ---- Polityka prywatności — legal content ---- */

.gg-legal-content__inner {
    max-width: 840px;
}

.gg-legal-content__updated {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    margin-bottom: var(--gg-sp-8);
    border-bottom: 1px solid var(--gg-border-light);
    padding-bottom: var(--gg-sp-4);
    max-width: none;
}

.gg-legal-content__inner h2 {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-top: var(--gg-sp-8);
    margin-bottom: var(--gg-sp-3);
    padding-top: var(--gg-sp-4);
    border-top: 1px solid var(--gg-border-light);
}

.gg-legal-content__inner h2:first-of-type {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.gg-legal-content__inner p {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.8;
    margin-bottom: var(--gg-sp-4);
    max-width: none;
}

.gg-legal-content__inner ul,
.gg-legal-content__inner ol {
    padding-left: 1.5em;
    margin-bottom: var(--gg-sp-4);
}

.gg-legal-content__inner li {
    font-size: var(--gg-text-base);
    color: var(--gg-text);
    line-height: 1.8;
    margin-bottom: var(--gg-sp-2);
}

.gg-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gg-text-sm);
    margin-bottom: var(--gg-sp-6);
}

.gg-legal-table th {
    background: var(--gg-dark);
    color: var(--gg-white);
    font-family: var(--gg-font-display);
    font-weight: 700;
    text-align: left;
    padding: var(--gg-sp-3) var(--gg-sp-4);
    font-size: var(--gg-text-sm);
}

.gg-legal-table td {
    border: 1px solid var(--gg-border);
    padding: var(--gg-sp-3) var(--gg-sp-4);
    color: var(--gg-text);
    vertical-align: top;
    line-height: 1.6;
}

.gg-legal-table tr:nth-child(even) td {
    background: var(--gg-bg-section);
}

.gg-legal-nav {
    background: var(--gg-pale);
    border-radius: var(--gg-radius-md);
    padding: var(--gg-sp-5);
    margin-top: var(--gg-sp-8);
    font-size: var(--gg-text-sm);
}

.gg-legal-nav strong {
    display: block;
    margin-bottom: var(--gg-sp-2);
    color: var(--gg-dark);
    font-family: var(--gg-font-display);
}

.gg-legal-nav ol {
    margin: 0;
    padding-left: 1.5em;
    columns: 2;
    column-gap: var(--gg-sp-6);
}

.gg-legal-nav a {
    color: var(--gg-primary);
    text-decoration: none;
}

.gg-legal-nav a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .gg-legal-nav ol {
        columns: 1;
    }
}

/* Section header — centrowanie */
.section-header--center {
    text-align: center;
}

.section-header--center .section-lead {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   20. FORMA PŁATNOŚCI — kafelki w hero
   ========================================================= */

.gg-payment-label {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-2);
    display: block;
}

.gg-payment-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gg-sp-2);
    margin: 0 auto var(--gg-sp-6);
    max-width: 520px;
}

.gg-payment-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4em;
    background: var(--gg-white);
    border: 1px solid var(--gg-dark);
    border-radius: var(--gg-radius-md);
    padding: .85em 1em;
    transition: transform var(--gg-duration) var(--gg-ease),
                box-shadow var(--gg-duration) var(--gg-ease);
}

.gg-payment-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.gg-payment-tile svg {
    width: 52px;
    height: 52px;
    stroke: var(--gg-dark);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.gg-payment-tile__name {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-sm);
    font-weight: 700;
    color: var(--gg-dark);
    text-align: center;
    white-space: nowrap;
}

.gg-payment-tile__note {
    font-size: 0.65rem;
    color: var(--gg-text-muted);
    text-align: center;
    line-height: 1.3;
}

.gg-payment-tile--featured {
    background: var(--gg-dark);
    border-color: var(--gg-dark);
}

.gg-payment-tile--featured svg {
    stroke: var(--gg-white);
}

.gg-payment-tile--featured .gg-payment-tile__name {
    color: var(--gg-white);
}

.gg-payment-tile--featured .gg-payment-tile__note {
    color: rgba(255,255,255,.8);
}

@media (max-width: 520px) {
    .gg-payment-tiles {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .gg-payment-tile {
        padding: .7em .6em;
    }
    .gg-payment-tile__name {
        font-size: 0.75rem;
    }
}

/* =========================================================
   21. BANNER EKSPRESOWY
   ========================================================= */

.gg-expres-banner {
    background: var(--gg-primary);
    padding: var(--gg-sp-6) 0;
}

.gg-expres-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gg-sp-4);
    flex-wrap: wrap;
    text-align: center;
}

.gg-expres-banner__icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gg-expres-banner__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--gg-white);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-expres-banner__text {
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.gg-expres-banner__title {
    font-family: var(--gg-font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 800;
    color: var(--gg-white);
    margin: 0;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.gg-expres-banner__subtitle {
    font-size: var(--gg-text-base);
    color: rgba(255,255,255,.85);
    margin: 0;
    max-width: none;
}

.gg-expres-banner__cta {
    margin-left: var(--gg-sp-4);
}

@media (max-width: 640px) {
    .gg-expres-banner__cta {
        margin-left: 0;
        width: 100%;
    }
    .gg-expres-banner__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   22. PROMOCJE — strona
   ========================================================= */

.gg-promo-section-title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-5);
    padding-bottom: var(--gg-sp-3);
    border-bottom: 3px solid var(--gg-accent);
    /* fit-content + auto = podkreślenie obejmuje sam tekst,
       a całość stoi na środku kolumny */
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ---------------------------------------------------------
   22a. Karuzela promocji — karty ze zdjęciem w tle
   Płynne przewijanie poziome (scroll-snap); karta najbliższa
   środka dostaje klasę .is-active (JS) i zostaje powiększona.
   --------------------------------------------------------- */

.gg-promo-carousel {
    /* Szerokość karty steruje liczbą widocznych kafli:
       desktop i tablet 3 karty, mobile 1 duża + podglądy sąsiadów. */
    --gg-pc-card: min(380px, 27vw);
    --gg-pc-gap:  var(--gg-sp-3);

    position: relative;
    margin-bottom: var(--gg-sp-8);
}

.gg-promo-carousel__track {
    display: flex;
    gap: var(--gg-pc-gap);

    /* Zapas na powiększenie aktywnej karty (overflow-y jest przycięty) */
    padding-block: var(--gg-sp-4);

    /* Boczny zapas równy połowie wolnego miejsca — dzięki niemu KAŻDA karta,
       również pierwsza i ostatnia, może trafić na środek toru. Bez tego przy
       liczbie promocji równej liczbie widocznych kart nie było czego przewijać
       i na stałe wyróżniona zostawała środkowa. Start ustawia JS na środkowej
       karcie, więc z lewej nie widać pustego marginesu. */
    padding-inline: calc(50% - var(--gg-pc-card) / 2);

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Pasek przewijania ukryty — nawigacja strzałkami i gestem */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gg-promo-carousel__track::-webkit-scrollbar {
    display: none;
}

.gg-promo-carousel__track:focus-visible {
    outline: 3px solid var(--gg-primary);
    outline-offset: 4px;
    border-radius: var(--gg-radius-md);
}

.gg-promo-slide {
    position: relative;
    z-index: 1;
    flex: 0 0 var(--gg-pc-card);
    aspect-ratio: 3 / 4;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border-radius: var(--gg-radius-lg);
    overflow: hidden;
    background: var(--gg-dark);
    box-shadow: var(--gg-shadow-sm);

    scroll-snap-align: center;
    transform: scale(.88);
    opacity: .55;
    filter: saturate(.6);
    transition:
        transform var(--gg-duration) var(--gg-ease),
        opacity   var(--gg-duration) var(--gg-ease),
        filter    var(--gg-duration) var(--gg-ease),
        box-shadow var(--gg-duration) var(--gg-ease);
}

.gg-promo-slide.is-active {
    z-index: 2;
    transform: scale(1.06);
    opacity: 1;
    filter: none;
    box-shadow: var(--gg-shadow-lg);
}

/* Karta bez zdjęcia — gradient w kolorach marki */
.gg-promo-slide--no-image {
    background: linear-gradient(160deg, var(--gg-dark) 0%, var(--gg-dark-mid) 55%, var(--gg-primary) 100%);
}

.gg-promo-slide__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gg-promo-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Przyciemnienie pod tekstem — dolne ~35% kadru */
.gg-promo-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(28,10,8,.92) 0%,
        rgba(28,10,8,.78) 28%,
        rgba(28,10,8,.28) 58%,
        rgba(28,10,8,.10) 100%
    );
}

.gg-promo-slide__body {
    position: relative;
    z-index: 2;
    padding: var(--gg-sp-3);
    color: var(--gg-text-light);
    text-align: left;
}

.gg-promo-slide__title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gg-text-light);
    margin: 0 0 10px;
}

.gg-promo-slide__discount {
    display: inline-block;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--gg-text-light);
    background: var(--gg-primary);
    border-radius: var(--gg-radius-sm);
    padding: 8px 14px;
    margin: 0 0 14px;
}

.gg-promo-slide__desc {
    font-size: var(--gg-text-base);
    line-height: 1.55;
    color: rgba(255,255,255,.88);
    margin: 0 0 16px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gg-promo-slide__code {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.28);
}

.gg-promo-slide__code-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gg-text-pale);
}

.gg-promo-slide__code-value {
    font-family: var(--gg-font-body);
    font-size: var(--gg-text-base);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--gg-text-light);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: var(--gg-radius-sm);
    padding: 3px 8px;
}

/* --- Strzałki nawigacji --- */

.gg-promo-carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);

    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gg-white);
    color: var(--gg-dark);
    border: 1px solid var(--gg-border);
    border-radius: 50%;
    box-shadow: var(--gg-shadow-md);
    cursor: pointer;
    padding: 0;
    transition:
        background var(--gg-duration) var(--gg-ease),
        color      var(--gg-duration) var(--gg-ease),
        opacity    var(--gg-duration) var(--gg-ease);
}

.gg-promo-carousel__nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-promo-carousel__nav:hover:not(:disabled) {
    background: var(--gg-primary);
    color: var(--gg-text-light);
    border-color: var(--gg-primary);
}

.gg-promo-carousel__nav:focus-visible {
    outline: 3px solid var(--gg-primary);
    outline-offset: 3px;
}

.gg-promo-carousel__nav:disabled {
    opacity: .35;
    cursor: default;
}

.gg-promo-carousel__nav--prev { left: -8px; }
.gg-promo-carousel__nav--next { right: -8px; }

/* --- Warianty responsywne --- */

@media (max-width: 1024px) {
    .gg-promo-carousel {
        --gg-pc-card: 30vw;      /* nadal 3 karty, dopasowane do szerokości */
        --gg-pc-gap:  var(--gg-sp-2);
    }
}

@media (max-width: 640px) {
    .gg-promo-carousel {
        --gg-pc-card: 68vw;      /* 1 duża karta + podglądy sąsiadów */
        --gg-pc-gap:  14px;
    }

    .gg-promo-slide {
        transform: scale(.9);
    }

    .gg-promo-slide.is-active {
        transform: scale(1.02);
    }

    .gg-promo-slide__body {
        padding: var(--gg-sp-2) var(--gg-sp-2) calc(var(--gg-sp-2) + 2px);
    }

    .gg-promo-carousel__nav {
        width: 40px;
        height: 40px;
    }

    .gg-promo-carousel__nav svg {
        width: 18px;
        height: 18px;
    }

    .gg-promo-carousel__nav--prev { left: 2px; }
    .gg-promo-carousel__nav--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .gg-promo-carousel__track {
        scroll-behavior: auto;
    }

    .gg-promo-slide,
    .gg-promo-slide.is-active {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
    }
}

.gg-promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gg-sp-4);
    margin-bottom: var(--gg-sp-10);
}

.gg-promo-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-5);
    box-shadow: var(--gg-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-3);
    transition: box-shadow var(--gg-duration) var(--gg-ease);
}

.gg-promo-card:hover {
    box-shadow: var(--gg-shadow-md);
}

.gg-promo-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gg-sp-2);
}

.gg-promo-card__title {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin: 0;
    line-height: 1.3;
}

.gg-promo-card__badge {
    font-size: 0.7rem;
    font-family: var(--gg-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .3em .7em;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

.gg-promo-card__badge--stala {
    background: var(--gg-accent-light);
    color: var(--gg-accent);
    border: 1px solid var(--gg-border);
}

.gg-promo-card__badge--sezonowa {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FDBA74;
}

.gg-promo-card__discount {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-2xl);
    font-weight: 800;
    color: var(--gg-primary);
}

.gg-promo-card__desc {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    line-height: 1.7;
    margin: 0;
    max-width: none;
    flex: 1;
}

.gg-promo-card__dates {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    display: flex;
    align-items: center;
    gap: .4em;
}

.gg-promo-card__dates svg {
    width: 14px;
    height: 14px;
    stroke: var(--gg-text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.gg-promo-card__code {
    display: flex;
    align-items: center;
    gap: var(--gg-sp-2);
    margin-top: auto;
    padding-top: var(--gg-sp-2);
    border-top: 1px solid var(--gg-border-light);
}

.gg-promo-card__code-label {
    font-size: var(--gg-text-xs);
    color: var(--gg-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

.gg-promo-card__code-value {
    font-family: monospace;
    font-size: var(--gg-text-sm);
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--gg-dark);
    background: var(--gg-pale);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-sm);
    padding: .2em .6em;
}

.gg-promo-empty {
    color: var(--gg-text-muted);
    font-size: var(--gg-text-base);
    padding: var(--gg-sp-6);
    background: var(--gg-bg-section);
    border-radius: var(--gg-radius-md);
    text-align: center;
}

/* Voucher */
.gg-voucher-box {
    background: linear-gradient(135deg, var(--gg-dark) 0%, var(--gg-accent) 100%);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-8);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gg-sp-6);
    flex-wrap: wrap;
}

.gg-voucher-box__icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gg-voucher-box__icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--gg-white);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-voucher-box__content {
    flex: 1;
}

.gg-voucher-box__title {
    font-size: var(--gg-text-2xl);
    color: var(--gg-white);
    margin-bottom: var(--gg-sp-2);
}

.gg-voucher-box__desc {
    font-size: var(--gg-text-md);
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    margin: 0;
    max-width: none;
}

@media (max-width: 640px) {
    .gg-voucher-box {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================================
   23. MATERIAŁY — logo producentów
   ========================================================= */

/* Siatka — wspólna baza */
.gg-materials-grid {
    display: grid;
    gap: var(--gg-sp-5);
    margin-left: auto;
    margin-right: auto;
}

/* 1 element — szeroka karta, poziomy układ */
.gg-materials-grid--cols-1 {
    grid-template-columns: 1fr;
    max-width: 860px;
}

.gg-materials-grid--cols-1 .gg-material-tile {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gg-sp-8);
    min-height: 180px;
}

.gg-materials-grid--cols-1 .gg-material-tile img {
    max-width: 200px;
    max-height: 140px;
    flex-shrink: 0;
}

.gg-materials-grid--cols-1 .gg-material-tile__content {
    text-align: left;
}

.gg-materials-grid--cols-1 .gg-material-tile__name,
.gg-materials-grid--cols-1 .gg-material-tile__desc {
    text-align: left;
}

/* 2 elementy — mniejszy kontener niż dla 1 */
.gg-materials-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 620px;
}

/* 3+ elementy — każdy kafelek = 1/3 kontenera */
.gg-materials-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
}

/* Tablet ≤768px: 3 kolumny → 2 */
@media (max-width: 768px) {
    .gg-materials-grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Poziomy układ 1 elementu → powrót do pionowego */
    .gg-materials-grid--cols-1 .gg-material-tile {
        flex-direction: column;
        align-items: center;
    }

    .gg-materials-grid--cols-1 .gg-material-tile img {
        max-width: 100%;
        max-height: 90px;
    }

    .gg-materials-grid--cols-1 .gg-material-tile__content,
    .gg-materials-grid--cols-1 .gg-material-tile__name,
    .gg-materials-grid--cols-1 .gg-material-tile__desc {
        text-align: center;
    }
}

/* Mobile ≤480px: zawsze 1 kolumna */
@media (max-width: 480px) {
    .gg-materials-grid--cols-1,
    .gg-materials-grid--cols-2,
    .gg-materials-grid--cols-3 {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

.gg-material-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gg-sp-2);
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-6) var(--gg-sp-5);
    text-decoration: none;
    box-shadow: var(--gg-shadow-sm);
    transition: box-shadow var(--gg-duration) var(--gg-ease),
                transform var(--gg-duration) var(--gg-ease),
                border-color var(--gg-duration) var(--gg-ease);
    min-height: 160px;
}

.gg-material-tile:hover {
    box-shadow: var(--gg-shadow-md);
    transform: translateY(-2px);
    border-color: var(--gg-accent);
}

.gg-material-tile img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter var(--gg-duration) var(--gg-ease);
}

.gg-material-tile:hover img {
    filter: grayscale(0%);
}

.gg-material-tile__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gg-sp-2);
    flex: 1;
}

.gg-material-tile__name {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-md);
    font-weight: 700;
    color: var(--gg-dark);
    text-align: center;
    margin: 0;
}

.gg-material-tile__desc {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.gg-material-tile__btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: var(--gg-sp-3);
    padding: .5em 1.2em;
    border: 1.5px solid var(--gg-primary);
    border-radius: var(--gg-radius-md);
    font-size: var(--gg-text-sm);
    font-weight: 600;
    color: var(--gg-primary);
    background: transparent;
    text-decoration: none;
    transition: background var(--gg-duration) var(--gg-ease),
                color var(--gg-duration) var(--gg-ease);
}

.gg-material-tile__btn:hover,
.gg-material-tile__btn:focus {
    background: var(--gg-primary);
    color: var(--gg-white);
}

.gg-material-tile__btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.gg-materials-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gg-text-muted);
    padding: var(--gg-sp-8);
}

/* =========================================================
   24. METAMORFOZY — galeria przed/po
   ========================================================= */

/* Lista metamorfoz — układ wertykalny */
.gg-metamorfozy-list {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-14);
}

/* Jedna metamorfoza: slider | opis */
.gg-metamorfoza-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gg-sp-10);
    align-items: center;
}

.gg-metamorfoza-item__slider {
    display: flex;
    flex-direction: column;
    gap: var(--gg-sp-2);
}

.gg-metamorfoza-item__body {
    padding: var(--gg-sp-2) 0;
}

.gg-metamorfoza-item__title {
    font-size: var(--gg-text-2xl);
    font-weight: 700;
    color: var(--gg-dark);
    margin: 0 0 var(--gg-sp-4);
    line-height: 1.25;
}

.gg-metamorfoza-item__desc {
    color: var(--gg-text-muted);
    line-height: 1.75;
    font-size: var(--gg-text-md);
}

.gg-metamorfoza-item__desc p {
    margin: 0 0 var(--gg-sp-3);
}

.gg-metamorfoza-item__desc p:last-child {
    margin-bottom: 0;
}

.gg-metamorfoza-item__single-photo,
.gg-metamorfoza-item__no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-pale);
}

.gg-metamorfoza-item__single-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gg-metamorfoza-item__no-photo {
    color: var(--gg-text-muted);
    font-size: var(--gg-text-sm);
}

@media (max-width: 768px) {
    .gg-metamorfoza-item {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-5);
    }
}

/* Wariant bez opisu: wyśrodkowany tytuł + slider 800px */
.gg-metamorfoza-item--no-desc {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.gg-metamorfoza-item--no-desc .gg-metamorfoza-item__body {
    order: -1;
    text-align: center;
    padding-bottom: var(--gg-sp-3);
}

.gg-metamorfoza-item--no-desc .gg-metamorfoza-item__title {
    margin-bottom: 0;
}

.gg-metamorfoza-item--no-desc .gg-compare {
    aspect-ratio: 800 / 436;
}

@media (max-width: 860px) {
    .gg-metamorfoza-item--no-desc {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   Before / After image comparison slider
   --------------------------------------------------------- */

.gg-compare {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--gg-radius-xl);
    box-shadow: var(--gg-shadow-md);
    cursor: ew-resize;
    user-select: none;
    touch-action: pan-y;
    background: var(--gg-pale);
}

.gg-compare__layer {
    position: absolute;
    inset: 0;
}

.gg-compare__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.gg-compare__before {
    clip-path: inset(0 calc(100% - var(--gg-cmp-pos, 50%)) 0 0);
    z-index: 2;
}

/* Etykiety PRZED / PO */
.gg-compare__badge {
    position: absolute;
    bottom: var(--gg-sp-2);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25em .75em;
    border-radius: var(--gg-radius-sm);
    pointer-events: none;
    z-index: 3;
}

.gg-compare__badge--przed {
    left: var(--gg-sp-2);
    background: rgba(0,0,0,.5);
    color: var(--gg-white);
}

.gg-compare__badge--po {
    right: var(--gg-sp-2);
    background: var(--gg-primary);
    color: var(--gg-white);
}

/* Linia i przycisk suwaka — przycisk na dole */
.gg-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gg-cmp-pos, 50%);
    transform: translateX(-50%);
    width: 44px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 16px;
    pointer-events: none;
}

.gg-compare__handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gg-white);
    box-shadow: 0 0 5px rgba(0,0,0,.35);
}

.gg-compare__button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.gg-compare__button svg {
    width: 20px;
    height: 20px;
    stroke: var(--gg-white);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Focus ring dla dostępności klawiatury */
.gg-compare__handle:focus-visible {
    outline: 3px solid var(--gg-primary);
    outline-offset: 2px;
}

.gg-metamorfozy-empty {
    text-align: center;
    color: var(--gg-text-muted);
    padding: var(--gg-sp-12);
    background: var(--gg-pale);
    border-radius: var(--gg-radius-xl);
}

/* =========================================================
   25. SUPEREKSPRES — strona
   ========================================================= */

/* Hero strony Superekspres — tekst po lewej, autko po prawej */
.gg-expres-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--gg-sp-6);
}

.gg-expres-hero__text > *:last-child {
    margin-bottom: 0;
}

/* Animowane autko */
.gg-expres-hero__video {
    display: block;
    width: 360px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-md);
    /* Ciemne tło pod filmem — zanim się wczyta, kadr nie prześwieca bielą */
    background: #000;
}

@media (max-width: 768px) {
    .gg-expres-hero {
        grid-template-columns: 1fr;
    }

    .gg-expres-hero__video {
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.gg-expres-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gg-sp-4);
    background: var(--gg-accent-light);
    border: 2px solid var(--gg-accent);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-5) var(--gg-sp-6);
    /* Ramka obejmuje sam tekst, zamiast rozciągać się na całą szerokość
       kontenera — inaczej po bokach zostają puste pasy. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--gg-sp-8);
}

.gg-expres-highlight__icon {
    width: 64px;
    height: 64px;
    background: var(--gg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gg-expres-highlight__icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--gg-white);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-expres-highlight__title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: .25em;
}

.gg-expres-highlight__desc {
    font-size: var(--gg-text-base);
    color: var(--gg-text-muted);
    margin: 0;
    max-width: none;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .gg-expres-highlight {
        flex-direction: column;
        text-align: center;
        padding: var(--gg-sp-4);
    }
}

.gg-expres-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: center;
    gap: var(--gg-sp-4);
    margin-bottom: var(--gg-sp-8);
}

.gg-expres-service-card {
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-top: 4px solid var(--gg-primary);
    border-radius: var(--gg-radius-lg);
    padding: var(--gg-sp-5);
    box-shadow: var(--gg-shadow-sm);
}

.gg-expres-service-card__title {
    font-size: var(--gg-text-lg);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-2);
}

.gg-expres-service-card__price {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 800;
    color: var(--gg-primary);
    margin-bottom: var(--gg-sp-3);
}

.gg-expres-service-card__desc {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: none;
}

/* =========================================================
   26. MOBILNE USŁUGI — strona
   ========================================================= */

.gg-mobile-coverage {
    background: var(--gg-pale);
    border-radius: var(--gg-radius-xl);
    padding: var(--gg-sp-6);
}

.gg-mobile-coverage__title {
    font-size: var(--gg-text-xl);
    color: var(--gg-dark);
    margin-bottom: var(--gg-sp-4);
}

.gg-mobile-coverage__areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gg-sp-3);
    margin-bottom: var(--gg-sp-5);
}

.gg-mobile-coverage__area {
    background: var(--gg-white);
    border: 1px solid var(--gg-border);
    border-radius: var(--gg-radius-md);
    padding: var(--gg-sp-3) var(--gg-sp-4);
}

.gg-mobile-coverage__area-name {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-base);
    font-weight: 700;
    color: var(--gg-dark);
    margin-bottom: .2em;
}

.gg-mobile-coverage__area-detail {
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
}

.gg-mobile-coverage__note {
    font-size: var(--gg-text-base);
    font-weight: 500;
    color: var(--gg-text-muted);
    background: var(--gg-white);
    border: 1px solid var(--gg-border-light);
    border-radius: var(--gg-radius-md);
    padding: var(--gg-sp-3) var(--gg-sp-4);
    margin: 0;
    max-width: none;
    text-align: center;
}

/* =========================================================
   27. DESKTOP NAV HEIGHT — kompensacja dwurzędowego headera
   ========================================================= */

@media (min-width: 769px) {
    :root {
        --gg-header-height: 120px; /* górny rząd 72px + pasek nawigacji ~48px */
    }
}

/* =========================================================
   28. POPUPY PŁATNOŚCI
   ========================================================= */

.gg-payment-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--gg-ease), visibility .25s var(--gg-ease);
    padding: var(--gg-sp-4);
}

.gg-payment-popup.is-open {
    opacity: 1;
    visibility: visible;
}

.gg-payment-popup__box {
    background: var(--gg-white);
    border-radius: var(--gg-radius-lg);
    box-shadow: var(--gg-shadow-lg);
    max-width: 480px;
    width: 100%;
    padding: var(--gg-sp-6);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.gg-payment-popup__close {
    position: absolute;
    top: var(--gg-sp-3);
    right: var(--gg-sp-3);
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gg-pale);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gg-text);
    font-size: 1.25rem;
    line-height: 1;
    transition: background var(--gg-duration) var(--gg-ease);
}

.gg-payment-popup__close:hover {
    background: var(--gg-border-light);
}

.gg-payment-popup__icon {
    width: 56px;
    height: 56px;
    background: var(--gg-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gg-sp-3);
}

.gg-payment-popup__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--gg-primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gg-payment-popup__icon .gg-payment-popup__custom-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Grafika w popupie Raty 0% */
.gg-payment-popup--image .gg-payment-popup__box {
    padding: var(--gg-sp-4);
}

.gg-payment-raty__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--gg-radius-sm);
}

.gg-payment-popup__title {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-xl);
    font-weight: 700;
    color: var(--gg-dark);
    margin: 0 0 var(--gg-sp-3);
}

.gg-payment-popup__body p {
    color: var(--gg-text);
    line-height: 1.65;
    margin: 0 0 var(--gg-sp-2);
}

.gg-payment-popup__body p:last-child {
    margin-bottom: 0;
}

.gg-payment-popup__body strong {
    color: var(--gg-dark);
}

.gg-payment-popup__warning {
    background: var(--gg-pale);
    border-left: 3px solid var(--gg-primary);
    border-radius: 0 var(--gg-radius-sm) var(--gg-radius-sm) 0;
    padding: var(--gg-sp-3);
    margin-top: var(--gg-sp-3);
}

.gg-payment-popup__data {
    background: var(--gg-pale);
    border-left: 3px solid var(--gg-primary);
    border-radius: 0 var(--gg-radius-sm) var(--gg-radius-sm) 0;
    padding: var(--gg-sp-3);
    margin-top: var(--gg-sp-3);
}

.gg-payment-popup__data dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gg-sp-1) var(--gg-sp-3);
}

.gg-payment-popup__data dt {
    font-weight: 600;
    color: var(--gg-text-muted);
    font-size: var(--gg-text-sm);
    white-space: nowrap;
}

.gg-payment-popup__data dd {
    margin: 0;
    font-weight: 600;
    color: var(--gg-dark);
    font-size: var(--gg-text-sm);
    word-break: break-all;
}

/* Numer rachunku — zawsze w jednej linii, bez dzielenia czwórek */
.gg-payment-popup__account {
    grid-column: 1 / -1;
    white-space: nowrap;
    word-break: normal;
    overflow-x: auto;
}

/* Numer infolinii w ostrzeżeniu BLIK — bez łamania */
.gg-payment-popup__nowrap {
    white-space: nowrap;
}

/* Zdanie kluczowe w popupie BLIK — mocno wyeksponowane */
.gg-payment-popup__emphasis {
    font-size: var(--gg-text-md);
    color: var(--gg-accent);
    line-height: 1.55;
}

@media (max-width: 768px) {
    .gg-payment-popup__data dl {
        grid-template-columns: 1fr;
        gap: var(--gg-sp-1);
    }

    .gg-payment-popup__data dt {
        margin-top: var(--gg-sp-2);
    }

    .gg-payment-popup__data dt:first-child {
        margin-top: 0;
    }
}

/* Własna ikonka PNG w kafelku płatności */
.gg-payment-tile__custom-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Kafelki płatności — teraz klikalne */
.gg-payment-tile {
    cursor: pointer;
}

.gg-payment-tile--link {
    text-decoration: none;
}

/* Instrukcja suwaka metamorfoz */
.gg-compare__hint {
    text-align: center;
    font-size: var(--gg-text-sm);
    color: var(--gg-text-muted);
    margin-top: var(--gg-sp-2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gg-sp-1);
}

.gg-compare__hint svg {
    width: 16px;
    height: 16px;
    stroke: var(--gg-text-muted);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.gg-compare__hint--section {
    font-size: var(--gg-text-md);
    margin-top: 0;
    margin-bottom: var(--gg-sp-8);
    color: var(--gg-text-muted);
}