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

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.km-brand{
  --km-black:#000;
  --km-ink:#231F20;
  --km-grey:#f4f4f4;
  --km-line:#e5e5e5;
  font-family:Helvetica,Arial,sans-serif;
  color:var(--km-black);
  font-size:17px;
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.km-brand *,.km-brand *::before,.km-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.km-brand img{max-width:100%;height:auto;display:block;}
.km-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.km-brand .km-h{
  font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:30px;
  letter-spacing:-.05em;text-transform:uppercase;line-height:1.1;color:var(--km-black);
}
.km-brand .km-btn{
  display:inline-block;background:#fff;color:#000;border:1px solid #fff;border-radius:60px;
  font-family:Helvetica,Arial,sans-serif;font-weight:900;font-size:17px;
  padding:12px 30px;transition:background .25s,color .25s;
}
.km-brand .km-btn:hover{background:#000;color:#fff;border-color:#000;}
.km-brand .km-btn-dark{background:#000;color:#fff;border-color:#000;}
.km-brand .km-btn-dark:hover{background:#fff;color:#000;}

/* ---------- hlavička + černá lišta ---------- */
.km-brand .km-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 40px;background:#fff;
}
.km-brand .km-header img{width:120px;}
.km-brand .km-nav{display:flex;flex-wrap:wrap;gap:6px 28px;}
.km-brand .km-nav a{font-size:16px;font-weight:700;color:var(--km-ink);padding:4px 0;border-bottom:2px solid transparent;}
.km-brand .km-nav a:hover{border-bottom-color:#000;}
.km-brand .km-bar{
  background:#000;color:#fff;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;
}

/* ---------- hero slider (CSS crossfade, texty vlevo dole jako předloha) ---------- */
.km-brand .km-hero{position:relative;width:100%;padding-top:42%;overflow:hidden;background:#000;container-type:inline-size;}
.km-brand .km-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;visibility:hidden;animation:km-fade 18s infinite;
}
.km-brand .km-slide:nth-child(1){animation-delay:0s;}
.km-brand .km-slide:nth-child(2){animation-delay:6s;}
.km-brand .km-slide:nth-child(3){animation-delay:12s;}
@keyframes km-fade{0%{opacity:0;visibility:visible;}4%{opacity:1;}33.33%{opacity:1;}38%{opacity:0;visibility:hidden;}100%{opacity:0;visibility:hidden;}}
.km-brand .km-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);}
.km-brand .km-slide-text{position:absolute;left:4cqw;bottom:4cqw;z-index:1;color:#fff;max-width:60%;}
.km-brand .km-slide-text h2{
  font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:3.4cqw;
  letter-spacing:-.05em;text-transform:uppercase;line-height:1.05;margin-bottom:.8cqw;
}
.km-brand .km-slide-text p{font-size:1.35cqw;margin-bottom:1.6cqw;}
.km-brand .km-slide-text .km-btn{font-size:1.25cqw;padding:.9cqw 2.4cqw;}
.km-brand .km-dots{position:absolute;right:3cqw;bottom:3.4cqw;display:flex;gap:8px;z-index:1;}
.km-brand .km-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);animation:km-dot 18s infinite;}
.km-brand .km-dots i:nth-child(1){animation-delay:0s;}
.km-brand .km-dots i:nth-child(2){animation-delay:6s;}
.km-brand .km-dots i:nth-child(3){animation-delay:12s;}
@keyframes km-dot{0%{background:#fff;}33.33%{background:#fff;}34%{background:rgba(255,255,255,.45);}100%{background:rgba(255,255,255,.45);}}

/* ---------- produktové karty (Shopify karty předlohy) ---------- */
.km-brand .km-section{padding:48px 40px;}
.km-brand .km-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px;}
.km-brand .km-section-head p{color:#555;font-size:16px;}
.km-brand .km-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.km-brand .km-card{display:block;}
.km-brand .km-card-img{background:var(--km-grey);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.km-brand .km-card-img img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply;transition:transform .35s;}
.km-brand .km-card:hover .km-card-img img{transform:scale(1.05);}
.km-brand .km-card h3{
  font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:-.02em;text-transform:uppercase;margin:12px 0 2px;
}
.km-brand .km-card span{font-size:14px;color:#666;display:block;}

/* ---------- čtyři dlaždice modelů (sekce RCDE předlohy) ---------- */
.km-brand .km-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.km-brand .km-tile{position:relative;display:block;aspect-ratio:3/4;background:var(--km-grey);overflow:hidden;}
.km-brand .km-tile img{width:100%;height:100%;object-fit:contain;object-position:center 42%;padding:8% 6% 16%;mix-blend-mode:multiply;transition:transform .35s;}
.km-brand .km-tile:hover img{transform:scale(1.05);}
.km-brand .km-tile span{
  position:absolute;left:14px;bottom:14px;background:#000;color:#fff;
  font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:-.02em;text-transform:uppercase;padding:6px 14px;border-radius:60px;
}

/* ---------- dlaždice kolekcí Muži/Ženy/Děti/Doplňky ---------- */
.km-brand .km-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.km-brand .km-col{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--km-grey);}
.km-brand .km-col img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.km-brand .km-col:hover img{transform:scale(1.05);}
.km-brand .km-col::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 50%);}
.km-brand .km-col h3{
  position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;
  font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:24px;
  letter-spacing:-.05em;text-transform:uppercase;
}
.km-brand .km-col-product img{object-fit:contain;padding:12%;mix-blend-mode:multiply;}
.km-brand .km-col-product::after{background:none;}
.km-brand .km-col-product h3{color:#000;}

/* ---------- černý pás s příběhem značky ---------- */
.km-brand .km-story{background:#000;color:#fff;padding:60px 40px;display:flex;gap:50px;align-items:flex-start;}
.km-brand .km-story .km-h{color:#fff;flex:0 0 36%;font-size:40px;}
.km-brand .km-story-text{flex:1;}
.km-brand .km-story-text p{color:#d6d6d6;font-size:16px;margin-bottom:14px;max-width:640px;}
.km-brand .km-story-text p strong{color:#fff;}
.km-brand .km-facts{display:flex;gap:40px;flex-wrap:wrap;margin-top:24px;}
.km-brand .km-fact b{display:block;font-family:'Cabin',Helvetica,Arial,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.05em;line-height:1;}
.km-brand .km-fact span{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#bdbdbd;}

/* ---------- CTA ---------- */
.km-brand .km-cta{text-align:center;padding:56px 28px;border-top:1px solid var(--km-line);}
.km-brand .km-cta .km-h{margin-bottom:10px;}
.km-brand .km-cta p{color:#555;margin-bottom:24px;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .km-brand .km-cards,.km-brand .km-tiles,.km-brand .km-cols{grid-template-columns:repeat(2,1fr);}
  .km-brand .km-story{flex-direction:column;gap:24px;padding:44px 28px;}
  .km-brand .km-story .km-h{flex:0 0 auto;font-size:32px;}
  .km-brand .km-header{justify-content:center;}
  .km-brand .km-section{padding:36px 28px;}
  .km-brand .km-slide-text{max-width:80%;}
}
@media (max-width:520px){
  .km-brand .km-cards{grid-template-columns:1fr;}
  .km-brand .km-hero{padding-top:70%;}
  .km-brand .km-slide-text h2{font-size:5.5cqw;}
  .km-brand .km-slide-text p{font-size:2.6cqw;}
  .km-brand .km-slide-text .km-btn{font-size:2.4cqw;padding:1.6cqw 4cqw;}
}

/* ---------- 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(.km-brand-wrapper) h1.ph-main,
body:has(.km-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.km-brand .km-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(.km-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 Cabin i pro nadpisy uvnitř brand page. */
.km-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Cabin', system-ui, sans-serif; }

/* ===== mobil: čitelné písmo a text pod fotkou (scripts/mobil_css.py) ===== */
/* Kelme na telefonu (do 768 px). Písmo hero bylo v `cqw` bez spodní meze a na
   360 px vycházelo pod 8 px (kontrola_mobil.py, 2026-09-24). Fotka se nahoře ukáže
   v pásu 37,5 % šířky (dvě fotky mají přesně tenhle poměr, čtvercová kolekce se ukáže uprostřed), text jde pod ni na plnou plochu s pevným písmem.
   `cqw` v pravidlech níž je bezpečné: měří šířku slideru, ne písmo. */
@media (max-width:768px){
  .km-brand .km-hero{padding-top:calc(37.5% + 220px);background:#000;}
  .km-brand .km-slide{background-size:auto 37.5cqw;background-position:center top;background-repeat:no-repeat;}
  /* tmavý přechod zespodu byl podklad pro text přes fotku; text je teď pod ní */
  .km-brand .km-slide::after{display:none;}
  .km-brand .km-slide .km-slide-text{top:37.5cqw;bottom:0;left:0;right:0;max-width:none;
    padding:18px 20px 22px;background:#000;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
  .km-brand .km-slide-text h2{font-size:24px;line-height:1.05;margin-bottom:8px;}
  .km-brand .km-slide-text p{font-size:14px;line-height:1.5;margin-bottom:16px;}
  .km-brand .km-slide-text .km-btn{font-size:13px;padding:11px 24px;}
}
/* ===== konec bloku pro mobil ===== */