/* ===================================================================
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.
ROZŠÍŘENO NA CELÝ WEB (ne jen homepage): na žádost klienta má být
tahle kompaktní "lišta" (logo zmenšené, jeden řádek, připnuté
nahoře, jede se scrollem) na všech stránkách — na homepage navíc
začíná průhledná přes hero fotku a zbělá po scrollu (řeší JS
scroll listener), na ostatních stránkách žádná hero fotka není,
takže je rovnou plná/bílá s tmavým textem (bez přechodu).
=================================================================== */
#header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 100 !important;
background: #fff !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
transition: background-color .25s ease, top .25s ease !important;
padding-bottom: 0 !important;
/* Diagnostika (Console, getComputedStyle při scrollY:777): hlavička
měla transform: translateY(-58px) — přesně mínus svoje vlastní
výška. Šablona má v konfiguraci "fixed_header": false, takže
Shoptet spouští VLASTNÍ JS pro schovávání hlavičky při scrollu
(přes transform). My navrch vynucujeme position:fixed, ale jejich
JS pořád běží a translateY zůstává trvale nalepený → hlavička
je sice fixed, ale posunutá mimo obrazovku. Přebito natvrdo. */
transform: none !important;
}
/* Homepage — start průhledný nad hero fotkou, top:30px (nad ní),
zbělá a sedne na top:0 po scrollu (třída .gp-scrolled, viz JS). */
body.type-index #header {
top: 30px !important;
background: transparent !important;
box-shadow: none !important;
}
body.type-index #header.gp-scrolled {
top: 0 !important;
background: #fff !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, .08) !important;
}
#header .menu-level-1 a,
#header .top-nav-right a,
#header .top-nav-right .btn-icon {
color: var(--gp-ink) !important;
text-shadow: none !important;
}
/* Homepage — bílý text se stínem, dokud je hlavička průhledná
přes hero fotku; po scrollu (.gp-scrolled) zpět na tmavý. */
body.type-index #header:not(.gp-scrolled) .menu-level-1 a,
body.type-index #header:not(.gp-scrolled) .top-nav-right a,
body.type-index #header:not(.gp-scrolled) .top-nav-right .btn-icon {
color: #fff !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !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.
=================================================================== */
.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. */
.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ě.
=================================================================== */
/* ===================================================================
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.
⚠ JEN DESKTOP (min-width: 901px). Diagnostika (DevTools, mobil):
#navigation má nativně data-collapsible="true" — Shoptet na mobilu
sám nabízí hamburger a schová menu do zásuvky. Tahle oprava to bez
media query přebíjela i na mobilu (display:flex !important na
menu, i když se nevejde), takže celé menu přetékalo přes hlavičku
a překrývalo se s ikonami/přihlášením. Na mobilu proto necháváme
Shoptetu jeho nativní chování. */
@media (min-width: 901px) {
#navigation {
background: transparent !important;
width: auto !important;
max-width: none !important;
height: auto !important;
overflow: visible !important;
}
#navigation .navigation-in.menu,
#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;
}
#navigation .menu-level-1 {
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px !important;
align-items: center !important;
}
#navigation .menu-level-1 li {
display: inline-flex !important;
}
#navigation .menu-level-1 a {
visibility: visible !important;
}
}
.navigation-in.menu,
.menu-helper,
.menu-level-1 {
background: transparent !important;
}
.menu-level-1 a {
font-size: 12px !important;
white-space: nowrap !important;
}
/* ===================================================================
Scrim (tmavý přechod přes horní část hero fotky) byl na žádost
klienta odstraněn. Čitelnost menu na homepage teď spoléhá jen na
text-shadow (viz 3.0). 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.
=================================================================== */
.navigation-wrapper {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
grid-template-rows: 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;
/* KRITICKÉ: width:100% + padding BEZ border-box = element je vždy
širší než 100 % o velikost paddingu (20+32=52px na desktopu,
12+12=24px na mobilu s pravidlem níž). To způsobovalo horizontální
přetečení celé stránky (potvrzeno: document.documentElement.
scrollWidth > clientWidth na KAŽDÉ stránce, ne jen na detailu
produktu — .navigation-wrapper je součást hlavičky všude). */
box-sizing: border-box !important;
}
#header .project-email {
display: none !important;
}
#header .menu-helper {
display: none !important;
}
/* Diagnostika (Console): scrollWidth 449 vs clientWidth 430 = 19px
přetok, viditelný už na úrovni hlavičky (HEADER/.navigation-wrapper)
na KAŽDÉ stránce. Shoda v čase se zvětšením loga (24→32px) není
náhoda — grid položky mají defaultně `min-width: auto`, takže se
CSS Grid nesmí zmenšit pod přirozenou šířku svého obsahu. Širší
logo v prostředním sloupci (auto) mohlo zbylé dva sloupce (menu,
ikony) vytlačit přes dostupnou šířku. min-width:0 dovolí gridu
sloupce zmenšit místo přetečení celé stránky. */
.navigation-wrapper > #navigation {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
min-width: 0 !important;
}
.navigation-wrapper > .site-name {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
text-align: center !important;
min-width: 0 !important;
}
.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;
min-width: 0 !important;
top: auto !important;
right: auto !important;
}
/* Odkaz Blog přesunutý JS z kategorií do pravého horního rohu
(vedle ikon vyhledávání/účtu/košíku). Přesunuté 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). */
/* Odkaz Blog přesunutý JS z kategorií do pravého horního rohu
(vedle ikon vyhledávání/účtu/košíku). Přesunuté 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). */
.gp-blog-moved {
list-style: none !important;
display: flex !important;
align-items: center !important;
margin-right: 20px !important;
}
.gp-blog-moved a {
color: var(--gp-ink) !important;
font-size: 12px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
text-shadow: none !important;
}
body.type-index #header:not(.gp-scrolled) .gp-blog-moved a {
color: #fff !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !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.3b HERO BANNER — nadpis + tlačítko vlevo (volné místo na fotce)
Diagnostika (DevTools): Shoptet nativně generuje uvnitř .item
— STEJNÝ mechanismus, jaký
používáme u bannerů dole (.extended-banner-title/.text/.link).
Teď je prázdný, protože v administraci banneru nejsou vyplněná
pole Nadpis / Text tlačítka (proto má odkaz třídu .extended-empty).
⚠ NUTNÁ PODMÍNKA: klientka musí v administraci banner "Teplákové
soupravy" doplnit Nadpis a text tlačítka — bez toho zůstane span
prázdný a tohle CSS nemá co zobrazit.
Barva: tmavá (--gp-ink), protože tahle konkrétní fotka má světlé
krémové pozadí — bílý text jako u tmavších bannerů dole by tu byl
špatně čitelný. Pokud přibudou další slidy s tmavým pozadím, bude
nutné barvu doladit zvlášť pro ně.
--------------------------------------------------------------- */
body.type-index .wide-carousel .item {
position: relative !important;
}
body.type-index .wide-carousel .extended-banner-texts {
position: absolute !important;
inset: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
text-align: left !important;
padding: 0 5% 0 calc(64px + 10%) !important;
max-width: 46% !important;
box-sizing: border-box !important;
}
body.type-index .wide-carousel .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-h1) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--gp-on-photo) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 20px !important;
display: block !important;
}
body.type-index .wide-carousel .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 .wide-carousel .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.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 MOBIL — kulaté miniatury v jedné řadě (podle vzoru exalted.com)
Nahrazuje dřívější 2/1-sloupcové karty jednou řadou 4 koleček.
⚠ Obrázky (.benefitBanner__img) jsou teď ploché černé ikony
(siluety legín/šortek...), ne fotky. Pro vzhled jako u vzoru je
potřeba v administraci nahradit tyhle ikony za čtvercové FOTKY
oblečení/modelky — bez výměny bude v kolečku černá silueta na
krémovém pozadí místo fotky. CSS níže je připravené na obojí.
--------------------------------------------------------------- */
@media (max-width: 900px) {
body.type-index .benefitBanner.position--benefitHomepage {
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 0 20px !important;
background: transparent !important;
margin-top: 32px !important;
margin-bottom: 32px !important;
}
body.type-index .benefitBanner__item {
flex: 1 1 0 !important;
min-width: 0 !important;
background: transparent !important;
padding: 0 !important;
}
/* Skutečný flex řádek dělá až odkaz UVNITŘ položky
(.benefitBanner__item > a.benefitBanner__link) — proto se
flex-direction musí přepnout tady, ne na __item. Jinak zůstane
kolečko a text vedle sebe, text dostane pár pixelů a zalomí se
písmeno po písmenu. */
body.type-index .benefitBanner__link {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
body.type-index .benefitBanner__picture {
width: clamp(48px, 16vw, 64px) !important;
height: clamp(48px, 16vw, 64px) !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--gp-tile) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.type-index .benefitBanner__img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.type-index .benefitBanner__content {
align-items: center !important;
gap: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
body.type-index .benefitBanner__title {
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
text-align: center !important;
letter-spacing: .02em !important;
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
body.type-index .benefitBanner__data {
display: none !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 , 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 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.products.products-block .product {
flex: 0 0 25% !important;
max-width: 25% !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 900px) {
.products.products-block .product {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
/* Vzor (exalted.com) drží na mobilu 2 sloupce až do nejmenších
šířek — dřívější breakpoint na 480px přepínal na 1 sloupec, což
dělalo hodně dlouhou stránku s malými obrázky. Zrušeno. */
.product,
.product .inner,
.product .img,
.product .descr {
border: none !important;
box-shadow: none !important;
background: transparent !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% - 9px) !important;
max-width: calc(25% - 9px) !important;
}
@media (max-width: 900px) {
.products.products-block .product.highlight-product {
flex: 0 0 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
}
}
@media (max-width: 480px) {
.products.products-block .product.highlight-product {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Ověřeno v DevTools: .highlight-product má uvnitř .inner nativně
display:flex (obrázek a text VEDLE SEBE, ne pod sebou jako
u běžných karet) — proto vypadal stlačený/rozbitý. Přepsáno na
stejné rozložení jako standardní karta (obrázek nahoře přes
celou šířku, text pod ním). */
.product.highlight-product .inner {
display: block !important;
}
.product.highlight-product .img,
.product.highlight-product .descr {
width: 100% !important;
flex: none !important;
}
/* Šedé pozadí + vycpávka kolem fotky u .highlight-product — běžné
karty ho nemají, vypadalo jako "karta v kartě". */
.product.highlight-product,
.product.highlight-product .inner,
.product.highlight-product .img {
background: transparent !important;
padding: 0 !important;
}
/* .highlight-product má navíc prázdný .short-descr mezi jménem
a cenou (běžné karty ho nemají) — způsoboval velkou mezeru. */
.product.highlight-product .short-descr {
display: none !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;
}
/* ===================================================================
3.10 DETAIL PRODUKTU — horní blok (galerie, název, cena, tlačítko)
Diagnostika (ověřeno v DevTools):
.p-detail-inner
> .row
> .col-md-4 (jen H1 nadpis)
> .col-md-8.pull-right.detail-img.p-image-wrapper (galerie)
> .col-md-4.pull-left (popis + formulář: varianta,
cena, tlačítko Do košíku)
> .shp-tabs-wrapper.p-detail-tabs-wrapper (POPIS/DISKUZE, POBO)
Nadpis a formulář jsou DVA samostatné plovoucí sloupce, ne jeden
blok vedle obrázku. Několik CSS pokusů (flex/float/clearfix na
.row, různé úrovně specificity) se ukázalo nespolehlivých —
nativní styl šablony evidentně vyhrával nad pozičními pravidly,
zatímco kosmetická pravidla (cena, tlačítko) se aplikovala
normálně. Pozice teď řeší JS přímo přes inline style s
'important' prioritou (GYMPINK-JS.js) — to vyhraje nad jakýmkoliv
externím CSS pravidlem bez ohledu na jeho specificitu.
Záložky POPIS/DISKUZE (POBO obsah) beze změny.
Bez body.type-index prefixu — platí jen na stránce produktu.
=================================================================== */
/* ZÁLOHA (nezávislá na JS): kdyby JS krok pro nějaký důvod
selhal/neproběhl (např. jiné časování na některých stránkách),
tohle samo o sobě zajistí, že se .row (nadpis+obrázek) "zabalí"
kolem svého plovoucího potomka a nezhroutí se — karta s cenou
pak spadne POD řádek, ne vedle něj do zbylé škvíry.
Jen DESKTOP — na mobilu necháváme nativní chování šablony
(viz poznámka na konci souboru, proč jsme mobilní úpravy detailu
produktu zrušili). */
@media (min-width: 901px) {
.p-detail-inner {
display: block !important;
}
.p-detail-inner > .row {
overflow: hidden !important;
}
}
.p-detail-inner > .row > .col-md-4 h1 {
font-size: var(--gp-fs-h2) !important;
line-height: 1.2 !important;
}
.detail-img.p-image-wrapper img {
width: 100% !important;
height: auto !important;
display: block !important;
}
.p-thumbnails .p-thumbnail {
border: 1px solid transparent !important;
}
/* Diagnostika: náš soubor thumbnaily nikdy nestyloval — ořezávání
dole dělalo nativní Shoptet pravidlo (čtvercový box + object-fit:
cover). Přepnuto na "contain", ať se vejde celá fotka. */
.p-thumbnails .p-thumbnail img {
object-fit: contain !important;
background: var(--gp-tile) !important;
}
.p-thumbnails .p-thumbnail.highlighted {
border: 1px solid var(--gp-ink) !important;
}
.p-short-description {
font-weight: 600 !important;
margin-bottom: 16px !important;
}
/* POZOR: .variant-list.variant-not-chosen-anchor byl dřív omylem
skrytý (display:none) v domnění, že jde o duplicitní varování —
ve skutečnosti je to obal SKUTEČNÉHO funkčního výběru varianty
(velikosti). Skrytí celého obalu znemožnilo vybrat velikost.
NEZKRÝVAT CELÝ .variant-list.
Ověřeno v DevTools: text "Zvolte variantu" pod cenou je JINÝ,
samostatný prvek — placeholder text v poli dostupnosti skladem
(.order-availability .availability .choose-variant.default-variant),
zobrazený jen dokud není vybraná varianta. Po výběru JS přepne na
skutečný stav skladem (jiný span ze stejné skupiny). Bezpečné
schovat JEN tenhle konkrétní text, funkční dropdown nahoře
zůstává nedotčený. */
.order-availability .availability .choose-variant.default-variant {
display: none !important;
}
.p-detail-inner .price.row {
margin: 20px 0 !important;
}
.p-detail-inner .price.row > [class*="col-"],
.p-detail-inner .variant-list > [class*="col-"],
.p-detail-inner .variant-list {
padding-left: 0 !important;
padding-right: 0 !important;
}
.p-final-price-wrapper .price {
font-size: 26px !important;
font-weight: 600 !important;
color: var(--gp-ink) !important;
}
/* Jen DESKTOP — cena+dostupnost vlevo (pod sebou), množství+tlačítko
vedle nich vpravo (svisle vycentrované na výšku obou levých řádků).
.price.row je Bootstrap .row s víc dětmi (shipping-availability,
p-final-price-wrapper, order-availability, spaced-small,
add-to-cart) — místo přeskládávání DOM je přes CSS grid umístíme
do konkrétních buněk podle jejich existující třídy. */
@media (min-width: 901px) {
.p-detail-inner .price.row {
display: grid !important;
grid-template-columns: auto 1fr !important;
column-gap: 32px !important;
row-gap: 4px !important;
align-items: center !important;
}
.p-detail-inner .price.row .shipping-availability {
grid-column: 1 / -1 !important;
}
.p-detail-inner .price.row .p-final-price-wrapper {
grid-column: 1 !important;
grid-row: 2 !important;
}
.p-detail-inner .price.row .order-availability {
grid-column: 1 !important;
grid-row: 3 !important;
}
.p-detail-inner .price.row .spaced-small {
display: none !important;
}
.p-detail-inner .price.row .add-to-cart {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: center !important;
margin-top: -8px !important;
}
}
.add-to-cart {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.add-to-cart .quantity {
align-self: flex-start !important;
}
.add-to-cart .btn.btn-conversion {
width: 100% !important;
flex-grow: 0 !important;
background: var(--gp-ink) !important;
border-color: var(--gp-ink) !important;
color: #fff !important;
padding: 16px 24px !important;
font-size: 15px !important;
border-radius: 4px !important;
}
/* Jen DESKTOP — množství a tlačítko vedle sebe v jedné řádce
(na mobilu zůstává pod sebou, tam to funguje dobře). */
@media (min-width: 901px) {
.add-to-cart {
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.add-to-cart .quantity {
flex: 0 0 auto !important;
align-self: center !important;
}
.add-to-cart .btn.btn-conversion {
width: auto !important;
flex: 1 1 auto !important;
}
}
/* ===================================================================
3.11 KATEGORIE — skrytí popisu pod nadpisem
Diagnostika (ověřeno v DevTools): .category-top obsahuje
h1.category-title (nadpis) a jako sourozence div.category-perex
(odstavec popisu). Skrytí .category-perex nadpisu vůbec nevadí.
=================================================================== */
.category-perex {
display: none !important;
}
/* Tlačítko filtru na stejném řádku jako "Řadit podle" — ČISTĚ CSS.
Diagnostika (DevTools): dřív to řešil JS přesunem #filters-wrapper
do #category-header. Jenže Shoptet si po aplikaci filtru blok sám
překreslí a přesun zahodí (třída gp-filtry-presunuto zmizí) —
layout se pak rozpadl a filtr skočil doprostřed. Řešení bez JS:
.category-content-wrapper je flex a pořadí se řídí `order`, takže
na fyzickém umístění v DOM nezáleží a překreslení nevadí.
display:contents rozpustí obalové divy, aby se tlačítko a panel
staly přímými flex položkami. */
.category-content-wrapper {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 16px !important;
}
/* výchozí: cokoli neznámého jde na konec přes celou šířku */
.category-content-wrapper > * {
order: 9;
flex: 0 0 100%;
}
#filters-wrapper,
#filters-wrapper > .filters-wrapper {
display: contents !important;
}
#filters-default-position {
display: none !important;
}
/* 1. tlačítko filtru vlevo */
.category-content-wrapper .filters-unveil-button-wrapper {
order: 1 !important;
flex: 0 0 auto !important;
}
/* 2. řazení vpravo */
#category-header {
order: 2 !important;
flex: 1 1 auto !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
margin: 0 !important;
}
/* 3. rozbalený panel přes celou šířku pod řádkem */
.category-content-wrapper #filters {
order: 3 !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: none !important;
}
/* zrušit nativní `margin: 0 auto; max-width: 650px` — to centrovalo
posuvník ceny doprostřed stránky */
.category-content-wrapper #filters .slider-wrapper {
margin: 0 !important;
max-width: none !important;
}
/* 4. výpis produktů až za tím */
.category-content-wrapper #products {
order: 4 !important;
flex: 0 0 100% !important;
}
/* ===================================================================
3.12 MOBIL — bannery (pár + velký)
Diagnostika (screenshot, iPhone 390px): na úzké obrazovce se pilulka
CTA u velkého banneru ořízla spodní hranou banneru — titulek + CTA
nemají v poměru 1,92:1 dost výšky. Řešení: na mobilu zmenšit typo
i pilulku a u velkého banneru povolit vyšší poměr stran.
Pár bannerů zůstává vedle sebe (jako vzor), jen s menším textem.
=================================================================== */
@media (max-width: 900px) {
/* Bannery pod sebou přes celou šířku (jako vzor) — vedle sebe byly
na úzké obrazovce moc malé a titulek se pral s CTA tlačítkem. */
body.type-index .gp-banner-pair {
flex-direction: column !important;
gap: 12px !important;
padding: 0 20px !important;
}
body.type-index .gp-banner-pair-item {
flex: 0 0 auto !important;
width: 100% !important;
}
body.type-index .gp-banner-big-wrap {
padding: 0 20px !important;
margin-top: 32px !important;
}
/* Poznámka: dřív tu bylo aspect-ratio: 1.3 (mělo dát víc místa na
titulek a CTA). Způsobilo to ale, že se banner ořízl a titulek
s tlačítkem zmizely — ponecháváme nativní poměr ze sekce 3.8. */
body.type-index .gp-banner-pair-item .extended-banner-title,
body.type-index .gp-banner-big .extended-banner-title {
font-size: clamp(20px, 6vw, 30px) !important;
margin-bottom: 16px !important;
}
body.type-index .gp-banner-pair-item .extended-banner-link,
body.type-index .gp-banner-big .extended-banner-link {
padding: 11px 28px !important;
font-size: 13px !important;
}
body.type-index .gp-banner-pair-item .extended-banner-texts,
body.type-index .gp-banner-big .extended-banner-texts {
padding: 16px !important;
}
}
/* ===================================================================
3.13 MOBIL — hlavička (logo + ikony)
Diagnostika (DevTools, iPhone): Shoptet má vlastní mobilní verzi
hlavičky, kterou aktivuje třídou .ums_mobile_header_v1--on na .
V ní má nativní pravidlo:
@media (max-width:767px) {
:where(.ums_mobile_header_v1--on) #header .site-name {
position: absolute; top: 0;
}
}
Tím logo VYPADNE z našeho gridu (menu | logo | ikony), sedne si
absolutně nahoru vlevo a položí se PŘES ikonu košíku. Ikony tedy
nechyběly — byly celou dobu pod logem.
Řešení: vrátit .site-name do toku (position:static), ať ho grid
umístí doprostřed, a explicitně zajistit viditelnost ikon vpravo.
=================================================================== */
@media (max-width: 900px) {
/* Na mobilu nemá smysl odsazovat hlavičku 30px od horní hrany
(na desktopu "pluje" nad hero fotkou) — sedne rovnou nahoru. */
body.type-index #header {
top: 0 !important;
}
#header .site-name {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
text-align: center !important;
}
.navigation-wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
gap: 8px !important;
}
/* ikony (hledání / účet / košík) — zajistit, že jsou vidět a v řadě */
.navigation-wrapper > .top-nav {
display: flex !important;
visibility: visible !important;
align-items: center !important;
}
#header .nav-list.top-nav-right {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
#header .subnav-left,
#header .subnav-right {
display: flex !important;
visibility: visible !important;
align-items: center !important;
}
/* Logo na mobilu — zvětšeno z 24px na 32px, ať je dobře vidět.
Prostor je: BLOG je na mobilu skrytý (viz níž), takže je vedle
loga jen hamburger a ikony — 32px by se mělo vejít bez kolize. */
.site-name img {
height: 32px !important;
max-height: 32px !important;
}
/* textový odkaz BLOG zabírá na úzké liště moc místa a tlačí logo
do ikon — na mobilu ho schováváme (v hamburger menu zůstává) */
.gp-blog-moved {
display: none !important;
}
}
/* ===================================================================
3.14 MOBIL — čitelnost textu ve vysunutém menu (hamburger)
Diagnostika (screenshot): na homepage je hlavička nad hero fotkou
průhledná, proto má menu bílý text se stínem (sekce 3.0). Vysunuté
mobilní menu má ale BÍLÉ pozadí → bílý text na bílém = nečitelné.
Řešení: v mobilním menu vynutit tmavý text a zrušit stín. Selektor
musí zrcadlit specificitu pravidla ze 3.0, aby ho přebil.
=================================================================== */
@media (max-width: 900px) {
#navigation .menu-level-1 a,
body.type-index #header:not(.gp-scrolled) .menu-level-1 a,
body.type-index #header:not(.gp-scrolled) #navigation .menu-level-1 a {
color: var(--gp-ink) !important;
text-shadow: none !important;
}
/* položky menu v zásuvce pod sebou, oddělené linkou */
#navigation .menu-level-1 {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
#navigation .menu-level-1 li {
display: block !important;
width: 100% !important;
}
#navigation .menu-level-1 a {
display: block !important;
padding: 16px 20px !important;
font-size: 15px !important;
}
}
/* ===================================================================
3.15 MOBIL — logo v patičce na střed a o 20 % větší
Na desktopu zůstává vlevo (zarovnané s prvním sloupcem "Kontakt",
viz sekce 3.7) — tady měníme jen mobilní zobrazení.
=================================================================== */
@media (max-width: 900px) {
/* Centrování přes left/right:0 + margin auto, ne přes
left:50% + translateX(-50%) — ta varianta se s nativním
`left: 32px` prala a logo skončilo useknuté u levého okraje. */
.footer .gp-footer-logo {
left: 0 !important;
right: 0 !important;
transform: none !important;
width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
}
.footer .gp-footer-logo img {
height: 34px !important; /* 28px + 20 % */
}
}
/* ===================================================================
3.16 MOBIL — výpis produktů v kategorii (podle vzoru)
Vzor drží 2 sloupce, obrázek vyplňuje celou šířku dlaždice, pod ním
název a cena čitelnou velikostí. Diagnostika (screenshot /leginy/):
obrázky nevyplňovaly šířku sloupce a texty byly drobné.
=================================================================== */
@media (max-width: 900px) {
.products.products-block .product .img,
.products.products-block .product .img a {
display: block !important;
width: 100% !important;
}
.products.products-block .product .img img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: cover !important;
}
.products.products-block .product a.name {
font-size: 13px !important;
line-height: 1.35 !important;
}
.products.products-block .product .prices {
font-size: 13px !important;
}
/* text pod fotkou trochu odsadit od okraje dlaždice */
.products.products-block .product .descr,
.products.products-block .product .prices {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* filtr + řazení na úzké obrazovce pod sebe, ať se needitují do sebe */
#category-header {
flex-wrap: wrap !important;
}
}
/* ===================================================================
MOBIL — detail produktu: NÁVRAT K NATIVNÍ ŠABLOŇĚ
Po opakovaných pokusech (3.17–3.22 v historii Gitu) se na mobilu
objevil neviditelný prvek, který kradl kliky na tlačítko Do košíku
a výběr varianty — otevíral místo toho fotku z popisu. Příčinu se
nepodařilo spolehlivě najít ani po několika kolech oprav.
Rozhodnutí: na mobilu detail produktu NEUPRAVUJEME vůbec — necháváme
nativní responzivní chování šablony Tango, které si Shoptet sám
odladil. Naše úpravy (rozložení, POBO úklid, velikost tlačítka,
vystředění nákupního panelu) platí JEN pro desktop (min-width:901px).
Pokud se v budoucnu bude chtít mobil znovu stylovat, doporučený
postup: nejdřív najít viníka přes DevTools element picker (kliknout
přímo na postižené místo, ne číst HTML zdroj) — to se v tomhle kole
nestihlo udělat před rozhodnutím vrátit se k nativnímu chování.
=================================================================== */
/* Widget "advantages-four" (JS ho po vytažení zanořeného obsahu
nechá s jediným vyplněným sloupečkem) — jen DESKTOP, ať se stejný
widget na mobilu vykresluje nativně jako zbytek POBO popisu. */
@media (min-width: 901px) {
.rc-advantages-four {
display: flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
align-items: flex-start !important;
}
.rc-advantages-four__ico-container:empty {
display: none !important;
}
#pobo-all-content .widget-container {
max-width: 100% !important;
}
}
/* ===================================================================
MOBIL — vystředění nákupního bloku (varianta, cena, množství)
Opatrně: jen text-align a flex justify-content/margin:auto — ŽÁDNÉ
změny display/position na .p-detail-inner, .row ani cokoli u
galerie/miniatur/POBO popisu (to byl zdroj minulého problému
s kradenými kliky). Pokud se cokoli podobného objeví znovu, tohle
je první podezřelé místo ke zrušení.
=================================================================== */
@media (max-width: 900px) {
.p-detail-inner .price,
.p-detail-inner .p-short-description {
text-align: center !important;
}
.p-detail-inner .variant-list {
display: flex !important;
justify-content: center !important;
}
.p-detail-inner .variant-list > [class*="col-"] {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 280px !important;
}
.p-detail-inner .add-to-cart {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.p-detail-inner .add-to-cart .quantity {
margin: 0 auto 12px !important;
}
}
/* ===================================================================
MOBIL — zvýraznění nativního tlačítka "Do košíku"
Na mobilu se ukazuje jiné (ikonkové) tlačítko než na desktopu:
.btn.btn-icon.btn-plain.btn-cart — má jen ikonu, text "Do košíku"
je uvnitř jako .sr-only (skrytý, jen pro čtečky obrazovky). Bez
viditelného textu nemusí být jasné, že jde o CTA k nákupu.
Řešení: zviditelnit ten existující text (ne přidávat nový) a dát
tlačítku tmavé pozadí + tvar pilulky, ať je nepřehlédnutelné.
Opatrně: jen barvy/tvar/text, žádné display:block na rodičích. */
@media (max-width: 900px) {
.add-to-cart .btn.btn-icon.btn-plain.btn-cart {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 340px !important;
margin: 0 auto !important;
padding: 10px 22px !important;
min-height: 42px !important;
background: var(--gp-ink) !important;
border: none !important;
border-radius: 999px !important;
color: #fff !important;
}
/* zviditelnění existujícího textu "Do košíku" (byl jen pro čtečky) */
.add-to-cart .btn.btn-icon.btn-plain.btn-cart .sr-only {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
color: #fff !important;
}
}
/* MOBIL — dostupnost (Skladem/Vyprodáno) na střed a trochu větší */
@media (max-width: 900px) {
.p-detail-inner .order-availability,
.p-detail-inner .order-availability .availability {
text-align: center !important;
display: block !important;
width: 100% !important;
}
.p-detail-inner .order-availability .choose-variant {
font-size: 15px !important;
font-weight: 600 !important;
}
}
/* ===================================================================
Globální pojistka proti horizontálnímu přetečení + oprava fixed
hlavičky na mobilu
(Znovu obnoveno — omylem smazáno při velké revizi mobilního detailu
produktu, protože bylo fyzicky umístěné ve stejné části souboru.)
Diagnostika (Console, getComputedStyle na #header a jeho předcích):
nejdřív jsme mysleli, že stačí přesunout overflow-x:hidden z
na . Nestačilo — stejná past (nový scrollovací kontext, který
rozbíjí position:fixed) se v mobilních prohlížečích umí objevit
i na , ne jen na kořenovém . Správné řešení: overflow
nedávat na html ANI na body, ale na vnitřní wrapper (.overall-
-wrapper), který hlavičku i obsah obaluje. Ten není transformovaný
ani jinak neobvyklý (ověřeno), takže nemění kontext pro fixed prvky
uvnitř — jen ořízne přetečení.
=================================================================== */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
max-width: 100vw !important;
}
.overall-wrapper {
overflow-x: hidden !important;
}