/*
Theme Name: NEOLI HAIR
Theme URI: https://humavit.pl
Author: Adam Marcin Kowalski
Author URI: mailto:adam.kowalski.design@gmail.com
Description: Luksusowy motyw e-commerce stworzony na dedykowane zamówienie dla marki NEOLI Hair. Kontakt do twórcy: +48 797-414-151.
Version: 1.0.0
Text Domain: neoli
*/

/* =============================================================
   NEOLI – Editorial Luxury Redesign
   ============================================================= */

:root {
    /* Brand – Navy */
    --navy-900: #0d1119;
    --navy-800: #161c28;
    --navy-700: #1f2733;
    --navy-600: #2a3240;

    /* Brand – Gold */
    --gold-300: #e0c89a;
    --gold-400: #d4b87f;
    --gold-500: #c9a365;
    --gold-600: #b08d55;
    --gold-700: #91713e;

    /* Neutrals */
    --cream: #faf7f2;
    --pearl: #f5f1ea;
    --bone:  #ece6dc;
    --white: #ffffff;

    /* Text */
    --ink:      #1a1f2a;
    --graphite: #4a4f5a;
    --silver:   #8a8f99;
    --mist:     #b8bcc4;

    /* Lines */
    --line: rgba(22, 28, 40, 0.08);
    --line-strong: rgba(22, 28, 40, 0.16);
    --line-light: rgba(255, 255, 255, 0.14);

    /* Type */
    --font-serif:  'Playfair Display', 'Cormorant Garamond', serif;
    --font-italic: 'Cormorant Garamond', serif;
    --font-sans:   'Montserrat', sans-serif;

    /* Motion */
    --ease-luxe:  cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-w: 1280px;
    --section-y: clamp(80px, 10vw, 140px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--ink);
    line-height: 1.6;
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern"; 
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

.container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 28px;
}
@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

.section-padding { padding: var(--section-y) 0; }

/* =============================================================
   TYPOGRAPHY — jeden krój (Playfair) + balans kolorem
   ============================================================= */
.display {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--navy-800);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}
.display .accent {
    color: var(--gold-600);
    font-weight: 500;
    font-style: normal;
}
.display-light { color: var(--white); }
.display-light .accent-light {
    color: var(--gold-400);
    font-weight: 500;
    font-style: normal;
}

.chapter {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gold-600);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 26px;
}
.chapter-light { color: var(--gold-400); }

.lead {
    font-size: 1.05rem;
    color: var(--graphite);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 32px;
}

.section-header { margin-bottom: 70px; max-width: 720px; text-align: left; } 
.section-header.centered { margin-left: 0; margin-right: 0; text-align: left; } 
.section-header .section-sub {
    color: var(--graphite);
    margin-top: 18px;
    font-size: 1rem;
    max-width: 520px;
}
.section-header.centered .section-sub { margin-left: 0; margin-right: 0; }

/* =============================================================
   BUTTONS — wszystkie złote, czytelny hover (ciemniejszy złoty)
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 38px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background 0.4s var(--ease-luxe), color 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe), transform 0.3s var(--ease-luxe);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}

/* Główny button — pełny złoty */
.btn-primary {
    background: var(--gold-500);
    color: var(--white);
    border-color: var(--gold-500);
}
.btn-primary:hover {
    background: var(--gold-700);
    border-color: var(--gold-700);
    color: var(--white);
}

/* Outline — przezroczysty + złota ramka */
.btn-outline {
    background: transparent;
    color: var(--gold-600);
    border-color: var(--gold-500);
}
.btn-outline:hover {
    background: var(--gold-500);
    color: var(--white);
    border-color: var(--gold-500);
}

/* Alias dla starszych nazw — zachowuje kompatybilność */
.btn-gold {
    background: var(--gold-500);
    color: var(--white);
    border-color: var(--gold-500);
}
.btn-gold:hover {
    background: var(--gold-700);
    border-color: var(--gold-700);
    color: var(--white);
}

.btn-full { width: 100%; }

/* =============================================================
   TOP BAR — ticker przewijający się
   ============================================================= */
.top-bar {
    background: var(--navy-900);
    color: var(--gold-400);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    font-weight: 500;
    border-bottom: 1px solid var(--gold-700);
    overflow: hidden;
    height: 38px;
    display: flex;
    align-items: center;
}

.top-bar-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 28s linear infinite;
    will-change: transform;
}
.ticker-content:hover { animation-play-state: paused; }

.ticker-content span {
    flex-shrink: 0;
    padding-right: 0;
    color: var(--gold-400);
    letter-spacing: 0.24em;
    font-size: 0.72rem;
    font-weight: 500;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 600px) {
    .ticker-content span { font-size: 0.64rem; letter-spacing: 0.14em; }
    .top-bar { height: 34px; }
}


/* =============================================================
   HEADER
   ============================================================= */
.main-header {
    background: rgba(250, 247, 242, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 88px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
}

.menu-toggle {
    display: none;
    width: 32px;
    height: 24px;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}
.menu-toggle span {
    display: block;
    height: 1.5px;
    background: var(--navy-800);
    width: 100%;
    transition: transform 0.3s var(--ease-luxe), opacity 0.3s var(--ease-luxe);
}
.menu-toggle span:nth-child(2) { width: 70%; align-self: flex-end; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); width: 100%; }

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) saturate(100%) invert(9%) sepia(19%) saturate(2371%) hue-rotate(186deg) brightness(97%) contrast(97%);
}

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; gap: 36px; }
.main-nav a {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold-500);
    transition: width 0.4s var(--ease-luxe);
}
.main-nav a:hover, .main-nav a.active { color: var(--gold-600); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-800);
    transition: background 0.3s ease, color 0.3s ease;
    position: relative;
}
.icon-btn:hover { background: var(--pearl); color: var(--gold-600); }

.cart-icon { position: relative; }
.cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--gold-500);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .menu-toggle { display: flex; }
    .main-nav { display: none; }
    
    .header-container {
        position: relative; 
    }
    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* =============================================================
   MOBILE MENU — display:none gwarantuje niewidoczność
   ============================================================= */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: var(--navy-900);
    z-index: 9998;
    flex-direction: column;
    justify-content: center;
    padding: 100px 28px 60px;
    color: var(--cream);
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s var(--ease-luxe), opacity 0.5s ease;
}
.mobile-menu.is-animating {
    display: flex;
}
.mobile-menu.is-open {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}


/* Duży, elegancki krzyżyk zamykający menu mobilne */
.mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    color: var(--mist); /* Luksusowy jasnoszary */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s var(--ease-spring), color 0.3s ease;
    z-index: 9999;
}
.mobile-menu-close:hover {
    color: var(--gold-400); /* Podświetla się na złoto po kliknięciu/najechaniu */
    transform: rotate(90deg) scale(1.1); /* Płynny obrót */
}



.mobile-menu-inner { display: flex; flex-direction: column; height: 100%; gap: 60px; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 24px; }
.mobile-menu a {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--cream);
    transition: color 0.3s ease;
}
.mobile-menu a:hover { color: var(--gold-400); }

.mobile-menu-foot {
    margin-top: auto;
    border-top: 1px solid var(--line-light);
    padding-top: 30px;
    color: var(--mist);
    font-size: 0.9rem;
    line-height: 1.6;
}
.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    color: var(--gold-400);
    text-transform: uppercase;
    margin-bottom: 8px;
}








/* =============================================================
   HERO — prosta wersja oryginalna
   ============================================================= */
.hero-section { position: relative; background: var(--cream); }
.hero-slider { position: relative; }
.hero-slider .swiper-slide { position: relative; }

.hero-slider img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: 80% center;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
}

.hero-subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-600);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hero-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--navy-800);
    line-height: 1.12;
    letter-spacing: -0.005em;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    max-width: 520px;
    margin-bottom: 22px;
}

.hero-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--navy-800);
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: 32px;
    opacity: 0.85;
}


/* =============================================================
   HERO PAGINATION (Kółka na banerze)
   ============================================================= */
.hero-pagination {
    position: absolute;
    bottom: 40px !important; /* Odstęp od dolnej krawędzi banera */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.hero-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2px solid var(--white);
    opacity: 0.6;
    border-radius: 50%;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.3s var(--ease-luxe);
}

.hero-pagination .swiper-pagination-bullet:hover {
    opacity: 0.9;
}

/* Aktywne kółko (wypełnione na biało) */
.hero-pagination .swiper-pagination-bullet-active {
    background: var(--white);
    opacity: 1;
    transform: scale(1.1); /* Delikatnie się powiększa */
}



@media (max-width: 768px) {
    .hero-slider { min-height: 85vh; position: relative; }
    .hero-slider img { height: 85vh; object-position: center bottom; }
    .hero-content {
        top: 8%;
        transform: none;
        text-align: center;
        padding: 0 20px;
    }
    .hero-subtitle { font-size: 0.75rem; }
    .hero-title { font-size: 1.9rem; margin: 0 auto 16px; max-width: 100%; }
    .hero-text { margin: 0 auto 24px; font-size: 0.92rem; }
	
	.hero-pagination { bottom: 25px !important; gap: 10px; }
    .hero-pagination .swiper-pagination-bullet { width: 12px; height: 12px; }
}

/* =============================================================
   TRUST BADGES — Hover Tiles & Mobile Grid (FontAwesome)
   ============================================================= */
.trust-badges {
    background: var(--white);
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.badges-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Sprawia, że wszystkie podświetlane kafelki będą miały równą wysokość */
    gap: 10px;
    flex-wrap: wrap;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--graphite);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s var(--ease-spring);
    padding: 12px 18px; /* Poszerzone paddingi przygotowują obszar dla kafelka */
    border-radius: 12px; /* Eleganckie, miękkie rogi */
    border: 1px solid transparent; /* Ukryta ramka, żeby tekst nie skakał przy hoverze */
    text-decoration: none; 
}

/* EFEKT: Podświetlony Kafelek po najechaniu myszką */
.badge-item:hover {
    transform: translateY(-4px); 
    color: var(--navy-800);
    background: var(--cream); /* Pojawia się luksusowe tło */
    border-color: rgba(201, 163, 101, 0.2); /* Subtelna złota ramka */
    box-shadow: 0 12px 24px -8px rgba(22, 28, 40, 0.08); /* Miękki cień 3D */
}

.badge-item i {
    font-size: 22px; 
    color: var(--gold-500); 
    flex-shrink: 0;
    transition: transform 0.55s var(--ease-spring);
}

.badge-item:hover i {
    transform: scale(1.1) rotate(-5deg); 
}

/* Wygląd powiększonej ikony FontAwesome wewnątrz luksusowego Modala */
.modal-big-icon i {
    font-size: 60px;
    color: var(--gold-500);
}

/* =============================================================
   MOBILE: Ładnie układające się kafelki (Siatka / Grid)
   ============================================================= */
@media (max-width: 768px) {
    .badges-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dwie kolumny obok siebie */
        gap: 12px;
    }
    
    .badge-item {
        flex-direction: column; /* Ikonka ląduje nad tekstem */
        text-align: center;
        padding: 16px 12px;
        background: var(--cream); /* Na mobile od razu widzimy kafelki */
        border: 1px solid var(--line);
        border-radius: 10px;
        align-items: center;
        justify-content: center;
    }
    
    .badge-item:hover {
        background: var(--white);
        border-color: var(--gold-500);
    }

    .badge-item i {
        font-size: 26px; /* Odrobinę większa ikona na telefonie */
        margin-bottom: 4px;
    }

    /* Piąty, nieparzysty element rozciąga się na całą szerokość, by idealnie domknąć siatkę */
    .badge-item:nth-child(5) {
        grid-column: 1 / -1; 
        flex-direction: row; /* Tekst wraca obok ikonki, bo kafelek jest szeroki */
        padding: 16px 20px;
    }
    .badge-item:nth-child(5) i {
        margin-bottom: 0;
    }
}

/* Responsywność dla tej sekcji na telefony */
@media (max-width: 768px) {
    .badges-container {
        justify-content: center;
        gap: 15px;
    }
    .badge-item {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile - premium grid 2 kolumny */
@media (max-width: 768px) {
    .trust-strip { padding: 24px 0; }
    .trust-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .trust-list li {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 22px 14px;
        font-size: 0.74rem;
        background: var(--cream);
        border: 1px solid var(--line);
        border-radius: 10px;
        min-width: 0;
        line-height: 1.4;
    }
    .trust-list li:not(:last-child)::after { display: none; }
    .trust-list li:hover {
        background: var(--white);
        border-color: var(--gold-500);
        transform: translateY(-4px);
    }
    .trust-list svg { width: 26px; height: 26px; }
    /* Ostatni element rozciąga się na całą szerokość gdy jest 5 elementów */
    .trust-list li:nth-child(5):last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 14px;
    }
}

/* =============================================================
   ABOUT
   ============================================================= */
.about-section { background: var(--cream); }

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.about-content { padding-right: 20px; }
.about-content .display { margin-bottom: 28px; }

.pull-quote {
    border-left: 1px solid var(--gold-500);
    padding: 8px 0 8px 32px;
    margin: 36px 0;
    font-family: var(--font-sans); /* Czysty, czytelny krój */
    font-style: normal;
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--navy-800);
    line-height: 1.6;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quote-mark {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 3.5rem;
    color: var(--gold-500);
    line-height: 0.5;
    margin-bottom: 14px;
    display: block;
}
.quote-text { display: block; }

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 36px 0 44px;
    border-top: 1px solid var(--line);
    padding-top: 28px;
}
.benefits-list li {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 1rem;
    color: var(--navy-800);
    font-weight: 500;
}
.benefits-list .bullet {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--gold-500);
    letter-spacing: 0.02em;
    font-weight: 500;
    line-height: 1;
    width: 56px;
    flex-shrink: 0;
}
.benefits-list .benefit-text { flex: 1; }

.about-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1.05;
    /* Usunięto paddingi i gradientowe tło, żeby zdjęcie wylało się na krawędzie */
    border-radius: 4px;
    border: 1px solid var(--line);
    box-shadow:
        0 1px 0 var(--white) inset,
        0 30px 60px -25px rgba(22, 28, 40, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.image-frame::before, .image-frame::after {
    content: "";
    position: absolute;
    background: var(--gold-500);
}
.image-frame::before {
    top: 18px; left: 18px; right: 18px; height: 1px;
    opacity: 0.3;
}
.image-frame::after {
    bottom: 18px; left: 18px; right: 18px; height: 1px;
    opacity: 0.3;
}

.frame-label {
    position: absolute;
    top: 32px;
    left: 32px;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--gold-600);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
}

.image-frame img,
.product-hero-img {
    width: 100%; /* Wypełnia całą szerokość */
    height: 100%; /* Wypełnia całą wysokość */
    object-fit: cover; /* Upewnia się, że obraz idealnie wypełnia ramkę bez pustych miejsc */
    /* filter: drop-shadow(0 30px 40px rgba(22, 28, 40, 0.22));  <- Usuwamy, niepotrzebny dla pełnych zdjęć */
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.6s var(--ease-spring), opacity 0.35s ease;
}

/* Hover: subtelne powiększenie podczas podmiany zdjęcia */
.product-hero-swap:hover .product-hero-img {
    transform: scale(1.05); /* Proste powiększenie, bez lewitowania i obracania, wygląda lepiej z pełnym obrazem */
}

/* Ripple/burst przy hover — pseudoelement rozbłysk */
.product-hero-swap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 60%, rgba(201,163,101,0.22) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.6s var(--ease-spring);
    pointer-events: none;
    z-index: 0;
}
.product-hero-swap:hover::after {
    opacity: 1;
    transform: scale(1.05);
}
.image-frame:hover img { transform: scale(1.04) translateY(-6px); }


.about-stat {
    position: absolute;
    bottom: -30px;
    left: 0;
    background: var(--gold-500);
    color: var(--white);
    padding: 26px 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 24px 50px -20px rgba(201, 163, 101, 0.45);
    z-index: 3;
    /* Dodane właściwości dla przycisku */
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    font-family: inherit;
    transition: transform 0.4s var(--ease-spring), background 0.4s ease, box-shadow 0.4s ease;
}

.about-stat:hover {
    transform: translateY(-8px) scale(1.02); /* Przycisk unosi się po najechaniu */
    background: var(--gold-600);
    box-shadow: 0 35px 60px -15px rgba(201, 163, 101, 0.6);
}
.stat-num {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 500;
    color: var(--white);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-num span {
    font-size: 1rem;
    font-family: var(--font-sans);
    margin-left: 4px;
    color: var(--white);
    opacity: 0.85;
    font-weight: 400;
}
.stat-label {
    font-size: 0.78rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--white);
    opacity: 0.92;
}

@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    .about-content { padding-right: 0; }
    .pull-quote {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .benefits-list li { justify-content: center; }
    .about-stat { left: 50%; transform: translateX(-50%); bottom: -36px; }
}

/* =============================================================
   SCIENCE — granat + portret + animowane liczniki
   ============================================================= */
.science-section {
    background: var(--navy-900);
    color: var(--cream);
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
}
.science-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(201,163,101,0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 85%, rgba(201,163,101,0.07) 0%, transparent 55%);
    pointer-events: none;
}

.science-marquee {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: flex;
    gap: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--gold-400);
    opacity: 0.06;
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    letter-spacing: 0.04em;
}
.science-marquee span {
    flex-shrink: 0;
    animation: marquee 36s linear infinite;
    padding-right: 30px;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

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

.science-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: center;
    padding-top: 60px;
}

.science-text .display { margin-bottom: 30px; max-width: 560px; }
.science-text p {
    color: var(--bone);
    font-size: 1.02rem;
    line-height: 1.8;
    max-width: 500px;
    margin-bottom: 50px;
    opacity: 0.85;
}

.science-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    padding: 20px 0;
}
.science-stat {
    text-align: center;
    transition: transform 0.4s var(--ease-luxe);
}
.science-stat:hover { transform: translateY(-6px); }

.stat-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-500);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    background: radial-gradient(circle, rgba(201,163,101,0.16) 0%, rgba(201,163,101,0.02) 100%);
    position: relative;
    transition: all 0.5s var(--ease-luxe);
}
.stat-circle::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid var(--gold-500);
    opacity: 0.35;
    transition: opacity 0.5s var(--ease-luxe);
}
.science-stat:hover .stat-circle {
    border-color: var(--gold-400);
    background: radial-gradient(circle, rgba(201,163,101,0.26) 0%, rgba(201,163,101,0.05) 100%);
    box-shadow: 0 0 50px -8px rgba(201, 163, 101, 0.5);
}
.science-stat:hover .stat-circle::before { opacity: 0.7; }

.science-stat .num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    color: var(--gold-400);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.science-stat .counter {
    display: inline-block;
    min-width: 1ch;
}
.science-stat .num small {
    font-size: 0.55em;
    color: var(--cream);
    opacity: 0.7;
    margin-left: 2px;
    font-weight: 400;
}
.science-stat .lab {
    display: block;
    font-size: 0.78rem;
    color: var(--mist);
    line-height: 1.5;
    letter-spacing: 0.04em;
}

