/* ==========================================================================
   NOWA STRONA GŁÓWNA GRUPY BUENA — długa strona z animacjami (nie scroll-snap jak landingi).
   Tokeny: Design System „Grupa Buena — nowy branding” (tokens.json). Root #buena-home, prefiks bh-.
   Ozdobniki jak w ofercie CRM: konturowe romby i kilka ukośnych linii przecinających narożnik sekcji od krawędzi do krawędzi.
   Źródło: buena-wordpress/strona-glowna/ (repo buena-backup). Animacje i przyklejone menu: glowna.js.
========================================================================== */

/* Zapasowy krój nagłówków o szerokości Fraunces (Georgia przeskalowana, pomiar 2026-10-22: pogrubiona 80 %, kursywa 74,2 %).
   Zanim Fraunces dojdzie z Google Fonts, tytuł hero łamał się na 3 linie zamiast 2 i treść skakała (CLS). */
@font-face { font-family: "Fraunces Zapas"; font-style: normal; font-weight: 500 800; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); size-adjust: 80%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Zapas"; font-style: italic; font-weight: 500 800; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"), local("Georgia Italic"); size-adjust: 74.2%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

#buena-home {
    --bh-black: #010100;
    --bh-yellow: #FCC204;
    --bh-gold: #FEC013;
    --bh-gold-hover: #FFD23F;
    --bh-ink: #111111;
    --bh-graphite: #1A1A1A;
    --bh-text: #333333;
    --bh-muted: #5B5B5B;
    --bh-paper: #FFFFFF;
    --bh-cream: #F7F3EC;
    --bh-hairline: rgba(17, 17, 17, .12);
    --bh-romb: rgba(254, 192, 19, .3);
    --bh-hairline-dark: rgba(255, 255, 255, .16);
    --bh-on-black: #DDDDDD;
    --bh-shadow-cta: 0 10px 30px -10px rgba(254, 192, 19, .5);
    --bh-shadow-cta-hover: 0 20px 40px -10px rgba(254, 192, 19, .8);
    --bh-shadow-photo: 0 20px 40px -10px rgba(0, 0, 0, .1);
    --bh-display: "Fraunces", "Fraunces Zapas", Georgia, serif;
    --bh-sans: "Manrope", system-ui, sans-serif;
    --bh-header: 153px;   /* wysokość menu BeTheme zanim glowna.js ją zmierzy (niżej: tablet, telefon) — bez skoku hero (CLS) */
    --bh-gutter: 40px;

    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    color: var(--bh-text);
    background: var(--bh-paper);
    font-family: var(--bh-sans);
    font-size: 16.5px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
#buena-home *, #buena-home *::before, #buena-home *::after { box-sizing: border-box; }
#buena-home img { display: block; max-width: 100%; height: auto; }
#buena-home a { color: inherit; text-decoration: none; }
#buena-home p { margin: 0; }
#buena-home h1, #buena-home h2, #buena-home h3 { margin: 0; font-family: var(--bh-display); color: var(--bh-ink); font-weight: 600; letter-spacing: -.01em; }
#buena-home em { font-style: italic; color: var(--bh-gold); font-weight: 600; }

