/* ═══════════════════════════════════════════════════════════════════════════
zahradnapivnica.sk — CSS pre nové komponenty
Verzia 1.0 · 5. 8. 2026
NASADENIE: uložiť ako /css/komponenty.css a načítať AŽ ZA style.css:
Nič neprepisuje existujúce triedy okrem sekcie 1 (typografia) — tá je
zámerná a je označená. Zvyšok používa vlastné názvy tried s prefixom zp-.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* Prevzaté z existujúceho webu, aby sa nič nerozbilo */
--zp-zelena: #47a36e;
--zp-zelena-tmava: #358054;
--zp-zelena-svetla: #e8f4ed;
--zp-text: #2c3e37;
--zp-text-slaby: #6b7b74;
--zp-linka: #dde5e1;
--zp-pozadie: #f7faf8;
--zp-cervena: #b4453a; /* len na upozornenia, nie na CTA */
--zp-radius: 10px;
--zp-radius-velky: 16px;
--zp-tien: 0 2px 8px rgba(44, 62, 55, .08);
--zp-tien-vyrazny: 0 6px 20px rgba(44, 62, 55, .14);
/* E4-oprava r.29: realna vyska = 48 (tlacidlo) + 20 (padding)
+ env(safe-area-inset-bottom, iPhone az 34) — 66 px bolo malo
a lista by prekryla paticku s pravnymi odkazmi (I-62). */
--zp-lista-vyska: calc(68px + env(safe-area-inset-bottom, 0px));
}
/* ═══════════════════════════════════════════════════════════════════════════
1. TYPOGRAFIA — jediná sekcia, ktorá mení existujúce prvky
Dôvod: nameraných 15 px je málo. Cieľovka 45+ rokov.
═══════════════════════════════════════════════════════════════════════════ */
/* E4-oprava r.37/43: vsetko obalene do .zp-nove — inak by nahratie suboru
znamenalo okamzity redizajn celeho webu a flag by nemal zmysel.
E4-oprava r.43: 1rem sa pocita z , nie z body — odseky by zostali 16 px.
Preto px natvrdo. */
.zp-nove body, body.zp-nove {
font-size: 17px;
line-height: 1.65;
color: var(--zp-text);
}
body.zp-nove p, body.zp-nove li { font-size: 17px; }
/* Nadpisy na mobile — dnes 50 px aj na 375 px, čo láme slová */
@media (max-width: 767px) {
body.zp-nove h1 { font-size: 32px; line-height: 1.2; text-align: left; }
body.zp-nove h2 { font-size: 26px; line-height: 1.25; }
body.zp-nove h3 { font-size: 20px; }
}
/* E4-oprava r.53: min-height na inline prehliadac ignoruje a na .btn
by naopak zvacsil vsetky tlacidla temy a posunul layout.
Cielime presne: odkazy v navigacii a paticke dostanu padding,
skutocne tlacidla min-height. */
body.zp-nove nav a, body.zp-nove .block-footer-widget a {
display: inline-block; padding: 11px 0; min-height: 44px;
}
body.zp-nove .zp-btn, body.zp-nove button, body.zp-nove input[type="submit"] {
min-height: 44px;
}
/* ═══════════════════════════════════════════════════════════════════════════
2. TLAČIDLÁ — dnes je hlavné CTA biele s tenkým obrysom
═══════════════════════════════════════════════════════════════════════════ */
.zp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: 52px; padding: 14px 32px;
font-size: 1rem; font-weight: 700; letter-spacing: .02em;
border: 2px solid transparent; border-radius: var(--zp-radius);
text-decoration: none; cursor: pointer;
transition: background-color .18s, box-shadow .18s, transform .18s;
}
.zp-btn--hlavne {
background: var(--zp-zelena); color: #fff; border-color: var(--zp-zelena);
box-shadow: var(--zp-tien);
}
.zp-btn--hlavne:hover,
.zp-btn--hlavne:focus-visible {
background: var(--zp-zelena-tmava); border-color: var(--zp-zelena-tmava);
color: #fff; box-shadow: var(--zp-tien-vyrazny); transform: translateY(-1px);
}
.zp-btn--vedlajsie {
background: #fff; color: var(--zp-zelena-tmava); border-color: var(--zp-zelena);
}
.zp-btn--vedlajsie:hover { background: var(--zp-zelena-svetla); }
.zp-btn--plna-sirka { width: 100%; }
/* Viditeľný focus pre klávesnicu — dnes na webe chýba */
.zp-btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--zp-zelena-tmava);
outline-offset: 2px;
}
.zp-btn__podnadpis {
display: block; font-size: .8rem; font-weight: 400; opacity: .9; margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. CENOVÝ BLOK — dnes je cena holé „7 490€" bez kontextu
═══════════════════════════════════════════════════════════════════════════ */
.zp-cena {
background: var(--zp-pozadie);
border: 1px solid var(--zp-linka);
border-radius: var(--zp-radius-velky);
padding: 22px 24px;
margin: 24px 0;
}
.zp-cena__suma {
display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em;
font-family: Oswald, sans-serif;
font-size: 2.4rem; font-weight: 600; line-height: 1;
color: var(--zp-zelena-tmava);
}
.zp-cena__dph { font-family: inherit; font-size: .95rem; font-weight: 400; color: var(--zp-text-slaby); }
.zp-cena__zoznam { list-style: none; padding: 0; margin: 16px 0 0; font-size: .95rem; }
.zp-cena__zoznam li { position: relative; padding-left: 1.7em; margin-bottom: 6px; }
.zp-cena__zoznam li::before { position: absolute; left: 0; font-weight: 700; }
.zp-cena__zoznam li.je::before { content: "✓"; color: var(--zp-zelena); }
.zp-cena__zoznam li.nie-je::before { content: "✕"; color: var(--zp-cervena); }
.zp-cena__splatky {
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--zp-linka);
font-size: .95rem;
}
.zp-cena__splatky strong { color: var(--zp-zelena-tmava); }
.zp-cena__dodanie { margin-top: 10px; font-size: .9rem; color: var(--zp-text-slaby); }
/* ═══════════════════════════════════════════════════════════════════════════
4. RÝCHLE PARAMETRE — 4 dlaždice pod cenou
═══════════════════════════════════════════════════════════════════════════ */
.zp-parametre {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px; margin: 20px 0;
}
.zp-parameter {
background: #fff; border: 1px solid var(--zp-linka);
border-radius: var(--zp-radius); padding: 14px 12px; text-align: center;
}
.zp-parameter__popis { display: block; font-size: .78rem; text-transform: uppercase;
letter-spacing: .06em; color: var(--zp-text-slaby); margin-bottom: 4px; }
.zp-parameter__hodnota { font-family: Oswald, sans-serif; font-size: 1.35rem;
font-weight: 600; color: var(--zp-text); }
/* ═══════════════════════════════════════════════════════════════════════════
5. BLOK DÔVERY — dnes na webe chýba úplne
═══════════════════════════════════════════════════════════════════════════ */
.zp-dovera {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 18px; margin: 34px 0; padding: 26px;
background: var(--zp-zelena-svetla); border-radius: var(--zp-radius-velky);
}
.zp-dovera__polozka { text-align: center; }
.zp-dovera__ikona { display: block; margin: 0 auto 10px; width: 34px; height: 34px;
color: var(--zp-zelena-tmava); }
.zp-dovera__nadpis { display: block; font-weight: 700; margin-bottom: 4px; }
.zp-dovera__text { font-size: .9rem; color: var(--zp-text-slaby); margin: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
6. ČASOVÁ OS „AKO TO PREBIEHA"
═══════════════════════════════════════════════════════════════════════════ */
.zp-postup { list-style: none; counter-reset: krok; padding: 0; margin: 30px 0; }
.zp-postup__krok {
counter-increment: krok; position: relative;
padding: 0 0 30px 62px; border-left: 2px solid var(--zp-linka); margin-left: 20px;
}
.zp-postup__krok:last-child { border-left-color: transparent; padding-bottom: 0; }
.zp-postup__krok::before {
content: counter(krok);
position: absolute; left: -21px; top: -4px;
width: 40px; height: 40px; border-radius: 50%;
background: var(--zp-zelena); color: #fff;
display: grid; place-items: center;
font-family: Oswald, sans-serif; font-size: 1.15rem; font-weight: 600;
}
.zp-postup__nadpis { font-weight: 700; margin-bottom: 4px; }
.zp-postup__cas { font-size: .85rem; color: var(--zp-zelena-tmava); font-weight: 600; }
.zp-postup__text { margin: 6px 0 0; color: var(--zp-text-slaby); }
/* ═══════════════════════════════════════════════════════════════════════════
7. FIXNÁ MOBILNÁ LIŠTA — najúčinnejšia jediná zmena na mobile
═══════════════════════════════════════════════════════════════════════════ */
.zp-lista {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
display: none; gap: 10px; padding: 10px 12px;
padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iPhone */
background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
border-top: 1px solid var(--zp-linka); box-shadow: 0 -4px 16px rgba(0,0,0,.07);
transform: translateY(110%); transition: transform .25s ease;
}
.zp-lista.je-viditelna { transform: translateY(0); }
.zp-lista .zp-btn { flex: 1; min-height: 48px; padding: 12px 10px; font-size: .95rem; }
@media (max-width: 767px) {
.zp-lista { display: flex; }
/* E4-oprava: padding-bottom priamo v CSS — povodne ho pridaval JS
cez body.ma-listu a pri zlyhani JS lista prekryvala paticku natrvalo. */
body.zp-nove { padding-bottom: var(--zp-lista-vyska); }
}
/* ═══════════════════════════════════════════════════════════════════════════
8. PRODUKTOVÁ KARTA
═══════════════════════════════════════════════════════════════════════════ */
.zp-karta {
display: flex; flex-direction: column; height: 100%;
background: #fff; border: 1px solid var(--zp-linka);
border-radius: var(--zp-radius-velky); overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.zp-karta:hover { box-shadow: var(--zp-tien-vyrazny); transform: translateY(-3px); }
/* E4-oprava r.220: cover orezaval 3D rezy — vysoke kompozicie prisli
o police hore aj dole, teda presne o to, co predava (I-35). */
.zp-karta__obrazok { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; background: var(--zp-pozadie); }
.zp-karta__telo { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.zp-karta__nadpis { font-size: 1.15rem; margin: 0 0 8px; }
.zp-karta__nadpis a { color: var(--zp-text); text-decoration: none; }
.zp-karta__nadpis a:hover { color: var(--zp-zelena-tmava); }
.zp-karta__cena { font-family: Oswald, sans-serif; font-size: 1.5rem; font-weight: 600;
color: var(--zp-zelena-tmava); margin-bottom: 12px; }
.zp-karta__cena small { font-family: inherit; font-size: .75rem; font-weight: 400;
color: var(--zp-text-slaby); }
.zp-karta__parametre { list-style: none; padding: 0; margin: 0 0 16px;
font-size: .9rem; color: var(--zp-text-slaby); }
.zp-karta__parametre li { padding: 3px 0; border-bottom: 1px solid var(--zp-linka); }
.zp-karta__parametre li:last-child { border-bottom: 0; }
.zp-karta__cta { margin-top: auto; }
/* Štítok na karte (napr. „Najpredávanejšia") */
.zp-stitok {
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: var(--zp-zelena); color: #fff;
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
margin-bottom: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════════
9. DROBČEKY
═══════════════════════════════════════════════════════════════════════════ */
.zp-drobceky { padding: 14px 0; font-size: .88rem; }
.zp-drobceky ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4em; padding: 0; margin: 0; }
.zp-drobceky li:not(:last-child)::after { content: "›"; margin-left: .4em; color: var(--zp-text-slaby); }
.zp-drobceky a { color: var(--zp-text-slaby); text-decoration: none; }
.zp-drobceky a:hover { color: var(--zp-zelena-tmava); text-decoration: underline; }
.zp-drobceky [aria-current="page"] { color: var(--zp-text); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════════════════
10. POROVNÁVACIA TABUĽKA
═══════════════════════════════════════════════════════════════════════════ */
.porovnanie-modelov { width: 100%; border-collapse: collapse; font-size: .93rem; }
.porovnanie-modelov caption { text-align: left; padding: 0 0 12px; color: var(--zp-text-slaby); font-size: .85rem; }
.porovnanie-modelov th { background: var(--zp-zelena-svetla); color: var(--zp-text);
text-align: left; padding: 12px 14px; font-weight: 700; white-space: nowrap; }
.porovnanie-modelov td { padding: 12px 14px; border-bottom: 1px solid var(--zp-linka); }
.porovnanie-modelov tbody tr:hover { background: var(--zp-pozadie); }
.porovnanie-modelov .zp-btn { min-height: 40px; padding: 8px 18px; font-size: .88rem; }
/* Prvý stĺpec ostáva viditeľný pri horizontálnom scrollovaní na mobile */
@media (max-width: 767px) {
.porovnanie-modelov th:first-child,
.porovnanie-modelov td:first-child {
position: sticky; left: 0; background: #fff; z-index: 1;
box-shadow: 2px 0 4px rgba(0,0,0,.05);
}
.porovnanie-modelov th:first-child { background: var(--zp-zelena-svetla); }
}
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ═══════════════════════════════════════════════════════════════════════════
11. FORMULÁR
═══════════════════════════════════════════════════════════════════════════ */
.zp-formular label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .93rem; }
.zp-formular .nepovinne { font-weight: 400; color: var(--zp-text-slaby); font-size: .85rem; }
.zp-formular input,
.zp-formular textarea {
width: 100%; min-height: 48px; padding: 12px 14px;
font-size: 16px; /* pod 16px iOS pri fokuse zoomuje */
border: 1px solid var(--zp-linka); border-radius: var(--zp-radius);
background: #fff; margin-bottom: 16px;
}
.zp-formular input:focus, .zp-formular textarea:focus { border-color: var(--zp-zelena); }
.zp-formular textarea { min-height: 110px; resize: vertical; }
.zp-formular__suhlas { display: flex; gap: 10px; align-items: flex-start;
font-size: .88rem; color: var(--zp-text-slaby); margin-bottom: 18px; }
.zp-formular__suhlas input { width: auto; min-height: auto; margin: 3px 0 0; flex-shrink: 0; }
.zp-formular__poznamka { font-size: .85rem; color: var(--zp-text-slaby); margin-top: 12px; }
/* ═══════════════════════════════════════════════════════════════════════════
12. COOKIE LIŠTA — kompaktná, s rovnocenným „Odmietnuť"
═══════════════════════════════════════════════════════════════════════════ */
/* E4-oprava r.192/301: obe listy sedia na bottom a cookies maju vyssi
z-index — prekryli by novu CTA listu. Ked je mobilna lista viditelna,
cookies sa posunu nad nu. */
body.ma-listu .zp-cookies { bottom: calc(var(--zp-lista-vyska) + 12px); }
.zp-cookies {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000;
max-width: 560px; margin: 0 auto; padding: 20px 22px;
background: #fff; border: 1px solid var(--zp-linka);
border-radius: var(--zp-radius-velky); box-shadow: var(--zp-tien-vyrazny);
}
.zp-cookies[hidden] { display: none; }
.zp-cookies__text { font-size: .92rem; margin: 0 0 16px; }
.zp-cookies__tlacidla { display: flex; flex-wrap: wrap; gap: 10px; }
.zp-cookies__tlacidla .zp-btn { flex: 1 1 140px; min-height: 46px; padding: 11px 18px; font-size: .93rem; }
.zp-cookies__odkaz { display: inline-block; margin-top: 12px; font-size: .85rem; color: var(--zp-text-slaby); }
/* ═══════════════════════════════════════════════════════════════════════════
13. NAVIGÁCIA MEDZI MODELMI
═══════════════════════════════════════════════════════════════════════════ */
.zp-susedia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0; }
.zp-susedia__odkaz {
display: block; padding: 16px 18px; text-decoration: none;
border: 1px solid var(--zp-linka); border-radius: var(--zp-radius); color: var(--zp-text);
}
.zp-susedia__odkaz:hover { border-color: var(--zp-zelena); background: var(--zp-pozadie); }
.zp-susedia__smer { display: block; font-size: .8rem; color: var(--zp-text-slaby); margin-bottom: 4px; }
.zp-susedia__nazov { font-weight: 700; }
.zp-susedia__odkaz--dalsi { text-align: right; }
@media (max-width: 575px) { .zp-susedia { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════════
14. MOBIL — poradie prvkov na produktovej stránke
Dnes je na prvej obrazovke nadpis, cena, text a Quatro banner.
Fotka produktu je až pod ohybom.
🔴 REVIDOVANÉ 8. 8. 2026 — TENTO PRÍSTUP NEPOUŽÍVAŤ
Pôvodne som to riešil flexbox `order`, aby sa nemenilo poradie v HTML.
Bola to chyba z dvoch dôvodov:
1. `order` rozdelí videné a čítané poradie — čítačka obrazovky aj poradie
fokusu idú podľa DOM (WCAG 1.3.2 a 2.4.3).
2. Google NERANKUJE podľa toho, či je cena pred fotkou. Jediné, na čom
z poradia záleží, je H1 ako prvý nadpis.
→ Poradie zmeňte priamo v HTML (`pivnica.php`). Pravidlá nižšie sú
ponechané len ako referencia, do produkcie ich nedávajte.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.zp-produkt-hero { display: flex; flex-direction: column; }
.zp-produkt-hero__nadpis { order: 1; }
.zp-produkt-hero__obrazok { order: 2; margin: 16px 0; }
.zp-produkt-hero__cena { order: 3; }
.zp-produkt-hero__cta { order: 4; }
.zp-produkt-hero__popis { order: 5; }
.zp-produkt-hero__splatky { order: 6; }
/* Kontakty v hlavičke zaberajú na mobile pol obrazovky */
.header-kontakty { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
15. PRÍSTUPNOSŤ A TLAČ
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
[data-aos] { opacity: 1 !important; transform: none !important; }
}
.zp-preskocit {
position: absolute; left: -9999px;
background: var(--zp-zelena); color: #fff; padding: 12px 20px; z-index: 1100;
}
.zp-preskocit:focus { left: 12px; top: 12px; }
@media print {
.zp-lista, .zp-cookies, nav, .header-kontakty { display: none !important; }
body { font-size: 12pt; }
}
/* ═══════════════════════════════════════════════════════════════════════════
14. PRODUKTOVY HERO (E7) — styly pre templates/produkt-hero-novy.php
Vsetko su .zp-* triedy, ktore v starom markupe neexistuju.
═══════════════════════════════════════════════════════════════════════════ */
.zp-hero { padding: 28px 0 36px; }
.zp-hero__mriezka { display: grid; gap: 22px; align-items: start; }
@media (min-width: 768px) {
.zp-hero { padding: 56px 0 64px; }
.zp-hero__mriezka { grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
/* na desktope obsah vlavo, foto vpravo — DOM poradie ostava foto-prve kvoli LCP */
.zp-hero__foto { order: 2; }
.zp-hero__obsah { order: 1; }
}
.zp-hero__foto { margin: 0; }
.zp-hero__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.zp-hero__nadpis { font-size: 28px; line-height: 1.2; text-align: left; margin: 0 0 10px; }
@media (min-width: 768px) { .zp-hero__nadpis { font-size: 40px; } }
.zp-hero__veta { font-size: 17px; margin: 0 0 14px; max-width: 56ch; }
.zp-hero__cena { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700;
color: var(--zp-zelena-tmava); margin: 0 0 16px; }
.zp-hero__cena .black { color: var(--zp-text); font-weight: 400; font-size: 17px; }
.zp-btn--velke { width: 100%; min-height: 56px; font-size: 1.05rem; }
@media (min-width: 768px) { .zp-btn--velke { width: auto; padding-left: 34px; padding-right: 34px; } }
.zp-hero__akcia { margin: 0 0 6px; }
.zp-hero__slub { margin: 0 0 16px; color: var(--zp-text-slaby); }
.zp-hero__dokazy { list-style: none; padding: 0; margin: 0 0 20px; }
.zp-hero__dokazy li { padding-left: 26px; position: relative; margin-bottom: 8px; font-size: 16px; }
.zp-hero__dokazy li::before { content: "✓"; position: absolute; left: 0;
color: var(--zp-zelena); font-weight: 700; }
.zp-hero__quatro { border-top: 1px solid var(--zp-linka); padding-top: 16px; }
.zp-hero__quatro img { max-height: 44px; width: auto; }
/* E7-oprava: style.css dava #first-capitol na mobile pozadie cellar-m.webp
(hero homepage z vlny 1). V novom produktovom hero sa pozadie bije
s fotkou produktu a prekryva text. !important je tu zamerne -
povodne pravidlo sedi v media query s rovnakou specificitou. */
#first-capitol.zp-hero { background-image: none !important; }
/* E7: H1 dolava aj proti starym pravidlam cez #id (vyssia specificita) */
#first-capitol.zp-hero .zp-hero__nadpis { text-align: left; }
@media (max-width: 767px) {
#first-capitol.zp-hero .zp-hero__veta,
#first-capitol.zp-hero .zp-hero__cena { text-align: left; }
}
/* E8: "s DPH" pri cene v novom hero — potvrdene majitelom 11. 8. 2026 */
.zp-hero__dph { font-size: .75rem; font-weight: 500; letter-spacing: .04em;
text-transform: uppercase; color: var(--zp-text-slaby); }