/* PORTRAIT zamiast słoika — premium ramka */
.science-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.science-portrait {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 60px 80px -30px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 163, 101, 0.25);
}
.science-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-luxe);
}
.science-portrait:hover img { transform: scale(1.04); }
.science-portrait::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(201, 163, 101, 0.35);
    z-index: 2;
    pointer-events: none;
}
.science-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(13, 17, 25, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 992px) {
    .science-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    .science-text p { margin-left: auto; margin-right: auto; }
    .science-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .stat-circle { width: 130px; height: 130px; }
    .science-portrait { max-width: 400px; }
}
@media (max-width: 600px) {
    .science-stats { grid-template-columns: 1fr; gap: 26px; }
    .stat-circle { width: 150px; height: 150px; }
}


/* =============================================================
   PRODUCTS (Dynamic, Full-Bleed, Luxury Cards)
   ============================================================= */
.products-section { background: var(--pearl); }

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: center; /* Pozwala powiększyć Bestseller na środku */
}

.product-card {
    background: var(--white);
    padding: 0 0 40px 0; /* Brak paddingu na górze = zdjęcie wylewa się na krawędzie */
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 16px; /* Eleganckie, miękkie zaokrąglenie całej karty */
    position: relative;
    transition: all 0.6s var(--ease-luxe);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.04);
    overflow: hidden; /* Przycina wylane zdjęcie do okrągłych rogów karty */
}

/* BESTSELLER - Wyróżnienie środkowej karty (efekt skali i złota ramka) */
.product-card.best-seller {
    transform: scale(1.05);
    border-color: rgba(201, 163, 101, 0.4);
    box-shadow: 0 20px 50px -10px rgba(201, 163, 101, 0.15);
    z-index: 2;
}

/* Luksusowa, złota ramka zapalająca się na hoverze */
.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 16px; /* Musi zgadzać się z promieniem karty */
    transition: border-color 0.6s var(--ease-luxe);
    pointer-events: none;
    z-index: 10;
}

.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 40px 80px -20px rgba(22, 28, 40, 0.15);
    border-color: transparent;
}

.product-card.best-seller:hover {
    transform: scale(1.05) translateY(-12px);
    box-shadow: 0 40px 80px -20px rgba(201, 163, 101, 0.25);
}

.product-card:hover::before {
    border-color: var(--gold-500); 
}

/* Pływające etykiety NAłożone na zdjęcie */
.product-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 30px; /* Zaokrąglona pigułka */
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gold-600);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 3;
}

.badge-discount {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--gold-500);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 30px; /* Zaokrąglona pigułka */
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 6px 16px rgba(201, 163, 101, 0.4);
}

/* Pełnowymiarowe zdjęcie (Full Bleed) */
.product-img {
    width: 100%;
    height: 380px; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* Zmienione na 0, by pasek przylegał do zdjęcia */
    position: relative;
    overflow: hidden;
    background: #fdfcf9; 
}
.product-img::after { display: none; }

/* Subtelne poświaty za słoikami */
.product-card:nth-child(1) .product-img::before { 
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 250px; height: 250px; background: radial-gradient(circle, rgba(22, 28, 40, 0.08) 0%, transparent 70%); z-index: 0; pointer-events: none;
}
.product-card:nth-child(2) .product-img::before { 
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px; background: radial-gradient(circle, rgba(201, 163, 101, 0.25) 0%, transparent 70%); z-index: 0; pointer-events: none;
}
.product-card:nth-child(3) .product-img::before { 
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 250px; height: 250px; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%); z-index: 0; pointer-events: none;
}

.product-img img.product-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Domyślnie wypełnia kadr całkowicie (idealne dla postaci) */
    transition: transform 1s var(--ease-spring), opacity 0.4s ease;
    position: relative;
    z-index: 1;
}

/* Po najechaniu myszką, kiedy pojawia się słoik */
.product-card:hover .product-img img.product-hero-img {
    transform: scale(1.08); /* Dynamiczny zoom */
    object-fit: contain; /* Zamienia się w 'contain', by słoik nie został ucięty po bokach */
    width: 80%; /* Dajemy słoikowi eleganckie 'światło' z lewej i prawej strony */
}

/* Padding wewnętrzny dla tekstów - wykluczamy tytuł, bo on jest na całą szerokość */
.product-subtitle, .product-desc, .product-foot {
    padding-left: 35px;
    padding-right: 35px;
    width: 100%;
}

/* Etykieta z nazwą produktu na całą szerokość kafelka */
.product-title {
    background: var(--navy-900); /* Ciemny granatowy pasek */
    color: var(--white); /* Śnieżnobiały tekst */
    width: 100%; /* Rozciągnięcie od krawędzi do krawędzi */
    padding: 16px 20px; /* Wewnętrzne światło paska */
    margin-bottom: 24px; /* Odstęp od paska do reszty tekstu (podtytułu) */
    font-family: var(--font-sans);
    font-size: 1.15rem; /* Nieco mniejszy, zgrabny font */
    font-weight: 600;
    letter-spacing: 0.15em; /* Ekskluzywne rozstrzelenie liter */
    text-transform: uppercase; /* Wielkie litery dla efektu etykiety */
}

.product-subtitle {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--silver);
    margin-bottom: 16px;
}

.product-desc {
    margin-bottom: 30px;
}

.product-desc strong {
    display: block;
    color: var(--gold-500);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-family: var(--font-sans);
    text-transform: uppercase;
}

.product-foot { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    align-items: center; 
    margin-top: auto; 
}

/* Cena z WooCommerce — przekreślona + aktualna obok siebie */
.product-foot del,
.product-foot ins {
    display: inline;
}
.product-foot del {
    color: #a0aabf !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    margin-right: 6px;
    display: inline !important;
}
.product-foot ins {
    text-decoration: none !important;
    background: transparent !important;
    color: var(--gold-600) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    display: inline !important;
}
.product-foot .woocommerce-Price-amount bdi { font-family: var(--font-serif); }
.product-foot span.price,
.product-foot .woocommerce-Price-amount,
.product-foot > span { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important; 
}

.price {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--navy-900);
    letter-spacing: 0;
}

@media (max-width: 992px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
    .product-card.best-seller { transform: none; z-index: 1; }
    .product-card.best-seller:hover { transform: translateY(-12px); }
}
@media (max-width: 700px) {
    .products-grid { grid-template-columns: 1fr; }
    .product-img { height: 320px; }
}



/* =============================================================
   RITUAL — premium kafelki + animowane liczniki
   ============================================================= */
.ritual-section {
    background: var(--cream);
    color: var(--ink);
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
}

/* Delikatne tło */
.ritual-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201,163,101,0.08) 0%, transparent 65%);
    pointer-events: none;
}

/* NOWE: Subtelna, złota linia oddzielająca sekcje na samej górze */
.ritual-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-500) 50%, transparent 100%);
    opacity: 0.35;
}

/* Ta klasa trzyma wszystko w trzech eleganckich kolumnach */
.ritual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

/* Luksusowe karty */
.ritual-step {
    text-align: center;
    padding: 50px 40px;
    position: relative;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.6s var(--ease-luxe);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);
}

.ritual-step:hover {
    transform: translateY(-10px);
    border-color: rgba(201, 163, 101, 0.3);
    box-shadow: 0 35px 60px -20px rgba(22, 28, 40, 0.12);
}

/* Subtelny złoty akcent na górze karty po najechaniu */
.ritual-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-400) 0%, var(--gold-600) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.ritual-step:hover::before { opacity: 1; }

.ritual-step .step-line {
    display: none;
}

/* Złote, gradientowe numery */
.ritual-step .step-num {
    font-family: var(--font-serif);
    font-size: 5.5rem;
    line-height: 1.25; 
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-bottom: 0px; /* Zmniejszono margines rekompensując wyższy line-height */
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding: 0 12px; 
}

.ritual-step .step-unit {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--silver);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* Klasyczny, elegancki nagłówek */
.ritual-step h3 {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--navy-900);
    background: transparent;
    padding: 0;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
    text-transform: none;
}

.ritual-step p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--graphite);
    line-height: 1.75;
    margin: 0;
    flex-grow: 1;
}

/* Responsywność */
@media (max-width: 992px) {
    .ritual-grid { grid-template-columns: 1fr; gap: 18px; }
    .ritual-step { padding: 40px 30px; }
}

/* =============================================================
   REVIEWS — premium karty z avatarami
   ============================================================= */
.reviews-section {
    background: var(--white);
    position: relative;
}
.reviews-section::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0.4;
}

.reviews-slider-wrap {
    position: relative;
}

.reviews-slider {
    overflow: hidden;
    padding: 14px 4px 14px;
}

.review-card {
    background: var(--cream);
    padding: 48px 38px 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: all 0.5s var(--ease-luxe);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 360px;
    position: relative;
}
.review-card::before {
    content: "\201C";
    position: absolute;
    top: 18px;
    right: 28px;
    font-family: var(--font-serif);
    font-size: 5rem;
    color: var(--gold-500);
    line-height: 1;
    opacity: 0.15;
    pointer-events: none;
}
.review-card:hover {
    border-color: var(--gold-500);
    background: var(--white);
    transform: translateY(-8px);
    box-shadow: 0 35px 60px -25px rgba(22, 28, 40, 0.18);
}
.review-card:hover::before { opacity: 0.3; }

.review-stars {
    color: var(--gold-500);
    letter-spacing: 5px;
    margin-bottom: 22px;
    font-size: 1rem;
}

.review-card blockquote {
    font-family: var(--font-sans); /* Czysty, czytelny krój */
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem; /* Montserrat jest naturalnie szerszy */
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 30px;
    flex-grow: 1;
    position: relative;
}

.review-card figcaption {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(201, 163, 101, 0.5);
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.review-card figcaption strong {
    font-size: 0.95rem;
    color: var(--navy-800);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.review-card figcaption span {
    font-size: 0.74rem;
    color: var(--silver);
    letter-spacing: 0.06em;
}

/* Slider controls */
.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}
.reviews-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--navy-800);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-luxe);
    cursor: pointer;
}
.reviews-arrow:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--white);
}

.reviews-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reviews-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}
.reviews-pagination .swiper-pagination-bullet-active {
    background: var(--gold-500);
    width: 28px;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .review-card { padding: 38px 28px 32px; min-height: 320px; }
    .reviews-controls { gap: 18px; }
    .reviews-arrow { width: 44px; height: 44px; }
}

/* =============================================================
   NEWSLETTER — UKRYTE (klasa .is-hidden), gotowe do przywrócenia
   ============================================================= */
.newsletter-section.is-hidden { display: none; }

.newsletter-section {
    background: var(--navy-800);
    color: var(--cream);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}
.newsletter-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 90% 50%, rgba(201,163,101,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 50%, rgba(201,163,101,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.newsletter-text .display { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0; }

.newsletter-form {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line-light);
    align-items: stretch;
}
.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--cream);
    padding: 18px 0;
    font-size: 1rem;
    font-family: var(--font-sans);
    outline: none;
    letter-spacing: 0.02em;
}
.newsletter-form input::placeholder { color: var(--mist); opacity: 0.7; }
.newsletter-form .btn { padding-left: 28px; padding-right: 28px; flex-shrink: 0; }

@media (max-width: 768px) {
    .newsletter-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
}

/* =========================================
   FOOTER (Granatowy Premium)
   ========================================= */
.main-footer {
    background-color: var(--navy-800); /* Zmiana na ustalony granat */
    color: var(--white);
    padding-top: 80px;
    border-top: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(201, 163, 101, 0.2); /* Złota linia */
}

.footer-brand .footer-logo {
    height: 45px;
    margin-bottom: 25px;
    /* Zamiana czarnego logo na złote/kremowe by pasowało na granacie */
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(1476%) hue-rotate(345deg) brightness(101%) contrast(92%);
    opacity: 1;
}

.footer-brand p {
    color: #a3a8b5; /* Bardzo elegancki jasnoszary */
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 320px;
}

.footer-socials { display: flex; gap: 15px; }

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(201, 163, 101, 0.4);
    border-radius: 50%; /* Okrągłe ikonki */
    color: var(--gold-500);
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background-color: var(--gold-500);
    color: var(--navy-800);
    transform: translateY(-3px);
}

.main-footer h4 {
    color: var(--gold-500);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.main-footer ul { display: flex; flex-direction: column; gap: 15px; }

.main-footer ul li a {
    color: #a3a8b5;
    font-size: 0.95rem;
    transition: color 0.3s, padding-left 0.3s;
    display: inline-block;
}

.main-footer ul li a:hover {
    color: var(--gold-500);
    padding-left: 5px; /* Delikatnie przesuwa tekst przy najechaniu */
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px;
    font-size: 0.85rem;
    color: #707582;
    border-top: none;
}

@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* =============================================================
   FEATURES SECTION — piktogramy w złotych kółkach
   ============================================================= */
.features-section {
    background: var(--white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    margin-top: 70px;
}

.feature-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: transform 0.55s var(--ease-spring);
}
.feature-item:hover { transform: translateY(-10px); }

.feature-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid var(--gold-400); /* Zewnętrzny, cieniutki ring */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.55s var(--ease-spring);
    flex-shrink: 0;
}
.feature-icon::before {
    content: "";
    position: absolute;
    inset: 6px; /* Wewnętrzny ring tworzący odstęp */
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    background: var(--cream); /* Kremowe wypełnienie środka */
    transition: all 0.4s ease;
}
.feature-item:hover .feature-icon {
    border-color: var(--gold-500);
    transform: translateY(-8px);
}
.feature-item:hover .feature-icon::before {
    background: var(--pearl);
    border-color: var(--gold-500);
    box-shadow: 0 10px 30px -10px rgba(201,163,101,0.4);
}

.feature-icon img {
    width: 75px; 
    height: 75px; 
    object-fit: contain;
    /* złoty kolor dla SVG */
    filter: invert(65%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(95%);
    transition: transform 0.55s var(--ease-spring), filter 0.4s ease;
}
.feature-item:hover .feature-icon img {
    transform: scale(1.15) rotate(-5deg);
    filter: invert(65%) sepia(60%) saturate(700%) hue-rotate(5deg) brightness(100%);
}

.feature-item h4 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--navy-800);
    text-transform: uppercase;
    margin: 0;
}
.feature-item p {
    font-size: 0.88rem;
    color: var(--graphite);
    line-height: 1.6;
    margin: 0;
    max-width: 180px;
}

@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .feature-item:nth-child(4), .feature-item:nth-child(5) { grid-column: auto; }
}

/* =============================================================
   MOBILE: Cechy jako Kafelki (stylizowano na wzór Trust Badges)
   ============================================================= */
@media (max-width: 768px) {
    .features-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* Zgrabniejsza, zwarta siatka */
    }
    
    .feature-item {
        background: var(--cream); /* Tło kafelka */
        border: 1px solid var(--line); /* Subtelna ramka */
        border-radius: 12px;
        padding: 24px 12px;
        gap: 12px;
    }
    
    .feature-item:hover {
        background: var(--white);
        border-color: var(--gold-500);
        transform: translateY(-4px); /* Płynne uniesienie */
    }
    
    /* Na mobile zmniejszamy złote kółko wokół ikony */
    .feature-icon { 
        width: 70px; 
        height: 70px; 
    } 
    
    /* Na mobile dostosowujemy wielkość ikony wewnątrz kółka */
    .feature-icon img { 
        width: 34px; 
        height: 34px; 
    } 
    
    .feature-item h4 { 
        font-size: 0.68rem; /* Dopasowany tekst by się zmieścił w kafelku */
    } 
    
    .feature-item p { 
        font-size: 0.82rem; 
    }
    
    /* Ostatni kafelek domyka siatkę na pełnej szerokości */
    .feature-item:last-child { 
        grid-column: 1 / -1; 
    }
}



/* =============================================================
   FEATURE MODAL (SPLIT DESIGN)
   ============================================================= */
.feature-modal-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--white);
    border-radius: 4px;
    max-height: 90vh; /* NOWE: Blokuje wysokość modala do 90% ekranu */
    overflow-y: auto; /* NOWE: Pozwala przewijać treść pionowo */
    overflow-x: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s var(--ease-out);
    box-shadow: 0 40px 80px rgba(13, 17, 25, 0.4);
    will-change: transform;
}

/* Subtelny, złoty pasek przewijania wewnątrz okienka */
.feature-modal-box::-webkit-scrollbar {
    width: 6px;
}
.feature-modal-box::-webkit-scrollbar-track {
    background: transparent;
}
.feature-modal-box::-webkit-scrollbar-thumb {
    background: var(--gold-400);
    border-radius: 10px;
}
#featureModal.active .feature-modal-box {
    transform: scale(1) translateY(0);
}

.feature-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-800);
    z-index: 10;
    cursor: pointer;
    transition: all 0.4s var(--ease-luxe);
}
.feature-modal-close:hover {
    background: var(--gold-500);
    color: var(--white);
    border-color: var(--gold-500);
    transform: rotate(90deg);
}

.feature-modal-split {
    display: flex;
    min-height: 420px;
}
.feature-modal-left {
    flex: 1;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px;
}
/* Luksusowy złoty ozdobnik w tle lewej strony */
.feature-modal-left::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(201,163,101, 0.35);
    border-radius: 4px;
    pointer-events: none;
}
.modal-big-icon {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -15px rgba(201,163,101,0.25);
    position: relative;
    z-index: 2;
}
.modal-big-icon img {
    width: 65px;
    height: 65px;
    filter: invert(65%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(95%);
}

.feature-modal-right {
    flex: 1.4;
    padding: 60px 60px 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.feature-modal-right .chapter {
    margin-bottom: 12px;
}
.feature-modal-right .display {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 24px;
}
.gold-divider {
    width: 60px;
    height: 2px;
    background: var(--gold-500);
    margin-bottom: 24px;
}
.feature-modal-right p {
    font-size: 1.05rem;
    color: var(--graphite);
    line-height: 1.8;
}

@media(max-width: 768px) {
    .feature-modal-split { flex-direction: column; }
    .feature-modal-left { padding: 40px 0 30px; } 
    .feature-modal-right { padding: 30px 24px 40px; text-align: center; align-items: center; }
}





/* =============================================================
   BRAND SECTION — O Marce (Luksusowy styl Editorial Overlap)
   ============================================================= */
.brand-section {
    padding: 120px 0;
    background-color: var(--cream);
    position: relative;
    overflow: hidden;
}

.brand-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.brand-content {
    flex: 1;
    max-width: 480px;
    background-color: var(--white);
    padding: 55px 60px;
    position: relative;
    z-index: 2; /* Boks tekstowy nad zdjęciem */
    margin-right: -60px; /* Magia overlapu: boks przesuwa się w prawo na zdjęcie */
    border: 1px solid rgba(201, 163, 101, 0.3); /* Subtelna złota ramka */
    box-shadow: 0 25px 50px rgba(0,0,0,0.06); /* Miękki luksusowy cień */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-content .chapter {
    margin-bottom: 15px;
}

.brand-content .display {
    font-size: 2.6rem;
    margin-bottom: 24px;
    line-height: 1.15;
}

.brand-content p {
    font-size: 0.96rem;
    color: var(--graphite);
    line-height: 1.75;
    margin-bottom: 20px;
}

.brand-content p:last-of-type {
    margin-bottom: 30px;
}

.brand-content .btn {
    align-self: flex-start;
}

.brand-image {
    flex: 1.5; /* Dajemy zdjęciu więcej miejsca, by swobodnie się rozłożyło */
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.brand-image img {
    width: 100%;
    max-width: 750px;
    height: auto;
    display: block;
    border: 1px solid rgba(201, 163, 101, 0.2);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); /* Cień pod samym zdjęciem */
    transition: transform 0.8s var(--ease-spring);
}

.brand-section:hover .brand-image img {
    transform: scale(1.03); /* Delikatne powiększenie zdjęcia przy najechaniu */
}

/* Responsywność dla nachodzącego bloku (Tablety i telefony) */
@media (max-width: 992px) {
    .brand-container {
        flex-direction: column;
        text-align: center;
    }
    .brand-section {
        padding: 80px 0;
    }
    .brand-content {
        max-width: 100%;
        margin-right: 0;
        margin-bottom: -50px; /* Na telefonie boks nachodzi na zdjęcie z góry na dół */
        padding: 50px 30px;
        align-items: center;
    }
    .brand-content .btn {
        align-self: center; /* Guzik na środek na mobile */
    }
    .brand-image {
        width: 100%;
        justify-content: center;
    }
    .brand-image img {
        max-width: 100%;
    }
}

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lightbox-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 25, 0.96);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px; /* NOWE: Odstęp od krawędzi ekranu telefonu */
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
}
.lightbox-modal.active { opacity: 1; }
.lightbox-content {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    transform: scale(0.85) translateY(20px);
    transition: transform 0.6s var(--ease-spring);
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}
.lightbox-modal.active .lightbox-content { transform: scale(1) translateY(0); }

.lightbox-close {
    position: fixed;
    top: 28px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--line-light);
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-luxe);
    z-index: 10000;
}
.lightbox-close:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--navy-900);
    transform: rotate(90deg);
}