/* Powłoka BeTheme: bez tytułu i odstępów nad treścią, bez poziomego paska */
body:has(#buena-home) #Content { padding-top: 0 !important; overflow-x: clip; }
body:has(#buena-home) .the_content_wrapper,
body:has(#buena-home) .section_wrapper { padding: 0 !important; margin: 0 auto !important; }

/* Menu przyklejone do góry ekranu (klasę i --bh-menu-gora ustawia glowna.js; miejsce po menu trzyma #Header_wrapper) */
html.bh-menu-stale #Top_bar {
    position: fixed !important;
    top: var(--bh-menu-gora, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9990 !important;
    transform: none !important;
    opacity: 1 !important;
    background-color: #FFFFFF !important;
    transition: box-shadow .3s ease;
}
html.bh-menu-stale.bh-menu-cien #Top_bar { box-shadow: 0 2px 13px rgba(17, 17, 17, .1) !important; }

/* ---------- Układ ---------- */
#buena-home .bh-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--bh-gutter); }
#buena-home .bh-wrap--waski { max-width: 880px; }
#buena-home .bh-sekcja { position: relative; padding: 120px 0; }
#buena-home .bh-krem { background: var(--bh-cream); }
#buena-home .bh-sekcja > .bh-wrap { position: relative; z-index: 1; }

/* ---------- Ozdobniki jak w ofercie CRM ----------
   Romb: kontur przy krawędzi. Linie: trzy cienkie ukośne kreski w jednym narożniku, każda od krawędzi do krawędzi
   (pasma gradientu „to bottom left” biegną prostopadle do przekątnej, więc odcinają róg). Narożniki naprzemiennie. */
#buena-home .bh-sekcja { overflow: hidden; }
#buena-home .bh-sekcja::before {
    content: ""; position: absolute; width: 233px; height: 233px; bottom: 89px; left: -116px;   /* romb w narożniku naprzeciw linii */
    border: 2px solid var(--bh-romb); transform: rotate(45deg); pointer-events: none;
}
#buena-home .bh-sekcja::after {
    --linia: rgba(254, 192, 19, .55);
    content: ""; position: absolute; top: 0; right: 0; width: 377px; height: 377px; pointer-events: none;
    background: linear-gradient(to bottom left,
        transparent calc(13% - 1px), var(--linia) calc(13% - 1px) calc(13% + 1px), transparent calc(13% + 1px) calc(21% - 1px),
        var(--linia) calc(21% - 1px) calc(21% + 1px), transparent calc(21% + 1px) calc(29% - 1px),
        var(--linia) calc(29% - 1px) calc(29% + 1px), transparent calc(29% + 1px));
}
#buena-home .bh-sekcja:nth-of-type(odd)::before { left: auto; right: -116px; bottom: auto; top: 89px; }
#buena-home .bh-sekcja:nth-of-type(odd)::after { top: auto; right: auto; bottom: 0; left: 0; transform: rotate(180deg); }

#buena-home .bh-glowka { max-width: 760px; margin-bottom: 56px; }
#buena-home .bh-glowka--srodek { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Typografia ---------- */
#buena-home .bh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px;
    color: var(--bh-gold);
    font: 800 11px/1.4 var(--bh-sans);
    letter-spacing: 1.76px;
    text-transform: uppercase;
}
/* jak w ofercie CRM: żółta kreska, potem grafitowy równoległobok (span w glowna.html) */
#buena-home .bh-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--bh-gold); }
#buena-home .bh-eyebrow-t { padding: 6px 16px; background: var(--bh-graphite); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
#buena-home .bh-h2 { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.12; }
#buena-home .bh-lead { margin-top: 21px; max-width: 58ch; font-size: 18px; line-height: 1.75; font-weight: 500; }
#buena-home .bh-glowka--srodek .bh-lead { margin-left: auto; margin-right: auto; }

/* Słowa nagłówków (dzieli glowna.js) — maska pod każde słowo */
#buena-home .bh-s { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
#buena-home .bh-s > span { display: inline-block; will-change: transform; }

/* ---------- Przyciski i linki ---------- */
#buena-home .bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 4px;
    background: var(--bh-gold);
    color: var(--bh-ink) !important;
    font: 800 15px/1.2 var(--bh-sans);
    letter-spacing: .75px;
    text-transform: uppercase;
    box-shadow: var(--bh-shadow-cta);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease, color .25s ease;
}
#buena-home .bh-btn:hover { background: var(--bh-gold-hover); box-shadow: var(--bh-shadow-cta-hover); transform: translateY(-2px); }
/* Na ciemnym hero duża żółta poświata rozlewa się po filmie — tam tylko krótki cień */
#buena-home .bh-hero .bh-btn { box-shadow: 0 6px 18px -8px rgba(254, 192, 19, .45); }
#buena-home .bh-hero .bh-btn:hover { box-shadow: 0 8px 21px -8px rgba(254, 192, 19, .6); }
#buena-home .bh-btn--jasny { background: transparent; color: var(--bh-paper) !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7) !important; }
#buena-home .bh-btn--jasny:hover { background: var(--bh-paper); box-shadow: inset 0 0 0 2px var(--bh-paper) !important; }
#buena-home .bh-btn:focus-visible, #buena-home a:focus-visible, #buena-home button:focus-visible, #buena-home summary:focus-visible { outline: 3px solid var(--bh-gold); outline-offset: 3px; }

