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

/* Imetec brand page (varianta Claude) — scope .ime-brand. Zdroj:
   raw/brand-handoff/imetec/, CSS vyjmuto z <style> generátorem
   scripts/build_imetec_claude_page.py. Font Barlow, značková #A00000. */
/* ---------- scoped reset & tokeny ---------- */
.ime-brand{
  --ime-red:#A00000;
  --ime-dark:#000;
  --ime-grey:#F6F6F7;
  --ime-border:#D6D6D6;
  font-family:'Barlow',sans-serif;
  color:#222;
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.ime-brand *,.ime-brand *::before,.ime-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.ime-brand img{max-width:100%;height:auto;display:block;}
.ime-brand a{text-decoration:none;color:inherit;}

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

/* ---------- USP pás (jako na originálu) ---------- */
.ime-brand .ime-usp{
  display:flex;justify-content:center;gap:6%;background:var(--ime-grey);
  padding:14px 28px;flex-wrap:wrap;border-top:1px solid var(--ime-border);border-bottom:1px solid var(--ime-border);
}
.ime-brand .ime-usp div{
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:#333;
}
.ime-brand .ime-usp img{width:26px;height:26px;}

/* ---------- hero (1920×650, český blur panel přes italský text) ----------
   Obrázek MUSÍ být na FTP, ne na CDN: původní `apollo-store…-3429719.jpg` byl
   přímý odkaz na soubor produktu a Upgates ho při aktualizaci fotky přejmenoval,
   takže hero na obou e-shopech zmizelo (404, zjištěno 2026-09-04). Cesta
   `/shop-data/campaign/…` je relativní, takže platí na Apollu i na BVZ. */
.ime-brand .ime-hero{
  position:relative;width:100%;padding-top:33.85%;overflow:hidden;
  background-image:url('/shop-data/campaign/imetec/ime-hero.jpg'),linear-gradient(100deg,#F0EDEC 0%,#FFFFFF 48%,#F6F6F7 100%);background-size:auto 76%,cover;background-position:right 6% center,center;background-repeat:no-repeat,no-repeat;
  background-size:cover;background-position:center;container-type:inline-size;
}
.ime-brand .ime-hero-panel{
  position:absolute;left:1.6%;top:11%;bottom:11%;width:31%;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:8px;display:flex;flex-direction:column;justify-content:center;
  padding:2% 2.2%;
}
.ime-brand .ime-hero-panel .ime-h-name{
  font-size:13px;font-size:1.25cqw;font-weight:700;color:var(--ime-red);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.7cqw;
}
.ime-brand .ime-hero-panel h2{
  font-size:22px;font-size:2.1cqw;font-weight:700;line-height:1.2;color:#111;margin-bottom:.9cqw;
}
.ime-brand .ime-hero-panel p{font-size:12px;font-size:1.1cqw;font-weight:500;color:#444;margin-bottom:1.4cqw;}
.ime-brand .ime-btn-red{
  display:inline-block;align-self:flex-start;background:var(--ime-red);color:#fff;
  font-weight:700;font-size:11px;font-size:1cqw;text-transform:uppercase;letter-spacing:.08em;
  padding:.9cqw 2cqw;transition:background .3s;
}
.ime-brand .ime-btn-red:hover{background:var(--ime-dark);}

/* ---------- nadpisy sekcí ---------- */
.ime-brand .ime-section{padding:52px 28px;}
.ime-brand .ime-h2{font-size:30px;font-weight:500;text-align:center;color:#000;margin-bottom:8px;}
.ime-brand .ime-h2 strong{font-weight:700;color:var(--ime-red);}
.ime-brand .ime-sub{text-align:center;color:#888;font-weight:500;margin-bottom:30px;font-size:15px;}

/* ---------- kategorie – foto dlaždice ---------- */
.ime-brand .ime-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ime-brand .ime-cat{display:block;background:#fff;border:1px solid var(--ime-border);}
.ime-brand .ime-cat-img{aspect-ratio:1/1;overflow:hidden;}
.ime-brand .ime-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.ime-brand .ime-cat:hover .ime-cat-img img{transform:scale(1.05);}
.ime-brand .ime-cat-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;font-weight:700;font-size:15.5px;color:#000;transition:color .3s;
}
.ime-brand .ime-cat-label::after{content:"→";font-weight:400;transition:transform .3s;}
.ime-brand .ime-cat:hover .ime-cat-label{color:var(--ime-red);}
.ime-brand .ime-cat:hover .ime-cat-label::after{transform:translateX(4px);}

/* ---------- nejžádanější – produktové karty ---------- */
.ime-brand .ime-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ime-brand .ime-product{
  display:flex;flex-direction:column;border:1px solid var(--ime-border);background:#fff;
  transition:box-shadow .3s;
}
.ime-brand .ime-product:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);}
.ime-brand .ime-product-img{aspect-ratio:1/1;overflow:hidden;}
.ime-brand .ime-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.ime-brand .ime-product:hover .ime-product-img img{transform:scale(1.04);}
.ime-brand .ime-product-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1;}
.ime-brand .ime-product-body h3{font-size:17px;font-weight:700;color:#000;}
.ime-brand .ime-product-body p{font-size:13.5px;color:#666;font-weight:500;margin-bottom:12px;}
.ime-brand .ime-product .ime-btn{
  margin-top:auto;display:inline-block;text-align:center;
  background:var(--ime-red);color:#fff;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;transition:background .3s;
}
.ime-brand .ime-product .ime-btn:hover{background:var(--ime-dark);}

/* ---------- příběh značky ---------- */
.ime-brand .ime-story{background:var(--ime-grey);border-top:4px solid var(--ime-red);}
.ime-brand .ime-story-inner{max-width:900px;margin:0 auto;padding:60px 28px;text-align:center;}
.ime-brand .ime-story-inner .ime-quote{
  font-size:30px;font-weight:700;color:var(--ime-red);font-style:italic;margin-bottom:22px;
}
.ime-brand .ime-story-inner p{font-size:15.5px;font-weight:500;color:#444;margin-bottom:14px;text-align:left;}
.ime-brand .ime-story-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.ime-brand .ime-stat{
  flex:1 1 200px;max-width:270px;background:#fff;border:1px solid var(--ime-border);padding:24px 20px;
}
.ime-brand .ime-stat strong{display:block;font-size:20px;font-weight:700;color:var(--ime-red);margin-bottom:6px;}
.ime-brand .ime-stat span{font-size:13.5px;font-weight:500;color:#555;}

/* ---------- CTA pás ---------- */
.ime-brand .ime-cta{background:var(--ime-red);color:#fff;text-align:center;padding:48px 28px;}
.ime-brand .ime-cta h2{color:#fff;font-size:26px;font-weight:700;margin-bottom:20px;}
.ime-brand .ime-cta a{
  display:inline-block;background:#fff;color:var(--ime-red);
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  padding:14px 42px;transition:background .3s,color .3s;
}
.ime-brand .ime-cta a:hover{background:var(--ime-dark);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .ime-brand .ime-cats{grid-template-columns:repeat(2,1fr);}
  .ime-brand .ime-products{grid-template-columns:repeat(2,1fr);}
  .ime-brand .ime-usp{gap:18px;}
}
@media (max-width:768px){
  .ime-brand .ime-header{justify-content:center;text-align:center;}
  .ime-brand .ime-h2{font-size:24px;}
  .ime-brand .ime-hero-panel{width:44%;}
  .ime-brand .ime-story-inner .ime-quote{font-size:24px;}
}
@media (max-width:520px){
  .ime-brand .ime-cats{grid-template-columns:1fr;}
  .ime-brand .ime-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 .ime-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(.ime-brand-wrapper) h1.ph-main { display: none; }
.max-w-xl:has(.ime-brand-wrapper),
.max.max-w-xl.text:has(.ime-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }
.ime-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Barlow', '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ší. */
.ime-brand .ime-hero,
.ime-brand .ime-story { width: 100%; }

/* ---------- odchylky od dodaného balíčku ----------
   Dvě ze čtyř dlaždic ukazují produktovku na bílém (topné ventilátory, mixéry) — na ty
   kategorie oficiální lifestyle fotku nemáme. `cover` by produkt uřízl, proto contain
   na bílém; vedle dvou lifestyle fotek to čte jako záměr, ne jako chyba. */
.ime-brand .ime-cat-img.ime-cat-img--produkt { background: #fff; }
.ime-brand .ime-cat-img.ime-cat-img--produkt img { object-fit: contain; padding: 8%; }
/* Produktové karty na bílém — naše produktovky jsou na bílém pozadí (a je to i naše
   pravidlo pro produktové sekce na brand pages). */
.ime-brand .ime-product-img { background: #fff; }
.ime-brand .ime-product-img img { object-fit: contain; padding: 6%; }

/* MOBIL A TABLET — hero panel 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`
   (% šířky kontejneru). Na 390 px z toho vyjde hero vysoký 132 px a nadpis ~8 px.
   Do 900 px proto zvedáme poměr a sázíme pevné px, pod 600 px překlápíme na portrét:
   fotka nahoře, panel s textem pod ní. */
@media (max-width: 900px) {
  .ime-brand .ime-hero { padding-top: 58%; }
  /* fotka menší (64 %, ne 76 %), jinak na 768 px zajede pod panel — naměřený překryv 14 px */
  .ime-brand .ime-hero { background-size: auto 64%, cover; }
  .ime-brand .ime-hero-panel { width: 48%; top: 8%; bottom: 8%; }
  .ime-brand .ime-hero-panel .ime-h-name { font-size: 11.5px; margin-bottom: 7px; }
  .ime-brand .ime-hero-panel h2 { font-size: 23px; line-height: 1.2; margin-bottom: 10px; }
  .ime-brand .ime-hero-panel p { font-size: 13.5px; line-height: 1.5; margin-bottom: 15px; }
}
@media (max-width: 600px) {
  .ime-brand .ime-hero { padding-top: 118%; }
  /* portrét: fotka nahoru, panel dolů. Bez přesunu fotky by panel ležel PŘES ni —
     `auto 76%` + svislé centrování ji na 390 px roztáhne skoro přes celou plochu. */
  .ime-brand .ime-hero { background-size: auto 40%, cover; background-position: center 6%, center; }
  .ime-brand .ime-hero-panel { left: 5%; width: 90%; top: auto; bottom: 5%; }
  .ime-brand .ime-hero-panel h2 { font-size: 21px; }
}