@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,400;100,600;125,700&display=swap');
/* ---------- scoped reset & tokeny (reebok.com: černá, bílá, #F0F0F0, červená loga) ---------- */
.rb-brand{
  --rb-black:#000;--rb-grey:#F0F0F0;--rb-muted:#666;--rb-line:#DDD;
  font-family:'Archivo','Neue Plak Regular','Helvetica Neue',Helvetica,Arial,sans-serif;font-stretch:100%;color:#000;font-size:16px;line-height:1.5;
  max-width:1400px;margin:0 auto;background:#fff;
}
.rb-brand *,.rb-brand *::before,.rb-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.rb-brand img{max-width:100%;height:auto;display:block;}
.rb-brand a{text-decoration:none;color:inherit;}
.rb-brand .rb-wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.rb-brand .rb-h{font-family:'Archivo','Neue Plak Extended Bold',Helvetica,Arial,sans-serif;font-weight:700;font-stretch:125%;text-transform:uppercase;line-height:1.05;}
.rb-brand .rb-h2{font-size:36px;margin-bottom:24px;}
.rb-brand .rb-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
/* obrysová tlačítka předlohy: 1px rámeček, hranatá, 15px/400 */
.rb-brand .rb-btn{display:inline-block;border:1px solid #fff;color:#fff;background:transparent;font-size:15px;font-weight:400;padding:12px 24px;line-height:1.2;transition:background .2s,color .2s;}
.rb-brand .rb-btn:hover{background:#fff;color:#000;}
.rb-brand .rb-btn-dark{border-color:#000;color:#000;}
.rb-brand .rb-btn-dark:hover{background:#000;color:#fff;}

/* ---------- černá promo lišta + bílá hlavička ---------- */
.rb-brand .rb-promo{background:#000;color:#fff;text-align:center;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;}
.rb-brand .rb-header .rb-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:59px;border-bottom:1px solid var(--rb-line);}
.rb-brand .rb-logo{display:flex;align-items:center;gap:10px;}
.rb-brand .rb-logo img{width:56px;height:16px;object-fit:contain;}
.rb-brand .rb-logo span{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-stretch:125%;font-size:18px;letter-spacing:.02em;}
.rb-brand .rb-nav{list-style:none;display:flex;gap:0 24px;flex-wrap:wrap;}
.rb-brand .rb-nav a{font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;}
.rb-brand .rb-nav a:hover{border-bottom-color:#000;}
.rb-brand .rb-header-note{font-size:12px;color:var(--rb-muted);letter-spacing:.04em;}

/* ---------- hero: collection split (fotka 2:3 + černý panel) ---------- */
.rb-brand .rb-split{display:grid;grid-template-columns:1fr 1fr;background:#000;color:#fff;}
.rb-brand .rb-split-img{aspect-ratio:1000/1200;overflow:hidden;}
.rb-brand .rb-split-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.rb-brand .rb-split-text{display:flex;flex-direction:column;justify-content:center;padding:48px 8%;container-type:inline-size;}
.rb-brand .rb-split-text h1{font-size:9cqw;margin-bottom:.6em;}
.rb-brand .rb-split-text p{font-size:16px;color:#D9D9D9;max-width:44ch;margin-bottom:28px;}

/* ---------- section double (dvě dlaždice s textem přes fotku) ---------- */
.rb-brand .rb-section{padding:56px 0;}
.rb-brand .rb-double{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rb-brand .rb-tile{position:relative;display:block;overflow:hidden;background:#111;color:#fff;}
.rb-brand .rb-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.rb-brand .rb-tile:hover img{transform:scale(1.03);}
.rb-brand .rb-tile-lg{aspect-ratio:600/527;}
.rb-brand .rb-tile-lg .rb-tile-text{position:absolute;left:0;right:0;bottom:0;padding:32px;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));}
.rb-brand .rb-tile-text h2{font-size:36px;margin-bottom:10px;color:#fff;}
.rb-brand .rb-tile-text p{font-size:16px;color:#E5E5E5;margin-bottom:18px;max-width:46ch;}
.rb-brand .rb-tile-prod{background:var(--rb-grey);}
.rb-brand .rb-tile-prod img{object-fit:contain;padding:10%;mix-blend-mode:multiply;}
.rb-brand .rb-tile-prod .rb-tile-text{background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));}

/* ---------- list collections (dlaždice 3:4, název ve verzálkách, tlačítko) ---------- */
.rb-brand .rb-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.rb-brand .rb-cat{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#111;color:#fff;}
.rb-brand .rb-cat img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.rb-brand .rb-cat:hover img{transform:scale(1.03);}
.rb-brand .rb-cat-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);}
.rb-brand .rb-cat-text strong{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-stretch:125%;font-size:22px;text-transform:uppercase;}
.rb-brand .rb-cat-text .rb-btn{align-self:flex-start;}
.rb-brand .rb-cat-prod{background:var(--rb-grey);color:#000;}
.rb-brand .rb-cat-prod img{object-fit:contain;padding:12%;mix-blend-mode:multiply;}
.rb-brand .rb-cat-prod .rb-cat-text{background:none;}
.rb-brand .rb-cat-prod .rb-btn{border-color:#000;color:#000;}
.rb-brand .rb-cat-prod .rb-btn:hover{background:#000;color:#fff;}

/* ---------- řádek modelů (jako columns předlohy) ---------- */
.rb-brand .rb-models-section{background:var(--rb-grey);padding:40px 0;}
.rb-brand .rb-models{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.rb-brand .rb-model{display:block;text-align:center;}
.rb-brand .rb-model-img{display:flex;aspect-ratio:1/1;align-items:center;justify-content:center;overflow:hidden;background:#fff;}
.rb-brand .rb-model-img img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .3s;}
.rb-brand .rb-model:hover .rb-model-img img{transform:scale(1.05);}
.rb-brand .rb-model span:last-child{display:block;margin-top:10px;font-size:14px;font-weight:600;}

/* ---------- produktové mřížky ---------- */
.rb-brand .rb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.rb-brand .rb-card{display:block;}
.rb-brand .rb-card-img{display:flex;aspect-ratio:1/1;background:var(--rb-grey);align-items:center;justify-content:center;overflow:hidden;}
.rb-brand .rb-card-img img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply;transition:transform .3s;}
.rb-brand .rb-card:hover .rb-card-img img{transform:scale(1.04);}
.rb-brand .rb-card h3{font-size:14px;font-weight:400;margin-top:12px;line-height:1.35;}
.rb-brand .rb-card-sub{display:block;font-size:13px;color:var(--rb-muted);margin-top:2px;}
.rb-brand .rb-more{margin-top:28px;}

/* ---------- gradientní pás předlohy s heslem ---------- */
.rb-brand .rb-band{position:relative;width:100%;padding-top:20.4%;background:url('/shop-data/campaign/reebok/skinny-0922-6b999e.jpg') center/cover no-repeat;}
.rb-brand .rb-band-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 6%;container-type:inline-size;}
.rb-brand .rb-band-text .rb-eyebrow{color:#fff;}
.rb-brand .rb-band-text h2{font-size:4.2cqw;color:#fff;}

/* ---------- příběh značky ---------- */
.rb-brand .rb-story{padding:64px 0;}
.rb-brand .rb-story-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;}
.rb-brand .rb-story p{color:#333;margin-bottom:14px;}
.rb-brand .rb-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rb-brand .rb-fact{background:var(--rb-grey);padding:22px 20px;}
.rb-brand .rb-fact b{display:block;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-stretch:125%;font-size:30px;line-height:1;margin-bottom:8px;}
.rb-brand .rb-fact span{font-size:14px;color:#333;}
.rb-brand .rb-cta{background:#000;color:#fff;text-align:center;padding:56px 24px;}
.rb-brand .rb-cta .rb-h2{color:#fff;margin-bottom:20px;}

/* ---------- responzivita ---------- */
@media (max-width:1000px){
  .rb-brand .rb-cards,.rb-brand .rb-cats{grid-template-columns:repeat(2,1fr);}
  .rb-brand .rb-models{grid-template-columns:repeat(3,1fr);}
  .rb-brand .rb-story-inner{grid-template-columns:1fr;}
  .rb-brand .rb-h2,.rb-brand .rb-tile-text h2{font-size:28px;}
}
@media (max-width:760px){
  .rb-brand .rb-header .rb-wrap{height:auto;padding:12px 24px;flex-wrap:wrap;}
  .rb-brand .rb-header-note{display:none;}
  .rb-brand .rb-split{grid-template-columns:1fr;}
  .rb-brand .rb-split-img{aspect-ratio:4/3;}
  .rb-brand .rb-split-text{padding:32px 24px 40px;}
  .rb-brand .rb-split-text h1{font-size:32px;}
  .rb-brand .rb-double{grid-template-columns:1fr;}
  .rb-brand .rb-band{padding-top:0;background:linear-gradient(90deg,#F26A1B,#F7B21A);padding:32px 20px;}
  .rb-brand .rb-band-text{position:static;}
  .rb-brand .rb-band-text h2{font-size:26px;}
}
@media (max-width:520px){
  .rb-brand .rb-cards,.rb-brand .rb-cats,.rb-brand .rb-facts{grid-template-columns:1fr;}
  .rb-brand .rb-models{grid-template-columns:repeat(2,1fr);}
  .rb-brand .rb-nav{gap:0 14px;}
}

/* ---------- 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
   titulek. Selektor míří na `ph-page` i na starší `ph-main`, šablona třídu přejmenovala. */
body:has(.rb-brand-wrapper) h1.ph-main,
body:has(.rb-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je úzký, brand page potřebuje plnou šířku. */
.max-w-xl:has(.rb-brand-wrapper) { max-width: none; }
/* Šablona má vlastní pravidlo pro h1–h4 (Myriad) a to přebije dědění z wrapperu. */
.rb-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Archivo', Helvetica, Arial, sans-serif; }

/* ---------- produkty vždy na čistě bílé (pravidlo e-shopu) ---------- */
/* Předloha dává produktům šedý podklad #F0F0F0 a řádek modelů šedý pás. */
.rb-brand .rb-card-img,
.rb-brand .rb-model-img { background: #fff; border: 1px solid var(--rb-line); }
.rb-brand .rb-models-section { background: #fff; }
.rb-brand .rb-cat-prod { background: #fff; border: 1px solid var(--rb-line); }

/* ---------- mřížky: 2 / 3 / 4 / 5 v řadě (zlomy šablony Upgates) ---------- */
/* Náhled měl pevně 4, pod 1000 px 2 a pod 520 px 1. Produktové karty jdou mobile-first
   2 → 3 (≥992) → 4 (≥1204) → 5 (≥1502); sada čtyř dlaždic 2 → 4 a šest modelů
   2 → 3 → 6, ať v řadě nezůstává prázdné místo. */
.rb-brand .rb-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rb-brand .rb-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rb-brand .rb-models { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 992px) {
  .rb-brand .rb-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rb-brand .rb-cats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .rb-brand .rb-models { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1204px) {
  .rb-brand .rb-cards { grid-template-columns: repeat(4, 1fr); }
  .rb-brand .rb-models { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1502px) { .rb-brand .rb-cards { grid-template-columns: repeat(5, 1fr); } }
/* Nadpis dlaždice je nahoře, ale stín předlohy jen dole — bílé „TRÉNINK" nebo „CLASSICS"
   na světlé části fotky zanikalo. Stín i od horního okraje (produktová dlaždice ho nemá). */
.rb-brand .rb-cat:not(.rb-cat-prod) .rb-cat-text {
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 38%),
              linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
}
/* Velké dlaždice mají text přes fotku s pevným poměrem 600:527. V šabloně e-shopu je
   obsahový sloupec na mobilu užší než v náhledu (265 px místo 320) a nadpis s popisem se
   do fotky nevešly (kontrola_mobil.py na živé /cz/reebok, 2026-09-29) — pod 760 px jde
   text pod fotku na černý podklad. */
@media (max-width: 759px) {
  .rb-brand .rb-tile-lg { aspect-ratio: auto; }
  .rb-brand .rb-tile-lg img { height: auto; aspect-ratio: 4 / 3; }
  .rb-brand .rb-tile-lg .rb-tile-text { position: static; display: block; padding: 20px; background: #111; }
  .rb-brand .rb-tile-text h2 { font-size: 24px; }
}
/* Dvě dlaždice vedle sebe mají na 360 px jen 150 px a verzálky v šířce 125 („CLASSICS")
   se do nich nevešly (kontrola_mobil.py, 2026-09-29) — pod 992 px menší písmo i tlačítko. */
@media (max-width: 991px) {
  .rb-brand .rb-cat-text { padding: 14px; }
  .rb-brand .rb-cat-text strong { font-size: 15px; }
  .rb-brand .rb-cat-text .rb-btn { font-size: 13px; padding: 8px 12px; }
}