/* ===================================================================
   GYMPINK-CSS.css — vlastní CSS pro Shoptet
   Verze: 1.0 (PŘECHOD NA ŠABLONU TANGO — sekce 3.x od nuly.
   Tokeny a sdílené komponenty ze Step zůstávají, jsou nezávislé
   na šabloně. Vše pod touto hlavičkou je nové, psané na
   diagnostikovanou strukturu Tango.)
   Repo:  github.com/serbus-create/gympink-shoptet
   Vzor:  exalted.com
   ===================================================================

   POZOR — pravidla pro tento soubor:
   - Selektory se NIKDY nepíšou naslepo. Každý selektor musí vzejít
     z diagnostiky reálného DOM (výpis z konzole prohlížeče).
   - Do CSS nepatří žádný obsah (texty, cesty k obrázkům). Obsah plní
     klientka z administrace Shoptetu. CSS řeší výhradně vzhled.
   - Verzi v hlavičce zvyšovat při každé změně (usnadňuje audit).
   =================================================================== */


/* ===================================================================
   1. DESIGNOVÉ TOKENY
   Odvozeno ze schváleného HTML nástřelu homepage.
   =================================================================== */

:root {
  /* --- barvy --- */
  --gp-bg:          #ffffff;   /* hlavní pozadí */
  --gp-tile:        #f7f5f2;   /* světlé dlaždice, patička */
  --gp-ink:         #1a1a1a;   /* hlavní text */
  --gp-ink-soft:    #6b6b6b;   /* sekundární text */
  --gp-line:        #e6e3de;   /* linky, oddělovače */
  --gp-accent:      #ff2d78;   /* značková růžová — používat střídmě */
  --gp-on-photo:    #ffffff;   /* text ležící na fotografii */

  /* --- typografie --- */
  --gp-font: 'Helvetica Neue', Arial, sans-serif;

  --gp-fs-nav:      15px;      /* navigace */
  --gp-fs-body:     14px;      /* běžný text */
  --gp-fs-small:    13px;      /* drobný text, patička */
  --gp-fs-h1:       clamp(26px, 3.4vw, 44px);   /* hero nadpis */
  --gp-fs-h2:       clamp(20px, 2.4vw, 32px);   /* nadpisy bannerů */

  /* --- rozměry a poměry stran ---
     Musí odpovídat rozměrům zadaným grafikovi
     (viz gympink-zadani-grafika.xlsx). */
  --gp-ratio-hero:      2.2;    /* 2560 × 1164 */
  --gp-ratio-hero-mob:  0.75;   /* 1200 × 1600 */
  --gp-ratio-duo:       1.36;   /* 1790 × 1320 */
  --gp-ratio-wide:      1.92;   /* 2560 × 1335 */
  --gp-ratio-wide-mob:  1;      /* 1200 × 1200 */
  --gp-ratio-product:   0.75;   /* 1200 × 1600 */

  /* --- rozestupy --- */
  --gp-gap:         22px;       /* mezera mezi dlaždicemi */
  --gp-pad-x:       38px;       /* boční odsazení sekcí */
  --gp-pad-y:       44px;       /* svislé odsazení sekcí */

  /* --- tlačítka (pilulka s obrysem, jako u vzoru) --- */
  --gp-pill-pad:    13px 40px;
  --gp-pill-radius: 999px;
}


/* ===================================================================
   2. SDÍLENÉ KOMPONENTY
   Zatím jen definice — připojení na konkrétní Shoptet selektory
   proběhne až po diagnostice DOM.
   =================================================================== */

