@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ---------- scoped reset & tokeny (dle oficiální identity) ---------- */
.bd-brand{
  --bd-orange:#E75220;
  --bd-dark:#1A1A1A;
  --bd-grey:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;
  color:var(--bd-dark);
  line-height:1.55;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.bd-brand *,.bd-brand *::before,.bd-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.bd-brand img{max-width:100%;height:auto;display:block;}
.bd-brand a{text-decoration:none;color:inherit;}

/* ---------- hlavička značky (černý pás jako na originálu) ---------- */
.bd-brand .bd-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;flex-wrap:wrap;gap:14px;background:#000;
}
.bd-brand .bd-header img{width:150px;height:auto;}
.bd-brand .bd-header-note{font-size:13px;color:#bbb;letter-spacing:.03em;}

/* ---------- tlačítka (ploché, hranaté) ---------- */
.bd-brand .bd-btn{
  display:inline-block;background:var(--bd-orange);color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:13px 30px;transition:background .25s;
}
.bd-brand .bd-btn:hover{background:#fff;color:var(--bd-dark);}
.bd-brand .bd-link{
  font-weight:700;font-size:14px;color:var(--bd-orange);transition:color .25s;
}
.bd-brand .bd-link:hover{color:var(--bd-dark);}

/* ---------- hero (černá sekce, text vlevo, produkt vpravo) ---------- */
.bd-brand .bd-hero{
  display:flex;align-items:center;gap:4%;
  background:#000;color:#fff;padding:52px 40px;
}
.bd-brand .bd-hero-text{flex:1 1 55%;}
.bd-brand .bd-hero-text h1{
  font-size:38px;font-weight:900;line-height:1.1;color:#fff;margin-bottom:16px;
}
.bd-brand .bd-hero-text h1 span{color:var(--bd-orange);}
.bd-brand .bd-hero-text p{font-size:16px;color:#ccc;margin-bottom:24px;max-width:560px;}
.bd-brand .bd-hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.bd-brand .bd-hero-img{
  flex:1 1 38%;background:#fff;padding:26px;
  display:flex;align-items:center;justify-content:center;
}
.bd-brand .bd-hero-img img{max-height:340px;width:auto;}

/* ---------- sekce ---------- */
.bd-brand .bd-section{padding:48px 28px;}
.bd-brand .bd-sec-title{font-size:30px;font-weight:700;margin-bottom:6px;}
.bd-brand .bd-sec-sub{font-size:15px;color:#555;margin-bottom:24px;}

/* ---------- produktové karty (ploché, hranaté) ---------- */
.bd-brand .bd-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.bd-brand .bd-prod{display:flex;flex-direction:column;background:#fff;border:1px solid #e5e5e5;}
.bd-brand .bd-prod-img{aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;background:#fff;}
.bd-brand .bd-prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.bd-brand .bd-prod:hover .bd-prod-img img{transform:scale(1.05);}
.bd-brand .bd-prod-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.bd-brand .bd-prod-body h3{font-size:15.5px;font-weight:700;line-height:1.35;}
.bd-brand .bd-prod-body .bd-cat{font-size:13px;color:#888;}
.bd-brand .bd-prod-body .bd-link{margin-top:auto;}

/* ---------- oranžový mezipás ---------- */
.bd-brand .bd-band{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;background:var(--bd-orange);color:#fff;padding:30px 40px;
}
.bd-brand .bd-band h2{color:#fff;font-size:22px;font-weight:900;max-width:760px;}
.bd-brand .bd-band a{
  display:inline-block;background:#000;color:#fff;font-weight:700;font-size:14px;
  padding:13px 32px;transition:background .25s,color .25s;white-space:nowrap;
}
.bd-brand .bd-band a:hover{background:#fff;color:var(--bd-orange);}

/* ---------- šedá sekce (péče o domácnost) ---------- */
.bd-brand .bd-section-grey{background:var(--bd-grey);}
.bd-brand .bd-prods-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}

/* ---------- příběh značky (černá sekce, časová osa) ---------- */
.bd-brand .bd-story{background:#000;color:#ccc;padding:60px 28px;}
.bd-brand .bd-story h2{color:#fff;font-size:30px;font-weight:900;text-align:center;margin-bottom:10px;}
.bd-brand .bd-story h2 span{color:var(--bd-orange);}
.bd-brand .bd-story-intro{max-width:760px;margin:0 auto 36px;text-align:center;font-size:15.5px;}
.bd-brand .bd-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1100px;margin:0 auto;}
.bd-brand .bd-milestone{border-top:4px solid var(--bd-orange);padding:16px 6px 0;text-align:left;}
.bd-brand .bd-year{font-size:30px;font-weight:900;color:var(--bd-orange);margin-bottom:8px;}
.bd-brand .bd-milestone p{font-size:14px;color:#b5b5b5;}

/* ---------- CTA (plochý oranžový pás) ---------- */
.bd-brand .bd-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;background:var(--bd-orange);color:#fff;padding:32px 40px;
}
.bd-brand .bd-cta h2{color:#fff;font-size:24px;font-weight:900;}
.bd-brand .bd-cta a{
  display:inline-block;background:#000;color:#fff;font-weight:700;font-size:14px;
  letter-spacing:.04em;padding:14px 36px;transition:background .25s,color .25s;
}
.bd-brand .bd-cta a:hover{background:#fff;color:var(--bd-orange);}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .bd-brand .bd-prods{grid-template-columns:repeat(2,1fr);}
  .bd-brand .bd-prods-3{grid-template-columns:repeat(2,1fr);}
  .bd-brand .bd-timeline{grid-template-columns:repeat(2,1fr);}
  .bd-brand .bd-hero{flex-direction:column;padding:40px 28px;}
  .bd-brand .bd-hero-text h1{font-size:30px;}
}
@media (max-width:520px){
  .bd-brand .bd-prods{grid-template-columns:1fr;}
  .bd-brand .bd-prods-3{grid-template-columns:1fr;}
  .bd-brand .bd-timeline{grid-template-columns:1fr;}
  .bd-brand .bd-cta,.bd-brand .bd-band{justify-content:center;text-align:center;}
}

/* ---------- guardy šablony Upgates (stejné jako u ostatních brand pages) ---------- */
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky; hero má svůj
   vlastní titulek, takže duplicitní nadpis skryjeme. */
body:has(.bd-brand-wrapper) h1.ph-main,
body:has(.bd-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.bd-brand-wrapper) { max-width: none; }
/* Nadpisy: šablona tlačí vlastní font a u diakritiky pak padá na tučný fallback
   (řešeno u Tesly). Vynutíme Roboto i pro nadpisy uvnitř brand page. */
.bd-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Roboto', system-ui, sans-serif; }