/* HARDEN Banery marek 1.6.0 – baner identyfikacji marki na całą szerokość strony.
   Czcionki: Poppins (styl shijingtools.com) i Inter (styl wertec.pl), licencja OFL, tylko znaki łacińskie i polskie. */
@font-face{font-family:"HBM Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-pl.woff2) format("woff2")}
@font-face{font-family:"HBM Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-pl.woff2) format("woff2")}
@font-face{font-family:"HBM Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-pl.woff2) format("woff2")}
@font-face{font-family:"HBM Inter";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700-pl.woff2) format("woff2")}

/* Układ strony marki: baner przylega do menu, a nagłówek motywu nie powtarza logo. Tytuł H1 zostaje. */
.hbm-top #primary.content-area{margin-top:0!important;padding-top:0!important}
.hbm-top .hdt-brandhead__media,.hbm-top .hdt-brandhead .hdt-eyebrow{display:none!important}
.hbm-anchor{display:block;height:0;scroll-margin-top:140px}

.hbm{position:relative;overflow:hidden;width:100vw;margin:0 calc(50% - 50vw) 48px;color:#fff;isolation:isolate;text-align:center}
.hbm *{box-sizing:border-box}
.hbm p{margin:0}
.hbm__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hbm__shade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hbm__main{position:relative;max-width:900px;margin:0 auto;padding:80px 24px 84px;display:flex;flex-direction:column;align-items:center}
.hbm__brand{line-height:0;margin:0 0 30px}
.hbm__logo{display:block;width:440px;max-width:100%;height:auto}
svg.hbm__logo{width:440px;height:auto}
.hbm .hbm__eye{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hbm .hbm__eye:before,.hbm .hbm__eye:after{content:"";width:28px;height:3px}
.hbm .hbm__h{color:#fff}
.hbm .hbm__p{margin-top:16px;max-width:620px}
.hbm .hbm__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:30px;padding:0 32px;text-decoration:none;line-height:1.2}
.hbm .hbm__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ===== SHIJING – jak shijingtools.com: czerwień #E4002B, grafit #1A1A1A, Poppins, ostre narożniki ===== */
.hbm--shijing{background:#1A1A1A;font-family:"HBM Poppins",Poppins,ui-sans-serif,system-ui,sans-serif;border-top:6px solid #E4002B;border-bottom:6px solid #E4002B}
.hbm--shijing .hbm__shade{background:
 radial-gradient(ellipse at 50% 45%,rgba(26,26,26,0) 0%,rgba(26,26,26,.85) 62%),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cg fill='%23E4002B'%3E%3Crect x='10' y='0' width='9' height='9'/%3E%3Crect x='30' y='0' width='9' height='9'/%3E%3Crect x='0' y='10' width='9' height='9'/%3E%3Crect x='10' y='10' width='9' height='9'/%3E%3Crect x='20' y='10' width='9' height='9'/%3E%3Crect x='30' y='10' width='9' height='9'/%3E%3Crect x='40' y='10' width='9' height='9'/%3E%3Crect x='10' y='20' width='9' height='9'/%3E%3Crect x='30' y='20' width='9' height='9'/%3E%3Crect x='0' y='30' width='9' height='9'/%3E%3Crect x='10' y='30' width='9' height='9'/%3E%3Crect x='20' y='30' width='9' height='9'/%3E%3Crect x='30' y='30' width='9' height='9'/%3E%3Crect x='40' y='30' width='9' height='9'/%3E%3Crect x='10' y='40' width='9' height='9'/%3E%3Crect x='30' y='40' width='9' height='9'/%3E%3C/g%3E%3C/svg%3E") center/100px 100px repeat;opacity:.16}
.hbm--shijing .hbm__eye:before,.hbm--shijing .hbm__eye:after{background:#E4002B}
.hbm--shijing .hbm__h{font-weight:700;font-size:40px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
.hbm--shijing .hbm__p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.88)}
.hbm--shijing .hbm__btn{background:#E4002B;color:#fff;border:1px solid #E4002B;border-radius:0;font-size:16px;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.hbm--shijing .hbm__btn:hover,.hbm--shijing .hbm__btn:focus-visible{background:#C80026;border-color:#C80026;color:#fff}

/* ===== WERTEC – jak wertec.pl: zdjęcie z przyciemnieniem, Inter, czerwień #BC241D ===== */
.hbm--wertec{background:#121516;font-family:"HBM Inter",Inter,ui-sans-serif,system-ui,sans-serif}
.hbm--wertec .hbm__bg{object-position:60% 55%}
.hbm--wertec .hbm__shade{background:radial-gradient(ellipse at 50% 50%,rgba(18,21,22,.78) 0%,rgba(18,21,22,.62) 45%,rgba(18,21,22,.5) 100%),linear-gradient(0deg,rgba(18,21,22,.7) 0%,rgba(18,21,22,0) 40%)}
.hbm--wertec .hbm__main{padding:96px 24px 100px}
.hbm--wertec .hbm__eye{letter-spacing:.1em}
.hbm--wertec .hbm__eye:before,.hbm--wertec .hbm__eye:after{width:22px;border-radius:2px;background:#CC2720}
.hbm--wertec .hbm__h{font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-.02em}
.hbm--wertec .hbm__p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.85)}
.hbm--wertec .hbm__btn{background:#BC241D;color:#fff;border-radius:6px;font-size:15px;font-weight:700}
.hbm--wertec .hbm__btn:hover,.hbm--wertec .hbm__btn:focus-visible{background:#A31E18;color:#fff}

/* ===== CutFlex – jak ulotka CutFlex: żółć #F8EF05, czerń, czerwień, mocne wersaliki ===== */
.hbm--cutflex{background:#F8EF05;color:#141414;font-family:Archivo,"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;border-bottom:10px solid #141414}
.hbm--cutflex .hbm__shade{background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,rgba(255,255,255,0) 2px 26px)}
.hbm--cutflex .hbm__logo{width:420px}
.hbm--cutflex .hbm__eye{color:#141414;letter-spacing:.18em}
.hbm--cutflex .hbm__eye:before,.hbm--cutflex .hbm__eye:after{background:#E8302B}
.hbm--cutflex .hbm__h{font-weight:800;font-size:42px;line-height:1.1;text-transform:uppercase;color:#141414}
.hbm--cutflex .hbm__p{font-size:17px;line-height:1.6;color:#2A2A2A}
.hbm--cutflex .hbm__btn{background:#141414;color:#F8EF05;border-radius:4px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hbm--cutflex .hbm__btn:hover,.hbm--cutflex .hbm__btn:focus-visible{background:#C8231F;color:#fff}
.hbm--cutflex .hbm__btn:focus-visible{outline-color:#141414}

/* ===== Tablet ===== */
@media (max-width:1024px){
.hbm__main,.hbm--wertec .hbm__main{padding:64px 24px 68px}
.hbm__logo,svg.hbm__logo{width:360px}
.hbm--shijing .hbm__h{font-size:32px}
.hbm--cutflex .hbm__h{font-size:34px}
.hbm--cutflex .hbm__logo{width:360px}
.hbm--wertec .hbm__h{font-size:38px}
}

/* ===== Telefon ===== */
@media (max-width:700px){
.hbm{margin-bottom:32px}
.hbm__main,.hbm--wertec .hbm__main{padding:44px 20px 48px}
.hbm__brand{margin-bottom:22px}
.hbm__logo,svg.hbm__logo{width:260px}
.hbm .hbm__eye{font-size:11px;gap:8px;letter-spacing:.08em}
.hbm .hbm__eye:before,.hbm .hbm__eye:after{width:16px}
.hbm--shijing .hbm__h{font-size:23px;overflow-wrap:break-word}
.hbm--wertec .hbm__h{font-size:28px}
.hbm--cutflex .hbm__h{font-size:26px}
.hbm--cutflex .hbm__logo{width:260px}
.hbm--shijing .hbm__p,.hbm--wertec .hbm__p{font-size:15px}
.hbm .hbm__btn{width:100%;margin-top:24px}
.hbm--wertec .hbm__bg{object-position:65% 50%}
}
@media (max-width:380px){
.hbm__logo,svg.hbm__logo{width:220px}
.hbm--shijing .hbm__h{font-size:20px}
.hbm--wertec .hbm__h{font-size:25px}
.hbm--cutflex .hbm__h{font-size:22px}
.hbm--cutflex .hbm__logo{width:220px}
}

/* ===== Pasek „Nasze marki” nad stopką – każda marka na tle w swoich kolorach ===== */
.hbs{background:#F4F4F2;border-top:1px solid #E6E6E2;padding:48px 0 52px}
.hbs *{box-sizing:border-box}
.hbs__in{max-width:1300px;margin:0 auto;padding:0 20px}
.hbs .hbs__eye{margin:0 0 12px}
.hbs .hbs__h{margin:0 0 24px;font-family:Archivo,"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:30px;line-height:1.1;text-transform:uppercase;color:#1A1A1A}
.hbs__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hbs__list li{margin:0;padding:0}
.hbs__tile{display:block;text-decoration:none!important;color:#2B2B2B}
.hbs__box{display:flex;align-items:center;justify-content:center;height:128px;padding:20px 28px;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease}
.hbs__tile:hover .hbs__box,.hbs__tile:focus-visible .hbs__box{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.hbs__tile:focus-visible{outline:none}
.hbs__tile:focus-visible .hbs__box{outline:3px solid #FF5A00;outline-offset:3px}
.hbs__logo,.hbs__box svg{display:block;width:auto;max-width:100%;height:auto}
.hbs__sub{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:#4A4A4A}
.hbs__tile:hover .hbs__sub{color:#1A1A1A;text-decoration:underline}
.hbs__tile--wertec .hbs__box{background:linear-gradient(115deg,#26292E 0%,#3A3D42 100%)}
.hbs__tile--wertec svg{width:230px;height:auto}
.hbs__tile--shijing .hbs__box{background:#1A1A1A;border-bottom:5px solid #E4002B}
.hbs__tile--shijing .hbs__logo{width:240px}
.hbs__tile--cutflex .hbs__box{background:#F8EF05}
.hbs__tile--cutflex .hbs__logo{width:250px}
@media (max-width:900px){.hbs__list{gap:14px}.hbs__box{height:104px;padding:16px}.hbs__tile--wertec svg{width:180px}.hbs__tile--shijing .hbs__logo{width:190px}.hbs__tile--cutflex .hbs__logo{width:200px}}
@media (max-width:640px){
.hbs{padding:36px 0 40px}
.hbs .hbs__h{font-size:22px;margin-bottom:18px}
.hbs__list{grid-template-columns:minmax(0,1fr);gap:12px}
.hbs__tile{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px}
.hbs__box{height:72px;padding:12px 14px}
.hbs__sub{margin-top:0;font-size:14px}
.hbs__tile--wertec svg{width:120px}.hbs__tile--shijing .hbs__logo{width:124px}.hbs__tile--cutflex .hbs__logo{width:124px}
}