/* pilulkové tlačítko na fotografii */
.gp-pill {
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.gp-pill:hover {
  background: rgba(255, 255, 255, .18) !important;
}

/* pilulkové tlačítko na světlém pozadí */
.gp-pill--dark {
  border-color: var(--gp-ink) !important;
  color: var(--gp-ink) !important;
}

.gp-pill--dark:hover {
  background: var(--gp-ink) !important;
  color: #fff !important;
}


/* ===================================================================
   3. SEKCE — Tango
   ===================================================================

   [x] 3.0  Hlavička — vynucená pozice (absolute, top:0)
   [x] 3.1  Hlavička — logo (omezení přemrštěné velikosti)
   [x] 3.2  Hlavička — menu kategorií (sjednocení do jednoho řádku)
   [x] 3.3  Hero banner — fix margin-bottom na .carousel.slide (40px mezera)
   [x] 3.4  Blok se 4 ikonami (přesunut pod hero, kartičky se stylem)
   [~] 3.5  Pár bannerů (Bestsellers/Novinky) — přepracováno, NEOVĚŘENO na živém webu
   [~] 3.6  Výpis produktů — CSS hotovo, produkty pending (admin blok není nakonfigurovaný)
   [~] 3.7  Patička — základní stylizace, ověřit vizuálně po aktualizaci hashe
   [~] 3.8  Velký banner (Týmové oblečení) — přepracováno, NEOVĚŘENO na živém webu
   [x] 3.9  Skryté bloky homepage (Nové články, Uvítací text)
   [ ] 3.10 Mobilní verze

   OPRAVA (kritická): všechna pravidla v téhle sekci se dřív aplikovala
   na CELÝ web, ne jen na titulní stránku. #header position:absolute
   bez omezení na stránku vyjmulo hlavičku z toku i na stránkách
   kategorií a detailu produktu, kde není hero fotka pod ní — hlavička
   se tam jen položila přes obsah stránky a rozbila layout.
   Diagnostika: body na titulní straně má třídu "type-index", na
   kategorii "type-category". Všechny selektory v týhle sekci proto
   teď mají prefix "body.type-index", ať platí jen na homepage.
   =================================================================== */


/* ===================================================================
   3.0  HLAVIČKA — vynucená pozice + scroll efekt
   Diagnostika: #header se choval nekonzistentně — jednou naměřeno
   position:absolute, podruhé position:relative (Tango si to zjevně
   přepíná samo, pravděpodobně podle šířky okna). Vynucujeme napevno.

   Změna: position:fixed místo :absolute, ať hlavička zůstává
   připnutá nahoře i při scrollu (zadání: menu "jede spolu se
   scrollem"). Stav .gp-scrolled přidává/odebírá JS podle scroll
   pozice vůči hero fotce (viz GYMPINK-JS.js) — po 60 % výšky hero
   fotky se pozadí změní na bílé a text na tmavý.
   =================================================================== */

body.type-index #header {
  position: fixed !important;
  top: 30px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  transition: background-color .25s ease, top .25s ease !important;
  padding-bottom: 0 !important;
}

body.type-index #header.gp-scrolled {
  top: 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
}

body.type-index #header.gp-scrolled .menu-level-1 a,
body.type-index #header.gp-scrolled .top-nav-right a,
body.type-index #header.gp-scrolled .top-nav-right .btn-icon {
  color: var(--gp-ink) !important;
  text-shadow: none !important;
}


/* ===================================================================
   3.1  LOGO — omezení velikosti
   Diagnostika: .site-name img nemá žádné omezení rozměrů, vykresluje
   se v natural velikosti souboru (996×246 px), proto zabíralo 326px
   výšky a táhlo za sebou celou hlavičku na 452px.
   =================================================================== */

body.type-index .site-name img {
  width: auto !important;
  height: 32px !important;
  max-height: 32px !important;
}

/* Diagnostika: .site-name mělo nativní padding:40px 0 (navržený pro
   původní velké logo), který po zmenšení loga zůstal a táhl výšku
   celé hlavičky na 112px místo skutečných 32px loga. */
body.type-index .site-name {
  padding: 0 !important;
  line-height: 0 !important;
}


/* ===================================================================
   3.2  MENU KATEGORIÍ — sjednocení do jednoho průhledného řádku
   Diagnostika: nav.fitted má nativně bg:#fff, overflow:hidden a stojí
   jako samostatný bílý box uprostřed hero fotky, oddělený od loga
   i od ikon vpravo (ty jsou úplně nahoře v .top-nav).
   Cíl (viz reference Exalted): logo, menu a ikony v jedné rovině,
   průhledně položené na fotce.
   =================================================================== */

