/*
Theme Name: NIKOL BHP
Theme URI: https://nikol-bhp.pl/
Author: OpenAI
Description: Custom corporate WordPress theme for NIKOL BHP. Yellow/black/white visual system, product catalogue without prices, news and contact form.
Version: 3.4.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nikol-bhp
*/
:root{
 --yellow:#f7c600; --yellow-2:#ffd52f; --black:#111111; --dark:#1b1b1b;
 --white:#fff; --gray-50:#f7f7f7; --gray-100:#f0f0f0; --gray-200:#e5e5e5;
 --gray-500:#6d6d6d; --shadow:0 18px 50px rgba(15,15,15,.08);
 --radius:18px; --container:1240px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--black);background:#fff;font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block}
.container{width:min(calc(100% - 40px),var(--container));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200)}
.header-inner{min-height:88px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em;font-size:24px;min-width:190px}
.brand-mark{width:48px;height:48px;background:var(--black);display:grid;place-items:center;border-radius:12px;overflow:hidden}
.brand-mark span{font-weight:950;color:var(--yellow);font-size:19px}
.brand small{display:block;font-size:9px;letter-spacing:.15em;color:var(--gray-500);line-height:1}
.main-nav{display:flex;gap:8px;align-items:center;margin-left:auto;list-style:none;margin-block:0;padding:0;flex-wrap:nowrap}
.main-nav li{list-style:none;flex:0 0 auto}
.main-nav li::marker{content:""}
/* Tabs sit on the page background, lifted by a soft shadow rather than a fill colour. */
.main-nav a{display:block;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.01em;color:#2a2a2a;
  padding:11px 18px;border-radius:10px;background:#fff;border:1px solid #ececec;
  box-shadow:0 2px 6px rgba(17,17,17,.08);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease,color .18s ease}