/* Motyw ma „a:not(#buena-lp a):hover { color: żółty !important }” — :not(#id) podbija swoistość ponad #buena-home .klasa.
   Przebijamy tym samym sposobem (:not(#bh-brak)), tylko tam, gdzie kolor stoi na samym linku. */
#buena-home a.bh-btn:not(#bh-brak):hover { color: var(--bh-ink) !important; }
#buena-home .bh-faq a:not(#bh-brak):hover { color: var(--bh-ink) !important; }
#buena-home .bh-btn:focus-visible, #buena-home a:focus-visible, #buena-home button:focus-visible, #buena-home summary:focus-visible { outline: 3px solid var(--bh-gold); outline-offset: 3px; }

#buena-home .bh-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--bh-gold);
    color: var(--bh-ink);
    font: 800 14px/1.2 var(--bh-sans);
    letter-spacing: .7px;
    text-transform: uppercase;
}
#buena-home .bh-link::after { content: "→"; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
#buena-home a:hover .bh-link::after { transform: translateX(6px); }

/* Odnośnik ze strzałką jak w stopce; na jasnym tle tekst ciemny, żółte są strzałka i podkreślenie (żółty tekst na bieli 1,7:1) */
#buena-home .bh-strzalka-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 14px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--bh-gold);
    color: var(--bh-ink);
    font: 700 15px/1.3 var(--bh-sans);
}
#buena-home .bh-strzalka-link::after { content: "→"; color: var(--bh-gold); font-weight: 800; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
#buena-home a:hover .bh-strzalka-link::after { transform: translateX(6px); }

#buena-home .bh-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 12px;
    background: var(--bh-yellow);
    color: var(--bh-ink);
    font: 800 11px/1.5 var(--bh-sans);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* Zdjęcie z odsłanianiem (maskę animuje glowna.js) */
#buena-home .bh-foto { display: block; position: relative; overflow: hidden; border-radius: 20px; box-shadow: var(--bh-shadow-photo); background: var(--bh-cream); }
#buena-home .bh-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 1. Hero — film w tle, treść na środku ---------- */
#buena-home .bh-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--bh-header));
    min-height: calc(100svh - var(--bh-header));
    padding: 89px 0;
    background: var(--bh-black);
    color: var(--bh-on-black);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
#buena-home .bh-hero-media { position: absolute; inset: 0; z-index: -1; }
#buena-home .bh-hero-media picture, #buena-home .bh-hero-poster, #buena-home .bh-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
#buena-home .bh-hero-video { opacity: 0; transition: opacity 1.2s ease; }
#buena-home .bh-hero.is-video .bh-hero-video { opacity: 1; }
/* Przyciemnienie: mocniej z lewej (pas, tekst), lżej ku prawej krawędzi; pod tekstem delikatnie mocniej */
#buena-home .bh-hero-shade {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 52% at 50% 50%, rgba(1, 1, 0, .38) 0%, rgba(1, 1, 0, 0) 100%),
        linear-gradient(90deg, rgba(1, 1, 0, .9) 0%, rgba(1, 1, 0, .8) 25%, rgba(1, 1, 0, .67) 47%, rgba(1, 1, 0, .36) 100%);
}
/* Światło pod szkłem: trzy duże miękkie plamy w kolorach filmu (glowna.js co chwilę próbkuje kadr wokół każdej plamy
   i ustawia jej kolor; zmiana płynna przez transition). Bardzo powolny dryf. Bez JS / przy „ogranicz ruch” — stały ciepły blask. */