/* ===================================================================
   OPRAVA: selektor nav.fitted byl špatně — "fitted" je TŘÍDA, kterou
   Shoptet dynamicky přidává/odebírá vlastním JS (data-collapsible),
   podle toho, jestli se menu vejde do dostupné šířky. Náš grid
   zmenšil sloupec natolik, že se JS rozhodl menu sbalit (třída zmizí,
   ukáže se prázdný box). Řešení: použít stabilní #navigation a menu
   natvrdo vynutit rozbalené, ať to JS nemůže znovu sbalit.
   =================================================================== */

body.type-index #navigation {
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
}

body.type-index #navigation .navigation-in.menu,
body.type-index #navigation .menu-level-1 {
  display: flex !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  list-style: none !important;
}

body.type-index #navigation .menu-level-1 {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
}

body.type-index #navigation .menu-level-1 li {
  display: inline-flex !important;
}

body.type-index #navigation .menu-level-1 a {
  visibility: visible !important;
}

body.type-index .navigation-in.menu,
body.type-index .menu-helper,
body.type-index .menu-level-1 {
  background: transparent !important;
}

body.type-index .menu-level-1 a {
  color: #fff !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
}


/* ===================================================================
   Scrim (tmavý přechod přes horní část hero fotky) byl na žádost
   klienta odstraněn. Čitelnost menu teď spoléhá jen na text-shadow
   výše u .menu-level-1 a. Pokud bude na světlejších fotkách text
   špatně čitelný, řešit výběrem fotek s klidnou horní částí (viz
   zadání grafikovi) místo tmavého přechodu přes celou fotku.
   =================================================================== */


/* ===================================================================
   3.2b  JEDEN ŘÁDEK — kategorie vlevo / logo uprostřed / ikony vpravo
   Diagnostika: .navigation-wrapper obsahuje čtyři přímé děti
   (top-nav, site-name, nav.fitted, menu-helper — menu-helper je
   nativně visibility:hidden, ignorujeme). Používáme CSS grid se
   třemi sloupci a každý blok zařadíme na pozici bez ohledu na
   pořadí v HTML — stejný princip, který fungoval na šabloně Step.
   top-nav obsahuje i e-mail (.project-email), který v referenci
   není vidět — schováváme, zůstávají jen ikony.
   =================================================================== */

body.type-index .navigation-wrapper {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 32px !important;
}

body.type-index #header .project-email {
  display: none !important;
}

body.type-index #header .menu-helper {
  display: none !important;
}

body.type-index .navigation-wrapper {
  grid-template-rows: 1fr !important;
}

body.type-index .navigation-wrapper > #navigation {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

body.type-index .navigation-wrapper > .site-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  text-align: center !important;
}

body.type-index .navigation-wrapper > .top-nav {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-content: flex-end !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
}

body.type-index #header .top-nav-right a,
body.type-index #header .top-nav-right .btn-icon {
  color: #fff !important;
}

/* Odkaz Blog přesunutý JS z kategorií do pravého horního rohu
   (vedle ikon vyhledávání/účtu/košíku). Přesunuté <li> ztratilo
   kontext #navigation .menu-level-1, proto potřebuje vlastní reset
   a barvy — zrcadlí styl ostatních položek menu i chování při
   scrollu (bílá/stín na hero fotce → tmavá po scrollu). */
body.type-index .gp-blog-moved {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 20px !important;
}

body.type-index .gp-blog-moved a {
  color: #fff !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
}

body.type-index #header.gp-scrolled .gp-blog-moved a {
  color: var(--gp-ink) !important;
  text-shadow: none !important;
}


