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

/* Cecotec brand page (varianta Claude) — scope .cec-brand. Zdroj:
   raw/brand-handoff/cecotec/, CSS vyjmuto z <style> generátorem
   scripts/build_cecotec_claude_page.py. Font Montserrat, značková #DD0047. */
/* ---------- scoped reset & tokeny ---------- */
.cec-brand{
  --cec-red:#DD0047;
  --cec-dark:#242422;
  --cec-light:#F4F6F7;
  --cec-border:#EAECF0;
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
  color:var(--cec-dark);
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.cec-brand *,.cec-brand *::before,.cec-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.cec-brand img{max-width:100%;height:auto;display:block;}
.cec-brand a{text-decoration:none;color:inherit;}

/* ---------- hlavička značky ---------- */
.cec-brand .cec-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;flex-wrap:wrap;gap:14px;
}
.cec-brand .cec-logo{width:180px;height:auto;fill:var(--cec-dark);}
.cec-brand .cec-claim{font-size:15px;font-weight:700;color:var(--cec-red);}
.cec-brand .cec-header-note{font-size:13px;color:#999;}

/* ---------- banner (společné pro hero slidy i statické bannery) ----------
   Poměr 3840×1300 dle originálu; texty jsou HTML overlay v levé volné
   ploše fotografií. Písmo v cqw se škáluje se šířkou. ---------- */
.cec-brand .cec-banner-text{
  position:absolute;left:4.5%;top:50%;transform:translateY(-50%);width:37%;
}
.cec-brand .cec-banner-text .cec-b-name{
  display:block;font-size:12px;font-size:1.15cqw;font-weight:700;
  color:var(--cec-red);margin-bottom:.7cqw;letter-spacing:.04em;
}
.cec-brand .cec-banner-text h2{
  font-size:22px;font-size:2.3cqw;font-weight:800;line-height:1.22;
  color:var(--cec-dark);margin-bottom:.9cqw;
}
.cec-brand .cec-banner-text p{
  font-size:12px;font-size:1.15cqw;font-weight:500;color:#555;margin-bottom:1.5cqw;
}
.cec-brand .cec-pill{
  display:inline-block;background:var(--cec-red);color:#fff;font-weight:700;
  font-size:12px;font-size:1.05cqw;padding:.85cqw 2.3cqw;border-radius:999px;
  transition:background .3s;
}
.cec-brand .cec-pill:hover{background:var(--cec-dark);}
.cec-brand .cec-banner-text.cec-on-dark h2{color:#fff;}
.cec-brand .cec-banner-text.cec-on-dark p{color:#e8e8e8;}

/* ---------- hero slider ---------- */
.cec-brand .cec-slider{position:relative;width:100%;padding-top:33.85%;overflow:hidden;background:var(--cec-light);container-type:inline-size;}
.cec-brand .cec-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:cecFade 18s infinite;
}
.cec-brand .cec-slide:nth-child(1){animation-delay:0s;}
.cec-brand .cec-slide:nth-child(2){animation-delay:6s;}
.cec-brand .cec-slide:nth-child(3){animation-delay:12s;}
@keyframes cecFade{
  0%{opacity:0;visibility:hidden}
  6%{opacity:1;visibility:visible}
  33%{opacity:1;visibility:visible}
  39%{opacity:0;visibility:hidden}
  100%{opacity:0;visibility:hidden}
}
.cec-brand .cec-sl1{background-image:url('https://apollo-store.s17.cdn-upgates.com/9/967ff8d742209e-3505117.jpg'),linear-gradient(100deg,#F7F1F3 0%,#ffffff 46%,#F7F1F3 100%);background-size:auto 76%,cover;background-position:right 7% center,center;background-repeat:no-repeat,no-repeat;}
.cec-brand .cec-sl2{background-image:url('https://apollo-store.s17.cdn-upgates.com/v/v67bf9f2a0d300-3502332.jpg'),linear-gradient(100deg,#EEF1F4 0%,#ffffff 46%,#EEF1F4 100%);background-size:auto 76%,cover;background-position:right 7% center,center;background-repeat:no-repeat,no-repeat;}
.cec-brand .cec-sl3{background-image:url('https://apollo-store.s17.cdn-upgates.com/g/g6848a8c4340a8-3497803.jpg'),linear-gradient(100deg,#F2F4F1 0%,#ffffff 46%,#F2F4F1 100%);background-size:auto 76%,cover;background-position:right 7% center,center;background-repeat:no-repeat,no-repeat;}

/* ---------- kruhové kategorie (jako na cecotec.es) ---------- */
.cec-brand .cec-circles-wrap{padding:44px 28px 36px;}
.cec-brand .cec-circles{
  display:flex;gap:26px;justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;
}
.cec-brand .cec-circle{flex:0 0 auto;width:118px;text-align:center;}
.cec-brand .cec-circle-img{
  width:118px;height:118px;border-radius:50%;background:var(--cec-light);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid transparent;transition:border-color .3s,transform .3s;
}
.cec-brand .cec-circle:hover .cec-circle-img{border-color:var(--cec-red);transform:scale(1.04);}
.cec-brand .cec-circle-img img{width:82%;height:82%;object-fit:contain;}
.cec-brand .cec-circle span{
  display:block;margin-top:10px;font-size:13px;font-weight:600;line-height:1.3;
}
.cec-brand .cec-circle:hover span{color:var(--cec-red);}

/* ---------- statický full-bleed banner ---------- */
.cec-brand .cec-static-banner{
  position:relative;width:100%;padding-top:33.85%;overflow:hidden;
  background-size:cover;background-position:center;container-type:inline-size;
}

/* ---------- bestsellery – karty ve stylu Cecotec ---------- */
.cec-brand .cec-section{padding:52px 28px;}
.cec-brand .cec-h2{font-size:28px;font-weight:800;text-align:center;margin-bottom:8px;}
.cec-brand .cec-h2 span{color:var(--cec-red);}
.cec-brand .cec-sub{text-align:center;color:#888;font-weight:500;margin-bottom:30px;font-size:15px;}
.cec-brand .cec-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cec-brand .cec-product{
  display:flex;flex-direction:column;background:var(--cec-light);border-radius:10px;
  overflow:hidden;transition:box-shadow .3s,transform .3s;
}
.cec-brand .cec-product:hover{box-shadow:0 12px 30px rgba(36,36,34,.14);transform:translateY(-3px);}
.cec-brand .cec-product-img{
  aspect-ratio:1/1;padding:22px;display:flex;align-items:center;justify-content:center;
}
.cec-brand .cec-product-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.cec-brand .cec-product-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:4px;flex:1;text-align:center;}
.cec-brand .cec-product-body h3{font-size:16px;font-weight:800;}
.cec-brand .cec-product-cat{font-size:13px;color:#888;font-weight:500;margin-bottom:14px;}
.cec-brand .cec-btn{
  margin-top:auto;display:inline-block;text-align:center;
  background:var(--cec-red);color:#fff;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:999px;transition:background .3s;
}
.cec-brand .cec-btn:hover{background:var(--cec-dark);}

/* ---------- video ---------- */
.cec-brand .cec-video{background:var(--cec-light);padding:52px 28px;}
.cec-brand .cec-video-frame{
  position:relative;width:100%;max-width:1100px;margin:0 auto;
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 16px 40px rgba(36,36,34,.18);
}
.cec-brand .cec-video-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* ---------- příběh značky – full-bleed foto s overlay textem ---------- */
.cec-brand .cec-story{
  position:relative;width:100%;min-height:520px;overflow:hidden;
  background:linear-gradient(100deg,#EAECF0 0%,#F7F8F9 52%,#FDFDFE 100%);
  display:flex;align-items:center;
}
.cec-brand .cec-story::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.85) 38%,rgba(255,255,255,0) 68%);
}
.cec-brand .cec-story-inner{position:relative;padding:64px 28px;max-width:640px;}
.cec-brand .cec-story-inner .cec-b-name{
  display:block;font-size:14px;font-weight:700;color:var(--cec-red);margin-bottom:10px;letter-spacing:.04em;
}
.cec-brand .cec-story-inner h2{font-size:34px;font-weight:800;line-height:1.25;margin-bottom:18px;}
.cec-brand .cec-story-inner p{font-size:15.5px;font-weight:500;color:#444;margin-bottom:14px;}
.cec-brand .cec-story-stats{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap;}
.cec-brand .cec-stat strong{display:block;font-size:26px;font-weight:800;color:var(--cec-red);line-height:1.1;}
.cec-brand .cec-stat span{font-size:13px;font-weight:600;color:#555;}

/* ---------- CTA pás ---------- */
.cec-brand .cec-cta{background:var(--cec-red);color:#fff;text-align:center;padding:48px 28px;}
.cec-brand .cec-cta h2{color:#fff;font-size:26px;font-weight:800;margin-bottom:20px;}
.cec-brand .cec-cta a{
  display:inline-block;background:#fff;color:var(--cec-red);
  font-weight:800;font-size:15px;padding:13px 42px;border-radius:999px;
  transition:background .3s,color .3s;
}
.cec-brand .cec-cta a:hover{background:var(--cec-dark);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .cec-brand .cec-products{grid-template-columns:repeat(2,1fr);}
  .cec-brand .cec-circles{justify-content:flex-start;}
  .cec-brand .cec-story{min-height:420px;}
  .cec-brand .cec-story-inner h2{font-size:26px;}
}
@media (max-width:768px){
  .cec-brand .cec-header{justify-content:center;text-align:center;}
  .cec-brand .cec-h2{font-size:24px;}
  .cec-brand .cec-banner-text{width:44%;}
}
@media (max-width:520px){
  .cec-brand .cec-products{grid-template-columns:1fr;}
}

/* ---------- pravidla pro nasazení do šablony e-shopu (Upgates) ----------
   1) Šablona vykresluje nad obsahem vlastní H1 s názvem stránky → duplicitní nadpis.
   2) Šablona drží obsah v úzkém .max-w-xl → brand page chce plnou šířku. Dva selektory
      záměrně: cap může být na `.max-w-xl` i na `.max.max-w-xl.text` (3 třídy = vyšší
      specificita, přebilo by :has() s jednou třídou).
   3) Nadpisy MUSÍ mít font-family explicitně: šablona má vlastní pravidlo pro h1–h4
      (myriad-pro) a přímé pravidlo přebije dědění z .cec-brand. Naživo by se nadpis
      kreslil fontem šablony a znaky, které nemá v subsetu (ě, ž, ů), by spadly na
      systémový fallback → nápadně tlustší písmena. Na náhledu to není vidět. */
body:has(.cec-brand-wrapper) h1.ph-main { display: none; }
.max-w-xl:has(.cec-brand-wrapper),
.max.max-w-xl.text:has(.cec-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }
.cec-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; }

/* Sekce s position:relative se v shellu zužují na shrink-to-fit (naměřeno u Hurley i Tesly
   shodně 1238 px z 1440) — explicitní width:100% to ruší. */
.cec-brand .cec-slider,
.cec-brand .cec-static-banner,
.cec-brand .cec-story { width: 100%; }

/* ---------- odchylky od dodaného balíčku ----------
   Kruhy i produktové karty mají BÍLÉ pozadí: naše produktovky jsou na bílém, takže
   v dodaném šedém `--cec-light` kruhu vznikl viditelný bílý čtverec. Bílá plocha
   u produktů je i naše pravidlo pro brand pages. */
.cec-brand .cec-circle-img { background: #fff; border: 1px solid #E7E9EC; }
.cec-brand .cec-circle:hover .cec-circle-img { border-color: var(--cec-red); }
.cec-brand .cec-product { background: #fff; border: 1px solid #E7E9EC; }
.cec-brand .cec-product-img { background: #fff; }

/* MOBIL A TABLET — velikosti písma v px, banner postupně vyšší.
   Dodaný balíček drží poměr 3,4 : 1 na všech šířkách a velikosti písma sází v `cqw`
   (jednotka container query = % šířky kontejneru). Na 390 px z toho vyjde banner
   vysoký 132 px a nadpis 9 px — naměřeno, nepřehlédnutelné. Řešíme dvěma stupni:
   do 900 px zůstává banner na šířku, jen s pevnými px a vyšším poměrem; pod 600 px
   se překlápí na portrét (fotka nahoře, text pod ní), kde na dva sloupce není místo. */
@media (max-width: 900px) {
  .cec-brand .cec-slider,
  .cec-brand .cec-static-banner { padding-top: 56%; }
  .cec-brand .cec-slide,
  .cec-brand .cec-static-banner { background-size: auto 62%, cover; background-position: right 6% center, center; }
  .cec-brand .cec-banner-text { width: 50%; }
  .cec-brand .cec-banner-text .cec-b-name { font-size: 11.5px; margin-bottom: 7px; }
  .cec-brand .cec-banner-text h2 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
  .cec-brand .cec-banner-text p { font-size: 13.5px; line-height: 1.5; margin-bottom: 15px; }
  .cec-brand .cec-pill { font-size: 13px; padding: 11px 22px; }
}
@media (max-width: 600px) {
  .cec-brand .cec-slider,
  .cec-brand .cec-static-banner { padding-top: 112%; }
  .cec-brand .cec-slide,
  .cec-brand .cec-static-banner { background-size: auto 40%, cover; background-position: center 7%, center; }
  .cec-brand .cec-banner-text {
    left: 7%; width: 86%; top: auto; bottom: 7%; transform: none; text-align: left;
  }
  .cec-brand .cec-banner-text h2 { font-size: 22px; }
}

/* Statický banner: dodané pozadí byla klimatizace v pokoji → naše topení. */
.cec-brand .cec-banner-topeni{background-image:url('https://apollo-store.s17.cdn-upgates.com/l/l67be9a4f92b32-3500864.jpg'),linear-gradient(100deg,#F6F1EC 0%,#ffffff 46%,#F6F1EC 100%);background-size:auto 76%,cover;background-position:right 7% center,center;background-repeat:no-repeat,no-repeat;}