#buena-home .bh-hero-swiatlo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#buena-home .bh-hero-swiatlo span {
    position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
    background-color: rgb(255, 214, 150);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 100%);
    mix-blend-mode: screen; opacity: .2;
    transition: background-color 2.1s ease;
    will-change: transform;
    animation: bh-dryf 55s ease-in-out infinite alternate;
}
#buena-home .bh-hero-swiatlo span:nth-child(1) { left: 78%; top: 22%; margin: -31vmax 0 0 -31vmax; }
#buena-home .bh-hero-swiatlo span:nth-child(2) { left: 58%; top: 84%; margin: -31vmax 0 0 -31vmax; animation-duration: 89s; animation-direction: alternate-reverse; opacity: .16; }
#buena-home .bh-hero-swiatlo span:nth-child(3) { left: 34%; top: 38%; margin: -31vmax 0 0 -31vmax; animation-duration: 34s; opacity: .13; }
@keyframes bh-dryf {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-8%, 5%) scale(1.13); }
    100% { transform: translate(6%, -4%) scale(.92); }
}
/* Szkło nad światłem: rozmycie maskuje 720p na dużych ekranach, obraz dalej czytelny; delikatny stały połysk */
#buena-home .bh-hero-szklo {
    position: absolute; inset: 0;
    -webkit-backdrop-filter: blur(6px) saturate(1.15) brightness(.96);
    backdrop-filter: blur(6px) saturate(1.15) brightness(.96);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .035) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 21%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Pas jak na opakowaniu „Kawa mielona Poranna”, w wersji Specialty: biały blok od lewej krawędzi, skośna krawędź (13°, szerszy
   ku dołowi), za nią żółte linie coraz cieńsze i rzadsze (Fibonacci) zamiast gradientu. Rysowany jako SVG (wielokąty mają
   wygładzone krawędzie — pochylony gradient CSS dawał schodki). --bh-pas = szerokość bieli u góry; liczy glowna.js z miejsca
   na lewo od tekstu. Za mało miejsca → bez pasa, gałązki i pulsu (klasa bh-bez-galazki). */
#buena-home .bh-hero { --bh-g: var(--bh-hero-h, 100vh); }
#buena-home .bh-hero.bh-bez-galazki .bh-hero-pas,
#buena-home .bh-hero.bh-bez-galazki .bh-hero-galazka,
#buena-home .bh-hero.bh-bez-galazki .bh-hero-puls,
#buena-home .bh-hero.bh-hero-waski .bh-hero-galazka,
#buena-home .bh-hero.bh-hero-waski .bh-hero-puls { display: none; }   /* wąsko: sam pas w lewym dolnym rogu */
/* gałązki dopiero po wyliczeniu ich wielkości (--bh-g z glowna.js) — wcześniej miały pełną wysokość hero i skakały (CLS) */
#buena-home .bh-hero:not([style*="--bh-g"]) .bh-hero-galazka { display: none; }
#buena-home .bh-hero-pas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
#buena-home .bh-pas-blok { fill: var(--bh-paper); }
#buena-home .bh-pas-linia { fill: var(--bh-yellow); }
/* Gałązki: czysty wektor w 2 kolorach marki (obrys rosliny_2_branding.svg z opakowania Poranna — czysty_wektor.py).
   Kompozycja dwóch: główna wysoka i druga mniejsza, mocniej pochylona, za nią. Łodygi wychodzą spod lewej krawędzi.
   --k skala względem --bh-g, --dol położenie podstawy (× wysokość hero), --obrot przechylenie, --dx przesunięcie podstawy.
   glowna.js zmniejsza --bh-g, gdy gałązki sięgałyby tekstu (te same liczby co tutaj — GALAZKI w glowna.js). */
#buena-home .bh-hero-galazka {
    --k: 1.12; --dol: 1.08; --obrot: 7deg; --dx: -34px;
    position: absolute; z-index: -1;
    height: calc(var(--bh-g) * var(--k)); width: calc(var(--bh-g) * var(--k) / 3);            /* plik 724×2172 */
    left: calc(var(--bh-g) * var(--k) / 3 * -.068 + var(--dx));
    top: calc(var(--bh-hero-h, 100vh) * var(--dol) - var(--bh-g) * var(--k) * .979);
    transform: rotate(var(--obrot)); transform-origin: 6.8% 97.9%;                            /* obrót wokół podstawy łodygi */
    pointer-events: none;
}
#buena-home .bh-hero-galazka--druga { --k: .78; --dol: 1.06; --obrot: 29deg; --dx: -13px; }
#buena-home .bh-hero-galazka img { display: block; width: 100%; height: 100%; max-width: none; }
/* Linia pulsu z opakowania: od pasa do pauzy, skok na środku pod przyciskami */
#buena-home .bh-hero-puls { position: absolute; left: 0; bottom: 34px; width: 100%; height: 55px; overflow: visible; pointer-events: none; }
#buena-home .bh-puls-linia { fill: none; stroke: var(--bh-yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#buena-home .bh-hero-inner { display: flex; justify-content: center; }
#buena-home .bh-hero-content { max-width: 840px; margin: 0 auto; }
#buena-home .bh-hero-title { color: var(--bh-paper); font-size: clamp(44px, 5.8vw, 92px); line-height: 1.05; font-weight: 700; }
#buena-home .bh-hero-lead { margin: 26px auto 0; max-width: 56ch; color: var(--bh-on-black); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; font-weight: 500; }
/* przyciski równej szerokości (siatka z kolumnami 1fr), wyśrodkowane */
#buena-home .bh-hero-akcje { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; margin-top: 21px; }