/* ===================================================================
   3.3  HERO CAROUSEL — odstranění nativního margin-bottom
   Diagnostika: Bootstrap .carousel.slide (potomek .wide-carousel) má
   nativně margin-bottom: 40px. Margin collapsuje ven přes kontejner
   (který nemá BFC) a vytváří 40px bílou mezeru pod hero fotkou
   mezi hero a USP blokem.
   =================================================================== */

body.type-index .wide-carousel .carousel.slide {
  margin-bottom: 0 !important;
}


/* ===================================================================
   3.4  BLOK SE 4 IKONAMI (benefitBanner) — přesunuto pod hero bannerem
   Diagnostika: .benefitBanner.position--benefitHomepage
     > .benefitBanner__item (4×)
       > .benefitBanner__picture > .benefitBanner__img
       > .benefitBanner__content > .benefitBanner__title (strong)
                                  > .benefitBanner__data
   JS (GYMPINK-JS.js) přesouvá celý blok hned za .wide-carousel.
   Zde jen vizuál — kartičky s krémovým pozadím, ikona vlevo / text
   vpravo, rovnoměrně přes celou šířku, vycentrováno (viz reference).
   =================================================================== */

body.type-index .benefitBanner.position--benefitHomepage {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 56px !important;
  margin-bottom: 56px !important;
  padding: 0 32px !important;
  background: #fff !important;
}

body.type-index .benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: clamp(32px, 8vw, 120px) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: var(--gp-tile) !important;
  padding: 48px 40px !important;
  border-radius: 0 !important;
}

body.type-index .benefitBanner__picture {
  flex: 0 0 auto !important;
  width: 96px !important;
}

body.type-index .benefitBanner__img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

body.type-index .benefitBanner__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.type-index .benefitBanner__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gp-ink) !important;
}

body.type-index .benefitBanner__data {
  font-size: 15px !important;
  color: var(--gp-ink-soft) !important;
}

/* ---------------------------------------------------------------
   3.4b RESPONZIVNÍ CHOVÁNÍ — tablet a mobil
   Diagnostika: gap byl počítaný z 8vw (celá šířka obrazovky), ne
   z šířky karty samotné. Na užších obrazovkách se 4 karty vedle
   sebe hodně zúžily, ale gap se nezmenšoval úměrně — ikona (96px)
   + gap (až 120px) + padding (80px) přesáhly celou šířku karty,
   takže na text nezbylo místo a prohlížeč ho zalomil písmeno po
   písmenu. Řešení: pod 900px přepnout na 2 karty na řádek s ikonou
   NAD textem (ne vedle), pod 480px na 1 kartu na řádek.
   --------------------------------------------------------------- */

@media (max-width: 900px) {
  body.type-index .benefitBanner.position--benefitHomepage {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  body.type-index .benefitBanner__item {
    flex: 1 1 calc(50% - 8px) !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 32px 16px !important;
  }

  body.type-index .benefitBanner__picture {
    width: 64px !important;
  }

  body.type-index .benefitBanner__content {
    align-items: center !important;
  }

  body.type-index .benefitBanner__title {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  body.type-index .benefitBanner__item {
    flex: 1 1 100% !important;
  }
}


/* ===================================================================
   3.5  PÁR MALÝCH BANNERŮ (Bestsellers / Novinky) — vedle sebe
   Nová architektura: všechny 3 bannery (Bestsellers, Novinky, Týmové
   oblečení) jsou v administraci na pozici "Zápatí" — "Střed" na
   tomhle templatu nikam nevykresluje. JS vezme první dva (pár) a
   přesune je do vlastního wrapperu .gp-banner-pair pod blok ikon;
   poslední zůstává jako .gp-banner-big u patičky (viz 3.8).
   =================================================================== */

body.type-index .gp-banner-pair {
  display: flex !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 32px !important;
}

body.type-index .gp-banner-pair-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: var(--gp-ratio-duo) !important;
  overflow: hidden !important;
}

body.type-index .gp-banner-pair-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.type-index .gp-banner-pair-item > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.type-index .gp-banner-pair-item .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px !important;
}

body.type-index .gp-banner-pair-item .extended-banner-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: clamp(16px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
  color: var(--gp-on-photo) !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  display: block !important;
}

