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

/* Roadstar brand page (varianta Claude) — scope .rs-brand. Zdroj:
   raw/brand-handoff/roadstar/, CSS vyjmuto z <style> generátorem
   scripts/build_roadstar_claude_page.py. Fonty DM Sans + Jost. */
/* ---------- scoped reset & tokeny ---------- */
.rs-brand{
  --rs-bg:#F4F4F4;
  --rs-dark:#2B2C2D;
  --rs-beige:#C2B7AC;
  --rs-beige2:#B7ACA2;
  font-family:'Jost',sans-serif;
  color:rgba(43,44,45,.8);
  line-height:1.65;
  max-width:1400px;
  margin:0 auto;
  background:var(--rs-bg);
}
.rs-brand *,.rs-brand *::before,.rs-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.rs-brand img{max-width:100%;height:auto;display:block;}
.rs-brand a{text-decoration:none;color:inherit;}
.rs-brand h1,.rs-brand h2,.rs-brand h3{font-family:'DM Sans',sans-serif;color:var(--rs-dark);}

/* ---------- hlavička značky ---------- */
.rs-brand .rs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;flex-wrap:wrap;gap:14px;background:#fff;
}
.rs-brand .rs-header img{width:160px;height:auto;}
.rs-brand .rs-claim{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--rs-dark);}
.rs-brand .rs-header-note{font-size:13px;color:#999;}

/* ---------- USP pás (tmavý, jako ticker originálu) ---------- */
.rs-brand .rs-usp{
  display:flex;justify-content:center;gap:5%;background:var(--rs-dark);color:#fff;
  padding:12px 28px;flex-wrap:wrap;font-size:12.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;text-align:center;
}
.rs-brand .rs-usp span b{color:var(--rs-beige);font-weight:600;}

/* ---------- hero (oficiální foto bez textu + český overlay) ---------- */
.rs-brand .rs-hero{
  position:relative;width:100%;padding-top:45%;overflow:hidden;
  background-image:url('/shop-data/campaign/roadstar/rs-hero.jpg');
  background-size:cover;background-position:center 40%;container-type:inline-size;
}
.rs-brand .rs-hero-text{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);width:40%;
}
.rs-brand .rs-hero-eyebrow{
  display:block;font-size:12px;font-size:1.1cqw;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#8a7f74;margin-bottom:1cqw;
}
.rs-brand .rs-hero-text h2{
  font-size:26px;font-size:3cqw;font-weight:700;line-height:1.15;margin-bottom:1cqw;
}
.rs-brand .rs-hero-text p{font-size:13px;font-size:1.3cqw;font-weight:500;color:#6d655c;margin-bottom:1.8cqw;}
.rs-brand .rs-hero-btn{
  display:inline-block;background:var(--rs-dark);color:#fff;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:12px;font-size:1.1cqw;letter-spacing:.06em;
  padding:1cqw 2.6cqw;border-radius:999px;transition:background .3s;
}
.rs-brand .rs-hero-btn:hover{background:var(--rs-beige2);color:var(--rs-dark);}

/* ---------- nadpisy sekcí ---------- */
.rs-brand .rs-section{padding:52px 28px;}
.rs-brand .rs-h2{font-size:28px;font-weight:700;text-align:center;margin-bottom:8px;}
.rs-brand .rs-sub{text-align:center;color:#8a8a8a;font-weight:500;margin-bottom:30px;font-size:15px;}

/* ---------- produktové karty ---------- */
.rs-brand .rs-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.rs-brand .rs-product{
  display:flex;flex-direction:column;background:#fff;border-radius:14px;
  overflow:hidden;transition:box-shadow .3s,transform .3s;
}
.rs-brand .rs-product:hover{box-shadow:0 14px 34px rgba(43,44,45,.14);transform:translateY(-3px);}
.rs-brand .rs-product-img{aspect-ratio:1/1;overflow:hidden;background:#fff;padding:12px;display:flex;align-items:center;justify-content:center;}
.rs-brand .rs-product-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.rs-brand .rs-product:hover .rs-product-img img{transform:scale(1.05);}
.rs-brand .rs-product-body{padding:4px 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1;text-align:center;}
.rs-brand .rs-product-body h3{font-size:16.5px;font-weight:700;}
.rs-brand .rs-product-cat{font-size:13px;color:#999;font-weight:500;margin-bottom:12px;}
.rs-brand .rs-btn{
  margin-top:auto;display:inline-block;text-align:center;
  background:var(--rs-dark);color:#fff;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:999px;
  transition:background .3s,color .3s;
}
.rs-brand .rs-btn:hover{background:var(--rs-beige2);color:var(--rs-dark);}

/* ---------- ozdobný předěl ---------- */
.rs-brand .rs-divider{
  text-align:center;font-family:'DM Sans',sans-serif;font-size:20px;font-weight:500;
  color:#8a7f74;letter-spacing:.1em;padding:8px 28px 0;
}

/* ---------- příběh značky – timeline ---------- */
.rs-brand .rs-story{background:var(--rs-dark);color:#cfc9c2;padding:60px 28px;}
.rs-brand .rs-story h2{color:#fff;font-size:28px;font-weight:700;text-align:center;margin-bottom:10px;}
.rs-brand .rs-story h2 span{color:var(--rs-beige);}
.rs-brand .rs-story-intro{max-width:780px;margin:0 auto 36px;text-align:center;font-size:15.5px;}
.rs-brand .rs-timeline{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.rs-brand .rs-milestone{flex:1 1 210px;max-width:300px;text-align:center;padding:10px 14px;}
.rs-brand .rs-year{
  font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;color:var(--rs-beige);
  border-bottom:2px solid rgba(194,183,172,.4);display:inline-block;
  padding:0 14px 6px;margin-bottom:12px;
}
.rs-brand .rs-milestone p{font-size:14px;color:#b5aea6;}

/* ---------- CTA pás ---------- */
.rs-brand .rs-cta{background:var(--rs-beige);text-align:center;padding:48px 28px;}
.rs-brand .rs-cta h2{font-size:26px;font-weight:700;margin-bottom:20px;}
.rs-brand .rs-cta a{
  display:inline-block;background:var(--rs-dark);color:#fff;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:14.5px;padding:14px 44px;border-radius:999px;
  transition:background .3s,color .3s;
}
.rs-brand .rs-cta a:hover{background:#fff;color:var(--rs-dark);}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .rs-brand .rs-products{grid-template-columns:repeat(2,1fr);}
  .rs-brand .rs-hero-text{width:48%;}
}
@media (max-width:768px){
  .rs-brand .rs-header{justify-content:center;text-align:center;}
  .rs-brand .rs-h2{font-size:23px;}
  .rs-brand .rs-usp{gap:14px;}
}
@media (max-width:520px){
  .rs-brand .rs-products{grid-template-columns:1fr;}
}

/* ---------- pravidla pro nasazení do šablony e-shopu (Upgates) ----------
   1) Šablona vykresluje nad obsahem vlastní H1 s názvem stránky → duplicitní nadpis.
   2) Šablona drží obsah v úzkém .max-w-xl → brand page chce plnou šířku. Dva selektory
      záměrně: cap může být na `.max-w-xl` i na `.max.max-w-xl.text` (3 třídy = vyšší
      specificita, přebilo by :has() s jednou třídou).
   3) Nadpisy MUSÍ mít font-family explicitně: šablona má vlastní pravidlo pro h1–h4
      (myriad-pro) a přímé pravidlo přebije dědění z .rs-brand. Naživo by se nadpis
      kreslil fontem šablony a znaky, které nemá v subsetu (ě, ž, ů), by spadly na
      systémový fallback → nápadně tlustší písmena. Na náhledu to není vidět. */
body:has(.rs-brand-wrapper) h1.ph-main,
body:has(.rs-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.rs-brand .rs-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.max-w-xl:has(.rs-brand-wrapper),
.max.max-w-xl.text:has(.rs-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }
.rs-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Jost', 'DM Sans', 'Segoe UI', system-ui, sans-serif; }

/* Sekce s position:relative se v shellu zužují na shrink-to-fit (naměřeno u Hurley i Tesly
   shodně 1238 px z 1440) — explicitní width:100% to ruší. */
.rs-brand .rs-hero,
.rs-brand .rs-story { width: 100%; }

/* MOBIL A TABLET — hero text v px a v panelu pod fotkou.
   Dvě vady dodaného heru, obě naměřené:
   1) devět velikostí v `cqw` (% šířky kontejneru) → na 390 px nadpis ~12 px, tlačítko ~4 px,
   2) text drží 40–54 % šířky vlevo, ale gramofon je ve fotce od ~45 % — na 768 px text
      končil na 58 % šířky, tedy přes produkt. Fotka se navíc při `cover` vždy vejde na
      šířku (1,5 vs poměr kontejneru), takže posunem pozadí to řešit nejde.
   Řešení pro celý rozsah do 900 px: vyšší hero + text v poloprůhledném panelu u dolní
   hrany, fotka nad ním zůstává celá vidět. */
@media (max-width: 900px) {
  .rs-brand .rs-hero { padding-top: 78%; background-position: center 24%; }
  .rs-brand .rs-hero-text {
    left: 6%; width: 88%; top: auto; bottom: 6%; transform: none;
    background: rgba(255,255,255,.9); padding: 16px 18px; border-radius: 12px;
  }
  .rs-brand .rs-hero-eyebrow { font-size: 11px; letter-spacing: .18em; margin-bottom: 8px; }
  .rs-brand .rs-hero-text h2 { font-size: 24px; line-height: 1.18; margin-bottom: 10px; }
  .rs-brand .rs-hero-text p { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
  .rs-brand .rs-hero-btn { font-size: 13px; padding: 11px 22px; }
}
@media (max-width: 600px) {
  .rs-brand .rs-hero { padding-top: 104%; background-position: center 22%; }
  .rs-brand .rs-hero-text h2 { font-size: 21px; }
}