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

/* Tesla (elektronika) brand page — scope .te-brand. Font Montserrat (body shoda,
   ~ Panton Black Caps pro nadpisy weight 900), červená. */
.te-brand {
  /* červená se na originálu nevyskytuje — ponechána jen pro kompatibilitu, NEPOUŽÍVAT */
  --te-red: #e2001a; --te-red-deep: #b60015; --te-ink: #161619; --te-ink-soft: #565660;
  /* světle tyrkysová / azurová z originálu — doplňkově: plocha CTA (jako bar
     'Learn more' na originálu, s tmavým textem) a akcent na jednotlivých slovech */
  --te-azure: #6fcff0; --te-azure-deep: #45bde3;
  /* Revize 2026-08-20: na brand page je JEDINÝ odstín modré #6fcff0 — i pro drobné
     texty (NEJOBLÍBENĚJŠÍ, ELEKTRONIKA, PROČ TESLA…). Ztmavený variant kvůli kontrastu
     byl zamítnut zadavatelem (přiložen vzorník přesného odstínu).
     Revize 2026-08-20 (Font 0.1): modré bylo příliš → PRAVIDLO: modrá nese jen
     AKCE (plochy tlačítek, 'Objevit') a produktové tagy + akcent v hero titulku;
     nadpisy a eyebrows jsou černé. */
  --te-line: #e6e6ea; --te-paper: #ffffff; --te-soft: #f4f4f6;
  /* velmi světlá šedá s modrým nádechem — originál ji nese jako pás na pozadí
     sekcí (viz footer originálu). Produktové gridy zůstávají čistě bílé. */
  --te-mist: #edf1f5;
  --te-font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  color: var(--te-ink); font-family: var(--te-font); line-height: 1.6;
}
.te-brand :where(*, *::before, *::after) { box-sizing: border-box; }
.te-brand :where(h1,h2,h3,p,ul,figure) { margin: 0; }
/* Nadpisy MUSÍ mít font-family explicitně, ne jen dědění z .te-brand.
   Šablona e-shopu má vlastní pravidlo pro h1–h4 (myriad-pro) a přímé pravidlo
   PŘEBIJE dědění — na živé stránce se nadpisy kreslily Myriad Pro, který nemá
   v subsetu české znaky, takže ě/ž padaly na Segoe UI Black a v nadpisu byly
   nápadně tlustší než zbytek. Na náhledu se to neprojeví (tam žádná šablona není),
   takže je to vidět jen naživo. Měřeno 2026-08-25: 17 glyfů Myriad Pro + 2 Segoe UI Black. */
.te-brand :where(h1, h2, h3, h4, h5, h6) { font-family: var(--te-font); }
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky — hero má svůj
   vlastní H1, takže je to duplicitní nadpis (i pro SEO). Živě měřeno 2026-08-25: 38 px. */
body:has(.te-brand-wrapper) h1.ph-main,
body:has(.te-brand-wrapper) h1.ph-page { display: none; }