/* =============================================================
   REVEAL ANIMATIONS
   ============================================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-luxe), transform 0.9s var(--ease-luxe);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Fallback: strona produktu WooCommerce — wymuś widoczność po 800ms */
body.single-product .reveal,
body.woocommerce-page .reveal {
    animation: revealFallback 0.1s 0.8s forwards;
}
@keyframes revealFallback {
    to { opacity: 1; transform: translateY(0); }
}
.reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal:nth-child(4) { transition-delay: 0.36s; }
.reveal:nth-child(5) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .science-visual img, .science-marquee span { animation: none; }
    html { scroll-behavior: auto; }
}

/* =============================================================
   SCROLLBAR
   ============================================================= */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
    background: var(--gold-500);
    border-radius: 0;
    border: 3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }

/* Selection */
::selection { background: var(--gold-500); color: var(--white); }












/* =============================================================
   PAGE (Standardowe podstrony - Regulamin, Kontakt itp.)
   ============================================================= */
.breadcrumb-wrapper {
    background: var(--cream);
    border-bottom: 1px solid rgba(22, 28, 40, 0.06);
    padding: 12px 0;
}

.neoli-breadcrumbs {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--silver);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.neoli-breadcrumbs a {
    color: var(--graphite);
    transition: color 0.3s ease;
}

.neoli-breadcrumbs a:hover {
    color: var(--gold-600);
}

.neoli-breadcrumbs .sep {
    color: var(--mist);
    font-weight: 300;
}

.neoli-breadcrumbs .current {
    color: var(--gold-500);
}

.page-top-bar {
    background: var(--cream);
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--line);
}

.page-left-title {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--navy-900);
    margin: 0;
    letter-spacing: -0.01em;
}

.page-content {
    background: var(--white);
    padding-top: 40px !important;
}

.page-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* =============================================================
   EDITORIAL CONTENT (Stylizacja tekstu z edytora Gutenberg)
   ============================================================= */
.editorial-content {
    color: var(--graphite);
    font-size: 1.05rem;
    line-height: 1.8;
}

.editorial-content h2, 
.editorial-content h3 {
    font-family: var(--font-serif);
    color: var(--navy-800);
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 500;
}
.editorial-content h2 { font-size: 2.2rem; }
.editorial-content h3 { font-size: 1.6rem; }

.editorial-content p {
    margin-bottom: 24px;
}

.editorial-content ul {
    margin: 0 0 30px 20px;
}
.editorial-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
}
.editorial-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}

.editorial-content a {
    color: var(--gold-600);
    border-bottom: 1px solid rgba(201,163,101,0.3);
    transition: all 0.3s ease;
}
.editorial-content a:hover {
    color: var(--navy-800);
    border-bottom-color: var(--navy-800);
}

/* =============================================================
   TABELE (Polityka prywatności, regulaminy)
   ============================================================= */
.neoli-table-wrapper {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 4px;
    border: 1px solid rgba(22, 28, 40, 0.08);
}

.editorial-content table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    min-width: 600px;
}

.editorial-content th {
    background: var(--cream);
    color: var(--navy-900);
    font-weight: 500;
    padding: 18px 24px;
    border-bottom: 2px solid rgba(201,163,101,0.2);
    white-space: nowrap; 
}

.editorial-content td {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(22, 28, 40, 0.05);
    color: var(--graphite);
    vertical-align: top;
    line-height: 1.6;
}
.woocommerce-order-received .editorial-content td,
.woocommerce-order-received .editorial-content th,
.woocommerce-order-received .editorial-content table {
    font-family: var(--font-sans) !important;
    color: var(--navy-900);
}

.editorial-content tr:last-child td {
    border-bottom: none;
}

.editorial-content tr:hover td {
    background: rgba(201,163,101,0.03);
}

/* =============================================================
   WERSJA MOBILNA DLA STRON W TYM PLIKU
   ============================================================= */
@media (max-width: 768px) {
    .breadcrumb-wrapper { padding: 10px 0; }
    .neoli-breadcrumbs { font-size: 0.55rem; gap: 8px; }
    .page-top-bar { padding: 12px 0 16px; } 
    .page-left-title { font-size: 2rem; }
    .page-content { padding-top: 24px !important; }
    .editorial-content h2 { font-size: 1.8rem; }
}






/* =============================================================
   BADANIA PAGE — premium research page styles
   ============================================================= */

/* HERO */
.badania-hero {
    background: var(--cream);
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
}
.badania-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(201,163,101,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.badania-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.badania-hero-text .chapter { margin-bottom: 20px; }
.badania-hero-text .display { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-bottom: 24px; }
.badania-hero-text .lead { margin-bottom: 36px; }
.badania-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.badania-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Cynatine logo badge */
.cynatine-badge {
    background: var(--navy-900); /* Wracamy do granatu */
    border: 1px solid rgba(201,163,101,0.3); /* Subtelna złota ramka */
    border-radius: 8px;
    padding: 24px 40px; /* Zwiększony padding, żeby pomieścić duże logo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px -15px rgba(13,17,25,0.5); /* Mocny, luksusowy cień */
    transition: transform 0.4s var(--ease-luxe), box-shadow 0.4s ease;
    align-self: center;
}
.cynatine-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px rgba(13,17,25,0.6);
}
.cynatine-badge img {
    height: 110px; /* BARDZO DUŻE, będzie świetnie czytelne */
    width: auto;
    display: block;
    /* Sprawdzony złoty filtr NEOLI */
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(1476%) hue-rotate(345deg) brightness(101%) contrast(92%);
}


/* Produkt z hover swap */
.badania-product-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201,163,101,0.25);
    box-shadow: 0 30px 60px -20px rgba(22,28,40,0.2);
    max-width: 440px;
    width: 100%;
}
.badania-product-wrap .product-hero-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    display: block;
    transition: opacity 0.25s ease, transform 0.8s var(--ease-spring);
    filter: none;
    cursor: pointer;
}
.badania-product-wrap:hover .product-hero-img {
    transform: scale(1.03);
}
.badania-product-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13,17,25,0.75);
    color: var(--gold-400);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.badania-product-wrap:hover .badania-product-hint { opacity: 1; }

/* ZŁOTY BAR */
.badania-gold-bar {
    background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-800) 100%);
    border-top: 1px solid var(--gold-700);
    border-bottom: 1px solid var(--gold-700);
    padding: 32px 0;
}
.gold-bar-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.gold-bar-icon {
    color: var(--gold-500);
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(201,163,101,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gold-bar-text { flex: 1; min-width: 240px; }
.gold-bar-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-500);
    font-weight: 600;
    margin-bottom: 8px;
}
.gold-bar-text p {
    font-size: 0.92rem;
    color: var(--bone);
    margin: 0;
    line-height: 1.65;
}
.gold-bar-stat {
    text-align: center;
    flex-shrink: 0;
    padding-left: 30px;
    border-left: 1px solid rgba(201,163,101,0.2);
}
.gold-bar-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 500;
    color: var(--gold-400);
    line-height: 1;
    letter-spacing: -0.02em;
}
.gold-bar-unit {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-top: 4px;
    display: block;
}

/* KARTY WYNIKÓW */
.badania-results { background: var(--white); }
.badania-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 60px;
}

.badania-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all 0.55s var(--ease-luxe);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.badania-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.badania-card:hover {
    transform: translateY(-10px);
    border-color: rgba(201,163,101,0.4);
    box-shadow: 0 30px 60px -20px rgba(22,28,40,0.15);
}
.badania-card:hover::before { opacity: 1; }

.badania-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.badania-card-num {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--gold-500);
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.badania-card:hover .badania-card-num { opacity: 1; }

.badania-card-icon {
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--gold-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    transition: all 0.4s var(--ease-luxe);
    flex-shrink: 0;
}
.badania-card-icon svg { width: 22px; height: 22px; }
.badania-card:hover .badania-card-icon {
    background: var(--gold-500);
    color: var(--white);
    transform: rotate(-5deg) scale(1.1);
}

.badania-card h3 {
    font-family: var(--font-serif);
    font-size: 1.75rem; /* Zwiększony rozmiar dla lepszej czytelności */
    font-weight: 600; /* Mocniejsze pogrubienie - font staje się wyrazisty */
    color: var(--navy-900); /* Najciemniejszy granat dla maksymalnego kontrastu z tłem */
    margin: 0;
    letter-spacing: -0.01em; /* Subtelne ściśnięcie dodające elegancji */
}
.badania-card > p {
    font-size: 0.92rem;
    color: var(--graphite);
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* Paski wyników */
.badania-bars { display: flex; flex-direction: column; gap: 16px; }
.bbar { display: flex; flex-direction: column; gap: 7px; }
.bbar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
}
.bbar-val { font-weight: 600; }
.bbar-gold { color: var(--gold-600); }
.bbar-navy { color: var(--navy-700); }
.bbar-track {
    height: 6px;
    background: var(--pearl);
    border-radius: 4px;
    overflow: hidden;
}
.bbar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.bbar-fill.animated { }
.bbar-fill-gold { background: linear-gradient(90deg, var(--gold-700), var(--gold-400)); }
.bbar-fill-navy { background: linear-gradient(90deg, var(--navy-800), var(--navy-600)); }

.badania-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-600);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
    transition: gap 0.3s ease, color 0.3s ease;
}
.badania-card-more:hover { gap: 14px; color: var(--navy-800); }
.badania-card-more svg { transition: transform 0.3s ease; }
.badania-card-more:hover svg { transform: translateX(4px); }

/* TECHNOLOGIA */
.badania-tech {
    background: var(--pearl);
    padding: var(--section-y) 0;
}
.badania-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start !important; 
}
.badania-tech-text .display { font-size: clamp(2rem, 3.5vw, 3rem); margin: 18px 0 24px; }
.badania-tech-text > p { color: var(--graphite); line-height: 1.75; margin-bottom: 36px; }

.badania-tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.badania-tech-list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    font-size: 0.94rem;
    color: var(--graphite);
    line-height: 1.65;
}
.btech-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--gold-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    margin-top: 1px;
    transition: all 0.4s var(--ease-luxe);
}
.badania-tech-list li:hover .btech-icon {
    background: var(--gold-500);
    color: var(--white);
    transform: scale(1.1);
}

/* Stat cards */
.badania-tech-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}
.bstat-card {
    border-radius: 8px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s ease;
}
.bstat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(22,28,40,0.18);
}
.bstat-dark {
    background: var(--navy-900);
    border: 1px solid rgba(201,163,101,0.2);
    grid-column: 1 / -1;
}
.bstat-dark .bstat-num { color: var(--gold-400); }
.bstat-dark .bstat-label { color: var(--mist); }
.bstat-dark .bstat-icon {
    /* Usuwamy białe tło i ramki */
    background: transparent; 
    border: none;
    padding: 0;
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}
.bstat-dark .bstat-icon img {
    height: 85px; /* Duże, czytelne logo */
    width: auto;
    margin: 0;
    opacity: 1;
    display: block;
    /* Sprawdzony złoty filtr NEOLI */
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(1476%) hue-rotate(345deg) brightness(101%) contrast(92%);
}

.bstat-gold {
    background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
    border: 1px solid var(--gold-400);
}
.bstat-gold .bstat-num { color: var(--white); }
.bstat-gold .bstat-label { color: rgba(255,255,255,0.8); }

.bstat-outline {
    background: var(--white);
    border: 1px solid var(--line);
}
.bstat-outline .bstat-num { color: var(--navy-800); }
.bstat-outline .bstat-label { color: var(--graphite); }

.bstat-num {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.bstat-num span {
    font-size: 1rem;
    font-family: var(--font-sans);
    margin-left: 3px;
    font-weight: 400;
    opacity: 0.75;
}
.bstat-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

/* TABELA */
.badania-table-section { background: var(--white); }

/* CTA */
.badania-cta {
    background: var(--navy-900);
    padding: 90px 0;
    border-top: 1px solid var(--gold-700);
    position: relative;
    overflow: hidden;
}
.badania-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(201,163,101,0.14) 0%, transparent 55%);
    pointer-events: none;
}
.badania-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.badania-cta-text .chapter-light { margin-bottom: 16px; }
.badania-cta-text .display { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 16px; }
.badania-cta-text p {
    color: var(--mist);
    font-size: 0.95rem;
    margin: 0;
}
.badania-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}
.badania-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-400);
    border: 1px solid rgba(201,163,101,0.4);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.4s var(--ease-luxe);
}
.badania-btn-pdf:hover {
    background: rgba(201,163,101,0.1);
    border-color: var(--gold-500);
    color: var(--gold-300);
}

/* MODAL BADAŃ */
.badania-modal-box {
    max-width: 700px;
    width: 90vw;
}

/* Responsive */
@media (max-width: 992px) {
    .badania-hero-inner { grid-template-columns: 1fr; gap: 50px; }
    .badania-cards { grid-template-columns: 1fr; }
    .badania-tech-grid { grid-template-columns: 1fr; gap: 50px; }
    .badania-tech-stats { grid-template-columns: repeat(2, 1fr); }
    .bstat-dark { grid-column: 1 / -1; }
    .badania-cta-inner { flex-direction: column; text-align: center; }
    .badania-cta-actions { align-items: center; }
}

@media (max-width: 600px) {
    .badania-hero { padding: 50px 0 60px; }
    .gold-bar-inner { flex-direction: column; text-align: center; }
    .gold-bar-stat { border-left: none; border-top: 1px solid rgba(201,163,101,0.2); padding-left: 0; padding-top: 20px; width: 100%; }
    .badania-hero-actions { flex-direction: column; }
    .badania-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
}



/* =============================================================
   SKLAD PAGE
   ============================================================= */
.sklad-hero { background:var(--cream); padding:70px 0; position:relative; overflow:hidden; } /* Dodano dolny padding */
.sklad-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 0%,rgba(201,163,101,.09) 0%,transparent 55%); pointer-events:none; }
.sklad-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; } /* Zmieniono wyrównanie na środek (center) */
.sklad-hero-text .chapter { margin-bottom:18px; }
.sklad-hero-text .display { font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:20px; }
.sklad-hero-text .lead { margin-bottom:0; max-width:460px; }

.sklad-selector { display:flex; flex-direction:column; gap:12px; } /* Usunięto sztuczne dociskanie do dołu */
.sklad-tab { display:flex; flex-direction:column; gap:4px; text-align:left; padding:20px 28px; background:var(--white); border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:all .4s var(--ease-luxe); position:relative; overflow:hidden; }
.sklad-tab::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .3s ease; }
.sklad-tab:hover, .sklad-tab.active { border-color:rgba(201,163,101,.5); box-shadow:0 10px 30px -10px rgba(22,28,40,.12); transform:translateX(4px); }
.sklad-tab.active::before { background:var(--gold-500); }
/* Pogrubione, wyostrzone fonty zakładek */
.sklad-tab-label { 
    font-family: var(--font-serif); 
    font-size: 1.4rem; /* Zwiększony rozmiar */
    font-weight: 600; /* Znacznie grubszy font */
    color: var(--navy-900); /* Głęboki granat dla maksymalnego kontrastu */
    line-height: 1.1; 
    letter-spacing: -0.01em;
}
.sklad-tab.active .sklad-tab-label { color: var(--gold-600); }
.sklad-tab-sub { 
    font-size: 0.8rem; 
    color: var(--graphite); /* Ciemniejszy szary dla lepszej czytelności */
    letter-spacing: 0.04em; 
    font-weight: 500;
}

/* Nowy kolor dla etykiety "Dla wszystkich" */
.compare-badge-all { background: var(--graphite); color: var(--white); }

/* Kursor dla klikalnych kafelków na dole */
.sklad-usage-card { cursor: pointer; }

.sklad-main { background:var(--white); }
.sklad-product { display:block; }
.sklad-hidden { display:none !important; }

.sklad-product-header { display:grid; grid-template-columns:1fr auto; gap:70px; align-items:start; margin-bottom:60px; padding-top:20px; }
.sklad-product-info .chapter { margin-bottom:16px; }
.sklad-product-info .display { font-size:clamp(2rem,3.5vw,3rem); margin-bottom:20px; }
.sklad-product-info > p { color:var(--graphite); font-size:1rem; line-height:1.75; max-width:500px; margin-bottom:28px; }
.sklad-product-meta { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:.82rem; color:var(--graphite); padding-top:24px; border-top:1px solid var(--line); }
.sklad-product-meta strong { color:var(--navy-800); }

.sklad-product-visual { flex-shrink:0; }
.sklad-bottle { position:relative; width:220px; cursor:pointer; }
.sklad-bottle .product-hero-img { width:100%; height:auto; max-width:100%; max-height:none; display:block; transition:opacity .22s ease,transform .7s var(--ease-spring); filter:drop-shadow(0 30px 40px rgba(22,28,40,.2)); }
.sklad-bottle:hover .product-hero-img { transform:scale(1.05) translateY(-8px); }
.sklad-bottle-hint { display:block; text-align:center; margin-top:12px; font-size:.7rem; color:var(--silver); letter-spacing:.12em; text-transform:uppercase; }