body.type-index .gp-banner-pair-item .extended-banner-text {
  display: none !important; /* u malých bannerů podle vzoru bez podtextu */
}

body.type-index .gp-banner-pair-item .extended-banner-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
}


/* ===================================================================
   3.6  VÝPIS PRODUKTŮ
   Diagnostika (kategorie /leginy/, Tango) — OVĚŘENO přímo v DevTools:
     #products.products.products-page.products-block (flex, wrap)
       > .product.col-xs-12.col-sm-6.col-md-4[data-testid="productItem"]
           > .inner
               > .img
                   > a[href] (bez třídy) > img
                   > .flags.flags-extra (badge NOVINKA, position:absolute)
               > .descr
                   > a.name[data-micro="url"] > span[data-micro="name"]
                   > .prices.row[data-micro="offer"] (flex)
                       > .col-xs-8.col-lg-12 > .price.price-final
                       > .tools-wrap.col-xs-4.col-lg-12
                           > a.product-link (jen &nbsp;, prázdný — ignorovat)
                           > .tools > a.btn "Detail" + .availability "Skladem"
   DŮLEŽITÉ: některé produkty mají navíc třídu .highlight-product
   (nativní Shoptet "zvýrazněný produkt", dvojnásobná šířka
   col-md-8) — to byl ten "rozbitý" řádek s textem bez obrázku.
   Řešení: force stejná šířka jako běžné produkty, ať mřížka
   zůstane jednotná (podle vzoru exalted.com nemá žádný produkt
   zvýrazněnou/širší dlaždici).
   Bez body.type-index prefixu — platí na homepage i kategoriích.
   =================================================================== */

