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

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.ts-brand{
  --ts-ink:#222222;
  --ts-nav:#343434;
  --ts-petrol:#104E70;
  --ts-line:#e5e5e5;
  --ts-soft:#f7f6f4;
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  color:var(--ts-ink);
  font-size:16px;
  line-height:1.7;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.ts-brand *,.ts-brand *::before,.ts-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.ts-brand img{max-width:100%;height:auto;display:block;}
.ts-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.ts-brand .ts-h{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:32px;
  color:var(--ts-ink);line-height:1.35;
}
.ts-brand .ts-h-sm{font-size:24px;}
.ts-brand .ts-btn{
  display:inline-block;background:var(--ts-ink);color:#fff;border:1px solid var(--ts-ink);
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;line-height:38px;
  padding:0 24px;border-radius:0;transition:background .25s,color .25s;
}
.ts-brand .ts-btn:hover{background:var(--ts-petrol);border-color:var(--ts-petrol);color:#fff;}
.ts-brand .ts-btn-ghost{background:transparent;color:#fff;border-color:#fff;}
.ts-brand .ts-btn-ghost:hover{background:#fff;color:var(--ts-petrol);border-color:#fff;}

/* ---------- horní lišta (pozice promo lišty předlohy, s claimem značky) ---------- */
.ts-brand .ts-topbar{
  background:var(--ts-petrol);color:#fff;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px 16px;
}

/* ---------- hlavička s logem a navigací ---------- */
.ts-brand .ts-header{
  background:#fff;border-bottom:1px solid var(--ts-line);
  padding:26px 30px 0;text-align:center;
}
.ts-brand .ts-logo{width:220px;max-width:70%;margin:0 auto 20px;color:var(--ts-ink);}
.ts-brand .ts-logo svg{display:block;width:100%;height:auto;}
.ts-brand .ts-logo .fill-color{fill:currentColor;}
.ts-brand .ts-nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0 34px;padding-bottom:16px;
}
.ts-brand .ts-nav a{
  font-family:'Montserrat',sans-serif;font-size:15px;color:var(--ts-nav);
  padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s;
}
.ts-brand .ts-nav a:hover{border-bottom-color:var(--ts-ink);}

/* ---------- hero slider (CSS crossfade, 3 slidy jako slider předlohy) ---------- */
.ts-brand .ts-hero{
  position:relative;width:100%;padding-top:40%;background:var(--ts-soft);
  overflow:hidden;container-type:inline-size;
}
.ts-brand .ts-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:5cqw;padding:0 7cqw;opacity:0;visibility:hidden;
  animation:ts-fade 18s infinite;
}
.ts-brand .ts-slide:nth-child(1){animation-delay:0s;}
.ts-brand .ts-slide:nth-child(2){animation-delay:6s;}
.ts-brand .ts-slide:nth-child(3){animation-delay:12s;}
@keyframes ts-fade{
  0%{opacity:0;visibility:visible;}
  4%{opacity:1;}
  33.33%{opacity:1;}
  38%{opacity:0;visibility:hidden;}
  100%{opacity:0;visibility:hidden;}
}
.ts-brand .ts-slide-img{flex:0 0 34%;max-width:34%;}
.ts-brand .ts-slide-img img{mix-blend-mode:multiply;}
.ts-brand .ts-slide-text{max-width:44%;text-align:center;}
.ts-brand .ts-slide-text .ts-kicker{
  display:block;font-family:'Open Sans',sans-serif;font-weight:600;font-size:1.05cqw;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ts-petrol);margin-bottom:.8cqw;
}
.ts-brand .ts-slide-text h2{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:2.9cqw;
  color:var(--ts-ink);line-height:1.3;margin-bottom:1cqw;
}
.ts-brand .ts-slide-text p{font-size:1.25cqw;color:#555;margin-bottom:1.8cqw;}
.ts-brand .ts-slide-text .ts-btn{font-size:.95cqw;line-height:3cqw;padding:0 2cqw;}
.ts-brand .ts-dots{
  position:absolute;left:0;right:0;bottom:2cqw;display:flex;justify-content:center;gap:10px;
}
.ts-brand .ts-dots i{
  width:8px;height:8px;border-radius:50%;background:#c9c9c9;
  animation:ts-dot 18s infinite;
}
.ts-brand .ts-dots i:nth-child(1){animation-delay:0s;}
.ts-brand .ts-dots i:nth-child(2){animation-delay:6s;}
.ts-brand .ts-dots i:nth-child(3){animation-delay:12s;}
@keyframes ts-dot{0%{background:var(--ts-ink);}33.33%{background:var(--ts-ink);}34%{background:#c9c9c9;}100%{background:#c9c9c9;}}

/* ---------- řádek rychlých odkazů (dle předlohy) ---------- */
.ts-brand .ts-quicklinks{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px 48px;
  padding:26px 20px;border-bottom:1px solid var(--ts-line);
}
.ts-brand .ts-quicklinks a{
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--ts-ink);
  text-decoration:underline;text-underline-offset:4px;
}
.ts-brand .ts-quicklinks a:hover{color:var(--ts-petrol);}

/* ---------- Objevte svět Thomas Sabo (karuselová sekce předlohy) ---------- */
.ts-brand .ts-world{padding:56px 30px;}
.ts-brand .ts-world-head{text-align:center;max-width:640px;margin:0 auto 36px;}
.ts-brand .ts-world-head p{color:#555;margin-top:8px;}
.ts-brand .ts-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.ts-brand .ts-card{display:block;}
.ts-brand .ts-card-img{background:var(--ts-soft);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14%;}
.ts-brand .ts-card-img img{mix-blend-mode:multiply;transition:transform .35s;}
.ts-brand .ts-card:hover .ts-card-img img{transform:scale(1.06);}
.ts-brand .ts-card h3{
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;margin:16px 0 4px;
}
.ts-brand .ts-card p{font-size:14px;color:#555;margin-bottom:8px;}
.ts-brand .ts-card .ts-more{
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ts-petrol);text-decoration:underline;text-underline-offset:4px;
}

/* ---------- produktové dlaždice (dle výpisů předlohy) ---------- */
.ts-brand .ts-section{padding:50px 30px;border-top:1px solid var(--ts-line);}
.ts-brand .ts-section-head{text-align:center;margin-bottom:32px;}
.ts-brand .ts-section-head p{color:#555;margin-top:6px;}
.ts-brand .ts-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.ts-brand .ts-tile{text-align:center;display:block;}
.ts-brand .ts-tile-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.ts-brand .ts-tile-img img{transition:transform .35s;}
.ts-brand .ts-tile:hover .ts-tile-img img{transform:scale(1.05);}
.ts-brand .ts-tile h3{
  font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ts-ink);margin:12px 0 2px;
}
.ts-brand .ts-tile .ts-sub{font-size:13px;color:#8a8a8a;display:block;}

/* ---------- příběh značky ---------- */
.ts-brand .ts-story{padding:64px 30px;border-top:1px solid var(--ts-line);text-align:center;}
.ts-brand .ts-story .ts-h{max-width:720px;margin:0 auto 18px;}
.ts-brand .ts-story > p{max-width:680px;margin:0 auto 14px;color:#555;}
.ts-brand .ts-story-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:960px;margin:44px auto 0;
}
.ts-brand .ts-fact{padding:0 12px;}
.ts-brand .ts-fact .ts-year{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:34px;
  color:var(--ts-petrol);display:block;margin-bottom:8px;
}
.ts-brand .ts-fact h3{
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px;
}
.ts-brand .ts-fact p{font-size:14px;color:#555;}

/* ---------- závěrečný pás ---------- */
.ts-brand .ts-cta{
  background:var(--ts-petrol);color:#fff;text-align:center;padding:56px 28px;
}
.ts-brand .ts-cta h2{
  font-family:'Montserrat',sans-serif;font-weight:400;font-size:28px;margin-bottom:10px;
}
.ts-brand .ts-cta p{color:#cfe0ea;margin-bottom:24px;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .ts-brand .ts-cards,.ts-brand .ts-tiles{grid-template-columns:repeat(2,1fr);}
  .ts-brand .ts-story-facts{grid-template-columns:1fr;gap:32px;}
  .ts-brand .ts-nav{gap:0 20px;}
  .ts-brand .ts-slide-text{max-width:52%;}
}
@media (max-width:520px){
  .ts-brand .ts-cards,.ts-brand .ts-tiles{grid-template-columns:1fr;}
  .ts-brand .ts-hero{padding-top:64%;}
  .ts-brand .ts-slide{gap:4cqw;padding:0 5cqw;}
  .ts-brand .ts-slide-text h2{font-size:3.6cqw;}
  .ts-brand .ts-slide-text p{display:none;}
  .ts-brand .ts-slide-text .ts-btn{font-size:1.6cqw;line-height:5cqw;}
}

/* ---------- 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(.ts-brand-wrapper) h1.ph-main,
body:has(.ts-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.ts-brand .ts-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;
}
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.ts-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 Montserrat i pro nadpisy uvnitř brand page. */
.ts-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Montserrat', system-ui, sans-serif; }


/* ---------- mobil: slider s čitelným písmem (2026-09-24) ---------- */
@media (max-width:768px){
  .ts-brand .ts-hero{padding-top:0;height:300px;}
  .ts-brand .ts-slide{gap:16px;padding:0 20px 24px;}
  .ts-brand .ts-slide-img{flex-basis:38%;max-width:38%;}
  .ts-brand .ts-slide-text{max-width:none;flex:1;}
  .ts-brand .ts-slide-text .ts-kicker{font-size:11px;margin-bottom:6px;}
  .ts-brand .ts-slide-text h2{font-size:18px;margin-bottom:12px;}
  .ts-brand .ts-slide-text p{display:none;}
  .ts-brand .ts-slide-text .ts-btn{font-size:12px;line-height:36px;padding:0 16px;}
  .ts-brand .ts-dots{bottom:10px;}
}