/* Hipnoflow CMS - style silnika poza makietą. Wygląd z makiet jest w site.css (generowany przez do_silnika.py, nie edytuj go).
   Tu: elementy, których makieta nie ma (komunikaty formularzy, newsletter, wyspa CF7), oraz starsze sekcje
   (Nagłówek strony, Opinie Google - karty) przeniesione na kolory i fonty makiety. Tokeny z :root w site.css. */

/* WordPress dopisuje do <img> width/height - bez height:auto kadry z makiety (aspect-ratio + object-fit) się nie włączają */
img{height:auto}
/* Atrybut hidden zawsze wygrywa ze stylem display z makiety (np. podziękowanie formularza było widać przed wysłaniem) */
[hidden]{display:none!important}
.ocard .price-gap{display:block;min-height:1px}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hfc-wrap{max-width:1180px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
@media(min-width:720px){.hfc-wrap{padding:0 32px}}
.hfc-narrow{max-width:760px}

/* Formularz kontaktowy silnika (HFC_Contact): błędy przy polach, komunikat, podziękowanie, pułapka na boty */
.contact-form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .field__error{margin:2px 0 0;font:600 .8rem/1.35 var(--font-body);letter-spacing:0;color:#FFB4A8}
.form [aria-invalid="true"]{border-color:#FFB4A8}
.contact-form__status{margin:4px 0 0;padding:10px 12px;border-radius:6px;background:var(--black2);border:1px solid var(--black-line);font-size:.92rem}
.contact-form__status a,.contact__done a{color:var(--amber)}
.contact-form__submit:disabled{opacity:.7;cursor:progress}
.form .check a{color:var(--amber)}
.contact__done{display:grid;gap:10px;padding:22px;border-radius:var(--radius);background:var(--black2);border:1px solid var(--amber)}
.contact__done h3{color:var(--amber)}
.is-done .contact-form{display:none}
.contact-form__noscript{font-size:.9rem;color:var(--on-black-soft)}

/* Kontakt: telefon i e-mail są linkami (dotknięcie dzwoni/pisze), wyglądają jak w makiecie - bez podkreślenia */
.contact a.sel{text-decoration:none}
.contact a.sel:hover{text-decoration:underline}

/* Mapa Google w kontakcie: widoczna dopiero z adresem (po zgodzie na marketing); bez niej zostaje pas z linkiem. */
.map-frame{display:none;width:100%;height:420px;border:0;border-radius:var(--radius);margin-top:28px}
.map-frame[src]{display:block}
@media(max-width:600px){.map-frame{height:300px}}
.hfc-ti .ti-widget{margin-bottom:8px}

/* Opinie wpisane: podpis pod cytatem */
.masonry figcaption{margin-top:12px;font:700 .8rem var(--font-head);letter-spacing:.06em;color:var(--soft)}
.ev-empty{text-align:center;color:var(--soft)}

/* Newsletter w stopce (HFC_Newsletter) */
.ftr .nl .field__error{margin:0;font:600 .8rem/1.35 var(--font-body);color:#FFB4A8}
.nl-status{margin:0;font-size:.88rem;color:var(--on-black)}
.nl.is-done input,.nl.is-done label,.nl.is-done button{display:none}

/* Starsze sekcje silnika (przed makietami): wspólne pasmo */
.hfc-section{padding-block:clamp(64px,8vw,104px)}
.hfc-section:nth-child(even){background:var(--bg2)}
.hfc-eyebrow{margin:0 0 12px;font:700 .76rem/1.2 var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-t)}
.hfc-page-header__title,.hfc-h2{font-family:var(--font-head);font-weight:700;line-height:1.12;margin:0 0 18px}
.hfc-page-header__title{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.4rem,5.2vw,4rem)}
.hfc-h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.hfc-lead{margin:0 0 28px;font-size:1.1rem;color:var(--soft);max-width:720px}
.hfc-page-header{background:var(--black)!important;color:var(--on-black)}
.hfc-page-header .hfc-lead{color:var(--on-black-soft)}
.hfc-page-header .hfc-eyebrow{color:var(--amber)}
.hfc-btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.6em;border:2px solid var(--amber);border-radius:6px;background:var(--amber);color:var(--on-amber);font:700 .95rem/1.2 var(--font-head);letter-spacing:.04em;text-decoration:none}
.hfc-btn:hover{background:var(--amber-h);border-color:var(--amber-h)}
.hfc-btn--ghost{background:transparent;color:var(--amber-t)}

/* Opinie Google - układ „karty” */
.hfc-reviews__summary{display:flex;align-items:center;gap:10px;margin:0 0 32px;font-size:1.1rem}
.hfc-reviews__summary strong{font:700 1.7rem var(--font-head)}
.hfc-stars{color:var(--amber);letter-spacing:2px;font-size:1.1rem}
.hfc-stars__off{color:var(--line)}
.hfc-reviews__list{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.hfc-review{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.hfc-review__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hfc-review__avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover}
.hfc-review__avatar--initials{display:grid;place-items:center;background:var(--black);color:var(--amber);font:700 .9rem var(--font-head)}
.hfc-review__author{margin:0;font-weight:600}
.hfc-review__date{margin:0;font-size:.85rem;color:var(--soft)}
.hfc-review__text{margin:10px 0 0;font-size:1rem}
.hfc-review__text.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.hfc-review__more{margin-top:8px;padding:0;border:0;background:none;color:var(--amber-t);font:700 .92rem var(--font-head);cursor:pointer;text-decoration:underline}
.hfc-reviews__more{margin:32px 0 0}

/* Formularz CF7 (wyspa): wygląd pól; logika i komunikaty z CF7 */
.hfc-cf7 .wpcf7-form p{margin:0 0 18px}
.hfc-cf7 label{display:block;font:600 .9rem var(--font-head)}
.hfc-cf7 input[type="text"],.hfc-cf7 input[type="email"],.hfc-cf7 input[type="tel"],.hfc-cf7 select,.hfc-cf7 textarea{width:100%;margin-top:6px;padding:.75em .9em;border:1px solid var(--line);border-radius:6px;font:400 1rem var(--font-body);background:var(--bg)}
.hfc-cf7 input:focus,.hfc-cf7 textarea:focus,.hfc-cf7 select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.hfc-cf7 .wpcf7-submit,.hfc-cf7 input[type="submit"]{padding:.85em 1.6em;border:0;border-radius:6px;background:var(--amber);color:var(--on-amber);font:700 .95rem var(--font-head);letter-spacing:.04em;cursor:pointer}
.hfc-cf7 .wpcf7-submit:hover,.hfc-cf7 input[type="submit"]:hover{background:var(--amber-h)}
.hfc-cf7 input[type="checkbox"]{width:18px;height:18px;vertical-align:-3px;accent-color:var(--amber-t)}
.hfc-cf7 .wpcf7-list-item{margin:0}
.hfc-cf7 .wpcf7-acceptance label{font-weight:400}

/* Gabinet bez zdjęcia: sam adres na całą szerokość. Link w dopisku pod opiniami. */
.gab.gab--noimg{grid-template-columns:1fr}
.verify a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Kalendarz zarezerwuj.pl (moduł Rezerwacja) */
.cal-frame{display:block;width:100%;max-width:880px;border:0;border-radius:var(--radius);background:var(--bg)}

/* „O mnie”: rola pod tytułem (w makiecie Warsztaty styl wpisany w kod) */
.daniel-text .role{color:var(--amber);font:700 .9rem var(--font-head);letter-spacing:.16em;text-transform:uppercase}

/* „Kim jesteśmy”: dane kontaktowe są linkami (dotknięcie dzwoni/pisze), wyglądają jak tekst makiety */
.band .only a{color:inherit;text-decoration:none}
.band .only a:hover{text-decoration:underline}

/* Lista z postacią z lewej: szersza kolumna listy (w makiecie reguła po id #m-for2) */
.mwhy-l .mwhy-in{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media(max-width:820px){.mwhy-l .mwhy-in{grid-template-columns:minmax(0,1fr)}}

/* Plakietka formatu („Przykład”): kolory strony, nie różowy znacznik zmian z makiety */
.fmt .fx-tag{background:var(--bg2);color:var(--amber-t)}

/* Etykiety pod treścią (kurs akupunktury: „58 h teorii”…) - w makietach styl ze wspólnego arkusza podglądów */
.akchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.akchips span{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font:600 .78rem var(--font-head);color:var(--soft)}
/* Przycisk pod akordeonem programu (w makiecie odstęp wpisany w kod) */
.faq-col .acc + .cta-row{margin-top:28px}

/* Karta miejsca kursu: zdjęcie ośrodka zamiast szarych pól z makiety */
.kplace-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);margin:12px 0}
.kplace .btn{justify-self:start}

/* Archiwum bloga: tematy i tytuły kart są w silniku linkami (adresy kategorii i wpisów), wyglądają jak przyciski/tytuły makiety */
.cats a.cat{text-decoration:none}
.bcard h2 a{color:inherit;text-decoration:none}
.bcard h2 a:hover{text-decoration:underline}
/* Oferta i aktualności: tytuły kart są linkami do produktu/wpisu */
.pcard h3 a,.kcard h3 a,.wcard h2 a,.ncard h3 a{color:inherit;text-decoration:none}
.pcard h3 a:hover,.wcard h2 a:hover,.ncard h3 a:hover{text-decoration:underline}

/* Szablony produktów: formularz koszyka WooCommerce w panelu zakupu (ilość ukryta jak w Divi, przycisk jak .btn-fill makiety) */
.b2-cart{width:100%}
.b2-cart form.cart{display:grid;gap:10px;margin:0}
.b2-cart .quantity{display:none!important} /* !important: skrypt wariantów Woo pokazuje pole stylem inline po wyborze terminu; liczba miejsc w koszyku (29.10) */
.b2-cart .single_add_to_cart_button{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;cursor:pointer;background:var(--amber);color:var(--ink);font:700 1rem var(--font-head);padding:.9em 1.4em;border-radius:999px}
.b2-cart .single_add_to_cart_button:hover{background:var(--amber-t);color:#fff}
.b2-cart .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}
.b2-cart table.variations{width:100%;border-collapse:collapse}
.b2-cart table.variations th,.b2-cart table.variations td{display:block;text-align:left;padding:0 0 6px}
.b2-cart table.variations select{width:100%;padding:.6em .7em;border:1px solid var(--line);border-radius:6px;font:400 1rem var(--font-body);background:var(--bg)}
.b2-cart .reset_variations,.b2-cart .woocommerce-variation-price{display:none!important}
.b2-cart p.stock{font:600 .92rem var(--font-body);color:var(--soft)}
/* Sesja: cena i czas nad kalendarzem, kalendarz na całą szerokość opisu */
.pdesc .svc-buy + .cal-frame{width:100%;border:0;margin-top:8px}
/* Rzecz: miniatury wariantów z opisu (alt pusty - podpis obok) */
.var img{display:block}
/* Strona wydarzenia: pasek boczny z widżetów (podpis jako akapit, chmura tagów jednym rozmiarem) */
.proj-band{display:block}
.proj-side .side-h{margin:0;font:700 1.05rem var(--font-head);color:var(--ink)}
.proj-side .side-c p{margin:0}
.proj-side .side-c a{color:inherit}
.proj-cats a{color:var(--amber-t);text-decoration:none}
.proj-main .comment-respond{border-top:1px solid var(--line);padding-top:8px}
.proj-main .comment-form{display:grid;gap:12px}
.proj-main .comment-form p{margin:0;display:grid;gap:5px}
.proj-main .comment-form label{font:600 .82rem var(--font-head);letter-spacing:.04em;color:var(--soft)}
.proj-main .comment-form input[type=text],.proj-main .comment-form input[type=email],.proj-main .comment-form input[type=url],.proj-main .comment-form textarea{font:400 1rem var(--font-body);padding:.7em .85em;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;min-width:0}
.proj-main .comment-form textarea{min-height:110px}
.proj-main .comment-form .comment-form-cookies-consent{display:flex;gap:10px;align-items:center}
.proj-main .comment-form .comment-form-cookies-consent label{font:400 .88rem var(--font-body);letter-spacing:0}
.proj-main .comment-form .form-submit{justify-self:start}
/* 404: tematy bloga i telefon (w makiecie na tle sekcji) */
.e-cats a{text-decoration:none}
.b2-cart p.stock.in-stock{display:none} /* „Wolne miejsca” (tekst stanu Woo) - liczba miejsc do potwierdzenia, w makiecie bez niej */
/* Rzecz: panel ceny na telefonie mieści przyciski i adres (w makiecie wystawały poza ramkę - błąd także makiety) */
.buy2{grid-template-columns:minmax(0,1fr);min-width:0}
.buy2>*{max-width:100%;min-width:0}
.buy2 .btn{white-space:normal;text-align:center;justify-content:center}
.buy2.shop .sm{font-size:.82rem;color:var(--soft)}

/* Treść z bazy (opis produktu, treść projektu) w układzie makiety: nagłówki jak .dh/.dh3, listy jak .dl/.dsteps, przycisk Gutenberga
   jak .btn-fill, ptaszki z linii „✅” jak .tick (HFC_Section_Product_Page::pretty). Szablon wpisu ma własne reguły (post_body). */
.pdesc h2:not([class*="h2"]),.pdesc h2.wp-block-heading,.pdesc h3.dh{margin:18px 0 0;font:700 1.4rem/1.2 var(--font-head);padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--ink);text-transform:none}
.pdesc h3:not(.dh),.pdesc h4,.pdesc .dh3{margin:6px 0 0;font:700 1.05rem var(--font-head);color:var(--amber-t);text-transform:none}
.pdesc ul:not([class]),.pdesc ul.wp-block-list{margin:0;padding-left:1.15em;display:grid;gap:5px;color:var(--soft)}
.pdesc ol:not([class]),.pdesc ol.wp-block-list{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.pdesc ol:not([class])>li,.pdesc ol.wp-block-list>li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;color:var(--soft)}
.pdesc ol:not([class])>li::before,.pdesc ol.wp-block-list>li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--amber);color:var(--ink);font:700 .9rem/30px var(--font-head);text-align:center}
.pdesc p strong,.pdesc li strong{color:var(--ink)}
.pdesc hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
.pdesc .tick li{color:var(--soft)}
.pdesc .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pdesc .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--ink);border:2px solid var(--amber);font:700 1rem var(--font-head);padding:.85em 1.6em;border-radius:8px;text-decoration:none}
.pdesc .wp-block-button__link:hover{background:var(--amber-t);border-color:var(--amber-t);color:#fff}
.pdesc img{max-width:100%;height:auto}
/* Formularz komentarza wydarzenia jak w makiecie: nazwa i e-mail obok siebie, ptaszek przy tekście, przycisk z bursztynową ramką */
.proj-main .comment-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.proj-main .comment-form>*{grid-column:1/-1}
.proj-main .comment-form .comment-form-author{grid-column:1}
.proj-main .comment-form .comment-form-email{grid-column:2}
.proj-main .comment-form label{display:block}
.proj-main .comment-form .comment-notes{font-size:.85rem;color:var(--soft)}
.proj-main .comment-form input[type=checkbox]{width:auto;margin:0}
.proj-main .comment-form .comment-form-cookies-consent{display:flex;gap:10px;align-items:center}
.proj-main .comment-form .submit{background:transparent;border:2px solid var(--amber);color:var(--amber-t);font:700 1rem var(--font-head);padding:.75em 1.4em;border-radius:8px;cursor:pointer}
.proj-main .comment-form .submit:hover{background:var(--amber);color:var(--ink)}
.proj-main #reply-title{border-bottom:1px solid var(--line);padding-bottom:8px}
@media(max-width:560px){.proj-main .comment-form .comment-form-author,.proj-main .comment-form .comment-form-email{grid-column:1/-1}}
/* Kroki z treści: pogrubiony tytuł i tekst w jednym <li> - numer obok jako ::before (siatka rozdzielała tekst do kolumny numeru) */
.pdesc ol:not([class])>li,.pdesc ol.wp-block-list>li{display:block;position:relative;padding-left:46px;min-height:30px}
.pdesc ol:not([class])>li::before,.pdesc ol.wp-block-list>li::before{position:absolute;left:0;top:0}
/* Przycisk komentarza: WordPress daje <input id="submit" class="btn btn-line"> (bez klasy .submit) */
.proj-main .comment-form #submit,.proj-main .comment-form .form-submit input[type=submit]{background:transparent;border:2px solid var(--amber);color:var(--amber-t);font:700 1rem var(--font-head);padding:.75em 1.4em;border-radius:8px;cursor:pointer}
.proj-main .comment-form #submit:hover{background:var(--amber);color:var(--ink)}
.var{min-width:0}.var span{overflow-wrap:anywhere}

/* Fonty zastępcze o szerokości fontów strony (Lighthouse 26.10.2026: CLS 0,3 - pasek „Najbliższy warsztat” miał 2 linie w Arialu
   i 1 linię w Titillium, po wczytaniu fontu cała strona skakała o 16 px). size-adjust z pomiaru szerokości tekstu (Titillium = 0,90 Ariala). */
@font-face{font-family:"Titillium Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:90.5%}
@font-face{font-family:"Raleway Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:101%}
:root{--font-head:"Titillium Web","Titillium Fallback","Segoe UI",system-ui,sans-serif;--font-body:"Raleway","Raleway Fallback","Segoe UI",system-ui,sans-serif}