/* ============================================================
   BUENA — WARSTWA SZABLONU CORE (wersja robocza, 2026-10-27)
   Podgląd: narzedzia/podglad_roboczy.py (nic nie publikuje).
   Kroje (Kamil 27.10): Nunito — nagłówki, Open Sans — tekst, Manrope — menu, przyciski, ceny.
   Kolory: Design System „Grupa Buena — nowy branding” (tokens.json).
   ============================================================ */

/* ---------- FONTY LOKALNE (Pliki CMS) ---------- */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
    src: url('/data/include/cms/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap;
    src: url('/data/include/cms/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
    src: url('/data/include/cms/opensans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
    src: url('/data/include/cms/opensans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('/data/include/cms/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('/data/include/cms/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- TOKENY MARKI ---------- */
:root {
    --buena-v2: 1;                 /* znacznik szablonu — dodatki działają tylko, gdy jest */
    --b-black: #010100;
    --b-yellow: #FCC204;
    --b-gold: #FEC013;
    --b-gold-hover: #FFD23F;
    --b-ink: #111111;
    --b-text: #333333;
    --b-muted: #5B5B5B;
    --b-paper: #FFFFFF;
    --b-cream: #F7F3EC;
    --b-hairline: rgba(17, 17, 17, 0.12);
    --b-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* krzywe ruchu marki (motion-graphics MOTION.md §9) */
    --b-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --b-head: 'Nunito', system-ui, sans-serif;
    --b-body: 'Open Sans', system-ui, sans-serif;
    --b-ui: 'Manrope', system-ui, sans-serif;
}

/* ---------- TYPOGRAFIA ---------- */
body { font-family: var(--b-body); color: var(--b-text); }
h1, h2, h3, h4, .headline, .big_label, .section-title { font-family: var(--b-head); color: var(--b-ink); }

/* ---------- ZMIENNE CORE → MARKA ----------
   Core steruje kolorami i krojami zmiennymi. --primary-color = ink, bo Core używa go też do tekstu
   (aktywne menu, paginacja, linki) — żółty jako tekst na białym jest nieczytelny (1,7:1). */
:root {
    --primary-color: var(--b-ink);
    --font-family: var(--b-body);
    --font-family-headline: var(--b-head);
    --headline-color: var(--b-ink);
    --color-points: var(--b-ink);
    --rabateCode-color: var(--b-ink);
    --rabateCode-link-color: var(--b-ink);
    --rabateCode-close-button-color: var(--b-ink);
    --color-label-bestseller: var(--b-gold);
    --color-label-bestseller-background: #1A1A1A;   /* graphite — etykieta jak na landingach */
    --label-border-radius: 4px;
    --product-border-radius: 4px;
    --projector-details-border-radius: 4px;
}

/* ---------- PRZYCISKI (Button z Design Systemu) ----------
   html body + !important: reguły Core dla przycisków (np. #projector_button_basket) są bardziej szczegółowe. */
html body .btn.--solid {
    background-color: var(--b-gold) !important;
    border-color: var(--b-gold) !important;
    color: var(--b-ink) !important;
    font-family: var(--b-ui);
    font-weight: 800;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 10px 30px -10px rgba(254, 192, 19, 0.5);
}
html body .btn.--solid:hover, html body .btn.--solid:focus-visible {
    background-color: var(--b-gold-hover) !important;
    border-color: var(--b-gold-hover) !important;
    color: var(--b-ink) !important;
    box-shadow: 0 20px 40px -10px rgba(254, 192, 19, 0.8);
}
.btn.--outline { font-family: var(--b-ui); font-weight: 700; border-radius: 4px; }

/* ---------- MANROPE: menu, ceny, etykiety ---------- */
.nav-link, .navbar-nav, .label, .price, .projector_prices__price, .product__price, .pagination__link {
    font-family: var(--b-ui);
}
.nav-link.--l1 { font-weight: 700; }
.label { letter-spacing: 1px; }

/* ---------- PASEK KOMUNIKATÓW (dodatek robocze/dodatki/10-pasek.html) ---------- */
.buena-pasek {
    background: var(--b-black);
    color: var(--b-paper);
    font-family: var(--b-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 8px 16px;
    line-height: 1.4;
}
.buena-pasek strong { color: var(--b-yellow); font-weight: 800; }

/* ---------- KAFELKI TOWARÓW: bez szarego pola, zdjęcie na całą szerokość ----------
   Ikony towarów to PNG 250×250 z przezroczystym tłem — szarość dawał tylko kontener Core. */
.product__icon { background: transparent !important; }
.product__icon picture, .product__icon img { display: block; width: 100%; height: auto; }   /* Core: picture 200 px */
.product__name { font-family: var(--b-head); font-weight: 700; color: var(--b-ink); }
.product__prices, .product__prices .price { font-family: var(--b-ui); font-weight: 700; color: var(--b-ink); }

/* ---------- BANER COOKIES (IdoSell #ck_dsclr_v2) — karta jak popup z Design Systemu ---------- */
#ck_dsclr_v2 {
    background: var(--b-paper) !important;
    color: var(--b-text) !important;
    border-radius: 4px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--b-hairline);
}
#ck_dsclr_v2 p { color: var(--b-text) !important; font-size: 13px; line-height: 1.6; }
#ck_dsclr_v2 a { color: var(--b-ink) !important; text-decoration: underline; }
#ck_dsclr_v2 .ck_dsclr_x_v2, #ck_dsclr_v2 .icon-x { color: var(--b-ink) !important; }
#ck_dsclr_v2 .ck_dsclr__btn_v2 {
    background: var(--b-gold) !important;
    color: var(--b-ink) !important;
    font-family: var(--b-ui);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    border-radius: 4px;
    border: 0 !important;
}

/* ---------- KATEGORIA: podkategorie jako pigułki (dodatek 20-pigulki.html) ---------- */
.buena-pigulki { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.buena-pigulki a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--b-hairline);
    border-radius: 999px;
    font-family: var(--b-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--b-ink);
    text-decoration: none;
    background: var(--b-paper);
}
.buena-pigulki a:hover { border-color: var(--b-ink); }
.buena-pigulki a.--aktywna { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-paper); }
html.buena-ma-pigulki #menu_categories2 { display: none; }
/* boczna kolumna na liście towarów: bez filtrów ma tylko kategorie → lista na całą szerokość;
   z filtrami (kawy od 30.10: Rodzaj kawy, Gatunek, Pochodzenie, Intensywność) kolumna zostaje */
@media (min-width: 768px) {
    html.buena-ma-pigulki:not(:has(#Filters)) #layout > aside { display: none; }
    html.buena-ma-pigulki:not(:has(#Filters)) #layout > #content { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {   /* 4 kolumny jak w wizji Andrzeja */
    html.buena-ma-pigulki #search.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- STOPKA: czerń marki na całą szerokość (zmienne Core --footer-before-*) ---------- */
:root {
    --footer-before-content: '';
    --footer-before-background: var(--b-black);
    --footer-headline-color: var(--b-yellow);
    --footer-headline-color-hover: var(--b-yellow);
    --footer-headline-font-family: var(--b-ui);
    --footer-headline-arrow-color: var(--b-yellow);
}
footer { position: relative; color: #DDDDDD; isolation: isolate; background: transparent !important; }
footer::before {   /* tło na całą szerokość ekranu; zmienna Core --footer-before-content nie zadziałała w podglądzie */
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0; bottom: 0;
    left: 50% !important;
    width: 100vw !important;
    margin-left: -50vw;
    background: var(--b-black) !important;
    z-index: -1 !important;
}
footer a, footer span, footer .footer_links_sub a { color: #DDDDDD !important; }
footer a:hover { color: var(--b-yellow) !important; }
footer .footer_links_label { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }

/* ---------- STRONA GŁÓWNA: hero — ODŁOŻONE (Kamil 27.10: zostaje slider z banerami, na pełną szerokość);
   dodatek w robocze/odlozone/30-hero.html, style zostają na wypadek powrotu ---------- */
.buena-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--b-black);
    color: #DDDDDD;
    padding: 64px 0;
    margin-bottom: 48px;
    overflow: hidden;
}
.buena-hero__wnetrze {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}
.buena-hero__etykieta {
    display: inline-block;
    background: #1A1A1A;
    color: var(--b-gold);
    font-family: var(--b-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.76px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.buena-hero h1 {
    font-family: var(--b-head);
    font-weight: 900;
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.1;
    color: var(--b-paper);
    margin: 0 0 16px;
}
.buena-hero h1 em { font-style: normal; color: var(--b-yellow); }
.buena-hero__lead { font-size: 17px; line-height: 1.7; max-width: 52ch; margin: 0 0 32px; color: #DDDDDD; }
.buena-hero__przyciski { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.buena-hero__przyciski a {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 4px;
    font-family: var(--b-ui);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    text-decoration: none;
}
.buena-hero__przyciski .--glowny { background: var(--b-gold); color: var(--b-ink); box-shadow: 0 10px 30px -10px rgba(254, 192, 19, 0.5); }
.buena-hero__przyciski .--glowny:hover { background: var(--b-gold-hover); color: var(--b-ink); }
.buena-hero__przyciski .--obrys { border: 2px solid var(--b-paper); color: var(--b-paper); }
.buena-hero__przyciski .--obrys:hover { border-color: var(--b-yellow); color: var(--b-yellow); }
.buena-hero__zaufanie { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-family: var(--b-ui); font-size: 14px; font-weight: 700; }
.buena-hero__zaufanie li::before { content: '✓'; color: var(--b-yellow); margin-right: 8px; }
.buena-hero__paczki { position: relative; height: 380px; }
.buena-hero__paczki img { position: absolute; bottom: 0; width: 58%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); }
.buena-hero__paczki img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.buena-hero__paczki img:nth-child(2) { left: 21%; z-index: 2; }
.buena-hero__paczki img:nth-child(3) { right: 0; transform: rotate(8deg); }
@media (max-width: 767px) {
    .buena-hero { padding: 40px 0; }
    .buena-hero__wnetrze { grid-template-columns: 1fr; gap: 24px; }
    .buena-hero__paczki { height: 220px; order: -1; }
    .buena-hero__przyciski a { flex: 1 1 auto; text-align: center; }
}

/* ---------- STRONA GŁÓWNA: sekcje produktów (strefy Core / w podglądzie dodatek 35) ---------- */
.buena-sekcja { margin: 0 0 64px; }
.buena-sekcja__naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.buena-sekcja__naglowek h2, .buena-takze h2 { font-family: var(--b-head); font-weight: 800; font-size: clamp(24px, 3vw, 36px); color: var(--b-ink); margin: 0; }
.buena-sekcja__naglowek a { font-family: var(--b-ui); font-weight: 800; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-ink); text-decoration: none; border-bottom: 2px solid var(--b-gold); }
.buena-sekcja__siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 991px) { .buena-sekcja__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.buena-sekcja__siatka .product { width: auto; max-width: none; }

/* ---------- STRONA GŁÓWNA: „Także w sklepie” (dodatek 40) ---------- */
.buena-takze { margin: 0 0 64px; }
.buena-takze h2 { margin-bottom: 24px; }
.buena-takze__kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 767px) { .buena-takze__kafle { grid-template-columns: 1fr; gap: 16px; } }
.buena-takze__kafel {
    display: flex; flex-direction: column; gap: 8px;
    padding: 32px 24px;
    background: var(--b-cream);
    border-radius: 4px;
    text-decoration: none;
    color: var(--b-text);
    transition: background-color .2s ease;
}
.buena-takze__kafel:hover { background: #EFE8DC; }
.buena-takze__kafel strong { font-family: var(--b-head); font-size: 22px; font-weight: 800; color: var(--b-ink); }
.buena-takze__kafel span { font-size: 15px; line-height: 1.6; }
.buena-takze__kafel em { font-style: normal; font-family: var(--b-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-ink); margin-top: auto; }

/* ---------- KAFELKI: bez „Dodaj do porównania” (nie ma go w wizji), na telefonie 4 kafle na sekcję ---------- */
.product .product__compare_item, .product .compare_add, .product [class*="compare"] { display: none !important; }
@media (max-width: 767px) { .buena-sekcja__siatka .product:nth-child(n+5) { display: none; } }

/* ---------- STRONA GŁÓWNA: slider z banerami na pełną szerokość ekranu (Kamil 27.10) ---------- */
#container.main_page #main_banner1 {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-bottom: 48px;
}
#container.main_page #main_banner1 picture { display: block; width: 100%; }
#container.main_page #main_banner1 img { display: block; width: 100%; height: auto; }

/* ---------- SEKCJE PRODUKTÓW: 4 towary (Kamil 27.10: 8 za dużo) ---------- */
.buena-sekcja__siatka .product:nth-child(n+5) { display: none; }

/* ---------- BLOG: 4 wpisy obok siebie, zdjęcia bez szarego tła ---------- */
#main_blog .article__block { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 991px) { #main_blog .article__block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
#main_blog .headline__wrapper { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
#main_blog .headline { font-family: var(--b-head); font-weight: 800; font-size: clamp(24px, 3vw, 36px); color: var(--b-ink); }
#main_blog .headline__after { font-family: var(--b-ui); font-weight: 800; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-ink); text-decoration: none; border-bottom: 2px solid var(--b-gold); }
#main_blog .headline__after .icon { display: none; }
#main_blog .headline__after .link__text::after { content: ' →'; }
@media (max-width: 575px) {
    /* telefon: wpisy jako przesuwany pas kart — w 2 kolumnach tekst był za wąski */
    #main_blog .article__block { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
    #main_blog .article__item { flex: 0 0 78%; scroll-snap-align: start; }
}
#main_blog .article__item { width: auto; max-width: none; margin: 0; }
#main_blog .article__image_wrapper { background: transparent !important; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; }
#main_blog .article__image { width: 100%; height: 100%; object-fit: cover; }
#container.main_page #main_banner1 .main_slider__wrapper { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }

/* ---------- KAFEL: elementy wysuwane zza packshotu (dodatek 50-kafel-animacja.html, wzór gbs.pl) ----------
   28.10 (Kamil: „podnosi, ale nie obraca, animacja się zacina”): tylko transform/opacity — ruch left/top przeliczał
   układ w każdej klatce (zacinanie). Elementy stoją w pozycji końcowej i wyjeżdżają przesunięciem w jednostkach
   pojemnika (cqw/cqh). Krzywa marki --ease-out (MOTION.md §9), 377 ms; paczka unosi się i obraca o −3°. */
.product.buena-ma-anim .product__icon { position: relative; isolation: isolate; overflow: visible; }
.product.buena-ma-anim .product__icon picture { position: relative; z-index: 1; transition: transform 377ms var(--b-ease-out); backface-visibility: hidden; }
/* packshot kwadratowy 720×720 — Core tnie zdjęcie do max-height 200 px; tu pełny kwadrat kafla.
   Klasa z dodatku 50 (zostaje po wdrożeniu), nie znacznik dodatku 37 (tylko podgląd). */
.product.buena-ma-anim .product__icon { max-height: none; height: auto; aspect-ratio: 1 / 1; }
.product.buena-ma-anim .product__icon picture { max-height: none; width: 100%; height: 100%; }
.product.buena-ma-anim .product__icon picture img { max-height: none; width: 100%; height: 100%; object-fit: contain; }
.buena-anim { position: absolute; inset: 0; z-index: 0; pointer-events: none; container-type: size; }
.product__icon .buena-anim img { position: absolute; max-width: none; max-height: none; height: auto; backface-visibility: hidden;
    transition: transform 377ms var(--b-ease-out), opacity 233ms ease; }
.product__icon .buena-anim img.buena-anim__plama { left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.product__icon .buena-anim img.buena-anim__el1 { left: 74%; top: 8%; width: 17%; opacity: 0; transform: translate(-28cqw, 8cqh); }
.product__icon .buena-anim img.buena-anim__el2 { left: 2%; top: 62%; width: 23%; opacity: 0; transform: translate(36cqw, -4cqh); }
.buena-anim-smak { position: absolute; z-index: 2; left: 6%; bottom: 4%; width: 30%; pointer-events: none; }
.product__icon .buena-anim-smak img { display: block; width: 100%; height: auto; transition: transform 377ms var(--b-ease-out); }
.buena-anim-smak::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 11px; background: radial-gradient(50% 50%, rgba(0, 0, 0, .35) 33%, rgba(0, 0, 0, 0) 100%); }
@media (hover: hover) and (pointer: fine) {
    .product.buena-ma-anim:hover .product__icon .buena-anim img.buena-anim__plama { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .product.buena-ma-anim:hover .product__icon .buena-anim img.buena-anim__el1 { opacity: 1; transform: translate(0, 0) rotate(21deg); }
    .product.buena-ma-anim:hover .product__icon .buena-anim img.buena-anim__el2 { opacity: 1; transform: translate(0, 0) rotate(-13deg); }
    .product.buena-ma-anim:hover .product__icon .buena-anim-smak img { transform: translateY(-5px) rotate(-15deg); }
    .product.buena-ma-anim:hover .product__icon picture { transform: translateY(-5px) rotate(-3deg); }
}
.product.buena-ma-anim.--buena-widoczny .product__icon .buena-anim img.buena-anim__plama { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.product.buena-ma-anim.--buena-widoczny .product__icon .buena-anim img.buena-anim__el1 { opacity: 1; transform: translate(0, 0) rotate(21deg); }
.product.buena-ma-anim.--buena-widoczny .product__icon .buena-anim img.buena-anim__el2 { opacity: 1; transform: translate(0, 0) rotate(-13deg); }
@media (prefers-reduced-motion: reduce) {
    .buena-anim img, .buena-anim-smak img, .product.buena-ma-anim .product__icon picture { transition: opacity 233ms ease; }
}

/* ---------- KARTA TOWARU (wizja Andrzeja: gramatury, duża cena, żółty przycisk, ramka korzyści) ---------- */
#projector_productname .product_name__name { font-family: var(--b-head); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--b-ink); }
#projector_productname .product_name__firm_logo,
#projector_productname [class*="compare"],
.projector_info__item.--safe,
html.buena-ma-ramke #component_projector_cms { display: none !important; }
.projector_details__wrapper { border: 1px solid var(--b-hairline) !important; border-radius: 4px; }
/* gramatury jako pigułki; wybrana = czerń marki */
.projector_sizes__item { border: 1px solid var(--b-hairline) !important; border-radius: 999px !important; background: var(--b-paper) !important; font-family: var(--b-ui); font-weight: 700; color: var(--b-ink) !important; }
.projector_sizes__item:hover { border-color: var(--b-ink) !important; }
.projector_sizes__item.--selected, .projector_sizes__item.--active { background: var(--b-ink) !important; border-color: var(--b-ink) !important; }
.projector_sizes__item.--selected .projector_sizes__name, .projector_sizes__item.--active .projector_sizes__name { color: var(--b-paper) !important; }
#projector_prices_section .projector_prices__price { font-family: var(--b-ui); font-weight: 800; color: var(--b-ink); }
/* ramka korzyści: lista Core (#projector_additional_section) na całą szerokość, kremowa, 2 kolumny */
/* Core: siatka 2 kolumn (lista korzyści w prawej) → jedna kolumna, ilość obok przycisku, ramka pod spodem */
.projector_details__wrapper { grid-template-columns: minmax(0, 1fr) !important; }
.projector_details__wrapper > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
#projector_buttons_section.projector_buy { display: flex !important; flex-flow: row nowrap !important; align-items: stretch; gap: 13px; width: 100%; }
#projector_buttons_section .projector_buy__number_wrapper { flex: 0 0 auto; min-width: 76px; margin: 0 !important; }
#projector_buttons_section #projector_button_basket { flex: 1 1 auto; margin: 0 !important; }
#projector_additional_section.projector_info {
    max-width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 24px;
    margin: 16px 0 0; padding: 21px 24px;
    background: var(--b-cream); border-radius: 4px;
}
@media (max-width: 575px) { #projector_additional_section.projector_info { grid-template-columns: 1fr; padding: 16px; } }
#projector_additional_section .projector_info__item { margin: 0 !important; font-size: 14px; color: var(--b-text); }
#projector_additional_section .projector_info__item a { color: var(--b-ink); }
#projector_additional_section .projector_info__item.--inactive { display: none !important; }
.projector_info__item.buena-korzysc strong { font-weight: 700; color: var(--b-ink); }
.projector_info__item.buena-korzysc .buena-korzysc__ikona { flex: 0 0 auto; width: 20px; height: 20px; margin-right: 10px; color: var(--b-ink); }
.projector_info__item.buena-korzysc { display: flex !important; flex-flow: row nowrap !important; align-items: flex-start; }
.projector_info__item.buena-korzysc > span { flex: 1 1 auto; min-width: 0; }
/* ekspresy: „Dzierżawa i oferta dla firm” (dodatek 60; dawniej Product Adjust) — biała karta pod ramką, przycisk drugorzędny
   (jedyny żółty na ekranie to „Do koszyka”) */
.buena-b2b { order: 13; grid-column: 1 / -1; margin: 13px 0 0;   /* Core układa kartę przez order; ramka = 12 */
    padding: 16px 21px; background: var(--b-paper); border: 1px solid var(--b-hairline); border-radius: 4px; }
.buena-b2b__tytul { margin: 0 0 5px; font-family: var(--b-head); font-size: 18px; font-weight: 800; color: var(--b-ink); }
.buena-b2b__tekst { margin: 0 0 13px; font-size: 14px; line-height: 1.6; color: var(--b-text); }
.buena-b2b__przycisk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 21px; border: 2px solid var(--b-ink); border-radius: 4px;
    font-family: var(--b-ui); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--b-ink) !important; text-decoration: none !important; }
.buena-b2b__przycisk:hover, .buena-b2b__przycisk:focus-visible { background: var(--b-ink); color: var(--b-paper) !important; }
/* strefy „towary powiązane” pod kartą — ukryte jak dotąd (dawny Product Adjust; decyzja Kamila sprzed przebudowy) */
#products_associated_zone1, #products_associated_zone2 { display: none !important; }
/* Smile: tło neutralne zamiast różu */
.banner_smile__block.--main { background: var(--b-paper) !important; border: 1px solid var(--b-hairline); border-radius: 4px; }
/* opis, pliki, pytania — bez szarych pól */
#projector_enclosures .enclosures__wrapper, #projector_enclosures [class*="enclosures__"][class*="block"] { background: transparent !important; }
#projector_enclosures > div:not(.enclosures__label) { background: transparent !important; border: 0; border-radius: 4px; gap: 16px; }
/* Kamil 30.10: ramka na całą szerokość, a szare tylko pół — Core daje grupie plików flex 0 1 50% i #f1f1f1; grupa na całą
   szerokość (dwie grupy dzielą po równo), kremowe tło jak inne ramki karty, bez ramki w ramce */
#projector_enclosures .enclosures__items { flex: 1 1 0; background: var(--b-cream) !important; border-radius: 4px; }
#product_questions_list .questions__banner, #product_questions_list .questions__wrapper { background: var(--b-cream) !important; border-radius: 4px; }
#product_questions_list .questions__banner_item.--label { font-family: var(--b-head); font-weight: 800; color: var(--b-ink); }
#opinions_section .headline, #projector_blog .headline { font-family: var(--b-head); font-weight: 800; color: var(--b-ink); }
@media (max-width: 575px) {
    /* wyjustowany tekst opisu na wąskim ekranie robi „rzeki” — na telefonie do lewej */
    #projector_longdescription p, #projector_longdescription div,
    .buena-blog-post, .buena-blog-post p { text-align: left !important; }   /* wpisy bloga: ta sama zasada */
}
/* telefon: przyklejony pasek zakupu (dodatek 60-karta.html) */
.buena-kup { display: none; }
@media (max-width: 767px) {
    .buena-kup {
        position: fixed; left: 0; right: 0; bottom: var(--buena-dolny-pasek, 0px); z-index: 998;
        display: flex; align-items: center; gap: 13px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--b-paper); border-top: 1px solid var(--b-hairline); box-shadow: 0 -8px 21px -13px rgba(0, 0, 0, .35);
        transform: translateY(110%); transition: transform .3s ease-in-out;
    }
    .buena-kup.--widoczny { transform: translateY(0); }
    .buena-kup__cena { flex: 1 1 auto; min-width: 0; font-family: var(--b-ui); font-weight: 800; font-size: 17px; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .buena-kup__cena small { display: block; font-weight: 600; font-size: 12px; color: var(--b-muted); }
    .buena-kup__przycisk {
        flex: 0 0 auto; padding: 13px 21px; border: 0; border-radius: 4px; background: var(--b-gold); color: var(--b-ink);
        font-family: var(--b-ui); font-weight: 800; font-size: 14px; letter-spacing: .7px; text-transform: uppercase;
    }
}

/* ---------- TELEFON: dolny pasek (dodatek 70-dolny-pasek.html) ---------- */
.buena-dol { display: none; }
@media (max-width: 767px) {
    html.buena-ma-dol { --buena-dolny-pasek: calc(58px + env(safe-area-inset-bottom)); }
    html.buena-ma-dol body { padding-bottom: var(--buena-dolny-pasek); }
    .buena-dol {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
        display: grid; grid-template-columns: repeat(4, 1fr);
        height: var(--buena-dolny-pasek); padding-bottom: env(safe-area-inset-bottom);
        background: var(--b-black); border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .buena-dol__item {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        background: none; border: 0; padding: 0; color: #DDDDDD; text-decoration: none;
        font-family: var(--b-ui); font-size: 11px; font-weight: 700; letter-spacing: .3px;
    }
    .buena-dol__item svg { width: 22px; height: 22px; }
    .buena-dol__item.--aktywny, .buena-dol__item:active { color: var(--b-yellow); }
    .buena-dol__licznik {
        position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px; background: var(--b-yellow); color: var(--b-ink); font-size: 11px; line-height: 18px; text-align: center;
    }
}
html.sidebar_open .buena-dol, html.sidebar_open .buena-kup { display: none !important; }   /* menu boczne Core na wierzchu */

/* ---------- KOSZYK I KROKI ZAMÓWIENIA: bez czerwieni i zieleni IdoSell ---------- */
/* baner Core „Darmowa dostawa od 50 zł” (próg Smile/Paczkomat) obok naszego paska „kurierem od 200 zł” mylił — ukryty (Kamil 27.10) */
#freeShipping.freeShipping { display: none !important; }
/* kroki zamówienia: ukończony krok i ikony w czerni, nie zieleni */
.progress__fontello, [class*="progress"] [class*="fontello"] { color: var(--b-ink) !important; }
/* podsumowanie po prawej: krem zamiast szarości; pasek „do darmowej dostawy” żółty */
.cop_summary__block.--content { background: var(--b-cream) !important; border-radius: 4px; }
.cop_free_delivery__progress_rate { background: var(--b-yellow) !important; }
.cop_free_delivery__progress, .cop_free_delivery__progress_bar { background-color: var(--b-paper) !important; }

/* ---------- KONTO KLIENTA: komunikaty i pola bez szarości, wylogowanie bez czerwieni ---------- */
.menu_messages_message, .client_orders_null, .cop_rebate_card {
    background: var(--b-cream) !important; border: 0 !important; border-radius: 4px;
    color: var(--b-text) !important;
}
.menu_messages_message [class*="icon"], .client_orders_null [class*="icon"] { color: var(--b-ink) !important; }
.btn.--outline.--extrasmall { background: var(--b-paper) !important; border-color: var(--b-hairline) !important; color: var(--b-ink) !important; }
.btn.--outline.--extrasmall:hover { border-color: var(--b-ink) !important; }
.l_welcome__element.--logout.btn { border-color: var(--b-ink) !important; color: var(--b-ink) !important; background: var(--b-paper) !important; }
.l_welcome__element.--logout.btn * { color: var(--b-ink) !important; }
/* slider na pełną szerokość: strzałki Core stały na -20 px (poza ekranem) → do środka */
#container.main_page #main_banner1 .swiper-button-prev { left: 36px !important; }   /* Core dokłada -20 px → 16 px od krawędzi */
#container.main_page #main_banner1 .swiper-button-next { right: 36px !important; }

/* ---------- PRZEJĘTE Z DAWNYCH DODATKÓW (wyłączanych przy przełączeniu na Core) ---------- */
/* wysuwany panel Facebooka „Kawiarnia Buena” (toplayer 23, dodatek IAI „widget FB”) — w starym szablonie ukryty
   (LayoutAdjust); w Core widżet ustawia display:block w stylu elementu → potrzebne !important */
#tws_i_100000, .iai-toplayer[data-id="23"] { display: none !important; }
/* pusty blok CMS strony głównej (#main_cms: sam <style> zmiennych opisu, 20 px pustego pasa) — ukryty jak dotąd
   (LayoutAdjust); display:none nie wyłącza stylu w środku */
#main_cms:not(:has(.buena-wstep)) { display: none !important; }   /* 3.11: widoczny, gdy ma blok h1 strony głównej (GEO/SEO) */
#main_cms ._ae_desc > div { margin-bottom: 0 !important; }


/* ---------- NAGŁÓWEK I PASEK NA PEŁNĄ SZEROKOŚĆ (Kamil 28.10, zrzut po przełączeniu na Core) ----------
   Pasek komunikatów do krawędzi ekranu (body ma 15 px marginesu). Nagłówek (komputer, siatka Core od 979 px) na całą
   szerokość jak slider: logo do lewej, konto i koszyk do prawej, wyszukiwarka pośrodku, menu kategorii od lewej. */
.buena-pasek {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}
@media (min-width: 979px) {
    #container > header {
        width: 100vw;
        max-width: none;
        /* !important: na logowaniu i rejestracji (header.commercial_banner) arkusz Core zeruje margines → 135 px w bok (28.10) */
        margin-left: calc(50% - 50vw) !important;
        padding-inline: clamp(24px, 3vw, 56px);
        box-sizing: border-box;
        /* boki tyle, ile potrzebują logo i konto/koszyk; wyszukiwarka 240–560 px (1fr po bokach nachodziło przy 990–1024 px) */
        grid-template-columns: minmax(max-content, 1fr) minmax(240px, 560px) minmax(max-content, 1fr);
    }
    #container > header #logo { justify-self: start; }
    #container > header #menu_search { width: 100%; }
    #container > header #menu_top { justify-self: end; }
}

/* ---------- NAGŁÓWEK W JEDNEJ LINII (Kamil 28.10): logo · kategorie · wyszukiwarka · konto/listy/koszyk ----------
   Od 1360 px; węższe ekrany komputera zostają w 2 rzędach (w jednej linii się nie mieszczą).
   Klasa commercial_banner jest na nagłówku KAŻDEJ strony (nie tylko logowania) — nie wykluczać jej;
   od 30.10 logowanie/rejestracja/zwroty mają pełny nagłówek (niżej „PEŁNY NAGŁÓWEK…”); wykluczony tylko krok składania zamówienia (#container.place-order_page). */
@media (min-width: 1360px) {
    #container:not(.place-order_page) > header {
        grid-template-areas:
            "skip skip skip skip"
            "bars_top bars_top bars_top bars_top"
            "rabateCode rabateCode rabateCode rabateCode"
            "freeShipping freeShipping freeShipping freeShipping"
            "logo menu_categories menu_search menu_top"
            "breadcrumbs breadcrumbs breadcrumbs breadcrumbs";
        grid-template-columns: auto max-content minmax(200px, 560px) max-content;
        justify-content: space-between;
        align-items: center;
        column-gap: 21px;
    }
    /* logo 414×150: bez minimum kolumna auto ściskała je do ~93 px przy 1360 */
    #container:not(.place-order_page) > header #logo { width: auto; min-width: 180px; }
    #container:not(.place-order_page) > header #menu_categories { width: auto; }
    #container:not(.place-order_page) > header #menu_categories .navbar-nav { flex-wrap: nowrap; }
    #container:not(.place-order_page) > header #menu_categories .navbar-nav > li > .nav-link-wrapper,
    #container:not(.place-order_page) > header #menu_top { white-space: nowrap; }
    /* podmenu brało szerokość z wąskiej kolumny kategorii (83 px) — teraz jak przed zmianą (~237 px) albo szersze */
    #container:not(.place-order_page) > header #menu_categories .navbar-subnav { width: max-content; min-width: 233px; }
    /* linia pod kategoriami miała sens tylko w osobnym rzędzie */
    #container:not(.place-order_page) > header #menu_navbar { border-bottom: 0; }
}

/* ---------- PASEK O DOSTAWIE: wyższy, wersaliki (Kamil 28.10: „żeby przykuwał uwagę”) ---------- */
.buena-pasek { font-size: 14px; padding: 13px 16px; letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 767px) { .buena-pasek { font-size: 12px; letter-spacing: 1px; padding: 11px 12px; } }


/* ---------- SLIDER NA GŁÓWNEJ: przejście wolniej i nieliniowo (Kamil 28.10: „bardzo szybko, liniowa”) ----------
   Czas 987 ms ustawia dodatek 10 (params.speed Swipera — CSS nie może, bo pętla przeskakuje z czasem 0);
   krzywa marki --ease-in-out (MOTION.md §9: ruch elementu już widocznego z A do B). */
#container.main_page #main_banner1 .swiper-wrapper { transition-timing-function: var(--b-ease-in-out) !important; }

/* ---------- UWAGI KAMILA 28.10 (po południu) ---------- */

/* Logo z pliku Kamila (buena_logotypy/„logotypy jasny i ciemny.svg”, wersja jasna 1:1, Pliki CMS buena/logo-grupa-buena.svg).
   Obraz sklepu (PNG z panelu) zostaje w kodzie dla wyszukiwarek i czytników — tylko niewidoczny; SVG jako tło łącza. */
#logo a { background: url(/data/include/cms/buena/logo-grupa-buena.svg) left center / contain no-repeat; }
#logo a img { visibility: hidden; }

/* Kategorie na osi logo: lista stała przy górze 44-px menu (10 px luzu pod spodem) → środek 5 px nad logo */
@media (min-width: 1360px) {
    #container:not(.place-order_page) > header #menu_categories { display: flex; align-items: center; align-self: stretch; }
    #container:not(.place-order_page) > header #menu_navbar,
    #container:not(.place-order_page) > header #menu_navbar > .navbar-nav { margin-block: 0; padding-block: 0; }
}

/* Rozwijany koszyk i listy: nowrap z #menu_top (żeby „0,00 zł” się nie łamało) dziedziczył się do środka
   → nazwa towaru w jednej linii i przewijanie w bok (Kamil 28.10) */
#menu_top .hover__element { white-space: normal; }

/* Wyszukiwarka: Core po kliknięciu (klasa --focus) robi z bloku nakładkę absolute (pod nią podpowiedzi — zostaje), ale dokłada
   right: 6px (pole −8 px), szarą ramkę 1 px (przesunięcie o 1 px) i cień 0 20px 40px — bez animacji (Kamil 28.10).
   Teraz: pole stoi, tło jaśnieje do białego, cienki obrys tuszem; 200 ms ease (MOTION.md §9: hover/kolor). */
#menu_search .menu_search__block, #menu_search.--focus .menu_search__block { box-shadow: none !important; }
#menu_search.--focus .menu_search__block { inset: 0 0 auto 0 !important; width: 100% !important; border-width: 0 !important; }
#menu_search input { transition: background-color 200ms ease, box-shadow 200ms ease; }
#menu_search.--focus input, #menu_search input:focus { background-color: var(--b-paper); box-shadow: inset 0 0 0 1px var(--b-ink); outline: none; }

/* Strefy „Nasze kawy” / „Herbaty” na głównej: jeden styl nagłówka (krój nagłówków sklepu --b-head; typografię prowadzi osobna sesja), wyraźny podział sekcji */
.main_page .hotspot__wrapper { padding-block: 55px; }
.main_page .hotspot__wrapper + .hotspot__wrapper { border-top: 1px solid var(--b-hairline); }
.main_page .hotspot__wrapper .headline { align-items: baseline; }
.main_page .hotspot__wrapper .headline__name { font-family: var(--b-head); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); color: var(--b-ink); }
.main_page .hotspot__wrapper .headline__after { font-family: var(--b-ui); font-weight: 800; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-ink); text-decoration: none; border-bottom: 2px solid var(--b-gold); }

/* Wejście sekcji przy przewijaniu — jak grupabuena.pl (opacity + 30 px w górę, 0,8 s, próg 15%), krzywa marki --ease-out,
   kafle po kolei co 55 ms (MOTION.md §9: stagger 30–80 ms). Klasy nadaje dodatek 10 — bez JS nic się nie ukrywa. */
.buena-wejscie { opacity: 0; transform: translateY(34px); transition: opacity 890ms var(--b-ease-out), transform 890ms var(--b-ease-out); transition-delay: calc(var(--buena-i, 0) * 55ms); }
.buena-wejscie.--widoczny { opacity: 1; transform: none; }
/* Opis towaru (Kamil 30.10, lista „Poprawa opisów” pkt 2): tekst do czytania wchodzi krócej — 8 px, 300 ms, co 50 ms;
   belka pod nagłówkiem wyrasta z lewej po nagłówku, punkty listy i wiersze tabeli po kolei. Tylko transform/opacity. */
.buena-wejscie.--opis { transform: translateY(8px); transition-duration: 300ms; transition-delay: calc(var(--buena-i, 0) * 50ms); }
.buena-wejscie.--opis.--widoczny { transform: none; }   /* reguła wyżej ma tę samą wagę co --widoczny i stoi później — bez tego blok zostaje 8 px niżej, a sekcja opisu (overflow: auto) ucina dół ziaren (Kamil 30.10) */
h2.buena-wejscie.--opis::after { transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--b-ease-out) calc(var(--buena-i, 0) * 50ms + 120ms); }
h2.buena-wejscie.--opis.--widoczny::after { transform: none; }
:is(ul, ol).buena-wejscie.--opis > li { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--b-ease-out), transform 300ms var(--b-ease-out); }
:is(ul, ol).buena-wejscie.--opis.--widoczny > li { opacity: 1; transform: none; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(2) { transition-delay: 50ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(3) { transition-delay: 100ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(4) { transition-delay: 150ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(5) { transition-delay: 200ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(6) { transition-delay: 250ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(7) { transition-delay: 300ms; }
:is(ul, ol).buena-wejscie.--opis > li:nth-child(n+8) { transition-delay: 350ms; }
table.buena-wejscie.--opis tr { opacity: 0; transition: opacity 300ms var(--b-ease-out); }
table.buena-wejscie.--opis.--widoczny tr { opacity: 1; }
table.buena-wejscie.--opis tr:nth-child(2) { transition-delay: 30ms; }
table.buena-wejscie.--opis tr:nth-child(3) { transition-delay: 60ms; }
table.buena-wejscie.--opis tr:nth-child(4) { transition-delay: 90ms; }
table.buena-wejscie.--opis tr:nth-child(5) { transition-delay: 120ms; }
table.buena-wejscie.--opis tr:nth-child(6) { transition-delay: 150ms; }
table.buena-wejscie.--opis tr:nth-child(7) { transition-delay: 180ms; }
table.buena-wejscie.--opis tr:nth-child(8) { transition-delay: 210ms; }
table.buena-wejscie.--opis tr:nth-child(n+9) { transition-delay: 240ms; }
/* Profil sensoryczny (Kamil 30.10: „ładne svg … pop in wraz ze slide inem”, wzór z etykiet kawy): ziarna SVG wstawia
   dodatek 10 w miejsce obrazka base64. Pełne = żółte z czarnym konturem i nacięciem, puste = sam kontur.
   Wejście po wierszu, co 55 ms: puste wsuwają się z lewej, pełne „wyskakują” — skala z odbiciem i obrót −35° → 0
   jak ziarna w intro logo (MOTION.md: outBack). */
.buena-ziarna { display: inline-flex; gap: 5px; vertical-align: middle; }
.buena-ziarno { width: 16px; height: 22px; overflow: visible; }
.buena-ziarno ellipse, .buena-ziarno path { fill: none; stroke: var(--b-ink); stroke-width: 3.4; stroke-linecap: round; }
.buena-ziarno:not(.--pelne) g { opacity: 0.22; }   /* przezroczysta cała grupa — bez ciemnych kropek na styku kreski i konturu */
.buena-ziarno.--pelne ellipse { fill: var(--b-yellow); }
.buena-ziarno:nth-child(2) { --z: 1; }
.buena-ziarno:nth-child(3) { --z: 2; }
.buena-ziarno:nth-child(4) { --z: 3; }
.buena-ziarno:nth-child(5) { --z: 4; }
.buena-wejscie.--opis .buena-ziarno { opacity: 0; transform: translateX(-8px); transition: opacity 233ms var(--b-ease-out), transform 377ms var(--b-ease-out); transition-delay: calc(var(--buena-i, 0) * 50ms + 120ms + var(--z, 0) * 55ms); }
.buena-wejscie.--opis .buena-ziarno.--pelne { transform: translateX(-8px) rotate(-35deg) scale(0.55); transition-timing-function: var(--b-ease-out), cubic-bezier(0.34, 1.56, 0.64, 1); }
.buena-wejscie.--opis.--widoczny .buena-ziarno { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .buena-wejscie { transform: none; transition: opacity 233ms ease; transition-delay: 0ms; }
    .buena-wejscie.--opis, h2.buena-wejscie.--opis::after, :is(ul, ol).buena-wejscie.--opis > li { transform: none; }
    .buena-wejscie.--opis .buena-ziarno, .buena-wejscie.--opis .buena-ziarno.--pelne { transform: none; transition-delay: 0ms; }
}

/* === Nagłówek: mniejsze logo, linki konta bez podkreślenia (Kamil 28.10 wieczór) ===
   Logo 262×95 px wyznaczało wysokość paska → 52 px wysokości (proporcje pliku SVG 2377,5 : 800,5 = 154 px szerokości);
   reszta nagłówka stoi na osi rzędu (align-items: center). „Twoje konto” / „Listy zakupowe”: krój jak menu kategorii. */
@media (min-width: 979px) {
    #container:not(.place-order_page) > header #logo { min-width: 154px; align-self: center; }
    #logo a { display: block; width: 154px; height: 52px; }
    #logo a img { width: 154px; height: 52px; object-fit: contain; }
}
#menu_top a, #menu_top .shopping_list_top, #menu_top .shopping_list_top * {
    font-family: var(--b-ui); font-weight: 600; font-size: 15px; color: var(--b-ink); text-decoration: none;
}
#menu_top a { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { #menu_top a:hover { color: #6b6b6b; text-decoration: none; } }
#logo a { text-decoration: none; }

/* ---------- KARTA TOWARU NA PEŁNĄ SZEROKOŚĆ (Kamil 29.10, zrzut X75) ----------
   Od 979 px góra karty wychodzi poza kolumnę 1170 px Core: te same boki co nagłówek i okruszki, zdjęcia przy lewej krawędzi
   i większe (do 720 px = rozmiar naszych zdjęć WebP), kolumna zakupu przy prawej. Odstęp od okruszków +21 px. */
@media (min-width: 979px) {
    #container.projector_page #layout {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        margin-top: 21px;
        padding-inline: clamp(24px, 3vw, 56px);
        box-sizing: border-box;
    }
    #container.projector_page #content {
        padding-inline: 0;
        grid-template-columns: minmax(0, 830px) clamp(380px, 34vw, 600px);   /* kolumna zakupu węższa na mniejszych ekranach — przy 1024 px zdjęcie miało 225 px */
        justify-content: space-between;
        column-gap: clamp(34px, 4vw, 89px);
    }
    /* miniatury w 1. kolumnie, zdjęcie zawsze w 2. — także gdy zdjęcie jest jedno (Core nie robi wtedy miniatur i zdjęcie
       wpadało w kolumnę 76 px); 720 px = wersja „pl” podstawiana przez dodatek 60 (Core ładuje 450 px) */
    #container.projector_page #projector_photos { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 21px; align-items: start; }
    #container.projector_page #projector_photos .photos__nav { grid-column: 1; grid-row: 1; }
    #container.projector_page #projector_photos .photos__slider { grid-column: 2; grid-row: 1; width: 100%; max-width: 720px; height: auto; }
    #container.projector_page #projector_photos .photos__slider .photos__figure { height: auto; }
    #container.projector_page #projector_photos .photos__slider .photos__photo { width: 100%; max-width: 720px; height: auto; max-height: none; aspect-ratio: 1; object-fit: contain; }
    /* treść pod spodem (opis, opinie) — szerokość czytelna, wyrównana do lewej krawędzi zdjęć */
    #container.projector_page #content > section:not(#projector_photos):not(#projector_productname) { max-width: 1440px; }
}

/* status dostępności: Core dopisuje „.” po opisie (::after) → „Dostępny!.”; kropka tylko gdy tekst nie kończy się znakiem
   interpunkcyjnym (klasa z dodatku 60) */
#projector_status_description::after { content: none !important; }
#projector_status_description.buena-kropka::after { content: "." !important; }
/* ekspresy i lodówki Fresco: termin wysyłki zależy od dostawcy — bez „Wysyłka w …” (dodatek 60, jak dawny Product Adjust) */
html.buena-ekspres #projector_shipping_info,
html.buena-ekspres #projector_delivery_label,
html.buena-ekspres #projector_delivery_days { display: none !important; }

/* płatność jednym kliknięciem: Apple Pay i Google Pay tej samej wysokości i zaokrąglenia; całość niżej — poświata
   przycisku „Dodaj do koszyka” (cień 10/30 px) zasłaniała napis „Możesz kupić także poprzez” */
.projector_oneclick__wrapper { margin-top: 26px !important; }
.projector_oneclick__label { margin-bottom: 8px; }
.projector_oneclick__items { display: flex !important; flex-direction: column; gap: 8px; }
/* Google Pay rysuje w swojej ramce przycisk 40 px z marginesem ~10/9 px i zaokrągleniem ~4 px (nie da się go zmienić) →
   Apple Pay dopasowany do niego; ramka Google przesunięta o margines, żeby przycisk wypełnił pole. IdoSell wpisuje Apple Pay
   w style elementu 30 px / 6 px → zmienne z !important. */
.projector_oneclick__item { position: relative; height: 40px !important; margin: 0 !important; border-radius: 4px !important; overflow: hidden; }
#apple-pay-button {
    --apple-pay-button-width: 100% !important;
    --apple-pay-button-height: 40px !important;
    --apple-pay-button-border-radius: 4px !important;
    display: block;
    width: 100%;
    height: 40px;
}
#oneclick_googlePay iframe {
    display: block;
    position: absolute !important;
    top: -10px !important;
    left: -9px !important;
    width: calc(100% + 18px) !important;
    height: 60px !important;
    max-width: none !important;
    margin: 0 !important;
}

/* logo optycznie na osi nagłówka (Kamil 29.10: „wygląda na przesunięte w dół”): pole wyśrodkowane, ale środek atramentu
   9,5 px niżej niż menu — ciężki napis „uena” na dole, lekkie ziarna u góry. Logo rysuje tło #logo a (SVG z CMS; img ukryty) */
@media (min-width: 979px) {
    #logo a { transform: translateY(-8px); }
}

/* ========== IMPECCABLE — RUNDA 1 (Kamil 29.10: „wszystko z drobnymi”; ocena critique 24/36) ========== */

/* [P1] Widżet „Prawdziwe opinie klientów” (#opinions_badge, Zaufane Opinie Smile) na telefonie zasłaniał cenę na karcie
   towaru („,00 zł”) → na kartach towaru do 978 px ukryty (ocena jest przy nazwie towaru), na pozostałych stronach
   zwinięty i nad dolnym paskiem nawigacji (.buena-dol 58 px) */
@media (max-width: 978px) {
    body:has(#container.projector_page) #opinions_badge { display: none !important; }
    #opinions_badge { bottom: calc(58px + 13px) !important; transform: scale(0.77); transform-origin: left bottom; }
}

/* [P2] Karta towaru na komputerze: zdjęcie i zakup wyśrodkowane obok siebie (Kamil: „wyśrodkować całość”) zamiast przy
   krawędziach z ~380 px pustki; opis i sekcje pod spodem w tej samej szerokości, tekst max 75 znaków w wierszu */
@media (min-width: 979px) {
    #container.projector_page #content { justify-content: center; column-gap: clamp(34px, 3.4vw, 64px); }
    #container.projector_page #content > section:not(#projector_photos):not(#projector_productname) {
        width: 100%; max-width: 1494px; justify-self: center;
    }
}
#projector_longdescription p, #projector_longdescription li, #opinions_section .opinion__content { max-width: 75ch; }
#projector_longdescription p, .projector_description p { text-wrap: pretty; }
#projector_productname .product_name__name, .headline__name, h1, h2 { text-wrap: balance; }

/* [P3] Ramka w ramce (wykrywacz: typowy znak interfejsu z AI); żółty pasek z boku ramek usunięty u źródła 30.10 (Kamil: „zdjąć”);
   blok dzierżawy bez własnej ramki, oddzielony linią (siedzi już w ramce zakupu) */
.buena-b2b { padding: 16px 0 0; border: 0; border-top: 1px solid var(--b-hairline); border-radius: 0; background: transparent; }

/* [P3] Etykiety 10 px („Nasz bestseller”, „Chwilowo niedostępny”) → 12 px */
.label { font-size: 12px !important; }

/* [P3] Telefon (Impeccable 29.10): przyklejone pole wyszukiwania (62–121 px) zasłaniało czarny pasek z dostawą, a pod nim
   zostawała biała dziura (Core rezerwuje 60 px nad treścią w #container). Pasek pod wyszukiwarką, rezerwa zdjęta tylko
   gdy pasek jest (dodatek 28). Tylko główna — na innych stronach wyszukiwarka jest ikoną w nagłówku. */
@media (max-width: 978px) {
    body:has(#container.main_page):has(.buena-pasek) .buena-pasek { margin-top: 61px; }
    body:has(.buena-pasek) #container.main_page { padding-top: 0 !important; }
}

/* ---------- STRONA GŁÓWNA: paski + slider = 100vh (Kamil 29.10) ----------
   Banery w całości (bez cięcia, 1171×481 → slider = szerokość × 0,41). Brakującą do wysokości okna różnicę liczy dodatek 28
   (--buena-dodatek) i oddaje paskom u góry: 1/3 pasek dostawy, 2/3 nawigacja (treść dalej na środku). Od 979 px. */
@media (min-width: 979px) {
    body:has(#container.main_page) .buena-pasek { padding-top: calc(13px + var(--buena-dodatek, 0px) / 6); padding-bottom: calc(13px + var(--buena-dodatek, 0px) / 6); }
    body:has(#container.main_page) #container > header { padding-top: calc(var(--buena-dodatek, 0px) / 3); padding-bottom: calc(var(--buena-dodatek, 0px) / 3); }
}

/* ---------- PEŁNY NAGŁÓWEK TAKŻE NA LOGOWANIU, REJESTRACJI I ZWROTACH (Kamil 29.10: „navbar powinien być dostępny na
   każdej karcie”) ----------
   Core na tych stronach włącza tryb zakupowy (html.order_process): ukrywa menu, wyszukiwarkę, konto/koszyk, okruszki
   i linki stopki (display:none !important) i daje uproszczony nagłówek „logo · Bezpieczne zakupy”. Przywracamy zwykły
   nagłówek wszędzie poza samym składaniem zamówienia (#container.place-order_page — tam zostaje uproszczony). */
html.order_process #container:not(.place-order_page) > header #menu_categories { display: block !important; }
html.order_process #container:not(.place-order_page) > header #menu_search,
html.order_process #container:not(.place-order_page) #menu_basket { display: block !important; }
html.order_process #container:not(.place-order_page) > header #menu_top,
html.order_process #container:not(.place-order_page) > header #breadcrumbs { display: flex !important; }
html.order_process #container:not(.place-order_page) #footer_links { display: grid !important; }
html.order_process #container:not(.place-order_page) > header .order_process_security { display: none !important; }
html.order_process #container:not(.place-order_page) > header .order_navigation { display: none !important; }   /* „Kontynuuj zakupy · Twoje konto · Koszyk” (zwroty) — są w pełnym nagłówku */
html.order_process #container:not(.place-order_page) > header { justify-content: normal; }
html.order_process #container:not(.place-order_page) > header #logo { max-height: none; }   /* Core: 75 px w trybie zakupowym */
@media (min-width: 979px) {
    html.order_process #container:not(.place-order_page) > header #menu_categories { display: flex !important; }
    html.order_process #container:not(.place-order_page) > header #menu_skip { display: flex !important; }
    html.order_process #container:not(.place-order_page) > header { margin-bottom: 10px !important; justify-content: space-between; }
}
@media (min-width: 979px) and (max-width: 1359px) {
    html.order_process #container:not(.place-order_page) > header {
        grid-template-areas: "skip skip skip" "bars_top bars_top bars_top" "rabateCode rabateCode rabateCode"
            "freeShipping freeShipping freeShipping" "logo menu_search menu_top"
            "menu_categories menu_categories menu_categories" "breadcrumbs breadcrumbs breadcrumbs";
    }
}

/* Stopka: Core skleja krótką nazwę sklepu „Grupa Buena Sp. z o.o. ” z osobnym „, ” → „o.o. ,” (Kamil 29.10: przecinek po
   kropce). Przecinek po nazwie ukryty, nazwę od adresu oddziela kropka środkowa. */
.contact_type_adress .shopshortname > span { display: none; }
.contact_type_adress .shopshortname::after { content: "·"; margin: 0 0.5em 0 0.2em; }

/* 30.10: popup newslettera GetResponse (id 160) na telefonie — gr-popups.js wybiera układ mobilny dopiero, gdy body jest
   pozycjonowane (na grupabuena.pl body ma position:relative); w Core body jest static → wersja 560 px, strona rozszerza się
   do 576 px, krzyżyk poza ekranem. Klasę gr-body-popup-open dodaje GR tylko przy otwartym popupie. */
body.gr-body-popup-open { position: relative; }

/* 30.10: nagłówki w opisach towarów — zamiast żółtego „brusha” (maska z i.imgur.com w stylu każdego opisu) wariant C
   wybrany przez Kamila: nagłówek bez tła + krótka skośna belka brand-yellow pod nim (skos jak plakietka z opakowania).
   Opisy mają 4 szablony klas; nagłówki w .info-box zostają bez akcentu (jak dotąd bez brusha). Treści opisów bez zmian. */
html body :is(.buena-kawa-desc, .opis-produktu-tpl, .palarnia-braci-desc, .buena-main-desc, .buena-opis) h2::before { display: none !important; }
html body :is(.buena-kawa-desc, .opis-produktu-tpl, .palarnia-braci-desc, .buena-main-desc, .buena-opis) h2:not(.info-box h2) {
    position: relative !important; display: block !important; min-width: 0 !important; z-index: auto !important;
    background: none !important; color: #111 !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important;
    font-size: 26px !important; line-height: 1.2 !important; text-transform: none !important; padding: 0 0 13px 0 !important;
}
html body :is(.buena-kawa-desc, .opis-produktu-tpl, .palarnia-braci-desc, .buena-main-desc, .buena-opis) h2:not(.info-box h2)::after {
    content: '' !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 56px !important; height: 8px !important;
    background: #FCC204 !important; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%) !important;
}

/* ---------- OPIS TOWARU — wzór jednolity `buena-opis` (Kamil 30.10, lista „Poprawa opisów” pkt 3) ----------
   Opisy kaw składa opisy/generuj_opis.py: hasło + wstęp, Specyfikacja, Profil sensoryczny (ziarna SVG jak w dodatku 28),
   Smak i charakter, Jak przygotować, Świeżość i opakowanie. Cały wygląd tutaj — opis nie ma własnych stylów.
   Kamil 30.10: opis na całą szerokość sekcji (prawa krawędź = prawa krawędź bloku zamówienia), specyfikacja w 2 kolumnach
   po 4 (kolumnami: lewa — gatunek, pochodzenie, palenie, kofeina; prawa — skład, opakowanie, przeznaczenie, przechowywanie). */
.buena-opis { font-family: var(--b-body); font-size: 16px; line-height: 1.7; color: var(--b-text); }
.buena-opis > h2 { margin: 40px 0 16px !important; }
.buena-opis > h2:first-child { margin-top: 0 !important; }
#projector_longdescription .buena-opis p { max-width: none; margin: 0 0 16px; font-size: 17px; }   /* bez limitu 75ch z reguły ogólnej; tekst dłuższy (Kamil 30.10: jak Allegro) */
.buena-opis__lead { font-size: 18px; line-height: 1.6; color: var(--b-ink); }
.buena-opis__spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 48px; margin: 0; }
.buena-opis__spec > div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--b-hairline); }
.buena-opis__spec dt { flex: 0 0 34%; margin: 0; font-weight: 700; color: var(--b-ink); }
.buena-opis__spec dd { flex: 1 1 auto; margin: 0; }
.buena-opis__cecha { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.buena-opis__cecha > span:first-child { flex: 0 0 160px; font-weight: 700; color: var(--b-ink); }
@media (max-width: 767px) {
    .buena-opis__spec { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 575px) {
    .buena-opis__lead { font-size: 17px; }
    .buena-opis__spec dt { flex-basis: 42%; }
    .buena-opis__cecha > span:first-child { flex-basis: 144px; }
}

/* ---------- Karta towaru i stopka: uwagi Kamila 30.10 ---------- */
/* „Z naszego bloga”: najwyżej 2 wpisy na towar — więcej to przerost formy nad treścią */
#projector_blog .article__item:nth-child(n+3) { display: none; }
/* przycisk „do góry”: w stylu marki — czarny z jasną obwódką (widoczny też na czarnej stopce), po najechaniu żółty */
#backTop { width: 48px; height: 48px; line-height: 46px; text-align: center; border-radius: 4px;   /* display ustawia Core (block/none) */
    background: var(--b-black) !important; border: 1px solid rgba(255, 255, 255, 0.34); color: var(--b-paper) !important;
    box-shadow: 0 8px 21px -8px rgba(1, 1, 0, 0.55); transition: background-color 160ms ease, color 160ms ease; }
#backTop i { color: inherit !important; font-size: 21px; line-height: inherit; }
@media (hover: hover) and (pointer: fine) {
    #backTop:hover { background: var(--b-yellow) !important; color: var(--b-ink) !important; border-color: var(--b-yellow); }
}

/* PASEK DARMOWEJ DOSTAWY (koszyk + koszyk w nagłówku) — żółć marki, im bliżej progu, tym mocniejsza (Kamil 30.10).
   Gradient leży na całym torze; wypełnienie jest przezroczyste, a niewypełnioną część zakrywa jego cień — mało w koszyku
   = widać tylko blady początek, blisko progu = pełne #FCC204. Szerokość nadal ustawia Core. */
.progress_bar { position: relative; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, #FEEAAA, var(--b-yellow)) !important; }
.progress_bar__value { background: transparent !important; border-radius: 999px; box-shadow: 0 0 0 100vw #EDEDED; }

/* ---------- 30.10 popołudnie: uwagi Kamila (niedostępne, wyszukiwarka, logowanie, hover przycisków, menu, pusta lista) ---------- */

/* Kafel towaru NIEDOSTĘPNEGO: bez plamy i elementów zza packshotu (dodatek 50) — prześwitywały przez wyszarzone zdjęcie.
   Core oznacza taki kafel plakietką .label.--disable („Chwilowo niedostępny”). Przechylenie paczki na najechanie zostaje. */
.product:has(.label.--disable) :is(.buena-anim, .buena-anim-smak) { display: none !important; }

/* Przyciski marki: Core animuje tylko kolory (0,2 s), a poświata box-shadow przeskakiwała 0→1 (najmocniej widać na
   „Przejdź do koszyka” w koszyku z nagłówka). Wszystkie właściwości hover płynnie, 233 ms. */
html body .btn.--solid { transition: background-color 233ms ease, border-color 233ms ease, color 233ms ease, box-shadow 233ms ease !important; }

/* Podpowiedzi wyszukiwarki (Kamil 30.10: miniatury za małe, tekst nieczytelny, krój spoza marki) */
#menu_search .search_result { font-family: var(--b-ui); background: var(--b-paper); border-radius: 0 0 4px 4px; box-shadow: 0 13px 34px -13px rgba(1, 1, 0, 0.35); }
#menu_search .search_result__block { background: var(--b-paper); }
#menu_search .search_result__item.--product { display: flex; align-items: center; gap: 16px; padding: 8px 13px; border-radius: 4px; text-decoration: none; transition: background-color 160ms ease; }
#menu_search .search_result__icon { flex: 0 0 55px; width: 55px; height: 55px; display: block; }
#menu_search .search_result__icon :is(picture, img) { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
#menu_search .search_result__item.--product .search_result__name_wrapper { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#menu_search .search_result__item.--product .search_result__name { font-family: var(--b-ui); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--b-ink); }
#menu_search .search_result__price { font-family: var(--b-ui); font-weight: 800; font-size: 15px; color: var(--b-ink); white-space: nowrap; }
#menu_search .search_result__item.--button-all { font-family: var(--b-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.75px; text-transform: uppercase;
    color: var(--b-ink) !important; background: var(--b-paper) !important; border: 1px solid var(--b-ink) !important; border-radius: 4px;
    min-height: 44px; padding: 0 21px; transition: background-color 233ms ease, color 233ms ease; }
#menu_search .search_result__label { font-family: var(--b-ui); font-weight: 800; font-size: 11px; letter-spacing: 1.76px; text-transform: uppercase; color: var(--b-muted); }
#menu_search .search_result__sub.--categories .search_result__item { display: block; padding: 8px 13px; border-radius: 4px; font-family: var(--b-ui); font-size: 15px; line-height: 1.4;
    color: var(--b-ink); text-decoration: none; transition: background-color 160ms ease; }
#menu_search .search_result__sub.--categories .search_result__name { font-weight: 600; text-decoration: none; }
#menu_search .search_result__name_label { font-weight: 500; color: var(--b-muted); }
/* Core wcina cenę (telefon) i listę kategorii o ok. 40 px — tekst w linii z etykietą KATEGORIE i z nazwą towaru */
#menu_search .search_result__price { margin: 0 !important; padding: 0 !important; }
#menu_search .search_result__sub.--categories .search_result__items { padding: 0 !important; margin: 8px -13px 0 !important; }
@media (hover: hover) and (pointer: fine) {
    #menu_search .search_result__item:is(.--product, .--producer, .--series, .--menu):hover { background: var(--b-cream); }
    #menu_search .search_result__item.--button-all:hover { background: var(--b-ink) !important; color: var(--b-paper) !important; }
}
@media (max-width: 575px) {
    #menu_search .search_result__icon { flex-basis: 55px; }
    #menu_search .search_result__item.--product .search_result__name_wrapper { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* Logowanie: linki pod „Zaloguj się” („Nie pamiętam…”, „To nie jest moje konto…”, „Zaloguj się kontem z innego serwisu”)
   — większy krój i pole kliknięcia min. 44 px, odstęp między nimi (Kamil 30.10: trudno trafić w ten właściwy). */
#signin-form_box_left .signin_buttons { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#signin-form_box_left .signin_buttons > .btn { margin-bottom: 13px; }
#signin-form_box_left :is(.signin_buttons a:not(.btn), a.password_reminder_signin, a.password_back_signin) {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px;
    font-family: var(--b-ui); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--b-ink); text-align: center; }

/* Pusta lista zakupowa (return.php?status=wisheslist_empty): tekst „Dodaj do niej produkty…” przyklejony do dolnej
   krawędzi kremowej blaszki — oddech pod tekstem i odstęp przycisku „Rozpocznij zakupy”. */
#return_message .n54531_outline_sub { padding-bottom: 34px !important; }
#return_message .n54531_outline_sub > p:last-child { margin-bottom: 0; }
#return_message + .n54744_goback { margin-top: 34px; }

/* Menu w jednej linii z 6. pozycją „O nas” (Kamil 30.10): kategorie bliżej logo, wyszukiwarka dosunięta do ikon konta.
   Kolumna wyszukiwarki elastyczna (min. 200 px, max. 560 px), od 1360 px. */
@media (min-width: 1360px) {
    #container:not(.place-order_page) > header { grid-template-columns: auto max-content minmax(200px, 1fr) max-content; justify-content: normal; column-gap: 34px; }
    #container:not(.place-order_page) > header #menu_search { justify-self: end; width: 100%; max-width: 560px; }
}
/* 1360–1599 px: 6 pozycji + wyszukiwarka + konto nie mieściły się (konto wychodziło 39 px za ekran przy 1366) —
   ciaśniejsze odstępy i krój 15 px tylko w tym zakresie. */
@media (min-width: 1360px) and (max-width: 1599px) {
    #container:not(.place-order_page) > header { column-gap: 21px; }
    #container:not(.place-order_page) > header #logo { min-width: 154px; }
    #container:not(.place-order_page) > header #menu_categories .navbar-nav > li > .nav-link-wrapper > a.nav-link { padding-left: 8px; padding-right: 8px; font-size: 15px; }
}

/* PRZYCISK PDF w opisie urządzeń (instrukcja producenta; dawniej styl wewnątrz opisu) — drugorzędny, obrys ink; jeden
   żółty akcent na ekranie zostaje dla „Do koszyka” (Kamil 30.10, pkt 3). */
.buena-opis .buena-pdf-wrap { margin: 40px 0 0; }
.buena-opis .buena-pdf-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 21px; border: 1px solid var(--b-ink);
    border-radius: 4px; background: var(--b-paper); color: var(--b-ink) !important; font-family: var(--b-ui); font-weight: 800; font-size: 14px;
    letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none !important;
    transition: background-color 233ms ease, color 233ms ease; }
@media (hover: hover) and (pointer: fine) { .buena-opis .buena-pdf-btn:hover { background: var(--b-ink); color: var(--b-paper) !important; } }
.buena-opis .buena-pdf-btn:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }

