@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ---------- scoped reset & tokeny (dle originálu) ---------- */
.cc-brand{
  --cc-text:#707070;
  --cc-black:#0A0A0A;
  --cc-beige:#C5B3AA;
  --cc-plum:#5E4A52;
  --cc-caramel:#8A6248;
  --cc-sage:#6E8577;
  font-family:'Mulish','Lato',sans-serif;
  color:var(--cc-text);
  line-height:1.75;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.cc-brand *,.cc-brand *::before,.cc-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.cc-brand img{max-width:100%;height:auto;display:block;}
.cc-brand a{text-decoration:none;color:inherit;}

/* ---------- hlavička (vzdušná, verzálky s prostrkáním) ---------- */
.cc-brand .cc-header{
  text-align:center;padding:34px 28px 26px;border-bottom:1px solid #eee;
}
.cc-brand .cc-logo{
  font-size:26px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--cc-black);margin-bottom:6px;
}
.cc-brand .cc-logo-sub{
  font-size:12px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#a89a90;
}

/* ---------- hero pás (béžový, dle měkkých tónů originálu) ---------- */
.cc-brand .cc-hero{
  background:var(--cc-beige);text-align:center;padding:76px 28px;
}
.cc-brand .cc-hero h1{
  font-size:32px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;
}
.cc-brand .cc-hero p{
  font-style:italic;font-size:17px;color:#fdfbf9;margin-bottom:26px;
}
.cc-brand .cc-btn{
  display:inline-block;background:#fff;color:#54595F;font-weight:400;
  font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  padding:13px 34px;border-radius:3px;transition:background .25s,color .25s;
}
.cc-brand .cc-btn:hover{background:var(--cc-black);color:#fff;}

/* ---------- About us (text first, dle originálu) ---------- */
.cc-brand .cc-about{max-width:880px;margin:0 auto;text-align:center;padding:64px 28px;}
.cc-brand .cc-about h2{
  font-size:34px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cc-black);margin-bottom:26px;
}
.cc-brand .cc-about p{font-size:15.5px;margin-bottom:16px;}
.cc-brand .cc-about p em{font-style:italic;color:#8a7f76;}

/* ---------- celoplošné pásy kolekcí (dle originálu) ---------- */
.cc-brand .cc-collection{
  position:relative;display:flex;align-items:center;gap:5%;
  padding:72px 8%;color:#fff;overflow:hidden;
}
.cc-brand .cc-col-plum{background:linear-gradient(115deg,var(--cc-plum),#77616a);}
.cc-brand .cc-col-caramel{background:linear-gradient(115deg,var(--cc-caramel),#a07a5d);}
.cc-brand .cc-col-sage{background:linear-gradient(115deg,var(--cc-sage),#87a091);}
.cc-brand .cc-col-text{flex:1 1 58%;text-align:center;}
.cc-brand .cc-col-text h2{
  font-size:30px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:10px;
}
.cc-brand .cc-col-text .cc-col-tag{
  font-style:italic;font-size:17px;color:rgba(255,255,255,.92);margin-bottom:14px;
}
.cc-brand .cc-col-text p{
  font-size:15px;color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 24px;
}
.cc-brand .cc-col-img{flex:0 0 30%;display:flex;justify-content:center;}
.cc-brand .cc-col-img span{
  display:block;background:#fff;border-radius:50%;padding:26px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);width:min(300px,100%);
}
.cc-brand .cc-col-img img{border-radius:50%;}

/* ---------- bestsellery (minimální karty dle e-shopu originálu) ---------- */
.cc-brand .cc-shop{padding:64px 28px;}
.cc-brand .cc-shop h2{
  font-size:30px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cc-black);text-align:center;margin-bottom:8px;
}
.cc-brand .cc-shop-sub{
  text-align:center;font-style:italic;font-size:16px;color:#a89a90;margin-bottom:36px;
}
.cc-brand .cc-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.cc-brand .cc-prod{text-align:center;}
.cc-brand .cc-prod-img{background:#F8F6F3;padding:16px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;}
.cc-brand .cc-prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.cc-brand .cc-prod:hover .cc-prod-img img{transform:scale(1.05);}
.cc-brand .cc-prod h3{
  font-size:14.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cc-black);margin:16px 0 2px;
}
.cc-brand .cc-prod span{font-size:13.5px;font-style:italic;color:#a89a90;display:block;margin-bottom:10px;}
.cc-brand .cc-prod-link{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#54595F;
  border-bottom:1px solid #c9c2bb;padding-bottom:2px;transition:color .25s,border-color .25s;
}
.cc-brand .cc-prod:hover .cc-prod-link{color:var(--cc-black);border-color:var(--cc-black);}

/* ---------- příběh (editorial, bez karet) ---------- */
.cc-brand .cc-story{background:#F8F6F3;padding:68px 28px;}
.cc-brand .cc-story-inner{max-width:820px;margin:0 auto;text-align:center;}
.cc-brand .cc-story-inner h2{
  font-size:30px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cc-black);margin-bottom:26px;
}
.cc-brand .cc-story-inner p{font-size:15.5px;margin-bottom:16px;text-align:left;}
.cc-brand .cc-story-inner p strong{color:var(--cc-black);font-weight:700;}
.cc-brand .cc-story-sign{
  margin-top:26px;font-style:italic;font-size:17px;color:#8a7f76;
}

/* ---------- instagramová mřížka (dle originálu) ---------- */
.cc-brand .cc-ig{padding:56px 28px 64px;text-align:center;}
.cc-brand .cc-ig h2{
  font-size:16px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cc-black);margin-bottom:6px;
}
.cc-brand .cc-ig p{font-style:italic;font-size:15px;color:#a89a90;margin-bottom:26px;}
.cc-brand .cc-ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.cc-brand .cc-ig-grid a{display:block;aspect-ratio:1/1;overflow:hidden;background:#F8F6F3;}
.cc-brand .cc-ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .3s;}
.cc-brand .cc-ig-grid a:hover img{transform:scale(1.06);opacity:.88;}

/* ---------- tmavý závěrečný pás (dle patičky originálu) ---------- */
.cc-brand .cc-foot{
  background:var(--cc-black);text-align:center;padding:52px 28px;
}
.cc-brand .cc-foot h2{
  font-size:20px;font-weight:300;letter-spacing:.32em;text-transform:uppercase;
  color:#fff;margin-bottom:8px;
}
.cc-brand .cc-foot p{font-style:italic;font-size:15px;color:#b9aca2;margin-bottom:24px;}
.cc-brand .cc-foot .cc-btn:hover{background:var(--cc-beige);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .cc-brand .cc-prods{grid-template-columns:repeat(2,1fr);}
  .cc-brand .cc-collection{flex-direction:column;gap:30px;padding:56px 8%;}
  .cc-brand .cc-ig-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .cc-brand .cc-prods{grid-template-columns:1fr;}
  .cc-brand .cc-ig-grid{grid-template-columns:repeat(2,1fr);}
  .cc-brand .cc-logo{font-size:19px;letter-spacing:.3em;}
  .cc-brand .cc-about h2{font-size:24px;}
}

/* ---------- 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(.cc-brand-wrapper) h1.ph-main,
body:has(.cc-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.cc-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 Mulish i pro nadpisy uvnitř brand page. */
.cc-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Mulish', system-ui, sans-serif; }