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

/* ---------- scoped reset & tokeny (dle originálu) ---------- */
.shp-brand{
  --shp-red:#E6000D;
  --shp-dark:#111;
  --shp-grey:#F4F4F4;
  font-family:'Open Sans',sans-serif;
  color:#222;
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.shp-brand *,.shp-brand *::before,.shp-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.shp-brand img{max-width:100%;height:auto;display:block;}
.shp-brand a{text-decoration:none;color:inherit;}

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

/* ---------- hero (oficiální foto vysavače na černé, text vlevo) ---------- */
/* fotografie má čistě černé pozadí, proto contain + černá výplň:
   vysavač je vidět celý a plocha plynule navazuje */
.shp-brand .shp-hero{
  position:relative;width:100%;padding-top:46%;overflow:hidden;background-color:#000;
  background-image:url('/shop-data/campaign/sharp/sharp-hero-vysavac.png');
  background-size:contain;background-position:right center;background-repeat:no-repeat;
  container-type:inline-size;
}
.shp-brand .shp-hero-text{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);width:42%;
}
.shp-brand .shp-hero-eyebrow{
  display:block;font-size:12px;font-size:1.15cqw;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--shp-red);margin-bottom:1cqw;
}
.shp-brand .shp-hero-text h1{
  font-size:26px;font-size:3cqw;font-weight:800;line-height:1.15;color:#fff;margin-bottom:1cqw;
}
.shp-brand .shp-hero-text p{font-size:12px;font-size:1.25cqw;color:#c9c9c9;margin-bottom:1.8cqw;}
.shp-brand .shp-btn{
  display:inline-block;background:var(--shp-red);color:#fff;font-weight:700;
  font-size:12px;font-size:1.1cqw;letter-spacing:.04em;padding:1cqw 2.6cqw;
  transition:background .25s;
}
.shp-brand .shp-btn:hover{background:#fff;color:var(--shp-red);}

/* ---------- sekce ---------- */
.shp-brand .shp-section{padding:52px 28px;}
.shp-brand .shp-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--shp-red);margin-bottom:6px;
}
.shp-brand .shp-h2{font-size:27px;font-weight:800;margin-bottom:10px;}
.shp-brand .shp-lead{font-size:15.5px;color:#555;max-width:760px;margin-bottom:28px;}

/* ---------- produktové karty ---------- */
.shp-brand .shp-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.shp-brand .shp-prod{
  display:flex;flex-direction:column;background:#fff;border:1px solid #e6e6e6;
  transition:box-shadow .3s;
}
.shp-brand .shp-prod:hover{box-shadow:0 10px 28px rgba(0,0,0,.12);}
.shp-brand .shp-prod-img{aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;background:#fff;}
.shp-brand .shp-prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.shp-brand .shp-prod:hover .shp-prod-img img{transform:scale(1.05);}
.shp-brand .shp-prod-body{
  padding:0 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1;text-align:center;
  border-top:3px solid var(--shp-red);padding-top:14px;
}
.shp-brand .shp-prod-body h3{font-size:16px;font-weight:800;}
.shp-brand .shp-prod-cat{font-size:13px;color:#888;margin-bottom:12px;}
.shp-brand .shp-prod .shp-btn{margin-top:auto;font-size:13px;padding:12px 16px;text-align:center;}

/* ---------- červený mezipás ---------- */
.shp-brand .shp-band{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--shp-red);color:#fff;padding:30px 40px;
}
.shp-brand .shp-band h2{color:#fff;font-size:21px;font-weight:800;max-width:820px;}
.shp-brand .shp-band a{
  display:inline-block;background:#fff;color:var(--shp-red);font-weight:800;font-size:14px;
  padding:13px 32px;transition:background .25s,color .25s;white-space:nowrap;
}
.shp-brand .shp-band a:hover{background:var(--shp-dark);color:#fff;}

/* ---------- mikrovlnky (šedá sekce) ---------- */
.shp-brand .shp-section-grey{background:var(--shp-grey);}

/* ---------- příběh značky ---------- */
.shp-brand .shp-story{background:var(--shp-dark);color:#c9c9c9;padding:60px 28px;}
.shp-brand .shp-story-inner{max-width:900px;margin:0 auto;text-align:center;}
.shp-brand .shp-story-inner h2{color:#fff;font-size:28px;font-weight:800;margin-bottom:8px;}
.shp-brand .shp-story-inner h2 span{color:var(--shp-red);}
.shp-brand .shp-story-sub{color:#888;font-weight:600;margin-bottom:24px;}
.shp-brand .shp-story-text{font-size:15px;text-align:left;margin-bottom:13px;}
.shp-brand .shp-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
.shp-brand .shp-milestone{border-top:3px solid var(--shp-red);padding:14px 6px 0;text-align:left;}
.shp-brand .shp-year{font-size:26px;font-weight:800;color:#fff;margin-bottom:6px;}
.shp-brand .shp-milestone p{font-size:13.5px;color:#a8a8a8;}

/* ---------- CTA ---------- */
.shp-brand .shp-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--shp-grey);padding:34px 40px;
}
.shp-brand .shp-cta h2{font-size:22px;font-weight:800;}
.shp-brand .shp-cta h2 span{color:var(--shp-red);}
.shp-brand .shp-cta a{
  display:inline-block;background:var(--shp-red);color:#fff;font-weight:800;font-size:14px;
  padding:15px 38px;transition:background .25s;
}
.shp-brand .shp-cta a:hover{background:var(--shp-dark);}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .shp-brand .shp-prods{grid-template-columns:repeat(2,1fr);}
  .shp-brand .shp-timeline{grid-template-columns:repeat(2,1fr);}
  .shp-brand .shp-hero-text{width:56%;}
}
@media (max-width:768px){
  .shp-brand .shp-header{justify-content:center;text-align:center;}
  .shp-brand .shp-h2{font-size:22px;}
}
@media (max-width:520px){
  .shp-brand .shp-prods{grid-template-columns:1fr;}
  .shp-brand .shp-timeline{grid-template-columns:1fr;}
  .shp-brand .shp-cta,.shp-brand .shp-band{justify-content:center;text-align:center;}
}

/* ---------- 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(.shp-brand-wrapper) h1.ph-main,
body:has(.shp-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(.shp-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 Open Sans i pro nadpisy uvnitř brand page. */
.shp-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Open Sans', system-ui, sans-serif; }

/* ===== mobil: čitelné písmo a text pod fotkou (scripts/mobil_css.py) ===== */
/* Sharp na telefonu (do 768 px). Písmo hero bylo v `cqw` bez spodní meze: popisek,
   odstavec i tlačítko vycházely na 360 px 3,4–3,9 px a text ležel přes fotku vysavače
   (kontrola_mobil.py, 2026-09-24). Fotka má poměr 1920×1080 = 56,25 %: nahoře se ukáže
   celá v tom poměru, text jde pod ni na černou plochu, na kterou fotka sama navazuje. */
@media (max-width:768px){
  .shp-brand .shp-hero{padding-top:calc(56.25% + 250px);
    background-size:100% auto;background-position:center top;}
  .shp-brand .shp-hero-text{position:absolute;top:56.25cqw;bottom:auto;left:0;right:0;
    width:auto;transform:none;padding:6px 20px 24px;}
  .shp-brand .shp-hero-eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:8px;}
  .shp-brand .shp-hero-text h1{font-size:22px;line-height:1.2;margin-bottom:10px;}
  .shp-brand .shp-hero-text p{font-size:14px;line-height:1.5;margin-bottom:18px;}
  .shp-brand .shp-hero-text .shp-btn{font-size:13px;padding:12px 24px;}
}
/* ===== konec bloku pro mobil ===== */