.sklad-table-wrap { margin-bottom:70px; }
.sklad-row-highlight td { background:rgba(201,163,101,.05); }
.sklad-row-highlight td:first-child { border-left:3px solid var(--gold-500); }
.sklad-dose { color:var(--gold-600); font-size:1.05em; }
.sklad-rws { 
    color: var(--navy-800); 
    font-weight: 600; /* Zmniejszamy delikatnie grubość, bo Montserrat jest naturalnie grubszy */
    font-family: var(--font-sans); /* Zmiana fontu na czysty i czytelny */
    font-size: 0.95em; /* Lekka korekta wielkości, żeby pasowała do reszty tabeli */
}
.sklad-footnote { font-size:.78rem; color:var(--silver); padding:14px 24px; margin:0; background:var(--cream); border-top:1px solid var(--line); }

.sklad-charts { margin-top:20px; }
.sklad-bars-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin:50px 0 60px; }
.sklad-bar-item { background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px 28px; transition:all .4s var(--ease-luxe); }
.sklad-bar-item:hover { border-color:rgba(201,163,101,.4); box-shadow:0 12px 30px -10px rgba(22,28,40,.1); transform:translateY(-4px); }
.sklad-bar-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; }
.sklad-bar-name { display:flex; flex-direction:column; gap:4px; }
.sklad-bar-name strong { font-size:.95rem; color:var(--navy-800); font-weight:600; }
.sklad-bar-name small { font-size:.75rem; color:var(--silver); letter-spacing:.04em; }
.sklad-bar-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-bottom:6px; }
.sklad-dot-gold { background:var(--gold-500); }
.sklad-dot-navy { background:var(--navy-700); }
.sklad-bar-mg { font-family:var(--font-serif); font-size:1.3rem; font-weight:500; color:var(--gold-600); white-space:nowrap; flex-shrink:0; }
.sklad-bar-track { height:8px; background:var(--pearl); border-radius:4px; overflow:hidden; margin-bottom:12px; }
.sklad-bar-fill { height:100%; border-radius:4px; width:0; transition:width 1.4s cubic-bezier(.25,.46,.45,.94); }
.sklad-fill-gold { background:linear-gradient(90deg,var(--gold-700),var(--gold-400)); }
.sklad-fill-navy { background:linear-gradient(90deg,var(--navy-800),var(--navy-600)); }
.sklad-bar-footer { display:flex; justify-content:space-between; font-size:.75rem; color:var(--silver); letter-spacing:.04em; }
.sklad-bar-pct { font-weight:600; color:var(--graphite); }

.sklad-donut-wrap { display:flex; align-items:center; gap:70px; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:50px 60px; margin-bottom:20px; }
.sklad-donut { position:relative; width:200px; height:200px; flex-shrink:0; }
.sklad-donut-svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut-arc { transition:stroke-dasharray 1.5s cubic-bezier(.25,.46,.45,.94); }
.sklad-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-num { font-family:var(--font-serif); font-size:2.2rem; font-weight:500; color:var(--gold-600); line-height:1; letter-spacing:-.02em; }
.donut-unit { font-size:.75rem; font-family:var(--font-sans); color:var(--silver); letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }
.donut-label { font-size:.7rem; color:var(--graphite); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
.sklad-donut-legend { flex:1; display:flex; flex-direction:column; gap:16px; }
.donut-legend-item { display:flex; align-items:center; gap:14px; transition:transform .3s ease; }
.donut-legend-item:hover { transform:translateX(4px); }
.donut-legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.donut-legend-item div { display:flex; flex-direction:column; gap:2px; }
.donut-legend-item strong { font-size:.9rem; color:var(--navy-800); font-weight:600; }
.donut-legend-item span { font-size:.78rem; color:var(--silver); letter-spacing:.04em; }
.donut-legend-note { display:flex; align-items:flex-start; gap:8px; font-size:.75rem; color:var(--mist); line-height:1.5; border-top:1px solid var(--line); padding-top:16px; margin-top:4px; }
.donut-legend-note svg { flex-shrink:0; margin-top:1px; color:var(--gold-500); }

.sklad-compare { background:var(--pearl); }
.compare-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; margin-top:50px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--white); }
.compare-grid-2 { grid-template-columns:1fr 1fr 1fr; }
.compare-head { background:var(--navy-900); padding:28px 20px; display:flex; flex-direction:column; gap:6px; }
.compare-head-blank { background:var(--navy-900); }
.compare-product-name { font-family:var(--font-serif); font-size:1rem; font-weight:500; color:var(--white); }
.compare-product-sub { font-size:.72rem; color:var(--mist); letter-spacing:.06em; }
.compare-badge { display:inline-block; margin-top:6px; background:var(--gold-500); color:var(--white); font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:3px; align-self:flex-start; }
.compare-badge-alt { background:var(--navy-600); }
.compare-label { padding:16px 20px; font-size:.84rem; font-weight:600; color:var(--navy-800); display:flex; align-items:center; border-top:1px solid var(--line); border-right:1px solid var(--line); background:var(--cream); }
.compare-cell { 
    padding: 16px 20px; 
    border-top: 1px solid var(--line); 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    justify-content: center;
}

/* Wypychamy każdy guzik w komórce do samego dołu */
.compare-cell .btn {
    margin-top: auto;
}
.compare-cell-forte { background:rgba(201,163,101,.04); border-right:1px solid rgba(201,163,101,.15); }
.compare-cell-none { background:var(--white); }
.compare-val { font-size:.88rem; color:var(--navy-800); font-weight:500; }
.compare-none { color:var(--mist); font-size:1.2rem; }
.compare-mini-bar { height:4px; background:var(--pearl); border-radius:2px; overflow:hidden; }
.compare-mini-fill { height:100%; border-radius:2px; }

.sklad-usage { background:var(--white); padding:var(--section-y) 0; border-top:1px solid var(--line); }
.sklad-usage-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.sklad-usage-card { text-align:center; padding:36px 24px; background:var(--cream); border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column; align-items:center; gap:16px; transition:all .45s var(--ease-luxe); }
.sklad-usage-card:hover { border-color:rgba(201,163,101,.4); background:var(--white); transform:translateY(-8px); box-shadow:0 20px 40px -15px rgba(22,28,40,.12); }
.sklad-usage-icon { width:56px; height:56px; border:1.5px solid var(--gold-500); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-500); transition:all .4s var(--ease-luxe); }
.sklad-usage-card:hover .sklad-usage-icon { background:var(--gold-500); color:var(--white); }
.sklad-usage-card h4 { font-family:var(--font-serif); font-size:1.05rem; font-weight:500; color:var(--navy-800); margin:0; }
.sklad-usage-card p { font-size:.88rem; color:var(--graphite); line-height:1.65; margin:0; }

/* Plik style.css, około linii 708 - 726 */

@media (max-width: 992px) {
    .sklad-hero-inner { grid-template-columns:1fr; gap:40px; }
    
    /* DODANE: Modyfikacja selektora dla mobile - ułożenie w 1 kolumnę */
    .sklad-selector {
        flex-direction: column;
        width: 100%; /* Rozciągnięcie na pełną szerokość */
    }

    .sklad-tab {
        width: 100%; /* Upewnienie się, że sam przycisk też zajmuje 100% szerokości */
    }
    
    .sklad-product-header { grid-template-columns:1fr; }
    .sklad-bottle { width:180px; margin:0 auto; }
    .sklad-bars-grid { grid-template-columns:1fr; }
    .sklad-donut-wrap { flex-direction:column; gap:40px; padding:40px 30px; text-align:center; }
    .compare-grid { grid-template-columns:repeat(4,1fr); font-size:.78rem; }
    .compare-grid.compare-grid-2 { grid-template-columns:repeat(3,1fr) !important; }
    .sklad-usage-inner { grid-template-columns:repeat(2,1fr); }
}
}
@media (max-width:640px) {
	.compare-grid { grid-template-columns: 110px repeat(3, 190px); }
	.compare-grid.compare-grid-2 { grid-template-columns: 110px repeat(2, 190px) !important; }
    .compare-label { font-size:.68rem; padding:12px 8px; }
    .compare-cell { padding:12px 8px; font-size:.78rem; }
    .compare-head { padding:16px 8px; }
    .compare-product-name { font-size:.82rem; }
    .sklad-usage-inner { grid-template-columns:1fr; }
}



/* =============================================================
   PAGE (Standardowe podstrony - Regulamin, Kontakt itp.)
   ============================================================= */
.breadcrumb-wrapper {
    background: var(--cream);
    border-bottom: 1px solid rgba(22, 28, 40, 0.06);
    padding: 12px 0;
}

.neoli-breadcrumbs {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--silver);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.neoli-breadcrumbs a {
    color: var(--graphite);
    transition: color 0.3s ease;
}

.neoli-breadcrumbs a:hover {
    color: var(--gold-600);
}

.neoli-breadcrumbs .sep {
    color: var(--mist);
    font-weight: 300;
}

.neoli-breadcrumbs .current {
    color: var(--gold-500);
}

.page-top-bar {
    background: var(--cream);
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--line);
}

.page-left-title {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--navy-900);
    margin: 0;
    letter-spacing: -0.01em;
}

.page-content {
    background: var(--white);
    padding-top: 40px !important;
}

.page-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* =============================================================
   EDITORIAL CONTENT (Stylizacja tekstu z edytora Gutenberg)
   ============================================================= */
.editorial-content {
    color: var(--graphite);
    font-size: 1.05rem;
    line-height: 1.8;
}

.editorial-content h2, 
.editorial-content h3 {
    font-family: var(--font-serif);
    color: var(--navy-800);
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 500;
}
.editorial-content h2 { font-size: 2.2rem; }
.editorial-content h3 { font-size: 1.6rem; }

.editorial-content p {
    margin-bottom: 24px;
}

.editorial-content ul {
    margin: 0 0 30px 20px;
}
.editorial-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
}
.editorial-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}

.editorial-content a {
    color: var(--gold-600);
    border-bottom: 1px solid rgba(201,163,101,0.3);
    transition: all 0.3s ease;
}
.editorial-content a:hover {
    color: var(--navy-800);
    border-bottom-color: var(--navy-800);
}

/* =============================================================
   TABELE (Polityka prywatności, regulaminy)
   ============================================================= */

.editorial-content tr:last-child td {
    border-bottom: none;
}

.editorial-content tr:hover td {
    background: rgba(201,163,101,0.03);
}

/* =============================================================
   WERSJA MOBILNA DLA STRON W TYM PLIKU
   ============================================================= */
@media (max-width: 768px) {
    .breadcrumb-wrapper { padding: 10px 0; }
    .neoli-breadcrumbs { font-size: 0.55rem; gap: 8px; }
    .page-top-bar { padding: 12px 0 16px; } 
    .page-left-title { font-size: 2rem; }
    .page-content { padding-top: 24px !important; }
    .editorial-content h2 { font-size: 1.8rem; }
}






/* =============================================================
   BADANIA PAGE — premium research page styles
   ============================================================= */

/* HERO */
.badania-hero {
    background: var(--cream);
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
}
.badania-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(201,163,101,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.badania-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.badania-hero-text .chapter { margin-bottom: 20px; }
.badania-hero-text .display { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-bottom: 24px; }
.badania-hero-text .lead { margin-bottom: 36px; }
.badania-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.badania-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Cynatine logo badge */
.cynatine-badge {
    background: var(--navy-900); /* Wracamy do granatu */
    border: 1px solid rgba(201,163,101,0.3); /* Subtelna złota ramka */
    border-radius: 8px;
    padding: 24px 40px; /* Zwiększony padding, żeby pomieścić duże logo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px -15px rgba(13,17,25,0.5); /* Mocny, luksusowy cień */
    transition: transform 0.4s var(--ease-luxe), box-shadow 0.4s ease;
    align-self: center;
}
.cynatine-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px rgba(13,17,25,0.6);
}
.cynatine-badge img {
    height: 110px; /* BARDZO DUŻE, będzie świetnie czytelne */
    width: auto;
    display: block;
    /* Sprawdzony złoty filtr NEOLI */
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(1476%) hue-rotate(345deg) brightness(101%) contrast(92%);
}


/* Produkt z hover swap */
.badania-product-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201,163,101,0.25);
    box-shadow: 0 30px 60px -20px rgba(22,28,40,0.2);
    max-width: 440px;
    width: 100%;
}
.badania-product-wrap .product-hero-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    display: block;
    transition: opacity 0.25s ease, transform 0.8s var(--ease-spring);
    filter: none;
    cursor: pointer;
}
.badania-product-wrap:hover .product-hero-img {
    transform: scale(1.03);
}
.badania-product-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13,17,25,0.75);
    color: var(--gold-400);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.badania-product-wrap:hover .badania-product-hint { opacity: 1; }

/* ZŁOTY BAR */
.badania-gold-bar {
    background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-800) 100%);
    border-top: 1px solid var(--gold-700);
    border-bottom: 1px solid var(--gold-700);
    padding: 32px 0;
}
.gold-bar-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.gold-bar-icon {
    color: var(--gold-500);
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(201,163,101,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gold-bar-text { flex: 1; min-width: 240px; }
.gold-bar-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-500);
    font-weight: 600;
    margin-bottom: 8px;
}
.gold-bar-text p {
    font-size: 0.92rem;
    color: var(--bone);
    margin: 0;
    line-height: 1.65;
}
.gold-bar-stat {
    text-align: center;
    flex-shrink: 0;
    padding-left: 30px;
    border-left: 1px solid rgba(201,163,101,0.2);
}
.gold-bar-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 500;
    color: var(--gold-400);
    line-height: 1;
    letter-spacing: -0.02em;
}
.gold-bar-unit {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-top: 4px;
    display: block;
}

/* KARTY WYNIKÓW */
.badania-results { background: var(--white); }
.badania-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 60px;
}

.badania-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all 0.55s var(--ease-luxe);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.badania-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.badania-card:hover {
    transform: translateY(-10px);
    border-color: rgba(201,163,101,0.4);
    box-shadow: 0 30px 60px -20px rgba(22,28,40,0.15);
}
.badania-card:hover::before { opacity: 1; }

.badania-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.badania-card-num {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--gold-500);
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.badania-card:hover .badania-card-num { opacity: 1; }

.badania-card-icon {
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--gold-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    transition: all 0.4s var(--ease-luxe);
    flex-shrink: 0;
}
.badania-card-icon svg { width: 22px; height: 22px; }
.badania-card:hover .badania-card-icon {
    background: var(--gold-500);
    color: var(--white);
    transform: rotate(-5deg) scale(1.1);
}

.badania-card h3 {
    font-family: var(--font-serif);
    font-size: 1.75rem; /* Zwiększony rozmiar dla lepszej czytelności */
    font-weight: 600; /* Mocniejsze pogrubienie - font staje się wyrazisty */
    color: var(--navy-900); /* Najciemniejszy granat dla maksymalnego kontrastu z tłem */
    margin: 0;
    letter-spacing: -0.01em; /* Subtelne ściśnięcie dodające elegancji */
}
.badania-card > p {
    font-size: 0.92rem;
    color: var(--graphite);
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* Paski wyników */
.badania-bars { display: flex; flex-direction: column; gap: 16px; }
.bbar { display: flex; flex-direction: column; gap: 7px; }
.bbar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
}
.bbar-val { font-weight: 600; }
.bbar-gold { color: var(--gold-600); }
.bbar-navy { color: var(--navy-700); }
.bbar-track {
    height: 6px;
    background: var(--pearl);
    border-radius: 4px;
    overflow: hidden;
}
.bbar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.bbar-fill.animated { }
.bbar-fill-gold { background: linear-gradient(90deg, var(--gold-700), var(--gold-400)); }
.bbar-fill-navy { background: linear-gradient(90deg, var(--navy-800), var(--navy-600)); }

.badania-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-600);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
    transition: gap 0.3s ease, color 0.3s ease;
}
.badania-card-more:hover { gap: 14px; color: var(--navy-800); }
.badania-card-more svg { transition: transform 0.3s ease; }
.badania-card-more:hover svg { transform: translateX(4px); }

/* TECHNOLOGIA */
.badania-tech {
    background: var(--pearl);
    padding: var(--section-y) 0;
}
.badania-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start !important; 
}
.badania-tech-text .display { font-size: clamp(2rem, 3.5vw, 3rem); margin: 18px 0 24px; }
.badania-tech-text > p { color: var(--graphite); line-height: 1.75; margin-bottom: 36px; }

.badania-tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.badania-tech-list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    font-size: 0.94rem;
    color: var(--graphite);
    line-height: 1.65;
}
.btech-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--gold-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    margin-top: 1px;
    transition: all 0.4s var(--ease-luxe);
}
.badania-tech-list li:hover .btech-icon {
    background: var(--gold-500);
    color: var(--white);
    transform: scale(1.1);
}

/* Stat cards */
.badania-tech-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}
.bstat-card {
    border-radius: 8px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.5s var(--ease-luxe), box-shadow 0.5s ease;
}
.bstat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(22,28,40,0.18);
}
.bstat-dark {
    background: var(--navy-900);
    border: 1px solid rgba(201,163,101,0.2);
    grid-column: 1 / -1;
}
.bstat-dark .bstat-num { color: var(--gold-400); }
.bstat-dark .bstat-label { color: var(--mist); }
.bstat-dark .bstat-icon {
    /* Usuwamy białe tło i ramki */
    background: transparent; 
    border: none;
    padding: 0;
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}
.bstat-dark .bstat-icon img {
    height: 85px; /* Duże, czytelne logo */
    width: auto;
    margin: 0;
    opacity: 1;
    display: block;
    /* Sprawdzony złoty filtr NEOLI */
    filter: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(1476%) hue-rotate(345deg) brightness(101%) contrast(92%);
}

.bstat-gold {
    background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
    border: 1px solid var(--gold-400);
}
.bstat-gold .bstat-num { color: var(--white); }
.bstat-gold .bstat-label { color: rgba(255,255,255,0.8); }

.bstat-outline {
    background: var(--white);
    border: 1px solid var(--line);
}
.bstat-outline .bstat-num { color: var(--navy-800); }
.bstat-outline .bstat-label { color: var(--graphite); }

.bstat-num {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.bstat-num span {
    font-size: 1rem;
    font-family: var(--font-sans);
    margin-left: 3px;
    font-weight: 400;
    opacity: 0.75;
}
.bstat-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

/* TABELA */
.badania-table-section { background: var(--white); }

/* CTA */
.badania-cta {
    background: var(--navy-900);
    padding: 90px 0;
    border-top: 1px solid var(--gold-700);
    position: relative;
    overflow: hidden;
}
.badania-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(201,163,101,0.14) 0%, transparent 55%);
    pointer-events: none;
}
.badania-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.badania-cta-text .chapter-light { margin-bottom: 16px; }
.badania-cta-text .display { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 16px; }
.badania-cta-text p {
    color: var(--mist);
    font-size: 0.95rem;
    margin: 0;
}
.badania-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}
.badania-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-400);
    border: 1px solid rgba(201,163,101,0.4);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.4s var(--ease-luxe);
}
.badania-btn-pdf:hover {
    background: rgba(201,163,101,0.1);
    border-color: var(--gold-500);
    color: var(--gold-300);
}