#buena-home .bh-hero-pauza {
    margin: 0;   /* BeTheme daje <button> margin-bottom 15px — pauza wchodziła na przyciski hero (iPhone SE) */
    position: absolute; right: var(--bh-gutter); bottom: 34px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    border: 1px solid var(--bh-hairline-dark); background: rgba(1, 1, 0, .35); cursor: pointer;
}
#buena-home .bh-hero-pauza svg { display: block; width: 16px; height: 16px; fill: var(--bh-paper); }
#buena-home .bh-hero-pauza .bh-ikona-graj { display: none; }
#buena-home .bh-hero-pauza[aria-pressed="true"] .bh-ikona-pauza { display: none; }
#buena-home .bh-hero-pauza[aria-pressed="true"] .bh-ikona-graj { display: block; }
#buena-home .bh-hero-pauza:hover { background: rgba(1, 1, 0, .6); }


/* ---------- 2. Linie ---------- */
#buena-home .bh-linie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
#buena-home .bh-linia { display: flex; flex-direction: column; gap: 10px; }
#buena-home .bh-linia .bh-foto { aspect-ratio: 4 / 5; margin-bottom: 10px; }
#buena-home .bh-linia:hover .bh-foto img, #buena-home .bh-kafel:hover .bh-foto img { transform: scale(1.06); }
#buena-home .bh-linia-t { font: 700 24px/1.2 var(--bh-display); color: var(--bh-ink); }
#buena-home .bh-linia-d { color: var(--bh-muted); font-size: 15.5px; line-height: 1.6; flex: 1; }
#buena-home .bh-linia .bh-link { margin-top: 8px; align-self: flex-start; }

/* ---------- 3. Kawy — wyśrodkowana siatka, packshoty z przezroczystym tłem ---------- */
#buena-home .bh-kawy-siatka { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
#buena-home .bh-kawa {
    flex: 0 0 216px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 16px 24px;
    border-radius: 20px;
    background: var(--bh-cream);
    text-align: center;
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
#buena-home .bh-kawa:hover { background: var(--bh-paper); box-shadow: var(--bh-shadow-photo); transform: translateY(-4px); }
/* pliki są kwadratowe z workiem na środku — kadr 3:4 obcina puste boki, worek wychodzi większy */
#buena-home .bh-kawa-img { display: block; width: 100%; aspect-ratio: 3 / 4; margin-bottom: 10px; }
#buena-home .bh-kawa-img img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .18)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* Zdjęcie z karty sklepu (nowa kawa bez packshotu w bibliotece): białe tło wtopione w kartę */
#buena-home .bh-kawa-img img.bh-z-karty { object-fit: contain; mix-blend-mode: multiply; filter: none; }
#buena-home .bh-kawa:hover .bh-kawa-img img { transform: translateY(-6px) rotate(-2deg); }
#buena-home .bh-kawa-o { font: 800 11px/1.5 var(--bh-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--bh-muted); }
#buena-home .bh-kawa-n { font: 700 20px/1.2 var(--bh-display); color: var(--bh-ink); }
#buena-home .bh-kawa .bh-badge { align-self: center; margin-top: 6px; }
#buena-home .bh-kawy-wiecej { margin-top: 56px; text-align: center; }

/* ---------- 4. Dla firm — białe karty na kremie, kątownik przy zdjęciu jak w ofercie ---------- */
#buena-home .bh-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
#buena-home .bh-kafel {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 26px; border-radius: 20px; background: var(--bh-paper);
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
#buena-home .bh-kafel::before {
    content: ""; position: absolute; z-index: 2; top: -8px; left: -8px; width: 55px; height: 55px;
    border-top: 3px solid var(--bh-gold); border-left: 3px solid var(--bh-gold); pointer-events: none;
    opacity: 0; transition: opacity .35s ease;
}
#buena-home .bh-kafel:hover { box-shadow: var(--bh-shadow-photo); transform: translateY(-4px); }
#buena-home .bh-kafel:hover::before { opacity: 1; }
#buena-home .bh-kafel .bh-foto { aspect-ratio: 16 / 10; margin-bottom: 12px; box-shadow: none; border-radius: 13px; }
#buena-home .bh-kafel-t, #buena-home .bh-kafel-d, #buena-home .bh-kafel .bh-strzalka-link { margin-left: 8px; margin-right: 8px; }
#buena-home .bh-kafel-t { font: 700 22px/1.25 var(--bh-display); color: var(--bh-ink); }
#buena-home .bh-kafel-d { color: var(--bh-muted); font-size: 15.5px; line-height: 1.6; flex: 1; }