/* ---------- WPIS BLOGA JAK KARTA TOWARU (Kamil 2.11 i 3.11) ----------
   Te same boki co karta (od 979 px pełna szerokość, odstęp clamp 24–56 px), bez lewej kolumny „Kanał RSS”.
   Góra jak karta: obraz 720×720 w kolumnie do 830 px, po prawej tytuł, data i przycisk odcinka (kolumna jak blok zakupu).
   Treść: nagłówki z krótką skośną belką jak w opisach towarów (zamiast „brusha” z i.imgur.com), tekst do lewej.
   3.11: własne <style> wpisów usunięte; szerokość i odstęp kolumn jak karta po poprawce [P2] (całość 1494 px wyśrodkowana). */
#container.blog-item_page #layout > aside { display: none; }
#container.blog-item_page #layout > #content { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 979px) {
    #container.blog-item_page #layout {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        margin-top: 21px;
        padding-inline: clamp(24px, 3vw, 56px);
        box-sizing: border-box;
    }
    #container.blog-item_page #content { padding-inline: 0; }
    #blog-item {
        display: grid;
        grid-template-columns: minmax(0, 830px) clamp(380px, 34vw, 600px);
        justify-content: center;
        column-gap: clamp(34px, 3.4vw, 64px);
        align-items: start;
        width: 100%; max-width: 1494px; margin-inline: auto;
    }
    /* kontenery IdoSell i wpisu znikają z układu → elementy wpisu stają się komórkami siatki strony:
       prawa kolumna (jak blok zakupu): tytuł, data, pierwszy akapit jako zajawka, przycisk odcinka; reszta pod spodem na całą szerokość */
    #blog-item > .blog-item_sub, #blog-item > .blog-item_sub > ._ae_desc, #blog-item > .blog-item_sub > ._ae_desc > div,
    #blog-item > .blog-item_sub > ._ae_desc > div > div, #blog-item .buena-blog-post { display: contents; }
    /* obraz przy prawej krawędzi swojej kolumny (jak zdjęcie karty obok miniatur), mniejszy niż 720 — kolumna obok (tytuł,
       zajawka, przycisk) ma ~480 px wysokości (Kamil 3.11: „obrazek za duży względem bloku obok”) */
    #container.blog-item_page #blog-item img.blog_image { grid-column: 1; grid-row: 1 / span 5; justify-self: end; max-width: 520px; }
    #blog-item > h1.big_label { grid-column: 2; grid-row: 1; }
    #blog-item > .blog_date { grid-column: 2; grid-row: 2; }
    #blog-item .buena-blog-post > * { grid-column: 1 / -1; }
    #blog-item .buena-blog-post > h2:first-child + p { grid-column: 2; grid-row: 3; margin: 0; font-size: 18px; line-height: 1.6; color: var(--b-ink); }
    #blog-item .buena-blog-post > .buena-blog-btn-wrapper { grid-column: 2; grid-row: 4; margin: 32px 0 0; }
    #blog-item .buena-blog-post > h2:first-child + p + * { margin-top: 56px; }
}
#blog-item img.blog_image { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; float: none; margin: 0; border-radius: 4px; }
#container.blog-item_page #blog-item > h1.big_label {
    display: block; margin: 0 0 12px; padding: 0; border: 0;
    font-family: var(--b-head); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; color: var(--b-ink) !important;
}
#blog-item > h1.big_label::before, #blog-item > h1.big_label::after { display: none; }
#blog-item > .blog_date { font-family: var(--b-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-muted); margin: 0 0 24px; }
@media (max-width: 978px) {
    #blog-item img.blog_image { margin: 0 0 24px; }
    #blog-item > .blog-item_sub { display: flex; flex-direction: column; }
    #blog-item > .blog-item_sub > ._ae_desc { margin-top: 8px; }
}
/* treść wpisu: tytuł z treści powtarza nagłówek strony → ukryty; tekst jak opis towaru */
#blog-item .buena-blog-post { font-family: var(--b-body) !important; font-size: 17px; line-height: 1.7; color: var(--b-text); text-align: left !important; }
#blog-item .buena-blog-post > h2:first-child { display: none; }
#blog-item .buena-blog-post p { margin: 0 0 16px; line-height: 1.7; text-align: left !important; max-width: 75ch; text-wrap: pretty; }   /* jak opis karty */
#blog-item .buena-blog-post em { font-weight: 400; }
#blog-item .buena-blog-post :is(h2, h3) {
    position: relative; margin: 40px 0 16px; padding: 0 0 13px; clear: both; text-align: left !important;
    font-family: var(--b-head) !important; font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--b-ink);
}
#blog-item .buena-blog-post :is(h2, h3) span { position: static; display: inline; padding: 0; background: none; z-index: auto; }
#blog-item .buena-blog-post :is(h2, h3) span::before { display: none !important; }
#blog-item .buena-blog-post :is(h2, h3)::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 8px;
    background: var(--b-yellow); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
