@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&display=swap');
/* ---------- scoped reset & tokeny (underarmour.com) ---------- */
.ua-brand{
  --ua-dark:#1D1D1D;--ua-grey:#949494;--ua-light:#F9F9F9;--ua-line:#3A3A3A;
  font-family:'Archivo','NeuePlakUA',Helvetica,Arial,sans-serif;color:#fff;background:var(--ua-dark);
  font-size:16px;line-height:1.5;max-width:1400px;margin:0 auto;
}
.ua-brand *,.ua-brand *::before,.ua-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.ua-brand img{max-width:100%;height:auto;display:block;}
.ua-brand a{text-decoration:none;color:inherit;}
.ua-brand .ua-wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.ua-brand .ua-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:1024px;background:#fff;color:var(--ua-dark);font-weight:600;font-size:14px;transition:background .2s,color .2s;}
.ua-brand .ua-pill:hover{background:var(--ua-grey);color:#fff;}
.ua-brand .ua-pill-dark{background:var(--ua-dark);color:#fff;border:1px solid #fff;}
.ua-brand .ua-pill-dark:hover{background:#fff;color:var(--ua-dark);}
.ua-brand .ua-h2{font-size:32px;font-weight:700;letter-spacing:.5px;line-height:1.15;margin-bottom:8px;}
.ua-brand .ua-sub{color:var(--ua-grey);font-size:16px;margin-bottom:24px;}
.ua-brand .ua-link{display:inline-block;font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:4px;letter-spacing:.5px;}

/* ---------- promo lišta + hlavička ---------- */
.ua-brand .ua-promo{text-align:center;font-size:12px;font-weight:600;padding:9px 16px;border-bottom:1px solid var(--ua-line);color:#fff;}
.ua-brand .ua-header .ua-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.ua-brand .ua-logo{width:42px;height:24px;display:block;fill:#fff;}
.ua-brand .ua-nav{list-style:none;display:flex;gap:0 28px;flex-wrap:wrap;}
.ua-brand .ua-nav a{font-weight:600;font-size:14px;padding:6px 0;border-bottom:2px solid transparent;}
.ua-brand .ua-nav a:hover{border-bottom-color:#fff;}
.ua-brand .ua-header-note{font-size:12px;color:var(--ua-grey);}

/* ---------- hero 3:1 (headline 64px/800 verzálky, pill tlačítka) ---------- */
.ua-brand .ua-hero{position:relative;width:100%;padding-top:33.33%;background:url('/shop-data/campaign/underarmour/FW26_Q3_Brand_WLF_Launch_Fleece_M_HP_Hero_3_1-f8f282.webp') center/cover no-repeat;container-type:inline-size;}
.ua-brand .ua-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,29,29,.55) 0%,rgba(29,29,29,.15) 55%,rgba(29,29,29,0) 100%);}
.ua-brand .ua-hero-text{position:absolute;left:2.5%;top:50%;transform:translateY(-50%);max-width:56%;}
.ua-brand .ua-hero-text h1{font-size:5cqw;font-weight:800;text-transform:uppercase;letter-spacing:2px;line-height:1.05;margin-bottom:1.6cqw;}
.ua-brand .ua-hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.ua-brand .ua-hero-btns .ua-pill{height:3.2cqw;font-size:1.1cqw;padding:0 1.3cqw;}

/* ---------- Built for the love: dvě dlaždice 5:4 s popiskem ---------- */
.ua-brand .ua-section{padding:48px 0;}
.ua-brand .ua-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ua-brand .ua-bucket{display:block;}
.ua-brand .ua-bucket-img{display:block;aspect-ratio:5/4;overflow:hidden;background:#2A2A2A;}
.ua-brand .ua-bucket-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s;}
.ua-brand .ua-bucket:hover .ua-bucket-img img{transform:scale(1.03);}
.ua-brand .ua-bucket-cap{display:block;padding:16px 0 0;}
.ua-brand .ua-bucket-cap strong{display:block;font-size:16px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;}
.ua-brand .ua-bucket-cap p{color:var(--ua-grey);font-size:16px;margin-bottom:14px;max-width:52ch;}

/* ---------- čtyři dlaždice 4:5 s podtrženým odkazem ---------- */
.ua-brand .ua-four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ua-brand .ua-tile{display:block;}
.ua-brand .ua-tile-img{aspect-ratio:4/5;overflow:hidden;background:#2A2A2A;display:flex;align-items:center;justify-content:center;}
.ua-brand .ua-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.ua-brand .ua-tile-prod{background:var(--ua-light);}
.ua-brand .ua-tile-prod img{object-fit:contain;padding:10%;}
.ua-brand .ua-tile:hover .ua-tile-img img{transform:scale(1.03);}
.ua-brand .ua-tile .ua-link{margin-top:14px;}
.ua-brand .ua-tile .ua-pill{margin-top:14px;}

/* ---------- produktové karty (světlé dlaždice jako karusel předlohy) ---------- */
.ua-brand .ua-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ua-brand .ua-prod{display:block;}
.ua-brand .ua-prod-img{aspect-ratio:4/5;background:var(--ua-light);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ua-brand .ua-prod-img img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .35s;}
.ua-brand .ua-prod:hover .ua-prod-img img{transform:scale(1.05);}
.ua-brand .ua-prod-name{display:block;font-size:14px;font-weight:600;margin-top:12px;line-height:1.35;}
.ua-brand .ua-prod-cat{display:block;font-size:14px;color:var(--ua-grey);margin-top:2px;}
.ua-brand .ua-more{margin-top:28px;}

/* ---------- technologie ---------- */
.ua-brand .ua-tech{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 32px;margin-top:8px;}
.ua-brand .ua-tech-item{border-top:1px solid var(--ua-line);padding-top:16px;}
.ua-brand .ua-tech-item strong{display:block;font-size:16px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;}
.ua-brand .ua-tech-item p{color:var(--ua-grey);font-size:15px;}

/* ---------- příběh značky ---------- */
.ua-brand .ua-story{border-top:1px solid var(--ua-line);padding:56px 0;}
.ua-brand .ua-story-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.ua-brand .ua-story p{color:var(--ua-grey);margin-bottom:14px;}
.ua-brand .ua-story strong.ua-white{color:#fff;}
.ua-brand .ua-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ua-brand .ua-fact{border-top:1px solid #fff;padding-top:14px;}
.ua-brand .ua-fact b{display:block;font-size:34px;font-weight:800;letter-spacing:1px;line-height:1;margin-bottom:8px;}
.ua-brand .ua-fact span{color:var(--ua-grey);font-size:14px;}
.ua-brand .ua-cta{text-align:center;padding:40px 24px 64px;}
.ua-brand .ua-cta .ua-h2{text-transform:uppercase;letter-spacing:2px;font-weight:800;margin-bottom:20px;}

/* ---------- responzivita ---------- */
@media (max-width:1000px){
  .ua-brand .ua-four,.ua-brand .ua-prods{grid-template-columns:repeat(2,1fr);}
  .ua-brand .ua-tech{grid-template-columns:1fr;}
  .ua-brand .ua-story-inner{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .ua-brand .ua-header-note{display:none;}
  .ua-brand .ua-header .ua-wrap{height:auto;padding:14px 24px;flex-wrap:wrap;}
  .ua-brand .ua-hero{padding-top:0;background:none;}
  .ua-brand .ua-hero::before{display:none;}
  .ua-brand .ua-hero::after{content:"";display:block;width:100%;padding-top:60%;background:url('/shop-data/campaign/underarmour/FW26_Q3_Brand_WLF_Launch_Fleece_M_HP_Hero_3_1-f8f282.webp') center/cover no-repeat;}
  .ua-brand .ua-hero-text{position:static;transform:none;max-width:none;padding:24px 24px 8px;}
  .ua-brand .ua-hero-text h1{font-size:32px;margin-bottom:16px;}
  .ua-brand .ua-hero-btns .ua-pill{height:40px;font-size:14px;padding:0 16px;}
  .ua-brand .ua-two{grid-template-columns:1fr;}
  .ua-brand .ua-h2{font-size:26px;}
}
@media (max-width:520px){
  .ua-brand .ua-four,.ua-brand .ua-prods,.ua-brand .ua-facts{grid-template-columns:1fr;}
  .ua-brand .ua-nav{gap:0 16px;}
}

/* ---------- 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(.ua-brand-wrapper) h1.ph-main,
body:has(.ua-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je úzký, brand page potřebuje plnou šířku. */
.max-w-xl:has(.ua-brand-wrapper) { max-width: none; }
/* Šablona má vlastní pravidlo pro h1–h4 (Myriad) a to přebije dědění z wrapperu;
   znaky mimo jeho sadu (ě, ž, ů) by pak padaly na tlustší náhradní písmo. */
.ua-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Archivo', Helvetica, Arial, sans-serif; color: #fff; }

/* ---------- mřížky: produkty 2 / 3 / 4 / 5 v řadě (zlomy šablony Upgates) ---------- */
/* Náhled měl pevně 4, pod 1000 px 2 a pod 520 px 1. Pravidlo e-shopu je mobile-first
   2 → 3 (≥992) → 4 (≥1204) → 5 (≥1502). Sady čtyř dlaždic jdou 2 → 4, ať v řadě
   nezůstává prázdné místo. */
.ua-brand .ua-prods{grid-template-columns:repeat(2,1fr);gap:12px;}
.ua-brand .ua-four{grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:992px){
  .ua-brand .ua-prods{grid-template-columns:repeat(3,1fr);gap:16px;}
  .ua-brand .ua-four{grid-template-columns:repeat(4,1fr);gap:16px;}
}
@media (min-width:1204px){.ua-brand .ua-prods{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1502px){.ua-brand .ua-prods{grid-template-columns:repeat(5,1fr);}}