/* MODAL BADAŃ */
.badania-modal-box {
    max-width: 700px;
    width: 90vw;
}

/* Responsive */
@media (max-width: 992px) {
    .badania-hero-inner { grid-template-columns: 1fr; gap: 50px; }
    .badania-cards { grid-template-columns: 1fr; }
    .badania-tech-grid { grid-template-columns: 1fr; gap: 50px; }
    .badania-tech-stats { grid-template-columns: repeat(2, 1fr); }
    .bstat-dark { grid-column: 1 / -1; }
    .badania-cta-inner { flex-direction: column; text-align: center; }
    .badania-cta-actions { align-items: center; }
}

@media (max-width: 600px) {
    .badania-hero { padding: 50px 0 60px; }
    .gold-bar-inner { flex-direction: column; text-align: center; }
    .gold-bar-stat { border-left: none; border-top: 1px solid rgba(201,163,101,0.2); padding-left: 0; padding-top: 20px; width: 100%; }
    .badania-hero-actions { flex-direction: column; }
    .badania-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
}



/* =============================================================
   SKLAD PAGE
   ============================================================= */
.sklad-hero { background:var(--cream); padding:70px 0; position:relative; overflow:hidden; } /* Dodano dolny padding */
.sklad-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 0%,rgba(201,163,101,.09) 0%,transparent 55%); pointer-events:none; }
.sklad-hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; } /* Zmieniono wyrównanie na środek (center) */
.sklad-hero-text .chapter { margin-bottom:18px; }
.sklad-hero-text .display { font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:20px; }
.sklad-hero-text .lead { margin-bottom:0; max-width:460px; }

.sklad-selector { display:flex; flex-direction:column; gap:12px; } /* Usunięto sztuczne dociskanie do dołu */
.sklad-tab { display:flex; flex-direction:column; gap:4px; text-align:left; padding:20px 28px; background:var(--white); border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:all .4s var(--ease-luxe); position:relative; overflow:hidden; }
.sklad-tab::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .3s ease; }
.sklad-tab:hover, .sklad-tab.active { border-color:rgba(201,163,101,.5); box-shadow:0 10px 30px -10px rgba(22,28,40,.12); transform:translateX(4px); }
.sklad-tab.active::before { background:var(--gold-500); }
/* Pogrubione, wyostrzone fonty zakładek */
.sklad-tab-label { 
    font-family: var(--font-serif); 
    font-size: 1.4rem; /* Zwiększony rozmiar */
    font-weight: 600; /* Znacznie grubszy font */
    color: var(--navy-900); /* Głęboki granat dla maksymalnego kontrastu */
    line-height: 1.1; 
    letter-spacing: -0.01em;
}
.sklad-tab.active .sklad-tab-label { color: var(--gold-600); }
.sklad-tab-sub { 
    font-size: 0.8rem; 
    color: var(--graphite); /* Ciemniejszy szary dla lepszej czytelności */
    letter-spacing: 0.04em; 
    font-weight: 500;
}

/* Nowy kolor dla etykiety "Dla wszystkich" */
.compare-badge-all { background: var(--graphite); color: var(--white); }

/* Kursor dla klikalnych kafelków na dole */
.sklad-usage-card { cursor: pointer; }

.sklad-main { background:var(--white); }
.sklad-product { display:block; }
.sklad-hidden { display:none !important; }

.sklad-product-header { display:grid; grid-template-columns:1fr auto; gap:70px; align-items:start; margin-bottom:60px; padding-top:20px; }
.sklad-product-info .chapter { margin-bottom:16px; }
.sklad-product-info .display { font-size:clamp(2rem,3.5vw,3rem); margin-bottom:20px; }
.sklad-product-info > p { color:var(--graphite); font-size:1rem; line-height:1.75; max-width:500px; margin-bottom:28px; }
.sklad-product-meta { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:.82rem; color:var(--graphite); padding-top:24px; border-top:1px solid var(--line); }
.sklad-product-meta strong { color:var(--navy-800); }

.sklad-product-visual { flex-shrink:0; }
.sklad-bottle { position:relative; width:220px; cursor:pointer; }
.sklad-bottle .product-hero-img { width:100%; height:auto; max-width:100%; max-height:none; display:block; transition:opacity .22s ease,transform .7s var(--ease-spring); filter:drop-shadow(0 30px 40px rgba(22,28,40,.2)); }
.sklad-bottle:hover .product-hero-img { transform:scale(1.05) translateY(-8px); }
.sklad-bottle-hint { display:block; text-align:center; margin-top:12px; font-size:.7rem; color:var(--silver); letter-spacing:.12em; text-transform:uppercase; }

.sklad-table-wrap { margin-bottom:70px; }
.sklad-row-highlight td { background:rgba(201,163,101,.05); }
.sklad-row-highlight td:first-child { border-left:3px solid var(--gold-500); }
.sklad-dose { color:var(--gold-600); font-size:1.05em; }
.sklad-rws { 
    color: var(--navy-800); 
    font-weight: 600; /* Zmniejszamy delikatnie grubość, bo Montserrat jest naturalnie grubszy */
    font-family: var(--font-sans); /* Zmiana fontu na czysty i czytelny */
    font-size: 0.95em; /* Lekka korekta wielkości, żeby pasowała do reszty tabeli */
}
.sklad-footnote { font-size:.78rem; color:var(--silver); padding:14px 24px; margin:0; background:var(--cream); border-top:1px solid var(--line); }

.sklad-charts { margin-top:20px; }
.sklad-bars-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin:50px 0 60px; }
.sklad-bar-item { background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px 28px; transition:all .4s var(--ease-luxe); }
.sklad-bar-item:hover { border-color:rgba(201,163,101,.4); box-shadow:0 12px 30px -10px rgba(22,28,40,.1); transform:translateY(-4px); }
.sklad-bar-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; }
.sklad-bar-name { display:flex; flex-direction:column; gap:4px; }
.sklad-bar-name strong { font-size:.95rem; color:var(--navy-800); font-weight:600; }
.sklad-bar-name small { font-size:.75rem; color:var(--silver); letter-spacing:.04em; }
.sklad-bar-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-bottom:6px; }
.sklad-dot-gold { background:var(--gold-500); }
.sklad-dot-navy { background:var(--navy-700); }
.sklad-bar-mg { font-family:var(--font-serif); font-size:1.3rem; font-weight:500; color:var(--gold-600); white-space:nowrap; flex-shrink:0; }
.sklad-bar-track { height:8px; background:var(--pearl); border-radius:4px; overflow:hidden; margin-bottom:12px; }
.sklad-bar-fill { height:100%; border-radius:4px; width:0; transition:width 1.4s cubic-bezier(.25,.46,.45,.94); }
.sklad-fill-gold { background:linear-gradient(90deg,var(--gold-700),var(--gold-400)); }
.sklad-fill-navy { background:linear-gradient(90deg,var(--navy-800),var(--navy-600)); }
.sklad-bar-footer { display:flex; justify-content:space-between; font-size:.75rem; color:var(--silver); letter-spacing:.04em; }
.sklad-bar-pct { font-weight:600; color:var(--graphite); }

.sklad-donut-wrap { display:flex; align-items:center; gap:70px; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:50px 60px; margin-bottom:20px; }
.sklad-donut { position:relative; width:200px; height:200px; flex-shrink:0; }
.sklad-donut-svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut-arc { transition:stroke-dasharray 1.5s cubic-bezier(.25,.46,.45,.94); }
.sklad-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-num { font-family:var(--font-serif); font-size:2.2rem; font-weight:500; color:var(--gold-600); line-height:1; letter-spacing:-.02em; }
.donut-unit { font-size:.75rem; font-family:var(--font-sans); color:var(--silver); letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }
.donut-label { font-size:.7rem; color:var(--graphite); letter-spacing:.08em; text-transform:uppercase; margin-top:4px; }
.sklad-donut-legend { flex:1; display:flex; flex-direction:column; gap:16px; }
.donut-legend-item { display:flex; align-items:center; gap:14px; transition:transform .3s ease; }
.donut-legend-item:hover { transform:translateX(4px); }
.donut-legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.donut-legend-item div { display:flex; flex-direction:column; gap:2px; }
.donut-legend-item strong { font-size:.9rem; color:var(--navy-800); font-weight:600; }
.donut-legend-item span { font-size:.78rem; color:var(--silver); letter-spacing:.04em; }
.donut-legend-note { display:flex; align-items:flex-start; gap:8px; font-size:.75rem; color:var(--mist); line-height:1.5; border-top:1px solid var(--line); padding-top:16px; margin-top:4px; }
.donut-legend-note svg { flex-shrink:0; margin-top:1px; color:var(--gold-500); }

.sklad-compare { background:var(--pearl); }
.compare-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; margin-top:50px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--white); }
.compare-grid.compare-grid-2 { grid-template-columns:1fr 1fr 1fr !important; }
.compare-head { background:var(--navy-900); padding:28px 20px; display:flex; flex-direction:column; gap:6px; }
.compare-head-blank { background:var(--navy-900); }
.compare-product-name { font-family:var(--font-serif); font-size:1rem; font-weight:500; color:var(--white); }
.compare-product-sub { font-size:.72rem; color:var(--mist); letter-spacing:.06em; }
.compare-badge { display:inline-block; margin-top:6px; background:var(--gold-500); color:var(--white); font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:3px; align-self:flex-start; }
.compare-badge-alt { background:var(--navy-600); }
.compare-label { padding:16px 20px; font-size:.84rem; font-weight:600; color:var(--navy-800); display:flex; align-items:center; border-top:1px solid var(--line); border-right:1px solid var(--line); background:var(--cream); }
.compare-cell { 
    padding: 16px 20px; 
    border-top: 1px solid var(--line); 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    justify-content: center;
}


/* =============================================================
   KONTAKT PAGE — pełny CSS z mobile
   ============================================================= */

/* HERO */
.kontakt-hero {
    background: var(--cream);
    padding: 70px 0 0;
    position: relative;
    overflow: hidden;
}
.kontakt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(201,163,101,0.09) 0%, transparent 55%);
    pointer-events: none;
}
.kontakt-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Wracamy do dwóch eleganckich kolumn */
    gap: 80px; /* Zwiększamy odstęp, by tekst i kafelki miały "oddech" */
    align-items: center;
    padding-bottom: 80px; /* Trochę więcej miejsca nad włosami */
    position: relative;
    z-index: 1;
}

/* Ustawienia dla dodanego zdjęcia produktu */
.kontakt-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.kontakt-hero-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 15px 35px -10px rgba(0,0,0,0.1); /* Luksusowy cień pod słoiczkiem */
    transition: transform 0.6s var(--ease-spring);
}
.kontakt-hero-img:hover {
    transform: scale(1.04); /* Subtelne powiększenie przy najechaniu */
}

/* Pasek z włosami oddzielający sekcje */
.kontakt-hair-separator {
    width: 100%;
    background: var(--white);
    line-height: 0;
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(201, 163, 101, 0.15); /* Delikatne złote odcięcie od kremowego tła */
}

.kontakt-hair-separator img {
    width: 100%;
    height: auto;
    max-height: 140px; /* Blokada wysokości na ogromnych monitorach, by włosy nie stały się monstrualne */
    object-fit: cover;
    display: block;
}
.kontakt-hero-text .chapter { margin-bottom: 18px; }
.kontakt-hero-text .display { font-size: clamp(2.4rem, 4.5vw, 3.8rem); margin-bottom: 20px; }
.kontakt-hero-text .lead { margin-bottom: 0; max-width: 440px; }

/* =============================================================
   KONTAKT HERO BADGES (Eleganckie kafelki z prawej strony)
   ============================================================= */
.kontakt-hero-badges { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.kontakt-badge {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    width: 100%;
    max-width: 460px;
    margin-left: auto; /* Wyrównuje kafelki ładnie do prawej krawędzi kontenera */
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.03);
    transition: all 0.4s var(--ease-luxe);
    cursor: pointer;
}

/* Hover kafelka: Przesunięcie w lewo, złota ramka i cień */
.kontakt-badge:hover {
    transform: translateX(-8px); 
    border-color: rgba(201, 163, 101, 0.4);
    box-shadow: 0 20px 40px -15px rgba(22, 28, 40, 0.12);
}

.kontakt-badge-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    transition: all 0.4s var(--ease-luxe);
    flex-shrink: 0;
}

/* Wypełnienie kółka na złoto po najechaniu (dokładnie jak na projekcie) */
.kontakt-badge:hover .kontakt-badge-icon {
    background: var(--gold-500);
    color: var(--white);
    border-color: var(--gold-500);
    transform: scale(1.08);
}

.kontakt-badge div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kontakt-badge strong {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy-800);
    letter-spacing: 0.02em;
}

.kontakt-badge span {
    font-size: 0.88rem;
    color: var(--silver);
}

/* Ukrywamy domyślną strzałkę, aby zachować 100% zgodności ze zdjęciem nr 2 */
.kontakt-badge-arrow {
    display: none;
}

/* MAIN GRID */
.kontakt-main { background: var(--white); }
.kontakt-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 70px;
    align-items: start;
}

/* INFO CARD */
.kontakt-info-card {
    background: var(--navy-900);
    border-radius: 12px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(201,163,101,0.2);
}
.kontakt-info-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.kontakt-info-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(201,163,101,0.12) 0%, transparent 55%);
    pointer-events: none;
}
.kontakt-info-logo { margin-bottom: 20px; position: relative; z-index: 1; }
.kontakt-info-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.kontakt-info-desc { font-size: 0.87rem; color: var(--mist); line-height: 1.65; margin-bottom: 30px; position: relative; z-index: 1; }

.kontakt-info-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 30px; position: relative; z-index: 1; }
.kontakt-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s var(--ease-luxe);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}
.kontakt-info-item:hover {
    background: rgba(201,163,101,0.1);
    border-color: rgba(201,163,101,0.25);
    transform: translateX(4px);
}
.kontakt-info-item:hover .kontakt-info-arrow { transform: translateX(4px); color: var(--gold-400); }
.kontakt-info-item-icon {
    width: 36px; height: 36px;
    border: 1px solid rgba(201,163,101,0.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-400); flex-shrink: 0;
    transition: all 0.4s var(--ease-luxe);
}
.kontakt-info-item:hover .kontakt-info-item-icon { background: rgba(201,163,101,0.15); border-color: var(--gold-500); }
.kontakt-info-item-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.kontakt-info-label { font-size: 0.65rem; font-weight: 600; color: var(--gold-500); letter-spacing: 0.2em; text-transform: uppercase; }
.kontakt-info-value { font-size: 0.88rem; color: var(--cream); font-weight: 500; line-height: 1.4; }
.kontakt-info-arrow { color: var(--mist); flex-shrink: 0; transition: transform 0.3s var(--ease-luxe), color 0.3s ease; }

.kontakt-socials { border-top: 1px solid rgba(201,163,101,0.15); padding-top: 24px; position: relative; z-index: 1; }
.kontakt-socials-label { display: block; font-size: 0.65rem; font-weight: 600; color: var(--gold-500); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.kontakt-socials-icons { display: flex; gap: 10px; }
.kontakt-social-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(201,163,101,0.3);
    border-radius: 6px;
    color: var(--cream); font-size: 0.76rem; font-weight: 500;
    text-decoration: none;
    transition: all 0.4s var(--ease-luxe);
}
.kontakt-social-btn:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: translateY(-2px); }

/* FORMULARZ CF7 */
.kontakt-form-wrap { padding-top: 0; margin-top: -6px; } 
.kontakt-form-header { margin-bottom: 36px; }
.kontakt-form-header .chapter { margin-bottom: 10px; }
.kontakt-form-inner .wpcf7 { margin: 0; }
.kontakt-form-inner .wpcf7-form { display: flex; flex-direction: column; gap: 0; }

.kontakt-form-inner .wpcf7-form input[type="text"],
.kontakt-form-inner .wpcf7-form input[type="email"],
.kontakt-form-inner .wpcf7-form input[type="tel"],
.kontakt-form-inner .wpcf7-form select,
.kontakt-form-inner .wpcf7-form textarea {
    width: 100%;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 15px 18px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--navy-800);
    outline: none;
    transition: all 0.4s var(--ease-luxe);
    -webkit-appearance: none;
    margin-bottom: 20px;
}
.kontakt-form-inner .wpcf7-form input[type="text"]:focus,
.kontakt-form-inner .wpcf7-form input[type="email"]:focus,
.kontakt-form-inner .wpcf7-form input[type="tel"]:focus,
.kontakt-form-inner .wpcf7-form select:focus,
.kontakt-form-inner .wpcf7-form textarea:focus {
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(201,163,101,0.12);
}
.kontakt-form-inner .wpcf7-form input::placeholder,
.kontakt-form-inner .wpcf7-form textarea::placeholder { color: var(--mist); }
.kontakt-form-inner .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.kontakt-form-inner .wpcf7-form select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9a365' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}
.kontakt-form-inner .wpcf7-form .cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.kontakt-form-inner .wpcf7-form input[type="submit"] {
    width: 100%;
    padding: 18px 48px;
    background: var(--gold-500);
    color: var(--white);
    border: 1px solid var(--gold-500);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-luxe);
    margin-top: 8px;
}
.kontakt-form-inner .wpcf7-form input[type="submit"]:hover {
    background: var(--gold-700);
    border-color: var(--gold-700);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(201,163,101,0.5);
}
.kontakt-form-inner .wpcf7-not-valid-tip { font-size: 0.72rem; color: #c0392b; margin-top: -14px; margin-bottom: 12px; display: block; }
.kontakt-form-inner .wpcf7-not-valid { border-color: #c0392b !important; }
/* Ukrywamy domyślny ZIELONY komunikat CF7 (bo mamy nasz modal), ale zostawiamy CZERWONE błędy! */
.kontakt-form-inner form.sent .wpcf7-response-output { display: none !important; }
.kontakt-form-inner .wpcf7-response-output { 
    border-radius: 6px; 
    margin-top: 20px; 
    font-size: 0.85rem; 
    border: 1px solid #c0392b; 
    color: #c0392b; 
    background: #fff8f8; 
}

/* Kiedy formularz "myśli" i przetwarza dane, przygaszamy guzik */
.kontakt-form-inner form.submitting .wpcf7-submit {
    opacity: 0.6;
    pointer-events: none;
}

.kontakt-form-inner .wpcf7-spinner { display: none; }
.kontakt-form-inner .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: 12px; }
.kontakt-form-inner .wpcf7-list-item-label { font-size: 0.8rem; color: var(--graphite); line-height: 1.5; cursor: pointer; }
.kontakt-form-inner input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--gold-500); cursor: pointer; margin-top: 1px; }
.cf7-rodo { background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin-bottom: 20px; }