@media (max-width: 575px) { #blog-item .buena-blog-post :is(h2, h3) { font-size: 22px; margin-top: 32px; } #blog-item .buena-blog-post { font-size: 16px; } }
/* przycisk odcinka: CTA marki (jak „Do koszyka”), powrót do listy: link wersalikami z żółtą kreską */
#blog-item .buena-blog-btn-wrapper { text-align: left; margin: 40px 0 0; }
#blog-item a.buena-blog-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 0; border-radius: 4px;
    background: var(--b-gold); color: var(--b-ink) !important; box-shadow: 0 10px 30px -10px rgba(254, 192, 19, 0.5);
    font-family: var(--b-ui) !important; font-size: 15px !important; font-weight: 800; letter-spacing: 0.75px; text-transform: uppercase; text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
#blog-item a.buena-blog-btn .buena-blog-btn-arrow { display: none; }
#blog-item a.buena-blog-btn::after { content: '→'; }
@media (hover: hover) and (pointer: fine) { #blog-item a.buena-blog-btn:hover { background: var(--b-gold-hover); box-shadow: 0 20px 40px -10px rgba(254, 192, 19, 0.8); } }
#blog-item a.buena-blog-back-link {
    display: inline-block; justify-self: start; margin: 32px 0 0; padding-bottom: 2px; border-bottom: 2px solid var(--b-gold); text-align: left;
    font-family: var(--b-ui); font-size: 14px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--b-ink); text-decoration: none;
}
/* wejście przy przewijaniu jak opis towaru (dodatek 10, klasa --opis): belka pod nagłówkiem wyrasta z lewej po nagłówku */
#blog-item .buena-blog-post :is(h2, h3).buena-wejscie.--opis::after { transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--b-ease-out) calc(var(--buena-i, 0) * 50ms + 120ms); }
#blog-item .buena-blog-post :is(h2, h3).buena-wejscie.--opis.--widoczny::after { transform: none; }
@media (prefers-reduced-motion: reduce) { #blog-item .buena-blog-post :is(h2, h3).buena-wejscie.--opis::after { transform: none; transition: none; } }

/* ---------- WPIS: OBRAZ PRZY LEWEJ KRAWĘDZI, TEKST OBOK DO PRAWEJ (Kamil 3.11, zatwierdzone na 1793005582 → wszystkie) ----------
   Krawędzie lewa/prawa jak karta (1494 px wyśrodkowane), w środku: obraz od lewej, tuż obok z odstępem 40 px tytuł, data,
   zajawka i przycisk aż do prawej krawędzi; nagłówki i akapity pod spodem od lewej do prawej krawędzi, justowane
   z dzieleniem wyrazów (lang=pl), żeby nie było dziur w wierszach. Nadpisuje wcześniejsze reguły kolumn (830/600), obrazu i 75ch. */
@media (min-width: 979px) {
    #blog-item { grid-template-columns: 520px minmax(0, 1fr); column-gap: 40px; justify-content: stretch; }
    #container.blog-item_page #blog-item img.blog_image { justify-self: start; max-width: 520px; }
}
#blog-item .buena-blog-post p { max-width: none; }
/* na telefonie (wąska kolumna) justowanie robi dziury między słowami → tam do lewej */
@media (min-width: 576px) { #blog-item .buena-blog-post p { text-align: justify !important; hyphens: auto; -webkit-hyphens: auto; } }
/* „Polecane” pod wpisem (#blog_item_associated, lista z panelu, widać 4 losowe): te same krawędzie co wpis (Kamil 3.11) */
@media (min-width: 979px) {
    #container.blog-item_page #blog_item_associated { width: 100%; max-width: 1494px; margin-inline: auto; padding-inline: 0; box-sizing: border-box; }
}
/* przy wpisie 4 losowe polecane (dodatek 28, Kamil 3.11) → 4 kolumny na całą szerokość; nagłówek jak sekcje towarów na głównej */
@media (min-width: 979px) {
    #container.blog-item_page #blog_item_associated .hotspot__products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
#container.blog-item_page #blog_item_associated { margin-top: 55px; }
#container.blog-item_page #blog_item_associated .headline__name { font-family: var(--b-head); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); color: var(--b-ink); }

/* plakietki kafla („Nasz bestseller” itp.) Core przypina do dołu zdjęcia → wchodziły na paczkę (Kamil 3.11). Teraz pod
   zdjęciem, nad nazwą (etykieta nad nagłówkiem jak w design systemie); miejsce rezerwowane w całej liście, gdy jakikolwiek
   kafel ma plakietkę — nazwy w rzędzie zostają w jednej linii */
.product .product__icon .label_icons { top: calc(100% + 8px) !important; bottom: auto !important; left: 0 !important; right: auto !important; transform: none !important; }
:is(#search, .hotspot__products, .products):has(.product__icon .label_icons .label) .product__name { margin-top: 34px; }

/* Baner zgód IdoSell (#iai_cookie) ma ten sam maksymalny z-index co preloader (dodatek 10) i wchodził na animację logo
   po ~0,8 s (Kamil 3.11) → ukryty, dopóki preloader nie zacznie znikać (klasa .fade-out), potem wchodzi z odsłonięciem strony */
body:has(#buena-preloader:not(.fade-out)) #iai_cookie { opacity: 0 !important; visibility: hidden !important; }
#iai_cookie { transition: opacity 0.3s ease-out 0.2s, visibility 0s linear 0.2s; }