@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Nunito+Sans:wght@300;400;600&display=swap');
/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.nb-brand{
  --nb-black:#151415;
  --nb-red:#CF0A2C;
  --nb-line:#E5E7E8;
  --nb-grey:#F2F2F2;
  --nb-hero:#E9E9E9;
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-weight:300;
  color:#000;
  font-size:15px;
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.nb-brand *,.nb-brand *::before,.nb-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.nb-brand img{max-width:100%;height:auto;display:block;}
.nb-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.nb-brand .nb-h{
  font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:40px;
  line-height:1.15;color:#000;letter-spacing:0;
}
.nb-brand .nb-h-sm{font-size:32px;}
.nb-brand .nb-btn{
  display:inline-block;background:#fff;color:var(--nb-black);border:1px solid var(--nb-line);
  border-radius:2px;font-family:'Nunito Sans',Arial,sans-serif;font-weight:400;font-size:14px;
  padding:14px 28px;min-width:120px;text-align:center;transition:background .2s,color .2s,border-color .2s;
}
.nb-brand .nb-btn:hover{background:var(--nb-black);color:#fff;border-color:var(--nb-black);}
.nb-brand .nb-btn-dark{background:var(--nb-black);color:#fff;border-color:var(--nb-black);}
.nb-brand .nb-btn-dark:hover{background:#fff;color:var(--nb-black);border-color:#fff;}

/* ---------- černá promo lišta + bílá hlavička ---------- */
.nb-brand .nb-bar{background:var(--nb-black);color:#fff;text-align:center;font-size:14px;font-weight:300;padding:10px 16px;}
.nb-brand .nb-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:14px 40px;border-bottom:1px solid var(--nb-line);
}
.nb-brand .nb-logo{width:59px;height:29px;display:block;}
.nb-brand .nb-logo svg{width:100%;height:100%;display:block;}
.nb-brand .nb-nav{display:flex;flex-wrap:wrap;gap:6px 30px;}
.nb-brand .nb-nav a{font-size:14px;font-weight:300;color:#000;padding:4px 0;border-bottom:1px solid transparent;}
.nb-brand .nb-nav a:hover{border-bottom-color:#000;}

/* ---------- hero: flat-lay foto, text vlevo (dle předlohy) ---------- */
.nb-brand .nb-hero{
  position:relative;width:100%;padding-top:50.1%;background:var(--nb-hero);
  background-image:url('/shop-data/campaign/newbalance/nb-hero.jpg');
  background-size:cover;background-position:center;container-type:inline-size;
}
.nb-brand .nb-hero-text{position:absolute;left:2.6cqw;top:50%;transform:translateY(-50%);width:40%;}
.nb-brand .nb-hero-text h1{
  font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:3.1cqw;line-height:1.15;color:#000;margin-bottom:1.3cqw;
}
.nb-brand .nb-hero-text p{font-size:1.15cqw;font-weight:300;margin-bottom:1.6cqw;color:#000;}
.nb-brand .nb-hero-text .nb-btn{font-size:1cqw;padding:1cqw 2.2cqw;min-width:9cqw;}

/* ---------- produktové karusely jako mřížky (karty předlohy) ---------- */
.nb-brand .nb-section{padding:48px 40px 40px;}
.nb-brand .nb-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.nb-brand .nb-section-head .nb-h{font-size:32px;}
.nb-brand .nb-section-head a{font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:3px;}
.nb-brand .nb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.nb-brand .nb-card{display:block;}
.nb-brand .nb-card-img{background:var(--nb-grey);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.nb-brand .nb-card-img img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply;transition:transform .3s;}
.nb-brand .nb-card:hover .nb-card-img img{transform:scale(1.04);}
.nb-brand .nb-card h3{font-family:'Nunito Sans',Arial,sans-serif;font-weight:500;font-size:14px;color:#000;margin:10px 0 2px;}
.nb-brand .nb-card span{font-size:13px;font-weight:300;color:#555;display:block;}

/* ---------- dvojice dlaždic Pánská / Dámská (dle bannerové sekce předlohy) ---------- */
.nb-brand .nb-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:8px 40px 40px;}
.nb-brand .nb-duo a{position:relative;display:block;background:var(--nb-grey);aspect-ratio:16/10;overflow:hidden;}
.nb-brand .nb-duo img{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:58%;height:auto;mix-blend-mode:multiply;transition:transform .3s;}
.nb-brand .nb-duo a:hover img{transform:translateY(-50%) scale(1.04);}
.nb-brand .nb-duo-text{position:absolute;left:28px;top:50%;transform:translateY(-50%);width:36%;}
.nb-brand .nb-duo-text .nb-h{font-size:28px;margin-bottom:8px;}
.nb-brand .nb-duo-text p{font-size:14px;margin-bottom:14px;}
.nb-brand .nb-duo-text .nb-btn{padding:10px 18px;min-width:0;font-size:13px;}

/* ---------- tmavý pás příběhu (sekce Fearlessly Independent předlohy) ---------- */
.nb-brand .nb-story{background:var(--nb-black);color:#E6E6E6;padding:64px 40px;}
.nb-brand .nb-story-inner{display:flex;gap:56px;align-items:flex-start;}
.nb-brand .nb-story .nb-h{color:#E6E6E6;flex:0 0 38%;font-size:32px;}
.nb-brand .nb-story-text{flex:1;}
.nb-brand .nb-story-text p{font-size:15px;font-weight:300;margin-bottom:14px;max-width:620px;color:#E6E6E6;}
.nb-brand .nb-story-text p strong{font-weight:600;color:#fff;}
.nb-brand .nb-story-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px;}
.nb-brand .nb-story-links span{font-size:13px;font-weight:400;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;}

/* ---------- CTA ---------- */
.nb-brand .nb-cta{text-align:center;padding:56px 28px;}
.nb-brand .nb-cta .nb-h{margin-bottom:10px;}
.nb-brand .nb-cta p{color:#555;margin-bottom:24px;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .nb-brand .nb-cards{grid-template-columns:repeat(2,1fr);}
  .nb-brand .nb-duo{grid-template-columns:1fr;padding:8px 28px 32px;}
  .nb-brand .nb-story-inner{flex-direction:column;gap:20px;}
  .nb-brand .nb-story .nb-h{flex:0 0 auto;}
  .nb-brand .nb-section{padding:36px 28px 28px;}
  .nb-brand .nb-header{justify-content:center;}
  .nb-brand .nb-hero-text{width:50%;}
}
@media (max-width:520px){
  .nb-brand .nb-cards{grid-template-columns:1fr;}
  .nb-brand .nb-hero{padding-top:0;background-image:none;background:var(--nb-hero);}
  .nb-brand .nb-hero-text{position:static;transform:none;width:auto;padding:32px 24px;}
  .nb-brand .nb-hero-text h1{font-size:30px;}
  .nb-brand .nb-hero-text p{font-size:15px;}
  .nb-brand .nb-hero-text .nb-btn{font-size:14px;padding:14px 28px;}
}

/* ---------- 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(.nb-brand-wrapper) h1.ph-main,
body:has(.nb-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je úzký, brand page potřebuje plnou šířku. */
.max-w-xl:has(.nb-brand-wrapper) { max-width: none; }
/* Šablona má vlastní pravidlo pro h1–h4 (Myriad) a to přebije dědění z wrapperu. Nadpisy
   stránky jsou patkové; výjimkou jsou názvy produktů v kartách (h3), ty jsou bezpatkové. */
.nb-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'EB Garamond', Georgia, serif; }
.nb-brand .nb-card h3 { font-family: 'Nunito Sans', Arial, sans-serif; }

/* ---------- produkty vždy na čistě bílé (pravidlo e-shopu) ---------- */
/* Předloha dává botám šedý podklad #F2F2F2; na brand pages mají produktové karty
   i produktové dlaždice bílé pozadí, šedá by se tloukla s bílými fotkami z feedu. */
.nb-brand .nb-card-img,
.nb-brand .nb-duo a { background: #fff; border: 1px solid var(--nb-line); }

/* ---------- mobil: dlaždice Pánská / Dámská bez pevného poměru ---------- */
/* Poměr 16:10 s absolutně umístěným textem se na 360 px nevejde a nadpis se ořízl
   (kontrola_mobil.py, 2026-09-29). Na úzkém displeji text a bota vedle sebe v toku. */
@media (max-width:520px){
  .nb-brand .nb-duo{padding:8px 20px 28px;}
  .nb-brand .nb-duo a{aspect-ratio:auto;display:flex;align-items:center;gap:12px;padding:20px 16px;}
  .nb-brand .nb-duo-text{position:static;transform:none;width:auto;flex:1 1 55%;}
  .nb-brand .nb-duo img{position:static;transform:none;width:45%;flex:0 0 45%;}
  .nb-brand .nb-duo a:hover img{transform:scale(1.04);}
  .nb-brand .nb-duo-text .nb-h{font-size:24px;}
}

/* ---------- mřížky produktů: 2 / 3 / 4 / 5 v řadě (zlomy šablony Upgates) ---------- */
/* Předloha měla pevně 4, pod 900 px 2 a pod 520 px 1. Pravidlo e-shopu je mobile-first
   2 → 3 (≥992) → 4 (≥1204) → 5 (≥1502), stejně jako nativní výpis pod stránkou. */
.nb-brand .nb-cards{grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:992px){.nb-brand .nb-cards{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media (min-width:1204px){.nb-brand .nb-cards{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1502px){.nb-brand .nb-cards{grid-template-columns:repeat(5,1fr);}}