/* FAQ */
.kontakt-faq { background: var(--pearl); padding: var(--section-y) 0; }
.faq-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px; 
    margin-top: 56px; 
    align-items: start; /* MAGICZNY DOPISEK: Zapobiega rozciąganiu pustego kafelka w rzędzie */
}
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.faq-item.is-open { border-color: rgba(201,163,101,0.4); box-shadow: 0 10px 30px -10px rgba(22,28,40,0.1); }
.faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 24px; background: none; border: none; cursor: pointer;
    text-align: left; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
    color: var(--navy-800); transition: color 0.3s ease;
}
.faq-question:hover { color: var(--gold-600); }
.faq-item.is-open .faq-question { color: var(--gold-600); }
.faq-icon { flex-shrink: 0; color: var(--gold-500); transition: transform 0.4s var(--ease-luxe); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-luxe); }
.faq-answer.is-open { max-height: 300px; }
.faq-answer p { padding: 0 24px 20px; font-size: 0.88rem; color: var(--graphite); line-height: 1.7; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; }

/* MODALE */
.kontakt-modal-box { max-width: 540px; width: 90vw; }
.kontakt-modal-content { display: flex; flex-direction: column; gap: 12px; }
.kontakt-modal-icon { width: 60px; height: 60px; border: 1.5px solid var(--gold-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-500); margin-bottom: 6px; }
.kontakt-modal-content .chapter { margin-bottom: 4px; }
.kontakt-modal-content h3 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; color: var(--navy-800); margin: 0 0 6px; }
.gold-divider { width: 50px; height: 2px; background: linear-gradient(90deg, var(--gold-500), transparent); margin: 2px 0 14px; }
.kontakt-modal-content p { font-size: 0.93rem; color: var(--graphite); line-height: 1.7; margin: 0; }

.kontakt-success-box {
    background: var(--white);
    border-radius: 12px;
    padding: 56px 48px;
    max-width: 460px; width: 90vw;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    border: 1px solid rgba(201,163,101,0.3);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
    position: relative; z-index: 1;
}
.kontakt-success-box::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    border-radius: 12px 12px 0 0;
}
.kontakt-success-icon {
    width: 86px; height: 86px; border-radius: 50%;
    border: 1.5px solid var(--gold-500);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-500); margin-bottom: 6px;
    animation: successPulse 2s ease-in-out infinite;
}
@keyframes successPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,163,101,0.3); }
    50% { box-shadow: 0 0 0 14px rgba(201,163,101,0); }
}
.kontakt-success-box .chapter { margin-bottom: 2px; }
.kontakt-success-box h3 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 500; color: var(--navy-800); margin: 0; }
.kontakt-success-box p { font-size: 0.9rem; color: var(--graphite); line-height: 1.65; margin: 0; }

/* ============================================================
   KONTAKT RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .kontakt-grid { grid-template-columns: 340px 1fr; gap: 44px; }
    .kontakt-info-card { padding: 36px 30px; }
}

/* Wyrównanie i wyśrodkowanie kafelków kontaktowych na telefonach i tabletach */
@media (max-width: 992px) {
    .kontakt-badge {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 460px !important;
    }
}

@media (max-width: 900px) {
    /* Hero */
    .kontakt-hero-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .kontakt-hero-image { order: -1; max-width: 240px; margin: 0 auto; } /* Na telefonie zdjęcie przeskakuje na samą górę! */
    .kontakt-hero-text .lead { max-width: 100%; margin: 0 auto; }
    .kontakt-hero-badges { flex-direction: column; }
    .kontakt-badge { flex: none; width: 100%; margin: 0; }

    /* Main grid stacks */
    .kontakt-grid { grid-template-columns: 1fr; gap: 44px; }
    .kontakt-info-card { max-width: 100%; }

    /* FAQ */
    .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Hero */
    .kontakt-hero { padding-top: 44px; }
    .kontakt-hero-badges { flex-direction: column; }
    .kontakt-badge { flex: none; width: 100%; }

    /* Info card */
    .kontakt-info-card { padding: 28px 22px; border-radius: 10px; }
    .kontakt-socials-icons { flex-direction: column; gap: 8px; }
    .kontakt-social-btn { justify-content: center; }

    /* Formularz - 2 pola w 1 kolumnie */
    .kontakt-form-inner .wpcf7-form .cf7-row { grid-template-columns: 1fr; gap: 0; }

    /* Success modal */
    .kontakt-success-box { padding: 40px 24px; }
    .kontakt-success-icon { width: 70px; height: 70px; }
    .kontakt-success-box h3 { font-size: 1.5rem; }

    /* FAQ */
    .faq-question { padding: 18px 20px; font-size: 0.88rem; }
    .faq-answer p { padding: 0 20px 18px; padding-top: 14px; }
}

@media (max-width: 420px) {
    .kontakt-hero-text .display { font-size: 2rem; }
    .kontakt-badge { padding: 16px 18px; }
    .kontakt-badge-icon { width: 38px; height: 38px; }
}

/* CF7 struktura — override dla równego układu */
.kontakt-form-inner .wpcf7-form p {
    margin-bottom: 0;
}
.kontakt-form-inner .wpcf7-form br {
    display: none; /* CF7 wstawia <br> — chowamy */
}
/* Neutralizuje niewidzialne tagi <p> wpychane przez CF7, które rozwalają siatkę w rzędach */
.kontakt-form-inner .wpcf7-form .cf7-row > p {
    display: contents !important;
}

/* 1. Odstęp pod całymi rzędami (np. linia Imię i Nazwisko) */
.kontakt-form-inner .wpcf7-form .cf7-row {
    margin-bottom: 20px !important;
}

/* 2. Odstęp pod pojedynczymi polami (Pytanie, Wiadomość itp.) */
.kontakt-form-inner .wpcf7-form span.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* 3. Zerujemy podwójny margines dla elementów wewnątrz rzędu (bo tu margines trzyma już cały rząd) */
.kontakt-form-inner .wpcf7-form .cf7-row span.wpcf7-form-control-wrap {
    margin-bottom: 0 !important;
}

/* 4. Wyjątek dla RODO - w jednej linii z checkboxem, bez psujących marginesów */
.kontakt-form-inner .wpcf7-form .cf7-rodo span.wpcf7-form-control-wrap {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 0 !important;
}
/* Reset margin na inputach (mb jest na wrap) */
.kontakt-form-inner .wpcf7-form input[type="text"],
.kontakt-form-inner .wpcf7-form input[type="email"],
.kontakt-form-inner .wpcf7-form input[type="tel"],
.kontakt-form-inner .wpcf7-form select,
.kontakt-form-inner .wpcf7-form textarea {
    margin-bottom: 0;
}
/* Submit bez dodatkowego marginu */
.kontakt-form-inner .wpcf7-form input[type="submit"] {
    display: block;
    margin-top: 10px;
}
/* Błędy CF7 */
.kontakt-form-inner .wpcf7-not-valid-tip {
    font-size: 0.72rem;
    color: #c0392b;
    margin-top: 6px;
    display: block;
    letter-spacing: 0.02em;
}
.kontakt-form-inner .wpcf7-form-control.wpcf7-not-valid {
    border-color: #c0392b !important;
    background: #fff8f8 !important;
}

/* =============================================================
   KONTAKT — fixes: modal animation, FAQ, CF7 layout
   ============================================================= */

/* Modal box animacja dla WSZYSTKICH lightbox-modal (nie tylko featureModal) */
.lightbox-modal.active .feature-modal-box,
.lightbox-modal.active .kontakt-modal-box,
.lightbox-modal.active .badania-modal-box {
    transform: scale(1) translateY(0) !important;
}

/* kontakt-modal-box — rozmiar */
.kontakt-modal-box {
    max-width: 900px !important;
}

/* Success box animacja */
.kontakt-success-box {
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s var(--ease-spring);
}
#kontaktSuccess.active .kontakt-success-box {
    transform: scale(1) translateY(0);
}

/* FAQ — idealnie płynne rozwijanie */
.faq-answer {
    max-height: 0;
    opacity: 0; /* Tekst znika płynnie */
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.2s ease-out;
}
.faq-answer.is-open {
    max-height: 220px; /* Bezpieczny limit, eliminuje efekt zacinania i opóźnienia */
    opacity: 1; /* Tekst pojawia się płynnie */
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in 0.1s;
}
.faq-item { overflow: hidden; }

/* CF7 — wymuś blokowy układ pól */
.kontakt-form-inner .wpcf7-form p {
    margin: 0 0 20px 0 !important;
}
.kontakt-form-inner .wpcf7-form br {
    display: none !important;
}
.kontakt-form-inner .wpcf7-form span.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
.kontakt-form-inner .wpcf7-form .wpcf7-submit {
    width: 100%;
    padding: 18px 48px;
    background: var(--gold-500);
    color: var(--white);
    border: 1px solid var(--gold-500);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-luxe);
    border-radius: 0;
    display: block;
    margin-top: 10px;
}
.kontakt-form-inner .wpcf7-form .wpcf7-submit:hover {
    background: var(--gold-700);
    border-color: var(--gold-700);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(201,163,101,0.5);
}


/* =============================================================
   BLOG — archive.php + single.php
   ============================================================= */

/* HERO BLOGA */
.blog-hero {
    background: var(--navy-900);
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--gold-700);
}
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 30%, rgba(201,163,101,0.12) 0%, transparent 55%);
    pointer-events: none;
}
.blog-hero-inner {
    position: relative;
    z-index: 1;
    padding-bottom: 50px;
}
.blog-hero-text { margin-bottom: 40px; }
.blog-hero-text .chapter { margin-bottom: 16px; }
.blog-hero-text .display { color: var(--white); font-size: clamp(2.4rem, 4.5vw, 3.8rem); margin-bottom: 16px; }
.blog-hero-text .display .accent { color: var(--gold-400); }
.blog-hero-text .lead { color: var(--mist); max-width: 520px; margin: 0; }

/* Filtry kategorii */
.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
    position: relative;
}
.blog-cats::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(201,163,101,0.15);
}
.blog-cat-btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mist);
    text-decoration: none;
    border-radius: 0;
    transition: all 0.35s var(--ease-luxe);
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.blog-cat-btn:hover { color: var(--gold-400); }
.blog-cat-btn.active { color: var(--gold-400); border-bottom-color: var(--gold-500); }

/* MAIN */
.blog-main { background: var(--cream); }

/* FEATURED */
.blog-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 60px;
    transition: all 0.5s var(--ease-luxe);
    box-shadow: 0 20px 50px -20px rgba(22,28,40,0.1);
}
.blog-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 36px 60px -20px rgba(22,28,40,0.18);
}
.blog-featured-img {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 420px;
}
.blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-luxe);
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,17,25,0.2) 0%, transparent 60%);
}
.blog-featured-content {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.blog-featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.blog-featured-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 500;
    color: var(--navy-800);
    line-height: 1.2;
    margin: 0;
}
.blog-featured-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.blog-featured-title a:hover { color: var(--gold-600); }
.blog-featured-excerpt {
    font-size: 0.98rem;
    color: var(--graphite);
    line-height: 1.7;
    margin: 0;
}

/* GRID KART */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 60px;
}
.blog-grid-related { margin-top: 50px; margin-bottom: 0; }

.blog-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.5s var(--ease-luxe);
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 50px -18px rgba(22,28,40,0.16);
    border-color: rgba(201,163,101,0.35);
}
.blog-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--pearl);
}
.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease-luxe);
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(13,17,25,0.15) 100%);
    transition: opacity 0.4s ease;
}
.blog-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    background: linear-gradient(135deg, var(--cream), var(--pearl));
}
.blog-card-body {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.blog-card-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--navy-800);
    line-height: 1.35;
    margin: 0;
    flex: 1;
}
.blog-card-title a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.blog-card-title a:hover { color: var(--gold-600); }
.blog-card-excerpt {
    font-size: 0.86rem;
    color: var(--graphite);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.blog-read-time-sm {
    font-size: 0.72rem;
    color: var(--silver);
    letter-spacing: 0.08em;
}

/* Wspólne elementy */
.blog-cat-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(201,163,101,0.12);
    color: var(--gold-600);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
    border: 1px solid rgba(201,163,101,0.25);
}
.blog-cat-tag:hover { background: var(--gold-500); color: var(--white); border-color: var(--gold-500); }
.blog-cat-tag-sm { font-size: 0.62rem; padding: 3px 10px; }

.blog-date, .blog-read-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--silver);
    letter-spacing: 0.04em;
}
.blog-read-more, .blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-600);
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}
.blog-read-more:hover, .blog-card-link:hover { gap: 12px; color: var(--navy-800); }

/* PAGINACJA */
.blog-pagination { display: flex; justify-content: center; }
.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--navy-800);
    text-decoration: none;
    transition: all 0.35s var(--ease-luxe);
    background: var(--white);
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--white);
}
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next { width: auto; padding: 0 18px; }

/* EMPTY STATE */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.blog-empty-icon {
    width: 80px; height: 80px;
    border: 1.5px solid var(--gold-500);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-500);
    margin-bottom: 8px;
}
.blog-empty h3 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--navy-800); margin: 0; }
.blog-empty p { color: var(--graphite); margin: 0; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-hero {
    background: var(--cream);
    padding: 60px 0 50px;
    border-bottom: 1px solid var(--line);
}
.single-hero-inner { max-width: 780px; }
.single-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.single-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 600;
    color: var(--navy-900);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}
.single-excerpt {
    font-size: 1.08rem;
    color: var(--graphite);
    line-height: 1.75;
    margin-bottom: 30px;
    max-width: 680px;
}
.single-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.single-author-avatar img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-500);
}
.single-author-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy-800);
}
.single-author-role {
    display: block;
    font-size: 0.72rem;
    color: var(--silver);
    letter-spacing: 0.06em;
}

/* COVER */
.single-cover { background: var(--cream); padding: 0 0 50px; }
.single-cover-img {
    border-radius: 12px;
    overflow: hidden;
    max-height: 520px;
    box-shadow: 0 30px 60px -20px rgba(22,28,40,0.2);
}
.single-cover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* LAYOUT */
.single-content-section { background: var(--white); padding: 60px 0 80px; }
.single-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    align-items: start;
}

/* SIDEBAR */
.single-sidebar { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 24px; }

.single-toc {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.single-toc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-600);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}
.single-toc-nav { padding: 12px 0; }
.single-toc-nav a {
    display: block;
    padding: 8px 20px;
    font-size: 0.82rem;
    color: var(--graphite);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    line-height: 1.4;
}
.single-toc-nav a:hover,
.single-toc-nav a.is-active {
    color: var(--gold-600);
    border-left-color: var(--gold-500);
    background: rgba(201,163,101,0.05);
}
.single-toc-nav a.toc-h3 { padding-left: 32px; font-size: 0.78rem; }

.single-sidebar-cta {
    background: var(--navy-900);
    border: 1px solid rgba(201,163,101,0.2);
    border-radius: 10px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
}
.single-sidebar-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.single-sidebar-cta .chapter { margin-bottom: 10px; }
.single-sidebar-cta h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 8px;
}
.single-sidebar-cta p {
    font-size: 0.82rem;
    color: var(--mist);
    line-height: 1.55;
    margin: 0 0 20px;
}

/* TREŚĆ */
.single-body { max-width: 720px; }
.single-body h2, .single-body h3 { scroll-margin-top: 110px; }

/* TAGI */
.single-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    margin-top: 40px;
}
.single-tags-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--silver);
    margin-right: 4px;
}
.single-tag {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.76rem;
    color: var(--graphite);
    text-decoration: none;
    transition: all 0.3s ease;
}
.single-tag:hover { border-color: var(--gold-500); color: var(--gold-600); background: rgba(201,163,101,0.06); }

/* UDOSTĘPNIJ */
.single-share {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid var(--line);
}
.single-share-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--silver);
}
.single-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.single-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--navy-800);
    background: var(--white);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.35s var(--ease-luxe);
}
.single-share-btn:hover { border-color: var(--gold-500); color: var(--gold-600); transform: translateY(-2px); }
.single-share-btn.copied { background: var(--gold-500); color: var(--white); border-color: var(--gold-500); }

/* POWIĄZANE */
.single-related { background: var(--pearl); padding: var(--section-y) 0; }

/* ============================================================
   BLOG RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .single-layout { grid-template-columns: 220px 1fr; gap: 44px; }
}
@media (max-width: 992px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-img { min-height: 300px; aspect-ratio: 16/8; }
    .blog-featured-content { padding: 36px 36px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .single-layout { grid-template-columns: 1fr; }
    .single-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .single-sidebar-author { flex: 1 1 100%; }
    .single-toc { flex: 1 1 100%; }
    .single-sidebar-cta { flex: 1 1 100%; }
    .single-toc-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
    .single-toc-nav a { border-left: none; border-radius: 4px; border: 1px solid transparent; }
    .single-toc-nav a.is-active { border-color: rgba(201,163,101,0.3); }
}
@media (max-width: 640px) {
    .blog-hero { padding-top: 50px; }
    .blog-cats { gap: 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .blog-cat-btn { white-space: nowrap; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured-content { padding: 28px 24px; }
    .blog-featured-title { font-size: 1.5rem; }
    .single-title { font-size: 1.9rem; }
    .single-cover-img { border-radius: 8px; }
    .single-share { flex-direction: column; align-items: flex-start; }
}



/* =============================================================
   HP BLOG SECTION — strona główna, 3 ostatnie artykuły
   ============================================================= */
.hp-blog { background: var(--pearl); }

.hp-blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
}
.hp-blog-text .chapter { margin-bottom: 16px; }
.hp-blog-text .display { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 16px; }
.hp-blog-text p {
    color: var(--graphite);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0;
}
.hp-blog-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end;
    transition: gap 0.3s var(--ease-luxe), color 0.3s ease, background 0.3s ease;
}
.hp-blog-all:hover { gap: 16px; }

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

.hp-blog-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.5s var(--ease-luxe);
}
.hp-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 50px -18px rgba(22,28,40,0.16);
    border-color: rgba(201,163,101,0.35);
}

.hp-blog-card-img {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--cream);
}
.hp-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s var(--ease-luxe);
}
.hp-blog-card:hover .hp-blog-card-img img { transform: scale(1.06); }
.hp-blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(13,17,25,0.12) 100%);
}
.hp-blog-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    background: linear-gradient(135deg, var(--cream), var(--pearl));
}