.products.products-block {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px 20px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.products.products-block .product {
  flex: 0 0 calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .products.products-block .product {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

@media (max-width: 480px) {
  .products.products-block .product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.product .img {
  aspect-ratio: 0.75 !important;
  overflow: hidden !important;
  position: relative !important;
}

.product .img a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.product .img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.product .descr {
  padding: 14px 0 0 !important;
}

.product a.name {
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  color: var(--gp-ink) !important;
  text-decoration: none !important;
  text-align: left !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  display: block !important;
}

.product a.name:hover {
  color: var(--gp-ink-soft) !important;
}

.product .prices.row {
  display: block !important;
  margin: 0 !important;
}

.product .prices.row > .col-xs-8,
.product .prices.row > [class*="col-"] {
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

.product .price {
  font-size: var(--gp-fs-small) !important;
  font-weight: 400 !important;
  color: var(--gp-ink-soft) !important;
  text-align: left !important;
  margin-top: 4px !important;
}

/* "Detail" tlačítko a "Skladem" text — vzor (exalted.com) je na
   listingu nezobrazuje, karta je čistě obrázek + jméno + cena. */
.product .tools-wrap {
  display: none !important;
}

/* Zvýrazněný produkt (.highlight-product, nativně dvojnásobná
   šířka) — sjednoceno na stejnou šířku jako ostatní, ať mřížka
   zůstane pravidelná. */
.products.products-block .product.highlight-product {
  flex: 0 0 calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
}

@media (max-width: 900px) {
  .products.products-block .product.highlight-product {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

@media (max-width: 480px) {
  .products.products-block .product.highlight-product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ===================================================================
   3.7  PATIČKA
   Diagnostika: footer.footer
     > h2.sr-only
     > .container.footer-rows
         > .row.custom-footer.elements-4
             > .custom-footer__contact / __articles / __section2 / __onlinePayments
               H3.pageElement__heading (fw=600, 14px — zmenšujeme na 11px uppercase)
               a.project-email (bylo 18px/bold — zmenšeno)
     > .container.footer-bottom
         > span (a.image logo + a.title name) + span.copyright
   Nativní: mt=80px → 40px. Bg=rgb(246,246,246) ≈ --gp-tile.
   Referenční vzor: exalted.com — off-white bg, column headers uppercase,
   linky šedé, footer-bottom s logem vlevo a copyright vpravo.
   Bez body.type-index — patička je na všech stránkách.
   =================================================================== */

footer.footer {
  position: relative !important;
  margin-top: 40px !important;
  background: var(--gp-tile) !important;
}

/* Logo GymPink v pravém horním rohu patičky — vkládá JS (přesná
   diagnostika: footer.footer musí mít position:relative, aby se
   podle něj logo dalo umístit). */
.footer .gp-footer-logo {
  position: absolute !important;
  top: 32px !important;
  left: 32px !important;
  display: block !important;
  line-height: 0 !important;
}

.footer .gp-footer-logo img {
  height: 28px !important;
  width: auto !important;
  display: block !important;
}

.footer .footer-rows,
.footer .footer-bottom {
  max-width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.footer .footer-rows {
  padding-top: 72px !important;
  padding-bottom: 32px !important;
}

/* Nadpisy sloupců */
.footer .pageElement__heading {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gp-ink) !important;
  margin-bottom: 18px !important;
}

/* Email odkaz — původně 18px/bold */
.footer .project-email {
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

.footer .project-email:hover {
  color: var(--gp-ink) !important;
}

/* Všechny linky ve sloupcích */
.footer .custom-footer a {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

.footer .custom-footer a:hover {
  color: var(--gp-ink) !important;
}

/* Seznamy odkazů */
.footer .custom-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer .custom-footer li {
  margin-bottom: 10px !important;
}

/* Sociální ikony */
.footer .social-icons {
  margin-top: 12px !important;
  display: flex !important;
  gap: 16px !important;
}

/* Footer-bottom: logo vlevo, copyright vpravo */
.footer .footer-bottom {
  border-top: 1px solid var(--gp-line) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.footer .footer-bottom > span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Logo v patičce */
.footer .footer-bottom a.image img {
  height: 24px !important;
  width: auto !important;
}

/* Název obchodu v patičce */
.footer .footer-bottom a.title {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
  text-decoration: none !important;
}

/* Copyright text */
.footer .copyright {
  font-size: var(--gp-fs-small) !important;
  color: var(--gp-ink-soft) !important;
}


/* ===================================================================
   3.8  VELKÝ BANNER (Týmové oblečení) — plná šířka, zůstává u patičky
   Nová architektura (viz 3.5): poslední banner v pořadí administrace
   dostává od JS třídu .gp-banner-big a zůstává, kde je (u patičky),
   místo dřívějšího :has() rozlišení podle přítomnosti textu (nebylo
   spolehlivé — malé bannery mají text taky).
   =================================================================== */

body.type-index .gp-banner-big-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 64px !important;
  padding: 0 32px !important;
}

body.type-index .gp-banner-big {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: var(--gp-ratio-wide) !important;
}

body.type-index .gp-banner-big img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.type-index .gp-banner-big > a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.type-index .gp-banner-big .extended-banner-texts {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px !important;
}

body.type-index .gp-banner-big .extended-banner-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: var(--gp-fs-h2) !important;
  font-weight: 700 !important;
  color: var(--gp-on-photo) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

body.type-index .gp-banner-big .extended-banner-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--gp-fs-body) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin-bottom: 28px !important;
  display: block !important;
}

body.type-index .gp-banner-big .extended-banner-link {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--gp-pill-radius) !important;
  padding: var(--gp-pill-pad) !important;
  font-size: var(--gp-fs-nav) !important;
  color: var(--gp-on-photo) !important;
  background: transparent !important;
}


/* ===================================================================
   3.9  SKRYTÉ BLOKY HOMEPAGE
   "Nové články" a "Uvítací text" nemají v Návrhář šablon nativní
   vypínací přepínač. CSS hide je jediná možnost bez zásahu do kódu
   šablony. Selektory ověřeny diagnostikou DOM 2025-08-17.
   =================================================================== */

body.type-index .homepage-blog-wrapper {
  display: none !important;
}

body.type-index .welcome-wrapper {
  display: none !important;
}