.main-nav a:hover{color:#111;border-color:#dcdcdc;box-shadow:0 5px 14px rgba(17,17,17,.14);transform:translateY(-1px)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a,
.main-nav .current-menu-parent>a,.main-nav .current-menu-ancestor>a,
.main-nav .current_page_parent>a,.main-nav .current_page_ancestor>a{
  color:#2a2a2a;background:#fff;border-color:#ececec;
  box-shadow:0 2px 6px rgba(17,17,17,.08)}
.header-contact{display:flex;align-items:center;gap:16px;margin-left:12px}
.phone{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;line-height:1.25;color:#111}
.phone-icon{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center}
.phone-text span{display:block;color:var(--gray-500);font-weight:600;font-size:11px}
.phone:hover .phone-icon{background:var(--yellow-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:9px;font-size:12px;font-weight:900;letter-spacing:.05em;border:1px solid transparent;transition:.2s ease}
.btn-primary{background:var(--yellow);color:var(--black)} .btn-primary:hover{background:var(--yellow-2);transform:translateY(-1px)}
.btn-dark{background:var(--black);color:#fff}.btn-dark:hover{background:#2a2a2a}
.btn-outline{border-color:#bbb;background:#fff}.btn-outline:hover{border-color:var(--black)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;font-size:26px}
.hero{background:linear-gradient(115deg,#f3f3f3 0%,#fff 54%,#ededed 100%);padding:42px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.1fr .7fr;gap:24px;align-items:stretch}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;color:#7b7b7b;margin-bottom:18px}
.hero h1{font-size:clamp(46px,6vw,78px);line-height:.94;letter-spacing:-.055em;margin:0 0 24px;font-weight:950}
.hero h1 span{color:#e2b200}.hero p{font-size:18px;max-width:600px;color:#555;margin:0 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.experience{display:flex;align-items:center;gap:14px;margin-top:34px}.experience-icon{width:50px;height:50px;border:2px solid var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:22px}.experience strong{display:block;font-size:12px;letter-spacing:.08em}.experience span{display:block;color:#666;font-size:11px}
.hero-visual{min-height:420px;display:flex;align-items:flex-end;justify-content:center}.hero-person{width:min(100%,520px);height:420px;overflow:hidden}.hero-person img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-cards{display:grid;gap:12px;align-content:center;padding:30px 0}.info-card{background:#fff;border-radius:14px;padding:22px;box-shadow:var(--shadow);border:1px solid #eee}.info-card .line{width:34px;height:4px;background:var(--yellow);margin-bottom:18px}.info-card h3{font-size:15px;line-height:1.15;margin:0 0 9px;letter-spacing:-.02em}.info-card p{font-size:12px;color:#6a6a6a;margin:0}
.section{padding:58px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}.section-kicker{font-size:11px;font-weight:900;letter-spacing:.2em;color:#777}.section h2{font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.05em;margin:8px 0 0;font-weight:950}.yellow-line{width:52px;height:5px;background:var(--yellow);margin-top:16px}
.offer-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}.offer-card{background:#fff;border:1px solid #e7e7e7;border-radius:7px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.05);transition:.2s}.offer-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.offer-img{aspect-ratio:1/1;background:#f7f7f7;overflow:hidden}.offer-img svg{width:100%;height:100%}.offer-body{padding:10px 8px 14px;text-align:center}.offer-body h3{font-size:10px;line-height:1.15;margin:0 0 5px;font-weight:900}.offer-body p{display:none}
.center{text-align:center;margin-top:30px}
.why{background:#f5f5f5}.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.why-card{background:#fff;border:1px solid #e7e7e7;border-radius:7px;padding:20px;min-height:190px}.why-icon{font-size:34px;margin-bottom:12px;color:#e8b900}.why-card h3{font-size:15px;margin:0 0 10px}.why-card p{font-size:12px;color:#6a6a6a;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.stat{border-top:3px solid var(--yellow);padding-top:12px}.stat strong{display:block;font-size:32px;letter-spacing:-.04em}.stat span{font-size:10px;font-weight:800;color:#777;letter-spacing:.08em}
.brands{background:#fafafa}.brand-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.brand-box{height:70px;background:#fff;border:1px solid #e7e7e7;border-radius:12px;display:grid;place-items:center;font-weight:950;font-size:21px;letter-spacing:-.04em;color:#262626}.brand-box small{display:block;font-size:9px;letter-spacing:.12em;color:#888}
.catalog-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.filter-btn{border:1px solid #ddd;background:#fff;padding:11px 15px;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer}.filter-btn.active,.filter-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;background:#fff}.product-thumb{aspect-ratio:1/1;background:#f3f3f3}.product-meta{padding:16px}.product-meta h3{font-size:14px;line-height:1.25;margin:0 0 7px}.product-meta p{font-size:11px;color:#777;margin:0}.tag{display:inline-block;background:#f3f3f3;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;margin-bottom:9px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.news-card{border:1px solid #e7e7e7;border-radius:16px;overflow:hidden}.news-card .news-img{aspect-ratio:16/9;background:#e9e9e9}.news-body{padding:20px}.news-date{font-size:10px;color:#888;font-weight:800}.news-body h3{font-size:17px;line-height:1.2;margin:8px 0}.news-body p{font-size:12px;color:#666}
.contact{background:#f7f7f7;color:var(--black)}.contact-grid{display:grid;grid-template-columns:1.05fr .75fr;gap:60px}.contact .section-kicker{color:#777}.contact h2{color:var(--black)}.contact p{color:#555}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:10px;font-weight:800;color:#777}.field input,.field textarea{width:100%;border:1px solid #ddd;background:#fff;color:#111;border-radius:6px;padding:12px;font:inherit}.field textarea{min-height:145px;resize:vertical}.contact-data{padding-top:44px}.contact-data h3{font-size:12px;letter-spacing:.12em;color:var(--yellow);margin:0 0 18px}.contact-data p{font-size:15px;margin:0 0 20px}.contact-data strong{color:#111}
.site-footer{background:#151515;color:#fff;padding:44px 0 22px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}.site-footer h3{font-size:11px;letter-spacing:.14em;color:var(--yellow);margin:0 0 14px}.site-footer p,.site-footer a{font-size:12px;color:#bbb}.site-footer a:hover{color:#fff}.copyright{border-top:1px solid #2c2c2c;margin-top:30px;padding-top:18px;color:#777;font-size:10px}
.archive-header{padding:70px 0 30px;background:#f7f7f7}.archive-header h1{font-size:54px;line-height:1;margin:0;letter-spacing:-.05em}.single-wrap{max-width:850px;margin:auto}.single-wrap h1{font-size:52px;line-height:1.03}.single-wrap .entry-content{font-size:17px;color:#444}.single-wrap .entry-content img{border-radius:16px}
.notice{padding:12px 16px;background:#f5f5f5;border-left:4px solid var(--yellow);margin:0 0 18px;font-size:12px}
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr 1fr}.hero-cards{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.main-nav{gap:12px}.header-contact{display:none}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.container{width:min(calc(100% - 28px),var(--container))}.header-inner{min-height:72px}.main-nav{display:none;position:absolute;left:14px;right:14px;top:72px;background:#fff;border:1px solid #ddd;border-radius:12px;padding:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.menu-toggle{display:block}.hero{padding:55px 0}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.hero-visual{min-height:auto}.hero-cards{grid-column:auto;grid-template-columns:1fr}.offer-grid,.news-grid{grid-template-columns:1fr 1fr}.why-grid{grid-template-columns:1fr 1fr}.brand-grid{grid-template-columns:1fr 1fr}.product-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hero h1{font-size:46px}.offer-grid,.news-grid,.why-grid,.product-grid,.brand-grid,.footer-grid,.stats{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.section{padding:68px 0}.section-head{display:block}.hero-actions .btn{width:100%}}

/* Visual fidelity refinements */
.site-header{background:#fff;border-bottom:1px solid #e8e8e8}
.brand img{width:94px;height:auto;object-fit:contain}
.header-inner{min-height:90px}
.hero h1{font-size:clamp(40px,4.5vw,64px)}
.hero p{font-size:15px;line-height:1.55;max-width:440px}
.experience-icon{border:0;width:58px;height:58px;color:var(--yellow);font-size:32px}
.info-card{border-radius:7px;padding:19px;min-height:100px}
.info-card .line{display:none}
.info-card h3{font-size:12px}
.info-card p{font-size:10px}
.offer-grid + .center{margin-top:20px}
.about-copy h2{font-size:38px}
.about-copy p{font-size:12px}
.stats{grid-template-columns:1fr;gap:8px;margin-top:0}
.stat{background:#fff;border:1px solid #e7e7e7;border-top:0;border-left:3px solid var(--yellow);border-radius:7px;padding:10px 14px;display:grid;grid-template-columns:90px 1fr;align-items:center}
.stat strong{font-size:28px}
.stat span{font-size:9px}
.brands{padding-top:30px;padding-bottom:30px}
.brands .section-head{justify-content:center;text-align:center;margin-bottom:18px}
.brands .yellow-line{margin-left:auto;margin-right:auto}
.brand-box{border:0;background:transparent;box-shadow:none}
.contact-grid{grid-template-columns:1.1fr .7fr}
.contact .section-kicker,.contact h2{color:#111}
.site-footer{background:#1b1b1b}
.footer-grid{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1100px){.offer-grid{grid-template-columns:repeat(5,1fr)}.brand-grid{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr 1fr}.hero-cards{grid-column:1/-1;grid-template-columns:repeat(3,1fr);padding:0 0 30px}}
@media(max-width:800px){.offer-grid{grid-template-columns:repeat(3,1fr)}.about-grid{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:350px}.hero-person{height:350px}.hero-cards{grid-column:auto;grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:1fr}}
@media(max-width:520px){.offer-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:43px}.header-inner{min-height:70px}.brand img{width:84px}}

.site-footer{position:relative}.copyright{position:relative;z-index:3}

/* ===== Inner-page dark hero (Oferta / O nas / Producenci / Kontakt / Aktualności) ===== */
.hero-inner{background:linear-gradient(120deg,#141414,#1f1f1f 60%,#141414);color:#fff;padding:64px 0}
.hero-inner .section-kicker.light{color:var(--yellow)}
.hero-inner h1{font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:-.05em;font-weight:950;margin:10px 0 14px}
.hero-inner p{font-size:15px;color:#cfcfcf;max-width:560px;margin:0}
.hero-inner-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:30px;align-items:center}
.hero-inner-photo{border-radius:16px;overflow:hidden;max-height:230px}
.hero-inner-photo img{width:100%;height:230px;object-fit:cover;object-position:top center}
.hero-inner-dark p{margin-top:6px}

/* ===== Catalogue: sidebar + grid + pagination ===== */
.catalog-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.catalog-sidebar{background:#f7f7f7;border:1px solid #ececec;border-radius:14px;padding:20px;position:sticky;top:106px}
.catalog-search{display:flex;gap:8px;margin-bottom:20px}
.catalog-search input{flex:1;border:1px solid #ddd;border-radius:6px;padding:11px 12px;font:inherit;background:#fff}
.catalog-search button{border:0;background:var(--black);color:#fff;border-radius:6px;padding:0 14px;cursor:pointer}
.sidebar-title{font-size:11px;letter-spacing:.14em;color:#777;margin:0 0 12px;text-transform:uppercase}
.catalog-cats{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:2px}
.catalog-cats a{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;font-size:12px;font-weight:700;color:#333}
.catalog-cats a span{color:#999;font-weight:600}
.catalog-cats a:hover{background:#eee}
.catalog-cats a.active{background:var(--yellow);color:#111}
.catalog-cats a.active span{color:#5c4900}
.sidebar-cta{border-radius:12px;overflow:hidden;background:#fff;border:1px solid #ececec}
.sidebar-cta img{height:120px;width:100%;object-fit:cover}
.sidebar-cta-body{padding:16px}
.sidebar-cta-body strong{display:block;font-size:13px;margin-bottom:6px}
.sidebar-cta-body p{font-size:11px;color:#777;margin:0 0 14px}
.sidebar-cta .btn{width:100%;min-height:42px;font-size:11px}
.catalog-search-info{font-size:12px;color:#777;margin:0 0 16px}
.catalog-empty{font-size:13px;color:#777}
.catalog-main .product-grid{grid-template-columns:repeat(3,1fr)}
.product-meta h3 a{color:inherit}
.pagination{margin-top:30px}
.pagination ul{list-style:none;display:flex;gap:6px;padding:0;margin:0;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 6px;border-radius:8px;border:1px solid #e2e2e2;font-size:12px;font-weight:700;color:#333}
.pagination a:hover{border-color:#111}
.pagination span.current{background:var(--black);color:#fff;border-color:var(--black)}

/* ===== O nas page ===== */
.about-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-page-photo{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.about-page-photo img{width:100%;height:420px;object-fit:cover}
.about-page-copy .entry-content p,.about-page-copy > p{color:#555;font-size:14px}
.about-page-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.mini-stat{border-top:3px solid var(--yellow);padding-top:10px}
.mini-stat strong{display:block;font-size:26px;letter-spacing:-.03em}
.mini-stat span{font-size:10px;font-weight:800;color:#777;letter-spacing:.05em}

.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.timeline-item{background:#fff;border:1px solid #e7e7e7;border-left:4px solid var(--yellow);border-radius:10px;padding:18px}
.timeline-year{font-size:22px;font-weight:950;letter-spacing:-.03em;margin-bottom:8px}
.timeline-item p{font-size:12px;color:#666;margin:0}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-item{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover}

/* ===== Producenci page ===== */
.brand-grid-page{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brand-box-page{height:auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;background:#fff;border:1px solid #e7e7e7;border-radius:12px;padding:20px}
.brand-box-page .brand-box-name{font-weight:950;font-size:20px;letter-spacing:-.03em;margin-bottom:8px}
.brand-box-page p{font-size:11px;color:#777;margin:0}

/* ===== Brand carousel (home) ===== */

/* ===== CTA band ===== */
.cta-band{background:var(--yellow);padding:40px 0}
.cta-band-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-band h2{font-size:26px;letter-spacing:-.03em;margin:0 0 6px}
.cta-band p{font-size:13px;margin:0;max-width:520px;color:#332900}

/* ===== Kontakt page: map ===== */
.map-section{padding-top:0}
.map-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);height:360px}
.map-frame iframe{width:100%;height:100%;border:0}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .catalog-grid{grid-template-columns:220px 1fr}
  .about-page-grid{grid-template-columns:1fr}
  .about-page-photo img{height:280px}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .brand-grid-page{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
  .hero-inner-grid{grid-template-columns:1fr}
  .hero-inner-photo{display:none}
  .catalog-grid{grid-template-columns:1fr}
  .catalog-sidebar{position:static}
  .catalog-main .product-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .brand-grid-page{grid-template-columns:repeat(2,1fr)}
  .cta-band-inner{flex-direction:column;text-align:center}
}
@media(max-width:520px){
  .catalog-main .product-grid{grid-template-columns:1fr}
  .about-page-stats{grid-template-columns:1fr}
  .brand-grid-page{grid-template-columns:1fr}
}


/* ===== Header nav hard reset (WordPress renders the menu as a <ul>) ===== */
ul.main-nav,ul.main-nav li{list-style:none!important;list-style-type:none!important;margin:0;padding:0}
ul.main-nav li::before,ul.main-nav li::marker{content:none!important;display:none!important}
.main-nav a::after,.main-nav a::before{content:none!important}
.main-nav{gap:6px}

/* ===== "O nas" section on the home page (CTA lives in the section head) ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-image{border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#eee}
.about-image img{width:100%;height:420px;object-fit:cover;object-position:center top;display:block}
.about-copy p{color:#5e5e5e;font-size:14px;margin:0 0 14px}
.about-copy .stats{margin-top:22px}

/* ===== Brands: centred heading, CTA top-right, seamless infinite marquee ===== */
.brands-head{position:relative;text-align:center;margin-bottom:26px}
.brands-title{display:inline-block}
.brands-head .yellow-line{margin:14px auto 0}
.brands-cta{position:absolute;right:0;top:0}
.brand-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brand-track{display:flex;width:max-content;gap:10px;animation:nikol-marquee 34s linear infinite}
.brand-marquee:hover .brand-track{animation-play-state:paused}
.brand-track .brand-box{flex:0 0 auto;width:170px}
/* The track holds the list twice, so shifting by exactly half loops seamlessly. */
@keyframes nikol-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}}
@media(max-width:800px){
  .brands-cta{position:static;display:inline-flex;margin-bottom:18px}
  .brands-head{margin-bottom:20px}
  .about-grid{grid-template-columns:1fr}
  .about-image img{height:300px}
}

/* ===== Footer contact list with icons (pin / handset / envelope / clock) ===== */
.footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
/* Icon and text share one baseline row, so multi-line entries stay aligned. */
.footer-contact li{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:12px;
  font-size:12.5px;color:#d4d4d4;line-height:1.55}
.fc-icon{width:28px;height:28px;border-radius:50%;background:rgba(247,198,0,.14);
  color:var(--yellow);display:grid;place-items:center}
.footer-contact a{color:#d4d4d4}
.footer-contact a:hover{color:#fff}

/* ===== Floating quick contact: one button collapsed, phone + e-mail expanded ===== */
.quick-contact{position:fixed;right:18px;bottom:18px;z-index:99990;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}
.qc-items{display:flex;flex-direction:column;gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.9);transform-origin:bottom center;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.quick-contact.open .qc-items{pointer-events:auto}
.quick-contact.open .qc-items{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.qc-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.qc-btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.qc-btn:focus-visible,.qc-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.qc-phone{background:#1f9d3d}
.qc-mail{background:#2f7fe0}
.qc-toggle{width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  background:var(--yellow);color:#111;display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.26);transition:transform .2s ease,background .2s ease}
.qc-toggle:hover{background:var(--yellow-2);transform:translateY(-2px)}
.qc-toggle .qc-ico-close{display:none}
.quick-contact.open .qc-toggle .qc-ico-open{display:none}
.quick-contact.open .qc-toggle .qc-ico-close{display:block}
.quick-contact.open .qc-toggle{transform:rotate(90deg)}
@media(max-width:520px){
  .quick-contact{right:12px;bottom:12px;gap:8px}
  .qc-btn{width:46px;height:46px}
  .qc-toggle{width:52px;height:52px}
}

/* ===== Header layout: keep the tabs on one line and stop text wrapping ===== */
.header-inner{gap:18px;flex-wrap:nowrap;justify-content:space-between}
.brand{min-width:0;flex:0 0 auto;margin-right:0}
.brand img{width:118px}
/* Nav sits in the middle of the header, contact block hugs the right edge. */
.main-nav{flex:1 1 auto;justify-content:center;margin-left:0;margin-right:0}
.header-contact{flex:0 0 auto;white-space:nowrap;margin-left:0}
.header-contact .btn{white-space:nowrap}
.phone-text{white-space:nowrap}
@media(max-width:1400px){
  .main-nav a{font-size:12px;padding:10px 13px}
  .main-nav{gap:6px}
}
@media(max-width:1250px){
  .phone-text{display:none}
  .main-nav a{font-size:11.5px;padding:9px 11px}
}

/* ===== Hero: experience star inside a circle ===== */
.experience-icon{width:54px;height:54px;flex:0 0 auto;border-radius:50%;
  background:rgba(247,198,0,.16);border:2px solid var(--yellow);color:#e0ab00;
  display:grid;place-items:center;font-size:24px;line-height:1}

/* ===== Quick contact: instant touch response ===== */
/* touch-action + tap-highlight removal stop the browser waiting to see whether
   the touch becomes a scroll or double-tap zoom, which caused the "long press" feel. */
.quick-contact,.qc-toggle,.qc-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none}
.qc-toggle{-webkit-appearance:none;appearance:none;padding:0;line-height:0}
.qc-toggle svg,.qc-btn svg{pointer-events:none}
/* Animate only cheap properties so the widget stays smooth on low-end phones */
.qc-items{will-change:opacity,transform}
.qc-btn,.qc-toggle{transition-duration:.14s}

/* ===== Hide leftover floating widgets injected by plugins =====
   Only third-party containers are targeted; the theme's own widget is #quickContact. */
.wa-chat-box,.wa--btn-pos,.joinchat,.ht-ctc,.ht-ctc-chat,
.callnowbutton,.cnb-widget,.wcp-wrapper,.contact-widget-wrap,
.floating-contact,.float-contact-widget,.fcb-container,
[class*="floating-button"]:not(#quickContact):not(#quickContact *),
[id*="floating-contact"]:not(#quickContact),
[class*="whatsapp-button"],[id*="whatsapp-chat"]{
  display:none!important;visibility:hidden!important}

/* ===== Hero: balanced vertical spacing + rounded photo ===== */
/* The section previously had no bottom padding and the photo was bottom-anchored,
   so the whole block sat against the lower edge of the grey panel. */
.hero{padding:56px 0}
.hero-grid{align-items:center}
.hero-visual{align-items:center;min-height:auto}
.hero-person{border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(17,17,17,.10)}
.hero-person img{border-radius:16px;display:block}
.hero-cards{align-content:center;padding:0}

@media(max-width:1100px){
  .hero{padding:48px 0}
  .hero-cards{padding:0}
}
@media(max-width:800px){
  .hero{padding:40px 0}
  .hero-person{height:auto;max-height:420px}
}

/* ===== "O nas": larger, darker body copy for readability ===== */
.about-copy p{color:#111;font-size:17px;line-height:1.7;margin:0 0 18px}
.about-page-copy .entry-content p,.about-page-copy > p{color:#111;font-size:17px;line-height:1.7}
@media(max-width:800px){
  .about-copy p,.about-page-copy .entry-content p,.about-page-copy > p{font-size:16px}
}

/* ===== Hero: card column matched to the photo height ===== */
/* Spacing of the grey panel stays as it was; only the card column changes. */

/* Photo and card column share the same row height so their bottom edges line up. */
.hero-visual,.hero-cards{align-self:stretch}
.hero-person{height:100%;width:min(100%,520px)}
.hero-person img{height:100%;width:100%;object-fit:cover;object-position:center top}

/* Cards fill the column and split the available height evenly. */
.hero-cards{grid-auto-rows:1fr;gap:14px;padding:0;align-content:stretch}
.info-card{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:22px 24px}

/* Slightly larger type inside the cards. */
.info-card h3{font-size:16.5px;line-height:1.2;margin:0 0 10px}
.info-card p{font-size:14px;line-height:1.6;color:#5a5a5a}

@media(max-width:1100px){
  .hero-cards{grid-auto-rows:auto}
  .info-card{min-height:auto}
  .info-card h3{font-size:15px}
  .info-card p{font-size:13px}
}
@media(max-width:800px){
  .hero-person{height:auto;max-height:420px}
  .hero-person img{height:auto}
}

/* ===== Contact block: prominent company heading ===== */
/* The pale yellow at 12px was hard to read on the light panel. */
.contact-data h3{font-size:26px;font-weight:950;letter-spacing:-.02em;
  color:#111;margin:0 0 22px;padding-bottom:12px;position:relative}
.contact-data h3::after{content:"";position:absolute;left:0;bottom:0;
  width:52px;height:5px;background:var(--yellow)}
.contact-data p{font-size:15.5px;line-height:1.6}
.contact-data strong{color:#111;font-size:16px}

/* ===== Footer: slightly larger, more readable text ===== */
.site-footer h3{font-size:13px;letter-spacing:.13em;margin:0 0 18px}
.site-footer p,.site-footer a{font-size:14px;color:#cfcfcf;line-height:1.75}
.footer-contact li{font-size:14px;line-height:1.6}
.footer-contact a{font-size:14px;color:#cfcfcf}
.site-footer a:hover,.footer-contact a:hover{color:#fff}
.copyright{font-size:11.5px}

/* ===== Nav: every tab the same width ===== */
/* A fixed min-width plus centred text makes all six buttons identical,
   regardless of how long the label is. */
.main-nav a{min-width:138px;text-align:center}
@media(max-width:1400px){.main-nav a{min-width:124px;padding:10px 10px}}
@media(max-width:1250px){.main-nav a{min-width:110px;font-size:11.5px;padding:9px 8px}}
@media(max-width:800px){.main-nav a{min-width:0;text-align:left}}

/* ===== Partner logos (fall back to the brand name when no file exists) ===== */
.brand-logo{max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto 4px}
.brand-box .brand-name{display:block}
.brand-box-page .brand-logo{max-height:52px;margin:0 0 10px}

/* ===== "NIKOL BHP w praktyce": three service cards ===== */
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.practice-card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:28px 26px;
  box-shadow:0 3px 14px rgba(17,17,17,.05)}
.practice-icon{width:52px;height:52px;border-radius:50%;background:rgba(247,198,0,.16);
  color:#a37f00;display:grid;place-items:center;margin-bottom:20px}
.practice-card h3{font-size:15px;font-weight:900;letter-spacing:.01em;margin:0 0 14px;line-height:1.25}
.practice-card p{font-size:14px;line-height:1.7;color:#444;margin:0 0 12px}
.practice-card p:last-child{margin-bottom:0}
@media(max-width:1100px){.practice-grid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.practice-grid{grid-template-columns:1fr}}

/* ===== Contact page: data cards + map ===== */
.contact-cards{padding-bottom:0}
.contact-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contact-card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:26px 24px;
  box-shadow:0 3px 14px rgba(17,17,17,.05)}
.cc-icon{width:46px;height:46px;border-radius:50%;background:rgba(247,198,0,.16);
  color:#a37f00;display:grid;place-items:center;margin-bottom:16px}
.contact-card h3{font-size:11px;font-weight:900;letter-spacing:.14em;color:#888;margin:0 0 12px}
.contact-card p{font-size:15px;line-height:1.65;color:#111;margin:0 0 10px}
.contact-card p:last-child{margin-bottom:0}
.cc-strong{font-size:19px;font-weight:800;color:#111;letter-spacing:-.01em}
.cc-strong:hover{color:#a37f00}
.cc-note{font-size:13px!important;color:#777!important}
.cc-link{display:inline-block;margin-top:4px;font-size:13px;font-weight:800;color:#111;
  border-bottom:2px solid var(--yellow);padding-bottom:2px}
.cc-link:hover{color:#a37f00}
.map-section{padding-top:34px}
.map-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);height:400px}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:1100px){.contact-cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.contact-cards-grid{grid-template-columns:1fr}.map-frame{height:300px}}

/* ===== Hero: left column spans the same height as the photo ===== */
/* Content is distributed top-to-bottom so the eyebrow lines up with the top
   edge of the photo and the experience badge with its bottom edge. */
.hero-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.hero-copy .eyebrow{margin-top:0}
.hero-copy .experience{margin-bottom:0}
@media(max-width:800px){
  .hero-copy{display:block}
}

/* ===== Stat cards: larger caption with more breathing room from the number ===== */
.stat{grid-template-columns:112px 1fr;padding:12px 16px}
.stat span{font-size:12px;letter-spacing:.09em;color:#6b6b6b;padding-left:8px}
@media(max-width:520px){
  .stat{grid-template-columns:96px 1fr}
  .stat span{font-size:11px;padding-left:4px}
}

/* ===== "Dlaczego NIKOL BHP?": centred icons in a circular badge ===== */
.why-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 22px}
.why-icon{width:64px;height:64px;border-radius:50%;background:rgba(247,198,0,.16);
  color:#a37f00;display:grid;place-items:center;margin:0 auto 18px;font-size:0}
.why-card h3{font-size:15px;margin:0 0 12px;line-height:1.25}
.why-card p{font-size:13px;line-height:1.65;color:#5f5f5f;margin:0}

/* ===== Footer: Google reviews block ===== */
.gr-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:10px;
  padding:12px 16px;margin-bottom:18px;text-decoration:none}
.gr-logo{display:grid;place-items:center;flex:0 0 auto}
.gr-meta{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.gr-score{font-size:19px;font-weight:900;color:#111;letter-spacing:-.02em}
.gr-stars{color:#fbbc05;font-size:14px;letter-spacing:1px}
.gr-label{font-size:11.5px!important;color:#666!important;font-weight:700}
.gr-badge:hover .gr-score{color:#a37f00}

/* Reviews scroll horizontally in a seamless loop, like the brand strip. */
.gr-marquee{overflow:hidden;margin-bottom:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gr-track{display:flex;width:max-content;gap:12px;animation:nikol-reviews 30s linear infinite}
.gr-marquee:hover .gr-track{animation-play-state:paused}
@keyframes nikol-reviews{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.gr-track{animation:none}}

.gr-item{flex:0 0 auto;width:250px;margin:0;background:#1f1f1f;border:1px solid #2c2c2c;
  border-radius:10px;padding:16px 18px}
.gr-stars-sm{color:#fbbc05;font-size:12px;letter-spacing:1px;display:block;margin-bottom:8px}
.gr-item p{font-size:13px!important;line-height:1.6;color:#ccc!important;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gr-item cite{font-size:11.5px;font-style:normal;font-weight:800;color:var(--yellow)}
.gr-empty{font-size:13px!important;color:#b5b5b5!important;margin:0 0 18px}
.gr-cta{font-size:11px}

/* The plugin's footer contains the link to the Google listing - keep it. */

/* Anchors and overlay click targets keep their own positioning */

/* ===== News cards: real photos fill the thumbnail area ===== */
.news-card .news-img{aspect-ratio:16/9;background:#e9e9e9;overflow:hidden;display:block}
.news-card .news-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.news-card:hover .news-img img{transform:scale(1.04)}

/* ===== Category tiles: product photos sit larger and centred ===== */
.offer-card .offer-img{aspect-ratio:1;overflow:hidden;background:#fff}
.offer-card .offer-img img{width:100%;height:100%;object-fit:contain;padding:10px}

/* ===== Partner logos: even sizing across the strip ===== */
.brand-logo{max-height:44px;max-width:150px;width:auto;height:auto;
  object-fit:contain;display:block;margin:0 auto 6px}
.brand-box-page .brand-logo{max-height:56px;max-width:180px;margin:0 0 12px}

/* ===== Footer reviews widget: align to the column's left edge ===== */


/* Flex/grid children can still be centred by their parent's alignment */

/* The badge itself is an inline-block, so nudge it flush with the heading */



/* ===== Partner strip: logos only, more room to breathe ===== */
.brand-track{gap:0}
.brand-track .brand-box{width:230px;padding:0 26px}
.brand-box{display:grid;place-items:center;height:110px;
  background:transparent;border:0;box-shadow:none}
.brand-box > div{display:grid;place-items:center;width:100%;height:100%}
.brand-box small{display:none}          /* captions removed */

/* Logos are pre-scaled to equal visual weight; cap them so none dominates. */
.brand-logo{max-height:62px;max-width:100%;width:auto;height:auto;
  object-fit:contain;display:block;margin:0;
  filter:none;opacity:.92;transition:opacity .2s ease}
.brand-box:hover .brand-logo{opacity:1}
.brand-name{font-size:20px;font-weight:900;letter-spacing:-.02em;color:#333}

/* Slower loop so the wider spacing still reads comfortably */
.brand-track{animation-duration:44s}

/* Producers page grid */
.brand-grid-page{gap:22px}
.brand-box-page{min-height:150px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;padding:26px 24px}
.brand-box-page .brand-logo{max-height:56px;max-width:170px;margin:0 0 14px}

@media(max-width:800px){
  .brand-track .brand-box{width:180px;padding:0 18px}
  .brand-box{height:92px}
  .brand-logo{max-height:50px}
}

/* Inner elements must not swallow the click */


/* ===== Google reviews widget in the footer =====
   Deliberately minimal. Earlier versions overrode the plugin's layout,
   positioning and alignment, which broke the badge three separate times:
   the internal spacing collapsed, the link stopped working and finally the
   whole widget was clipped away by overflow:hidden on a zero-height box.
   The plugin now renders natively; only colours are adjusted so the badge
   reads on the dark footer, and only the outer block is made clickable. */

/* Outer block: alignment and click target only */
.footer-reviews{text-align:left}
.gr-plugin{margin:0 0 18px}
.gr-plugin.is-clickable{cursor:pointer}
.gr-plugin.is-clickable:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}

/* Colours only — no layout, position, size or alignment properties */
.gr-plugin .ti-review-text,
.gr-plugin .ti-review-content p{color:#ccc!important}
.gr-plugin .ti-name,
.gr-plugin .ti-profile-name{color:var(--yellow)!important}
.gr-plugin .ti-date{color:#8d8d8d!important}
.gr-plugin .ti-widget-header,
.gr-plugin .ti-header-title,
.gr-plugin .ti-rating-text{color:#e6e6e6!important}
.gr-plugin .ti-review-item{background:#1f1f1f!important;border-color:#2c2c2c!important}

/* Pull the badge to the column's left edge, level with the heading.
   Only the outer wrapper and its direct child are touched, and only via
   margins — no display, position, overflow or alignment on descendants,
   which is what broke the widget in earlier versions. */
/* Alignment is measured and applied in main.js — the plugin's internal
   padding varies by template, so a fixed CSS value cannot match it. */
.gr-plugin{text-align:left}

/* ===== Badge alignment: flex container, no auto-centring on direct children
   Trustindex centres the badge with `margin: 0 auto`. A flex parent alone
   won't beat that (auto margins win in flex too), so both are needed.
   Only DIRECT children are touched, and only their horizontal margins —
   nothing inside the widget is affected. */
.gr-plugin{display:flex;justify-content:flex-start;align-items:flex-start}
.gr-plugin > *{margin-left:0!important;margin-right:0!important}

/* The badge is centred by the plugin with roughly 30px of slack on each side
   of the column. Shifting the heading by the same amount lines the two up
   without touching the widget at all. main.js measures the real gap and
   overrides this value when it can; this is the no-JavaScript baseline. */
.footer-reviews h3{margin-left:var(--gr-heading-offset,30px)}
@media(max-width:1100px){.footer-reviews h3{margin-left:var(--gr-heading-offset,20px)}}
@media(max-width:800px){.footer-reviews h3{margin-left:0}}

/* ===== Brand strip: keep logos at full strength =====
   The edge fade was 6% wide, so a logo sitting near the left edge (3M) looked
   washed out and half-clipped. A narrow 2% fade still softens the entry and
   exit without draining colour from logos that are fully in view. */
.brand-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.brand-logo{opacity:1}
.brand-box:hover .brand-logo{opacity:1}

/* ===== Brands heading: smaller, and the section CTA is gone ===== */
.brands-head h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em}
.brands-cta{display:none}
@media(max-width:800px){.brands-head h2{font-size:22px}}

/* ===== Contact form anti-spam honeypot (3.4.0) =====
   Off-screen instead of display:none — some bots skip display:none fields. */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}