.hp-blog-card-body {
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.hp-blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hp-blog-card-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--navy-800);
    line-height: 1.35;
    margin: 0;
}
.hp-blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}
.hp-blog-card-title a:hover { color: var(--gold-600); }
.hp-blog-card-excerpt {
    font-size: 0.86rem;
    color: var(--graphite);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.hp-blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

@media (max-width: 992px) {
    .hp-blog-header { flex-direction: column; align-items: flex-start; gap: 24px; }
    .hp-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hp-blog-grid { grid-template-columns: 1fr; }
}



/* --- TWARDE WYMUSZENIE SCROLLA W TABELI PORÓWNAWCZEJ --- */
@media (max-width: 992px) {
    .compare-grid {
        display: grid !important;
        grid-template-columns: 130px repeat(3, 220px) !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ozdobny pasek na dole, żeby od razu było widać, że można przesuwać */
    .compare-grid::-webkit-scrollbar { height: 6px !important; }
    .compare-grid::-webkit-scrollbar-track { background: var(--pearl) !important; border-radius: 10px !important; }
    .compare-grid::-webkit-scrollbar-thumb { background: var(--gold-500) !important; border-radius: 10px !important; }
}

@media (max-width: 640px) {
    .compare-grid {
        grid-template-columns: 110px repeat(3, 190px) !important;
    }
}



/* --- TWARDE WYMUSZENIE 1 KOLUMNY NA STRONIE SKŁAD (MOBILE) --- */
@media (max-width: 992px) {
    /* 1. Naprawa sekcji górnej (Tekst + Kafelki) */
    .sklad-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Rozciągnięcie kafelków na pełną szerokość i ułożenie jeden pod drugim */
    .sklad-selector {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .sklad-tab {
        width: 100% !important;
    }

    /* 2. Naprawa sekcji ze słoiczkiem (Tekst + Zdjęcie słoiczka) */
    .sklad-product-header {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }
    
    .sklad-product-info p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sklad-bottle {
        margin: 0 auto !important;
    }
}

/* --- TWARDE WYMUSZENIE 1 KOLUMNY DLA KAFELKÓW ZE SKŁADEM (MOBILE) --- */
@media (max-width: 992px) {
    .sklad-bars-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Wymusza dokładnie jedną kolumnę */
        width: 100% !important;
        gap: 20px !important;
    }
    
    .sklad-bar-item {
        width: 100% !important;
    }
}



/* --- CZYSZCZENIE WYGLĄDU META DANYCH W POJEDYNCZYM ARTYKULE --- */
.single-author {
    border-top: none !important; /* Usuwa brzydką, szarą linię z góry */
    padding-top: 0 !important;
}

/* Wymuszenie wyśrodkowania całego nagłówka wpisu na mobile */
@media (max-width: 992px) {
    .single-hero-meta, .single-author {
        justify-content: center !important;
    }
}



/* =============================================================
   NEOLI PRODUCT PAGE — single-product.php
   ============================================================= */

/* TOP SECTION */
.np-top-section { background: var(--cream); padding: 50px 0 60px; }
.np-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

/* GALERIA STICKY */
.np-gallery-col { position: relative; }
.np-gallery-sticky { position: sticky; top: 108px; }
.np-main-image-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.7s var(--ease-luxe);
}
.np-main-image-wrap:hover .np-main-img { transform: scale(1.04); }
.np-sale-badge {
    position: absolute;
    top: 16px; left: 16px; z-index: 2;
    background: var(--gold-500);
    color: var(--white);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 4px;
}
.np-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.np-thumb {
    width: 72px; height: 72px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--white);
    transition: border-color 0.3s ease;
    flex-shrink: 0;
}
.np-thumb img { width: 100%; height: 100%; object-fit: contain; }
.np-thumb.active, .np-thumb:hover { border-color: var(--gold-500); }

/* SUMMARY */
.np-summary-col { padding-top: 8px; }
.np-summary-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.np-title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    color: var(--navy-900);
    line-height: 1.15;
    margin-bottom: 16px;
}
.np-short-desc {
    font-size: 0.97rem;
    color: var(--graphite);
    line-height: 1.7;
    margin-bottom: 24px;
}
.np-short-desc strong { color: var(--navy-800); }

/* STARS */
.np-stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--graphite);
}
.np-stars-fill {
    display: inline-flex;
    position: relative;
    color: var(--pearl);
}
.np-stars-fill svg { color: var(--gold-500); }
.np-rating-count { color: var(--silver); }
.np-stars-sm { font-size: 0.72rem; }

/* CENA */
.np-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.np-price-current {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--navy-900);
    line-height: 1;
}
.np-price-regular {
    font-size: 1.1rem;
    color: var(--silver);
    text-decoration: line-through;
}

/* ATC ROW */
.np-atc-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 20px;
}
.np-qty-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
}
.np-qty-btn {
    width: 44px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; color: var(--navy-800);
    transition: background 0.3s ease;
}
.np-qty-btn:hover { background: var(--pearl); }
.np-qty-input {
    width: 48px; text-align: center;
    border: none; outline: none;
    font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
    color: var(--navy-800); background: var(--white);
    -moz-appearance: textfield;
}
.np-qty-input::-webkit-outer-spin-button,
.np-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.np-atc-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
}

/* DELIVERY STRIP */
.np-delivery-strip {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}
.np-delivery-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--graphite);
}
.np-delivery-item svg { color: var(--gold-500); flex-shrink: 0; }
.np-delivery-item strong { color: var(--navy-800); }

/* KIT BOX */
.np-kit-box {
    background: var(--navy-900);
    border: 1px solid rgba(201,163,101,0.25);
    border-radius: 12px;
    padding: 24px 26px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}
.np-kit-box::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.np-kit-badge {
    position: absolute; top: 16px; right: 16px;
    background: var(--gold-500);
    color: var(--navy-900);
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px;
}
.np-kit-content {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.np-kit-icon {
    width: 50px; height: 50px; flex-shrink: 0;
    border: 1px solid rgba(201,163,101,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-400);
}
.np-kit-text { flex: 1; }
.np-kit-text strong { display: block; color: var(--white); font-size: 1rem; margin-bottom: 4px; }
.np-kit-text span { font-size: 0.8rem; color: var(--mist); }
.np-kit-price { text-align: right; flex-shrink: 0; }
.np-kit-old { display: block; font-size: 0.82rem; color: var(--silver); text-decoration: line-through; }
.np-kit-new {
    display: block;
    font-family: var(--font-serif); font-size: 1.5rem;
    font-weight: 600; color: var(--gold-400);
}
.np-kit-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px;
    background: var(--gold-500);
    color: var(--navy-900);
    border: none; border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.8rem; font-weight: 800;
    letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-luxe);
}
.np-kit-btn:hover {
    background: var(--gold-400);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(201,163,101,0.5);
}

/* ACCORDIONS SUMMARY */
.np-accordions { display: flex; flex-direction: column; gap: 8px; }
.np-acc-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}
.np-acc-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
    color: var(--navy-800); text-align: left;
    transition: color 0.3s ease;
}
.np-acc-trigger:hover { color: var(--gold-600); }
.np-acc-icon { flex-shrink: 0; color: var(--gold-500); transition: transform 0.4s var(--ease-luxe); }
.np-acc-item.is-open .np-acc-icon {
    transform: rotate(180deg);
}
.np-acc-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.np-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-luxe); }
.np-acc-body.is-open { max-height: 600px; }
.np-acc-inner { padding: 0 20px 20px; font-size: 0.9rem; color: var(--graphite); line-height: 1.7; }

/* SCROLL NAV */
.np-scroll-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform 0.4s var(--ease-luxe);
    box-shadow: 0 4px 20px -8px rgba(22,28,40,0.1);
}
.np-scroll-nav.is-visible { transform: translateY(0); }
.np-scroll-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    height: 56px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.np-snav-link {
    padding: 0 20px;
    height: 100%;
    display: inline-flex; align-items: center;
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--graphite);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}
.np-snav-link:hover, .np-snav-link.active { color: var(--gold-600); border-bottom-color: var(--gold-500); }
.np-snav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.np-snav-price { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--navy-800); white-space: nowrap; }
.np-snav-btn { padding: 10px 22px !important; height: auto !important; font-size: 0.72rem !important; }

/* SECTIONS */
.np-section { padding: var(--section-y) 0; }
.np-section-cream { background: var(--cream); }
.np-section-white { background: var(--white); }
.np-section-navy { background: var(--navy-900); }

/* DLA KOGO */
.np-for-whom-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 56px;
}
.np-for-whom-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: all 0.45s var(--ease-luxe);
}
.np-for-whom-card:hover {
    border-color: rgba(201,163,101,0.4);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(22,28,40,0.12);
}
.np-for-whom-icon { width: 52px; height: 52px; }
.np-for-whom-icon img { width: 100%; height: 100%; object-fit: contain; }
.np-for-whom-card p { font-size: 0.84rem; color: var(--graphite); line-height: 1.55; margin: 0; }

/* SKŁADNIKI */
.np-ingredients-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.np-ingredients-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.np-ingredients-img img { width: 100%; height: auto; display: block; }
.np-ingredients-content .chapter { margin-bottom: 16px; }
.np-ingredients-content .display { margin-bottom: 28px; font-size: clamp(1.8rem,3vw,2.6rem); }
.np-ingredient-row { border-top: 1px solid var(--line); }
.np-ingredient-row:last-child { border-bottom: 1px solid var(--line); }
.np-ingredient-trigger {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 16px 0; background: none; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
    color: var(--navy-800); text-align: left;
    transition: color 0.3s ease;
}
.np-ingredient-trigger:hover { color: var(--gold-600); }
.np-ingredient-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid rgba(201,163,101,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-500);
}
.np-ing-arr { margin-left: auto; flex-shrink: 0; color: var(--gold-500); transition: transform 0.4s var(--ease-luxe); }
.np-ingredient-row.is-open .np-ing-arr { transform: rotate(180deg); }
.np-ingredient-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-luxe); }
.np-ingredient-body.is-open { max-height: 400px; }
.np-ingredient-body p { padding: 0 0 16px 50px; font-size: 0.88rem; color: var(--graphite); line-height: 1.65; margin: 0; }

/* EFEKTY */
.np-effects-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 56px; margin-bottom: 60px;
}
.np-effect-stat {
    text-align: center; padding: 40px 24px;
    background: var(--white); border: 1px solid var(--line); border-radius: 10px;
    transition: all 0.5s var(--ease-luxe);
}
.np-effect-stat:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -15px rgba(22,28,40,0.12); border-color: rgba(201,163,101,0.4); }
.np-effect-num {
    font-family: var(--font-serif);
    font-size: 3.5rem; font-weight: 600;
    color: var(--gold-600); line-height: 1;
    letter-spacing: -0.02em; margin-bottom: 12px;
}
.np-effect-stat p { font-size: 0.88rem; color: var(--graphite); margin: 0; }
.np-effects-lifestyle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.np-effects-lifestyle img { border-radius: 12px; width: 100%; height: 380px; object-fit: cover; }
.np-effects-quote blockquote { margin: 0; }
.np-effects-quote p {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem,2.2vw,1.8rem);
    color: var(--navy-800); line-height: 1.4; margin-bottom: 20px;
}
.np-effects-quote cite { font-style: normal; font-size: 0.8rem; color: var(--silver); letter-spacing: 0.1em; text-transform: uppercase; }

/* OPINIE */
.np-rating-summary { margin-top: 20px; }
.np-reviews-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 50px;
}
.np-review-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,163,101,0.15);
    border-radius: 10px; padding: 26px;
    transition: all 0.4s var(--ease-luxe);
}
.np-review-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(201,163,101,0.3); }
.np-review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 12px; }
.np-review-author { display: flex; align-items: center; gap: 12px; }
.np-review-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--gold-500); color: var(--navy-900);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; flex-shrink: 0;
}
.np-review-author strong { display: block; color: var(--cream); font-size: 0.9rem; margin-bottom: 2px; }
.np-review-author span { font-size: 0.74rem; color: var(--mist); }
.np-review-stars { display: flex; gap: 2px; }
.np-review-card > p { font-size: 0.88rem; color: var(--mist); line-height: 1.65; margin: 0; }

/* PODOBNE */
.np-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 50px; }
.np-related-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; transition: all 0.5s var(--ease-luxe);
}
.np-related-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -18px rgba(22,28,40,0.16); border-color: rgba(201,163,101,0.35); }
.np-related-img { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--pearl); }
.np-related-main, .np-related-hover {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    transition: opacity 0.6s ease, transform 0.7s var(--ease-luxe);
}
.np-related-hover { opacity: 0; transform: scale(1.08); }
.np-related-card:hover .np-related-main { opacity: 0; transform: scale(0.92); }
.np-related-card:hover .np-related-hover { opacity: 1; transform: scale(1); }
.np-related-body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.np-related-body h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: var(--navy-800); margin: 0; }
.np-related-body h3 a { color: inherit; text-decoration: none; }
.np-related-body h3 a:hover { color: var(--gold-600); }
.np-related-price { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--navy-800); }
.np-related-atc { font-size: 0.72rem !important; padding: 9px 16px !important; justify-content: center; width: 100%; }





/* =============================================================
   STICKY BOTTOM BAR (Wersja Sprzedażowa)
   ============================================================= */

.np-sticky-bar {
    position: fixed; /* lub 'sticky' - zachowaj tę wartość ze swojego oryginalnego kodu */
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(201, 163, 101, 0.2);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.04);
    padding: 12px 0;
    z-index: 999;
    
    /* Jeśli miałeś tu wcześniej dopisane transform: translateY(100%) do ukrywania paska, zostaw je! */
}

.np-sticky-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.np-sticky-product {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

/* Miniaturka produktu */
.np-sticky-product img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.np-sticky-product div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nazwa produktu */
.np-sticky-product strong {
    font-size: 0.85rem;
    line-height: 1.1;
    color: var(--navy-900);
    font-weight: 600;
}

/* Cena */
.np-sticky-product span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-600);
}

.np-sticky-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --- WIDOK MOBILNY (MAGIA SPRZEDAŻY) --- */
@media (max-width: 600px) {
    /* Ukrywamy informację o wysyłce na małych ekranach, by odchudzić pasek */
    .np-sticky-actions .np-delivery-item {
        display: none;
    }
    
    /* Powiększamy i dopieszczamy sam przycisk */
    .np-sticky-actions .btn {
        padding: 14px 24px;
        font-size: 0.75rem;
        width: auto;
        flex-shrink: 0;
        box-shadow: 0 4px 15px -4px rgba(201, 163, 101, 0.4);
    }

    /* Na bardzo wąskich ekranach lekko zmniejszamy miniaturkę */
    .np-sticky-product img {
        width: 40px;
        height: 40px;
    }
}





/* MODAL KOSZYK */
.np-cart-modal-box {
    background: var(--white); border-radius: 14px;
    padding: 50px 44px; max-width: 460px; width: 90vw;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    border: 1px solid rgba(201,163,101,0.2);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.3);
    position: relative; z-index: 1;
    transform: scale(0.92) translateY(16px);
    transition: transform 0.45s var(--ease-spring);
}
#np-cart-modal.active .np-cart-modal-box { transform: scale(1) translateY(0); }
.np-cart-modal-icon {
    width: 80px; height: 80px; border-radius: 50%;
    border: 1.5px solid var(--gold-500);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-500); margin-bottom: 4px;
    animation: successPulse 2s ease-in-out infinite;
}
.np-cart-modal-box h3 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; color: var(--navy-800); margin: 0; }
.np-cart-modal-box p { font-size: 0.9rem; color: var(--graphite); line-height: 1.65; margin: 0; }
.np-cart-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}
.np-cart-modal-actions a,
.np-cart-modal-actions button {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 55px !important;
    font-family: var(--font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.np-cart-modal-actions button.np-btn-continue {
    background: transparent !important;
    border: 1.5px solid var(--navy-800) !important;
    color: var(--navy-800) !important;
}
.np-cart-modal-actions button.np-btn-continue:hover {
    background: var(--navy-800) !important;
    color: #fff !important;
}

/* Strzałka > sprawia, że pozycjonujemy tylko główny krzyżyk (X), omijając dolny guzik */
.np-cart-modal-box > .np-cart-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--silver);
    padding: 4px;
    transition: color 0.3s ease;
    line-height: 1;
}
.np-cart-modal-box > .np-cart-modal-close:hover { color: var(--navy-800); }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .np-for-whom-grid { grid-template-columns: repeat(3,1fr); }
    .np-related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 992px) {
    .np-top-grid { grid-template-columns: 1fr; gap: 40px; }
    .np-gallery-sticky { position: static; }
    .np-ingredients-grid { grid-template-columns: 1fr; gap: 40px; }
    .np-effects-grid { grid-template-columns: repeat(2,1fr); }
    .np-effects-lifestyle { grid-template-columns: 1fr; gap: 30px; }
    .np-reviews-grid { grid-template-columns: repeat(2,1fr); }
    .np-for-whom-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .np-atc-row { flex-direction: column; }
    .np-qty-wrap { justify-content: center; }
    .np-for-whom-grid { grid-template-columns: 1fr 1fr; }
    .np-effects-grid { grid-template-columns: 1fr; }
    .np-reviews-grid { grid-template-columns: 1fr; }
    .np-related-grid { grid-template-columns: repeat(2,1fr); }
    .np-sticky-actions .np-delivery-item { display: none; }
    .np-snav-cta .np-snav-price { display: none; }
    .np-kit-content { flex-wrap: wrap; }
    .np-kit-price { width: 100%; text-align: left; }
    .np-cart-modal-box { padding: 36px 24px; }
    .np-cart-modal-actions { flex-direction: column; }
    .np-cart-modal-actions .btn { width: 100%; justify-content: center; }
}


/* =============================================================
   WYRÓWNANIE DO GÓRY I STICKY GALERIA
   ============================================================= */

/* 1. Wyłączamy centrowanie pionowe siatki. 'Stretch' sprawia, 
   że kolumny rosną do wysokości wyższej z nich (niezbędne dla Sticky) */
.np-top-grid {
    align-items: stretch !important; 
}

/* 2. Upewniamy się, że cała zawartość prawej kolumny zaczyna się od samej góry */
.np-summary-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 3. Usuwamy ewentualny górny margines z pierwszego elementu (ocen), 
   żeby tekst idealnie licował z górną krawędzią zdjęcia */
.np-summary-col > *:first-child {
    margin-top: 0 !important;
}

/* 4. Blokujemy galerię w miejscu! */
.np-gallery-sticky {
    position: sticky !important;
    top: 120px !important; /* Odstęp od górnej krawędzi okna przeglądarki. Uwzględnia wysokość Twojego nagłówka. Możesz zmienić np. na 100px lub 140px */
    z-index: 10;
}


/* =============================================================
   GŁÓWNE ZDJĘCIE - HOVER PREMIUM Z GALERIĄ
   ============================================================= */

.np-main-image-wrap {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 8px !important;
    cursor: pointer;
}