/* ---------- 5. Pytania ---------- */
#buena-home .bh-faq { border-top: 1px solid var(--bh-hairline); }
#buena-home .bh-faq details { border-bottom: 1px solid var(--bh-hairline); }
#buena-home .bh-faq summary {
    position: relative; list-style: none; cursor: pointer;
    padding: 24px 56px 24px 0;
    font: 600 clamp(19px, 1.6vw, 22px)/1.35 var(--bh-display); color: var(--bh-ink);
}
#buena-home .bh-faq summary::-webkit-details-marker { display: none; }
#buena-home .bh-faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
    border-right: 2px solid var(--bh-ink); border-bottom: 2px solid var(--bh-ink);
    transform: rotate(45deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
#buena-home .bh-faq details[open] summary::after { transform: translateY(6px) rotate(-135deg); }
#buena-home .bh-faq details p { padding: 0 56px 26px 0; }
#buena-home .bh-faq details p a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--bh-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Stany startowe animacji (tylko gdy działa JS; bez GSAP klasa bh-js znika) ---------- */
html.bh-js #buena-home [data-bh="up"],
html.bh-js #buena-home [data-bh="hero"],
html.bh-js #buena-home .bh-hero-pas,
html.bh-js #buena-home .bh-hero-galazka img,
html.bh-js #buena-home .bh-hero-puls { opacity: 0; }
html.bh-js #buena-home [data-bh="slowa"] { visibility: hidden; }

/* ---------- Tablet ---------- */
/* Wysokość menu BeTheme do pierwszego pomiaru w glowna.js (pomiar 2026-10-22: telefon 73, tablet 156–157, komputer 153) */
@media (max-width: 1239px) { #buena-home { --bh-header: 156px; } }
@media (max-width: 767px) { #buena-home { --bh-header: 73px; } }

@media (max-width: 1100px) {
    #buena-home .bh-linie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
    #buena-home .bh-linia .bh-foto { aspect-ratio: 16 / 11; }
    #buena-home .bh-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telefon ---------- */
@media (max-width: 767px) {
    #buena-home { --bh-gutter: 20px; font-size: 16px; }
    #buena-home .bh-sekcja { padding: 89px 0; }
    #buena-home .bh-glowka { margin-bottom: 40px; }
    #buena-home .bh-hero { padding: 89px 0; }
    #buena-home .bh-hero-shade { background: rgba(1, 1, 0, .7); }
    #buena-home .bh-hero-pauza { bottom: 26px; right: 20px; }
    #buena-home .bh-sekcja::before { width: 144px; height: 144px; }
    #buena-home .bh-sekcja::after { width: 233px; height: 233px; }
    #buena-home .bh-hero-akcje { display: grid; grid-auto-flow: row; width: 100%; margin-top: 21px; }
    #buena-home .bh-linie, #buena-home .bh-kafle { grid-template-columns: 1fr; gap: 48px; }
    #buena-home .bh-kawy-siatka { gap: 12px; }
    #buena-home .bh-kawa { flex-basis: calc(50% - 6px); padding: 12px 10px 18px; }
    #buena-home .bh-kawa-n { font-size: 17px; }
    #buena-home .bh-faq summary { padding-right: 40px; }
    #buena-home .bh-faq details p { padding-right: 0; }
}

/* ---------- Mniej ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
    #buena-home *, #buena-home *::before, #buena-home *::after { transition: none !important; animation: none !important; }
    html.bh-js #buena-home [data-bh], html.bh-js #buena-home .bh-hero-pas, html.bh-js #buena-home .bh-hero-galazka img, html.bh-js #buena-home .bh-hero-puls { opacity: 1 !important; visibility: visible !important; }
}