.te-brand :where(ul) { padding: 0; list-style: none; }
.te-brand :where(img) { max-width: 100%; display: block; }
.te-brand :where(a) { color: inherit; text-decoration: none; }
.te-container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px,5vw,56px); }
.te-h2 { font-weight: 800; font-size: clamp(28px,4vw,44px); line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.te-sub { margin-top: 14px; max-width: 60ch; margin-inline: auto; color: var(--te-ink-soft); font-size: 18px; text-wrap: balance; }
.te-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(0.95rem,1.05vw,1.1rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--te-ink); }
.te-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing:.03em; text-transform: uppercase; padding: 15px 30px; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
.te-btn--red { background: var(--te-azure); color: var(--te-ink); }
.te-btn--red:hover { background: var(--te-azure-deep); transform: translateY(-2px); }
.te-btn--outline { background: transparent; color: var(--te-ink); border-color: var(--te-ink); }
.te-btn--outline:hover { background: var(--te-ink); color: #fff; }
.te-btn--light { background: #fff; color: var(--te-ink); }
.te-btn--light:hover { transform: translateY(-2px); }

.te-hero { background: var(--te-ink); color: #fff; overflow: hidden; }
.te-hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(28px,5vw,72px); min-height: clamp(500px,62vh,640px); }
@media (max-width:900px){ .te-hero__inner { grid-template-columns: 1fr; text-align:center; } }
.te-hero__content { padding: clamp(48px,7vw,96px) 0; max-width: 560px; }
.te-hero__logo { font-weight: 800; font-size: clamp(1.6rem,2.6vw,2.3rem); letter-spacing: 0.28em; text-transform: uppercase; color: #fff; }
.te-brand .te-hero__title { margin-top: 16px; font-weight: 900; font-size: clamp(2.4rem,5vw,4rem); line-height: 1.0; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.te-hero__title em { color: var(--te-azure); font-style: normal; }
.te-brand .te-hero__lead { margin-top: 18px; font-size: clamp(1.05rem,1.4vw,1.2rem); color: rgba(255,255,255,.82); max-width: 46ch; }
@media (max-width:900px){ .te-hero__lead { margin-inline:auto; } }
.te-hero__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width:900px){ .te-hero__cta { justify-content:center; } }
.te-hero__cta .te-btn--outline { color: #fff; border-color: rgba(255,255,255,.7); }
.te-hero__cta .te-btn--outline:hover { background: #fff; color: var(--te-ink); }
.te-hero__stats { margin-top: 36px; display: flex; gap: clamp(22px,4vw,48px); flex-wrap: wrap; }
@media (max-width:900px){ .te-hero__stats { justify-content:center; } }
.te-hero__stat-num { display: block; font-weight: 800; font-size: clamp(1.5rem,2.4vw,2rem); color: #fff; }
.te-hero__stat-label { font-size: 12.5px; letter-spacing:.06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.te-hero__media { align-self: stretch; position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.te-hero__media img { max-height: 82%; width: auto; object-fit: contain; }


/* Příběh značky (doplněno 2026-09-17 dle tesla.info/en/about-us) — neproduktová sekce,
   proto smí mít šedou plochu; leží mezi hero a bestsellery, takže střídání
   mist → bílá zůstává zachované. Marginy uvnitř prefixovat .te-brand, jinak je
   přebije reset šablony e-shopu. */
.te-story { background: var(--te-mist); padding: clamp(44px,6vw,88px) 0; }
.te-brand .te-story__head { max-width: 62ch; }
.te-brand .te-story__title { margin-top: 14px; }
.te-brand .te-story__title em { font-style: normal; color: var(--te-azure-deep); }
.te-brand .te-story__body { margin-top: clamp(24px,3vw,38px); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,34px); }
.te-brand .te-story__body p { color: var(--te-ink-soft); font-size: 16px; line-height: 1.75; }
.te-brand .te-story__facts { margin-top: clamp(26px,3vw,40px); padding-top: clamp(22px,2.6vw,32px); border-top: 1px solid var(--te-line); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,34px); }
.te-story__fact-k { display: block; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.te-story__fact-v { display: block; margin-top: 6px; color: var(--te-ink-soft); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .te-brand .te-story__body, .te-brand .te-story__facts { grid-template-columns: 1fr; }
}

.te-range { background: var(--te-paper); padding: clamp(44px,6vw,88px) 0; }
.te-range__head, .te-values__head, .te-cats__head { text-align: center; max-width: 700px; margin-inline: auto; }
.te-brand .te-range__title, .te-brand .te-values__title, .te-brand .te-cats__title { margin-top: 14px; }
.te-range__grid { margin-top: clamp(36px,5vw,56px); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2vw,26px); }
@media (max-width:900px){ .te-range__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .te-range__grid { grid-template-columns: 1fr; } }
.te-card { display: flex; flex-direction: column; border: 1px solid var(--te-line); border-radius: 8px; overflow: hidden; background:#fff; transition: box-shadow .2s ease, transform .2s ease; }
.te-card:hover { box-shadow: 0 16px 40px rgba(22,22,25,.12); transform: translateY(-4px); }
.te-card__media { aspect-ratio: 1/1; background:#fff; display: flex; align-items: center; justify-content: center; padding: 18px; }
.te-card__media img { width: 100%; height: 100%; object-fit: contain; }
.te-card__body { padding: 8px 20px 22px; display: flex; flex-direction: column; flex:1; border-top: 1px solid var(--te-line); }
.te-card__tag { margin-top: 14px; font-size: 13px; letter-spacing:.1em; text-transform: uppercase; color: var(--te-azure); font-weight: 700; }
.te-brand .te-card__name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; min-height: 2.5em; margin-top: 4px; }
.te-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.te-card__price { font-weight: 800; font-size: 1.16rem; }
.te-card__cta { font-weight: 700; font-size: 14px; color: var(--te-ink); }
.te-range__more { margin-top: clamp(30px,4vw,44px); text-align: center; }

.te-values { background: var(--te-mist); padding: clamp(44px,6vw,88px) 0; }
.te-values__grid { margin-top: clamp(36px,5vw,56px); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,36px); }
@media (max-width:860px){ .te-values__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .te-values__grid { grid-template-columns: 1fr; } }
.te-value__icon { width: 46px; height: 46px; color: var(--te-ink); }
.te-value__icon svg { width: 100%; height: 100%; }
.te-brand .te-value__title { margin-top: 16px; font-weight: 700; font-size: 1.12rem; }
.te-brand .te-value__text { margin-top: 9px; color: var(--te-ink-soft); font-size: 15.5px; line-height: 1.55; }

.te-spot { background: var(--te-mist); color: var(--te-ink); overflow: hidden; }
.te-spot__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px,5vw,64px); }
@media (max-width:860px){ .te-spot__inner { grid-template-columns: 1fr; } }
.te-spot__text { padding: clamp(56px,8vw,104px) 0; max-width: 480px; }
.te-spot__text .te-eyebrow { color: var(--te-ink); }
.te-brand .te-spot__title { margin-top: 12px; font-weight: 800; font-size: clamp(1.9rem,3.4vw,2.9rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--te-ink); }
.te-brand .te-spot__lead { margin-top: 14px; color: var(--te-ink-soft); }
.te-spot__cta { margin-top: 26px; }
.te-spot__media { align-self: stretch; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.te-spot__media img { max-height: 380px; width: auto; object-fit: contain; filter: drop-shadow(0 24px 44px rgba(0,0,0,.28)); }

.te-cats { background: var(--te-mist); padding: clamp(44px,6vw,88px) 0; }
.te-cats__grid { margin-top: clamp(36px,5vw,56px); display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2vw,24px); }
@media (max-width:860px){ .te-cats__grid { grid-template-columns: repeat(2,1fr); } }
.te-cat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px; border-radius: 8px; background: var(--te-paper); border: 1px solid var(--te-line); transition: transform .2s ease, box-shadow .2s ease; }
.te-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(22,22,25,.12); }
.te-cat__media { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.te-cat__media img { max-width: 82%; max-height: 82%; object-fit: contain; }
.te-brand .te-cat__name { margin-top: 12px; font-weight: 700; font-size: 1.08rem; }
.te-cat__go { margin-top: 6px; font-size: 13px; letter-spacing:.06em; text-transform: uppercase; font-weight: 700; color: var(--te-azure); }

.te-trust { background: var(--te-mist); padding: clamp(40px,5vw,72px) 0; }
.te-trust__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
@media (max-width:760px){ .te-trust__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:420px){ .te-trust__grid { grid-template-columns: 1fr; } }
.te-trust__item { display: flex; align-items: flex-start; gap: 14px; }
.te-trust__icon { flex: none; width: 30px; height: 30px; color: var(--te-ink); }
.te-trust__icon svg { width: 100%; height: 100%; }
.te-brand .te-trust__t { font-weight: 700; font-size: 16px; }
.te-brand .te-trust__x { margin-top: 5px; font-size: 14.5px; color: var(--te-ink-soft); line-height: 1.5; }

/* Závěrečný pás: dřív tmavý (--te-ink). Originál tmavé plochy nepoužívá, proto bílá;
   vlasové linky ho oddělují od šedého pásu nad a od Top 10 pod ním. */
.te-cta { background: var(--te-paper); color: var(--te-ink);
          border-top: 1px solid var(--te-line); border-bottom: 1px solid var(--te-line); }
.te-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(48px,6vw,76px) 0; flex-wrap: wrap; }
.te-brand .te-cta__title { color: var(--te-ink); font-weight: 800; font-size: clamp(1.7rem,3vw,2.5rem); text-transform: uppercase; letter-spacing: -0.01em; }
.te-brand .te-cta__lead { margin-top: 10px; color: var(--te-ink-soft); max-width: 52ch; }

.te-shop { background: var(--te-paper); padding: clamp(48px,6vw,80px) 0 clamp(24px,4vw,40px); text-align: center; }
.te-shop .te-eyebrow { justify-content: center; }
.te-brand .te-shop__title { margin-top: 14px; }
.te-shop .te-sub { margin-inline: auto; }
.te-shop__arrow { display: block; margin-top: 22px; font-size: 26px; color: var(--te-azure); animation: te-bounce 1.8s infinite; }
@keyframes te-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@media (max-width:900px){ .te-cta__inner { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   ŠÍŘKA — prolomení Upgates description wrapperu (.max-w-xl)
   ============================================================
   Brand HTML sedí v shellovém kontejneru `.max max-w-xl text` s max-width:1140px,
   takže full-bleed hero i barevné pásy byly UŽŠÍ (1140 px) než produktový výpis
   a než ostatní brand pages (Top Model / Severin měří 1440 px). Cap rušíme jen pro
   wrapper s brand obsahem; tenhle CSS soubor se přes `custom_style` načítá pouze
   na téhle stránce, takže jinde nic neovlivní.
   Vnitřní `te-container` (1200 px) zůstává — to je záměrná čtecí šířka textu.
   Dva selektory zaměrně: shell může mít cap na `.max-w-xl` i na `.max.max-w-xl.text`
   (3 třídy = vyšší specificita, přebila by :has() s jednou třídou).
   Měřeno 2026-08-25: před opravou 1140 px, po ní 1440 px jako Top Model. */
.max-w-xl:has(.te-brand-wrapper),
.max.max-w-xl.text:has(.te-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }


/* ============================================================
   ŠÍŘKA sekcí s position:relative (full-bleed hero, tmavé pásy)
   ============================================================
   Shell e-shopu zužuje sekce, které mají `position: relative`, na shrink-to-fit:
   naměřeno 2026-08-25 shodně u Hurley i Tesly **1238 px z 1440** (viewport 1600),
   zatímco sousední `position: static` sekce vyplnily celých 1440. Příčinu v šabloně
   nešlo dohledat (CSSOM je z prohlížeče blokovaný, žádné pravidlo šířky na element
   nesedí), ale explicitní `width: 100%` to spolehlivě ruší — ověřeno měřením:
   `width:auto` → 1238, `width:100%` → 1440. */
.te-hs { width: 100%; }

/* >>> generováno build_tesla_slideshow.py — needitovat ručně */
/* Logo pruh (varianta B) — tenký bílý pás s oficiálním logem vlevo, jako na tesla.info.
   Zadání „Logo 01": pruh přes celou šířku, ale výrazně tenčí než na originálu, ať
   nekrade pozornost hero slideshow. Logo zarovnané na levý okraj obsahu (.te-container). */
.te-logobar { background: #fff; }
.te-logobar__inner { max-width: 1200px; margin-inline: auto; padding: 13px clamp(20px,5vw,56px); display: flex; align-items: center; }
/* zdrojové PNG má 144×25 px → 20 px je pod 1:1, takže logo zůstává ostré */
.te-logobar__img { display: block; height: 20px; width: auto; }
@media (max-width: 600px) { .te-logobar__inner { padding-block: 11px; } .te-logobar__img { height: 17px; } }

/* ===================== HERO SLIDESHOW (varianta B, .te-hs) =====================
   Dle originálu tesla.info: bílá stránka + fotobanner PŘES CELOU ŠÍŘKU s textem
   nad ním. Scrim vlevo drží čitelnost bílého textu i na světlých fotkách
   (např. detail mixéru), aniž by z banneru dělal tmavou plochu.               */
.te-hs { position: relative; overflow: hidden; background: var(--te-paper);
         /* nižší a širší pás ~3.2:1 jako originál; zdrojové fotky jsou jen 685 px,
            vyšší pás by je upscaloval ještě víc */
         min-height: clamp(360px, 38vw, 540px); }
.te-hs__slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.te-hs__slide.is-active { opacity:1; }
/* obrázek = celá plocha banneru */
.te-hs__media { position:absolute; inset:0; z-index:0; }
.te-hs__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
/* čitelnostní scrim jen vlevo, kde leží text */
.te-hs__slide::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(10,12,16,.72) 0%, rgba(10,12,16,.42) 38%, rgba(10,12,16,.05) 68%, rgba(10,12,16,0) 100%); }
@media (max-width:860px){ .te-hs__slide::after { background: linear-gradient(to top, rgba(10,12,16,.78) 0%, rgba(10,12,16,.35) 55%, rgba(10,12,16,.05) 100%); } }
/* text nad bannerem */
.te-hs__inner { position:static; height:100%; display:flex; align-items:center;
  max-width:1200px; margin:0 auto; padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px); box-sizing:border-box; }
.te-hs__text { position:relative; z-index:2; max-width:min(52ch, 66%); }
@media (max-width:860px){ .te-hs__inner{ align-items:flex-end; } .te-hs__text{ max-width:100%; } }
.te-hs__eyebrow { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.92); font-size:13px; }
.te-brand .te-hs__title { font-weight:900; text-transform:uppercase; font-size:clamp(30px,4.4vw,54px); line-height:1.0; letter-spacing:-.01em; color:#fff; margin:.22em 0 .3em; text-wrap:balance; }
.te-hs__title em { font-style:normal; color:var(--te-azure); }
.te-hs__lead { max-width:44ch; color:rgba(255,255,255,.88); font-size:clamp(15px,1.5vw,18px); margin-bottom:1.4em; }
.te-hs__cta { display:flex; flex-wrap:wrap; gap:14px; }
.te-hs__cta .te-btn--red { background:var(--te-azure); color:var(--te-ink); }
.te-hs__cta .te-btn--outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.te-hs__cta .te-btn--outline:hover { background:#fff; color:var(--te-ink); }
/* ovládání: neutrální bílé (originál neonové akcenty nemá) */
.te-hs__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(10,12,16,.28); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.te-hs__arrow:hover { background:rgba(10,12,16,.5); }
.te-hs__arrow--prev{ left:clamp(10px,1.5vw,22px);} .te-hs__arrow--next{ right:clamp(10px,1.5vw,22px);}
.te-hs__arrow svg{ width:22px; height:22px; }
.te-hs__dots{ position:absolute; bottom:18px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:10px;}
.te-hs__dot{ width:26px; height:3px; padding:0; border:none; border-radius:0; background:rgba(255,255,255,.45); cursor:pointer; transition:.2s;}
.te-hs__dot.is-active{ background:#fff;}
@media (prefers-reduced-motion: reduce){ .te-hs__slide{ transition:none; } }
/* <<< konec generovaného bloku */