.np-main-img {
    position: relative !important;
    z-index: 2 !important;
    transition: opacity 0.5s ease-in-out !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.np-main-img-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    z-index: 1 !important;
    transform: scale(1) !important;
    transition: opacity 0.5s ease-in-out, transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* --- AKCJA HOVER --- */
.np-main-image-wrap:hover .np-main-img {
    opacity: 0 !important;
}

.np-main-image-wrap:hover .np-main-img-hover {
    opacity: 1 !important;
    transform: scale(1.06) !important;
    z-index: 3 !important;
}

/* --- ISKRA PREMIUM --- */
.np-main-image-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.np-main-image-wrap:hover::after {
    animation: mainPremiumFlash 1.2s ease-in-out forwards !important;
}

@keyframes mainPremiumFlash {
    0% { left: -150%; }
    100% { left: 200%; }
}


/* =============================================================
   HACKOWANIE WOOCOMMERCE: WIDOK MOBILNY (PAKIET + STICKY BAR)
   ============================================================= */
@media (max-width: 600px) {
    
    /* --- 1. NAPRAWA PAKIETU 3-MIESIĘCZNEGO --- */
    .np-kit-box {
        margin-top: 32px !important; 
        text-align: center !important;
    }
    .np-kit-badge {
        position: relative !important; /* Zdejmujemy lewitowanie! Element wraca do fizycznego układu */
        top: -28px !important; /* Wysuwamy go do góry, żeby siedział na krawędzi ramki */
        left: auto !important;
		right: auto !important;
        transform: none !important; /* Kasujemy stare wymuszenia */
        margin: 0 auto !important; /* Środkujemy */
        margin-bottom: -10px !important; /* Daje idealny oddech tekstowi poniżej */
        display: inline-flex !important;
    }
    .np-kit-content {
        flex-direction: column !important; 
        gap: 16px !important;
    }
    .np-kit-icon {
        margin: 0 auto !important; 
    }
    .np-kit-text {
        align-items: center !important;
    }
    /* Siatka, która układa ceny obok siebie, a zniżkę wyrzuca pod spód */
    .np-kit-price {
        display: grid !important;
        grid-template-columns: auto auto !important; /* Dwie ceny idealnie w jednym rzędzie */
        justify-content: center !important;
        align-items: baseline !important; /* Wyrównanie do tej samej linii bazowej tekstu */
        column-gap: 12px !important; /* Odstęp w poziomie między starą a nową ceną */
        row-gap: 16px !important; /* Odstęp w pionie między cenami a plakietką -20% */
        margin-top: 16px !important;
        width: 100% !important;
    }
    
    /* Gwarancja wyglądu starej ceny na froncie */
    .np-kit-price .np-kit-old {
        font-size: 1.15rem !important;
        color: #a0aabf !important; /* Chłodny, zgaszony szary (nie odciąga uwagi) */
        text-decoration: line-through !important;
    }
    
    /* Gwarancja wyglądu nowej ceny na froncie */
    .np-kit-price .np-kit-new {
        font-size: 1.6rem !important;
        color: var(--gold-600) !important;
        font-weight: 700 !important;
    }
    
    /* Nowe, agresywne i wielkie -20% pod ceną */
    .np-kit-discount-badge {
        grid-column: 1 / -1 !important; /* Rozciąga plakietkę na całą dostępną szerokość pod cenami */
        justify-self: center !important;
        font-size: 2.4rem !important; /* Znacznie powiększamy zniżkę! */
        padding: 12px 28px !important;
        margin: 0 !important; /* Usuwamy stare marginesy, bo używamy row-gap w siatce */
        width: max-content !important;
    }
    .np-kit-btn {
        margin-top: 8px !important;
    }

    /* --- 2. WYMUSZENIE LUKSUSOWEGO STICKY BARU (Wersja Ultra-Slick) --- */
    .np-sticky-bar {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 10px 0 !important; /* Ścinamy wysokość paska */
    }
    .np-sticky-inner {
        gap: 8px !important;
    }
    .np-sticky-product {
        gap: 10px !important; /* Dosuwamy tekst bliżej zdjęcia */
    }
    .np-sticky-product img {
        width: 36px !important; /* Mniejsze, zgrabniejsze zdjęcie */
        height: 36px !important;
        border-radius: 6px !important;
    }
    .np-sticky-product div {
        gap: 0 !important; /* Kasujemy sztuczną przerwę między nazwą a ceną */
        justify-content: center !important;
    }
    .np-sticky-product strong {
        font-size: 0.7rem !important; /* Subtelniejsza nazwa */
        margin-bottom: 2px !important;
    }
    .np-sticky-product span {
        font-size: 0.95rem !important; /* Wyraźna cena */
        line-height: 1 !important;
    }
    .np-sticky-actions .np-delivery-item {
        display: none !important; 
    }
    .np-sticky-actions .btn {
        padding: 12px 16px !important; /* Znacznie smuklejszy guzik (mniejszy na wysokość) */
        font-size: 0.7rem !important;
        width: auto !important;
        border-radius: 6px !important; /* Minimalnie mniejsze zaokrąglenie pasujące do małego ekranu */
        box-shadow: 0 4px 12px -4px rgba(201, 163, 101, 0.4) !important;
    }
	
	
	/* ============================================================= 
   REVEAL FALLBACK — WooCommerce single product + wszystkie strony
   ============================================================= */
	body.single-product .reveal,
	body.woocommerce-page .reveal,
	.np-section .reveal,
	.np-for-whom-grid .reveal,
	.np-reviews-grid .reveal,
	.np-related-grid .reveal,
	.np-effects-grid .reveal {
		animation: npRevealForce 0.01s 1s forwards;
	}
	@keyframes npRevealForce {
		to { opacity: 1; transform: translateY(0); }
	}
	
	
	
	/* Ukrycie systemowego linku "Zobacz koszyk" po AJAX */
	.neoli-prod-card .added_to_cart {
		display: none !important;
	}
}
/* ============================================================
   KOSZYK NEOLI - LUXURY & PREMIUM LOOK
   ============================================================ */

/* Kontener główny koszyka */
.woocommerce-cart .neoli-cart-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 50px;
    margin-top: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .woocommerce-cart .neoli-cart-wrapper {
        grid-template-columns: 1fr;
    }
}

/* --- TABELA PRODUKTÓW --- */
.neoli-cart-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid var(--line);
}

.neoli-cart-table thead th {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--navy-600);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.neoli-cart-item {
    border-bottom: 1px solid rgba(176,141,85,0.1);
}

.neoli-cart-item td {
    padding: 25px 0;
    vertical-align: middle;
}

/* Miniaturka */
.neoli-cart-img img {
    width: 100px;
    height: auto;
    border-radius: 4px;
    background: var(--cream);
}

/* Nazwa produktu */
.neoli-cart-name a {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy-800);
    text-decoration: none;
    transition: color 0.3s;
}

.neoli-cart-name a:hover {
    color: var(--gold-600);
}

/* Ilość (Quantity) */
.neoli-cart-qty .quantity input {
    border: 1px solid var(--line);
    padding: 8px;
    width: 50px;
    text-align: center;
    font-family: var(--font-sans);
}

/* Usuwanie */
.neoli-cart-remove a {
    color: #cc0000;
    font-size: 1.2rem;
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.neoli-cart-remove a:hover {
    opacity: 1;
}

/* --- PANEL PODSUMOWANIA (SIDEBAR) --- */
.cart_totals {
    background: #fff;
    border: 1px solid var(--line);
    padding: 35px;
    border-radius: 0; /* Luxury design woli ostre kąty lub minimalne zaokrąglenia */
}

.cart_totals h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--navy-800);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gold-500);
    display: inline-block;
}

.shop_table_totals {
    width: 100%;
    margin-bottom: 25px;
}

.shop_table_totals tr th, 
.shop_table_totals tr td {
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-align: left;
}

.shop_table_totals tr th {
    color: var(--navy-600);
    font-weight: 500;
}

.shop_table_totals tr td {
    text-align: right;
    color: var(--navy-800);
    font-weight: 600;
}

.order-total th, 
.order-total td {
    border-top: 2px solid var(--line);
    padding-top: 20px !important;
    font-size: 1.2rem !important;
}

.order-total td strong {
    color: var(--gold-600);
}

/* Przycisk Przejdź do kasy */
.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px !important;
    background: var(--navy-800) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.4s ease !important;
}

.checkout-button:hover {
    background: var(--gold-500) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Sekcja kuponu pod tabelą */
.neoli-cart-coupon {
    display: flex;
    gap: 10px;
    padding: 20px 0;
}

.neoli-cart-coupon input {
    padding: 10px 15px;
    border: 1px solid var(--line);
    flex: 1;
}


/* SEARCH OVERLAY */
#neoli-search-overlay.active { display: flex !important; }
#neoli-search-overlay .neoli-sr-item {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 14px; border-radius: 10px;
    text-decoration: none; color: var(--navy-900);
    transition: background 0.15s;
    margin-bottom: 4px;
}
#neoli-search-overlay .neoli-sr-item:hover { background: var(--cream); }
#neoli-search-overlay .neoli-sr-img {
    width: 52px; height: 52px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0; background: var(--cream);
}
#neoli-search-overlay .neoli-sr-name {
    font-family: var(--font-sans); font-size: 0.9rem;
    font-weight: 600; color: var(--navy-900);
}
#neoli-search-overlay .neoli-sr-price {
    font-family: var(--font-serif); font-size: 0.9rem;
    color: var(--gold-600); margin-top: 3px;
}
#neoli-search-overlay .neoli-sr-empty {
    text-align: center; padding: 20px;
    font-size: 0.88rem; color: var(--silver);
    font-family: var(--font-sans);
}



/* ==========================================================================
   POPRAWKA WIDOKU MOBILE (FRONT-PAGE SLIDER)
   Ukrycie strzałek, korekta światła i przesunięcie treści nad grafikę
   ========================================================================== */


@media (max-width: 768px) {
    /* 1. Całkowite ukrycie przycisku CTA w sliderze na telefonach */
    .hero-section .hero-content .btn {
        display: block-inline !important;
		margin-top: 20px !important;
    }

    /* 2. Złamanie obecnego środkowania i przyklejenie tekstu twardo do góry */
    .hero-section .hero-content {
        position: absolute !important;
        top: 8% !important; /* Sztywna odległość od góry ekranu */
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important; /* Zabija ewentualne translateY(-50%) */
        margin: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Lekkie zmniejszenie fontów, by zachować klasę premium na małym ekranie */
    .hero-section .hero-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .hero-section .hero-subtitle {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .hero-section .hero-text {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 480px) {
    /* Wąskie telefony - dodatkowa korekta nagłówka */
    .hero-title {
        font-size: 28px !important;
    }
    
    .hero-section .swiper-slide {
        padding-top: 15px !important;
    }
}

@media (max-width: 768px) {
    .np-acc-body.is-open {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    .np-acc-inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================================================
   HAMILTON MOBILE - OSTATECZNA POPRAWKA (V4 - Dociśnięte marginesy)
   ========================================================================== */
@media (max-width: 768px) {
    .hamilton-desktop { 
        display: none !important; 
    }
    .hamilton-mobile { 
        display: flex !important; 
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important; /* Zmniejszony ogólny odstęp między wszystkimi elementami */
        width: 100% !important;
        padding-top: 0 !important; /* Usunięcie zbędnego paddingu z góry */
    }
    
    /* 1. DUŻE LOGO Z UCIĘTYM ŚWIATŁEM (Ujemne marginesy) */
    .hamilton-mobile > img {
        height: auto !important; 
        width: 220px !important; 
        max-width: 90% !important;
        min-height: 0 !important;
        /* Ujemne wartości ucinają przestrzeń nad i pod logo: */
        margin: -15px auto -5px auto !important; 
        padding: 0 !important;
        object-fit: contain !important;
    }

    /* Złota kreseczka na środku */
    .hamilton-mobile > div:nth-of-type(1) {
        margin: 0 auto !important;
    }

    /* 2. Główny akapit tekstu */
    .hamilton-mobile > p {
        margin: 0 auto !important;
        max-width: 320px !important;
        padding: 0 15px !important;
        text-align: center !important;
    }

    /* 3. TARCZA I TEKST - Zmuszone do bycia razem (inline-flex) */
    .hamilton-mobile > div:last-child {
        display: inline-flex !important; 
        flex-direction: row !important;
        align-items: center !important; 
        justify-content: center !important;
        gap: 14px !important; 
        width: auto !important; 
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. Sztywna ikona tarczy (nie ściśnie się) */
    .hamilton-mobile > div:last-child svg {
        flex: 0 0 24px !important; 
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 5. Tekst certyfikatu doklejony do tarczy */
    .hamilton-mobile > div:last-child span {
        flex: 0 1 auto !important;
        text-align: left !important; 
        font-size: 0.88rem !important; 
        line-height: 1.4 !important;
        margin: 0 !important;
        display: block !important;
        max-width: 230px !important; 
    }
}

/* ============================================================
   BADGE MODAL — DARMOWA DOSTAWA (idx=4)
   ============================================================ */
.badge-delivery-modal {
    gap: 0;
}

.delivery-carriers-panel {
    background: #f9f6f0;
    border-radius: 16px 0 0 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 260px;
    max-width: 300px;
}

.delivery-carriers-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-500, #b8976a);
    text-transform: uppercase;
}

.delivery-carriers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.carrier-logo-box {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    min-height: 60px;
}

.carrier-logo-box img {
    max-width: 90px;
    max-height: 36px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.carrier-logo-box--wide {
    grid-column: 1 / -1;
}

.carrier-logo-box--wide img {
    max-width: 70px;
}

.delivery-carriers-note {
    font-size: 12px;
    color: #888;
    text-align: center;
    line-height: 1.5;
}

.delivery-carriers-note i {
    color: var(--gold-500, #b8976a);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Mini-ikony na dole prawej kolumny */
.delivery-mini-icons {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
}

.delivery-mini-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.delivery-mini-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-500, #b8976a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500, #b8976a);
    font-size: 18px;
    line-height: 1;
}

.delivery-mini-circle i {
    font-size: 18px !important;
    width: 20px !important;
    text-align: center;
    display: inline-block;
    line-height: 1;
}

.delivery-mini-item span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #555;
    line-height: 1.4;
}

/* Mobile — stos zamiast side-by-side */
@media (max-width: 768px) {
    .badge-delivery-modal {
        flex-direction: column;
    }

    .delivery-carriers-panel {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        min-width: unset;
        padding: 24px 20px;
    }

    .delivery-mini-icons {
        gap: 16px;
    }

    .delivery-mini-circle {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }
}

/* ============================================================
   MODAL idx=3 — HACCP certyfikat (pełne zdjęcie)
   ============================================================ */
.haccp-left {
    padding: 24px !important;
    overflow: hidden;
    border-radius: 4px 0 0 4px;
}

.haccp-left::before {
    display: block !important;
    z-index: 3;
}

.haccp-cert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: none !important;
}

@media (max-width: 768px) {
    .haccp-left {
        border-radius: 4px 4px 0 0;
        min-height: 300px;
    }
}


/* ============================================================
   BADGE MODAL — PREMIUM JAKOŚĆ (idx=2)
   ============================================================ */
.quality-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px !important;
}

.quality-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-500, #b8976a);
    text-transform: uppercase;
}

.quality-divider {
    width: 40px;
    height: 1px;
    background: var(--gold-500, #b8976a);
    margin-top: -8px;
}

.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
}

.quality-box {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 12px;
    text-align: center;
}

.quality-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-500, #b8976a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500, #b8976a);
    overflow: hidden;
}

.quality-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.quality-box span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #444;
    line-height: 1.4;
    text-transform: uppercase;
}

.quality-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e8e0d4;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    text-align: center;
}

.quality-note-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--gold-500, #b8976a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500, #b8976a);
}

@media (max-width: 768px) {
    .badge-quality-modal {
        flex-direction: column;
    }
    .quality-left {
        min-width: unset !important;
        max-width: 100% !important;
    }
}

/* =============================================================
   METAMORFOZY SLIDER
   ============================================================= */
.metamorfozy-section { background: var(--cream); }

.meta-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px -20px rgba(22,28,40,0.1);
    transition: all 0.5s var(--ease-luxe);
}
.meta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 36px 60px -20px rgba(22,28,40,0.16);
}

.meta-img-wrap {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}
.meta-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-luxe);
}
.meta-card:hover .meta-img-wrap img { transform: scale(1.04); }

.meta-content {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.meta-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.meta-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 500;
    color: var(--navy-800);
    line-height: 1.2;
    margin: 0;
}

.meta-text {
    font-size: 0.97rem;
    color: var(--graphite);
    line-height: 1.75;
    margin: 0;
}

.meta-stats {
    display: flex;
    gap: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.meta-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-stat-num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold-600);
    line-height: 1;
}

.meta-stat-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--silver);
}

@media (max-width: 900px) {
    .meta-card { grid-template-columns: 1fr; }
    .meta-img-wrap { min-height: unset; aspect-ratio: auto; height: auto; }
    .meta-img-wrap img { height: auto; object-fit: contain; }
    .meta-content { padding: 36px 30px; }
}
@media (max-width: 600px) {
    .meta-content { padding: 28px 22px; gap: 16px; }
    .meta-stats { gap: 20px; }
    .meta-stat-num { font-size: 1.3rem; }
}


/* ==========================================================================
   NAPRAWA WYSKAKUJĄCYCH OKIENEK (MODALI) NA MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Gwarancja, że tło modala wymusza absolutne centrowanie na ekranie telefonu */
    .lightbox-modal.active {
        display: flex !important; 
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 16px !important;
    }

    /* 2. Sztywne ramy dla samego białego okienka (nie ma prawa przekroczyć szerokości ekranu) */
    .feature-modal-box,
    .badania-modal-box,
    .kontakt-modal-box,
    .np-cart-modal-box {
        width: 100% !important;
        max-width: 420px !important; /* Optymalna szerokość dla smartfonów */
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* Odcięcie wylewających się w prawo treści */
    }

    /* 3. Korekta wewnętrznych marginesów dla treści (odchudzenie na wąskich ekranach) */
    .feature-modal-right {
        padding: 24px 20px 30px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .feature-modal-left {
        padding: 30px 20px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Zapobieganie rozpychaniu przez długie tytuły (np. CYNATINE) */
    .feature-modal-right .display {
        font-size: 1.6rem !important; 
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        margin-bottom: 16px !important;
    }

    /* 5. Gwarancja, że przycisk "ZOBACZ BADANIA" zawsze zmieści się w okienku */
    .feature-modal-right .btn {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Pozwala na zawijanie długiego tekstu w przycisku */
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   AGRESYWNE PODCIĄGNIĘCIE STRZAŁEK W OPINIACH (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    /* Ucinamy dolny, pusty odstęp wewnątrz samej karuzeli */
    #reviews .reviews-slider {
        padding-bottom: 10px !important; 
    }
    
    /* Agresywne podciągnięcie przycisków w górę (ujemny margines) */
    #reviews .reviews-controls {
        margin-top: -15px !important; 
        position: relative;
        z-index: 10;
    }
    
    /* Zmniejszenie wymuszonej minimalnej wysokości kart na telefonach */
    #reviews .review-card {
        min-height: auto !important;
        padding-bottom: 24px !important;
    }
}

/* ==========================================================================
   NAPRAWA PRAWEGO MARGINESU W KAFELKACH NA STRONIE SKŁAD (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .sklad-usage-inner {
        display: grid !important;
        /* minmax(0, 1fr) zmusza siatkę do trzymania się w granicach ekranu */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
    
    .sklad-usage-card {
        padding: 24px 10px !important; /* Nieco węższe boki, by tekst miał miejsce */
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Zmniejszenie ikonek, by nie zabierały cennej przestrzeni */
    .sklad-usage-icon {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    .sklad-usage-card h4 {
        font-size: 0.85rem !important;
        /* Kluczowe: pozwala przełamać długie słowa, by nie rozpychały ekranu */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .sklad-usage-card p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}