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

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.br-brand{
  --br-blue:#00538D;
  --br-red:#DC0C15;
  --br-sage:#7FA8AC;
  --br-ink:#252B33;
  --br-line:#e6e6e6;
  --br-soft:#f5f6f7;
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  color:var(--br-ink);
  font-size:16px;
  line-height:1.7;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.br-brand *,.br-brand *::before,.br-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.br-brand img{max-width:100%;height:auto;display:block;}
.br-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.br-brand .br-h{
  font-family:'Roboto Slab',serif;font-weight:500;font-size:25.6px;
  text-transform:uppercase;color:var(--br-blue);line-height:1.35;
}
.br-brand .br-btn{
  display:inline-block;background:transparent;color:var(--br-blue);
  border:2px solid var(--br-blue);border-radius:4px;
  font-family:'Open Sans',sans-serif;font-weight:700;font-size:14px;
  text-transform:uppercase;line-height:38px;padding:0 20px;
  transition:background .25s,color .25s;
}
.br-brand .br-btn:hover{background:var(--br-blue);color:#fff;}
.br-brand .br-chip{
  display:inline-block;background:var(--br-sage);color:#fff;
  font-family:'Roboto Slab',serif;font-weight:400;font-size:15px;
  text-transform:uppercase;padding:6px 14px;transition:background .25s;
}
.br-brand .br-chip:hover{background:var(--br-blue);}

/* ---------- hlavička: červené logo + navigace ---------- */
.br-brand .br-header{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--br-line);
  padding:16px 30px;
}
.br-brand .br-header-left{display:flex;align-items:center;gap:16px;}
.br-brand .br-header img{width:74px;height:74px;}
.br-brand .br-header-claim{
  font-family:'Roboto Slab',serif;font-weight:500;font-size:15px;
  text-transform:uppercase;color:var(--br-ink);
}
.br-brand .br-nav{display:flex;flex-wrap:wrap;gap:4px 26px;}
.br-brand .br-nav a{
  font-size:15px;color:var(--br-ink);border-bottom:2px solid transparent;
  padding:2px 0;transition:color .2s,border-color .2s;
}
.br-brand .br-nav a:hover{color:var(--br-blue);border-bottom-color:var(--br-blue);}

/* ---------- celoplošné hero (foto z předlohy, bez textu v obraze) ---------- */
.br-brand .br-hero{
  width:100%;padding-top:42%;
  background-image:url('/shop-data/campaign/bormiolirocco/br-hero.jpg');
  background-size:cover;background-position:center 30%;
}

/* ---------- úvod pod hero (jako stránka kolekcí předlohy) ---------- */
.br-brand .br-intro{text-align:center;padding:52px 30px 44px;}
.br-brand .br-intro .br-h{margin-bottom:12px;}
.br-brand .br-intro p{max-width:660px;margin:0 auto 24px;color:#4a5058;}

/* ---------- dlaždice kolekcí ---------- */
.br-brand .br-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:0 30px 56px;
}
.br-brand .br-col{display:flex;flex-direction:column;border:1px solid var(--br-line);background:#fff;}
.br-brand .br-col-img{width:100%;aspect-ratio:4/3;overflow:hidden;}
.br-brand .br-col-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.br-brand .br-col:hover .br-col-img img{transform:scale(1.05);}
.br-brand .br-col-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.br-brand .br-col-body h3{
  font-family:'Roboto Slab',serif;font-weight:700;font-size:16px;
  text-transform:uppercase;color:var(--br-ink);
}
.br-brand .br-col-body p{font-size:14px;color:#4a5058;flex:1;}
.br-brand .br-col-body .br-chip{align-self:flex-start;}

/* ---------- produktové sekce (katalogová mřížka předlohy) ---------- */
.br-brand .br-section{padding:52px 30px;border-top:1px solid var(--br-line);}
.br-brand .br-section-head{text-align:center;margin-bottom:32px;}
.br-brand .br-section-head p{color:#4a5058;margin-top:6px;}
.br-brand .br-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.br-brand .br-tile{
  border:1px solid var(--br-line);background:#fff;text-align:center;
  padding:16px 14px 18px;display:block;transition:box-shadow .25s;
}
.br-brand .br-tile:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);}
.br-brand .br-tile-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.br-brand .br-tile h3{
  font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;
  text-transform:uppercase;color:var(--br-ink);margin-bottom:2px;
}
.br-brand .br-tile .br-sub{font-size:13px;color:#8a9097;display:block;}

/* ---------- příběh značky ---------- */
.br-brand .br-story{background:var(--br-soft);padding:60px 30px;text-align:center;}
.br-brand .br-story .br-h{max-width:760px;margin:0 auto 16px;}
.br-brand .br-story > p{max-width:680px;margin:0 auto 14px;color:#4a5058;}
.br-brand .br-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:960px;margin:42px auto 0;
}
.br-brand .br-fact .br-year{
  font-family:'Roboto Slab',serif;font-weight:500;font-size:36px;
  color:var(--br-red);display:block;margin-bottom:8px;
}
.br-brand .br-fact h3{
  font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;
  text-transform:uppercase;margin-bottom:6px;
}
.br-brand .br-fact p{font-size:14px;color:#4a5058;}

/* ---------- závěrečné foto s CTA ---------- */
.br-brand .br-cta{
  position:relative;width:100%;padding-top:34%;
  background-image:url('/shop-data/campaign/bormiolirocco/br-officina.jpg');
  background-size:cover;background-position:center 60%;
}
.br-brand .br-cta-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(255,255,255,.55);text-align:center;padding:20px;
}
.br-brand .br-cta-inner .br-h{color:var(--br-blue);}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .br-brand .br-cols,.br-brand .br-grid{grid-template-columns:repeat(2,1fr);}
  .br-brand .br-facts{grid-template-columns:1fr;gap:30px;}
  .br-brand .br-header{justify-content:center;text-align:center;}
  .br-brand .br-cta{padding-top:56%;}
}
@media (max-width:520px){
  .br-brand .br-cols,.br-brand .br-grid{grid-template-columns:1fr;}
  .br-brand .br-hero{padding-top:56%;}
}

/* ---------- 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(.br-brand-wrapper) h1.ph-main,
body:has(.br-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(.br-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 Slab i pro nadpisy uvnitř brand page. */
.br-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Roboto Slab', Georgia, serif; }