/* ==========================================================================
RADOST Z DREVA - kompletny refresh "Teple remeslo" (Warm Craft)
Override CSS na Journal 3 / OpenCart. Deploy: Journal admin Custom CSS,
alebo na staging.
Smer: teply kremovy podklad, serifove nadpisy (Fraunces) + cisty sans
(Inter), terakotovy akcent namiesto cervenej.
Fonty pripaja override.js (Google Fonts).
Sekcie:
[T] tokeny + zaklad (pozadie, typografia)
[1] hlavicka + navigacia (vacsie logo, svetla teola hlavicka)
[2] hero - staticky obrazok, editorialny kremovy panel
[3] kontakt v hero (telefon + mail)
[4] nadpisy sekcii
[5] produktove karty + ceny
[6] tlacidla
[7] banery / bloky / newsletter / paticka
[8] YouTube videa
[9] dockistenie cervenych zvyskov
========================================================================== */
:root {
/* Vzhlad "Lesna tabula" (volba A): espresso drevo, brezove karty, mach, med.
Textura dreva sa dlazdicuje (tex-wood.jpg), aby ostala ostra na kazdej sirke. */
--rz-bg: #241611; /* espresso podklad pod texturou dreva */
--rz-wood: url('design-assets/tex-wood.jpg');
--rz-surface: #2f1f17; /* svetlejsie espresso pre listy/pruhy */
--rz-card: #efe6d1; /* breza - produktove karty, svetle panely */
--rz-ink: #2b2016; /* tmavy text NA brezovych kartach */
--rz-muted: #dccbb2; /* tlmeny svetly text NA tmavom podklade (svetlejsi pre citatelnost) */
--rz-muted-ink: #5c4c3a; /* tlmeny tmavy text NA kartach */
--rz-cream: #f3ead7; /* svetly text NA espresso podklade */
--rz-acc: #77a230; /* mach - hlavny akcent */
--rz-acc-dark: #557a20; /* tmavy mach (hover) */
--rz-acc-soft: #a7c24d; /* limetkovy mach (eyebrow, hover na tmavom) */
--rz-pine: #c8a165; /* medove drevo - sekundarny akcent */
--rz-line: #ddceb0; /* okraj na brezovych kartach */
--rz-white: #ffffff; /* biele logo a ikony v navigacnej liste */
--rz-line-d: #3c2c21; /* okraj na tmavom (hlavicka, footer) */
--rz-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--rz-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--rz-gap: 36px; /* polovica zvislej medzery medzi sekciami [RHYTHM] */
}
/* --------------------------------------------------------------------------
[T] ZAKLAD - pozadie a typografia
-------------------------------------------------------------------------- */
/* podklad = dlazdicovana textura espresso dreva (ostra na kazdej sirke),
vnutorne kontajnery priehladne, nech drevo presvita celou strankou */
body {
background: #2a1d18 var(--rz-wood);
background-size: 1000px;
background-repeat: repeat;
font-family: var(--rz-font-body);
color: var(--rz-cream);
}
.container,
#common-home,
.layout-1,
.main-columns,
#content,
.top-row,
#bottom {
background-color: transparent;
}
/* body text elements -> Inter */
p, li, a, span, td, th, label, input, textarea, select, button,
.subtitle, .description, .product-thumb .name, .price, .links-text {
font-family: var(--rz-font-body);
}
/* nadpisy -> Fraunces */
h1, h2, h3, h4, h5,
.title-wrapper h3,
.title module-title,
.module-title h3,
.product-thumb .caption .name,
.product-thumb .name a {
font-family: var(--rz-font-display) !important;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--rz-cream);
}
a { color: var(--rz-cream); }
a:hover { color: var(--rz-acc-soft); }
/* --------------------------------------------------------------------------
[1] HLAVICKA + NAVIGACIA
Svetla teola hlavicka; logo velke (z povodnej upravy). Horny pruh espresso.
-------------------------------------------------------------------------- */
/* logo velkost - vacsie ako povodnych 103px, ale musi sa zmestit vedla 6
dlhych polozidiek menu + kosika do 1320px kontajnera temy. */
.desktop-header-active .header .desktop-logo-wrapper { width: 205px; flex: 0 0 205px; }
.desktop-header-active .header .mid-bar,
.desktop-header-active .header-sm .mid-bar { height: 100px; }
.desktop-header-active .header #logo a { padding-top: 8px; padding-bottom: 8px; }
.desktop-header-active .header #logo img { width: 100%; height: auto; }
/* Responzivne zmensovanie - vyssia specificita (.desktop-header-active), aby
prebilo zakladne pravidlo menu nizsie bez ohladu na poradie v subore. */
@media (max-width: 1400px) {
.desktop-header-active .header .desktop-logo-wrapper { width: 186px; flex-basis: 186px; }
.desktop-header-active .main-menu > .j-menu > li > a { font-size: 12px; padding-left: 6px; padding-right: 6px; }
}
/* Lista cez celu sirku stranky (theme ich mal max-width:1320px a centrovane,
co po pridani pozadia vyzeralo uzsie ako full-bleed hero). Pozadie roztiahneme
na celu sirku, obsah drzime zarovnany na povodnu 1320px sirku cez padding. */
.header .mid-bar,
.header-compact .mid-bar,
.header .top-bar,
.header-compact .top-bar {
max-width: none !important;
width: 100% !important;
padding-left: max(15px, calc(50vw - 660px)) !important;
padding-right: max(15px, calc(50vw - 660px)) !important;
}
/* svetla stredna lista */
.header .mid-bar,
.header-compact .mid-bar {
background: var(--rz-surface) !important;
border-bottom: 1px solid var(--rz-line-d);
}
/* horny tenky pruh - espresso */
.header .top-bar,
.header-compact .top-bar {
background: var(--rz-ink) !important;
}
.header .top-bar a, .header .top-bar .links-text { color: #efe7d9 !important; }
.header .top-bar a:hover .links-text { color: var(--rz-acc) !important; }
/* hlavne menu - tmavy ink text, terakotovy hover, jednotne velke pismena */
.main-menu > .j-menu > li > a {
font-size: 13px;
font-weight: 600;
color: var(--rz-cream) !important;
text-transform: uppercase;
letter-spacing: .01em;
}
/* [NAV] hlavne menu vpravo (nie v strede), s medzerou pred hladanim/kosikom.
Menu dostane margin-left:auto (odtlaci ho doprava). Skupina kosika ma
z temy tiez auto-margin -> volny priestor by sa rozdelil na dve, preto jej
auto-margin zrusime, aby menu sadlo tesne (s medzerou) ku kosiku. */
.desktop-header-active .header .desktop-main-menu-wrapper {
margin-left: auto !important;
flex: 0 0 auto !important;
margin-right: 36px !important;
}
.desktop-header-active .header .header-cart-group { margin-left: 0 !important; }
/* [NAV] zvyraznena polozka "Naša tvorba" - terakotovy pill.
line-height musi byt > 1, inak sa orezava macik na Š. */
.main-menu > .j-menu > li.rz-nav-cta { display: flex; align-items: center; margin-left: 8px; }
.main-menu > .j-menu > li.rz-nav-cta > a {
background: var(--rz-acc) !important;
color: #fff !important;
/* !important je nutne: tema zaobluje poslednu polozku menu len sprava
(0 10px 10px 0), takze bez neho ostane lava strana CTA hranata. */
border-radius: 8px !important;
padding: 9px 20px !important;
height: auto !important;
align-self: center;
line-height: 1.35 !important;
font-weight: 700;
}
.main-menu > .j-menu > li.rz-nav-cta > a .links-text,
.main-menu > .j-menu > li.rz-nav-cta > a:hover .links-text { color: #fff !important; }
.main-menu > .j-menu > li.rz-nav-cta > a:hover,
.main-menu > .j-menu > li.rz-nav-cta:hover > a {
background: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* [NAV] fallback: skry lavu cast horneho pruhu (JS ju aj odstrani) */
.top-bar .top-menu-2 { display: none !important; }
/* top-bar ma reverznu flex-orientaciu -> normalizujeme na row a rozlozime:
kontakt vlavo (order 1), ucet-menu vpravo (order 3, margin-left auto). */
.top-bar { flex-direction: row !important; }
.top-bar .third-menu { margin-left: auto !important; order: 3; }
.top-bar .language-currency { order: 2; }
/* [NAV] telefon + email v lavej casti horneho pruhu */
.rz-topbar-contact {
order: 1;
display: flex;
align-items: center;
gap: 22px;
}
.rz-topbar-contact a {
color: #e7ddcd !important;
font-family: var(--rz-font-body) !important;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 7px;
}
.rz-topbar-contact a:hover { color: var(--rz-acc) !important; }
.rz-topbar-contact .fa { color: var(--rz-acc) !important; font-size: 12px; }
.rz-topbar-contact .fa::before { color: var(--rz-acc) !important; }
@media (max-width: 760px) { .rz-topbar-contact { display: none; } }
.main-menu > .j-menu > li > a:hover,
.main-menu > .j-menu > li:hover > a { color: var(--rz-acc) !important; }
/* ikony (hladanie, kosik) v hlavicke - ink.
Glyfy su kreslene cez ::before (theme ich mal biele -> splyvali s kremovou
listou), takze farbime aj pseudo-elementy. */
.header .mid-bar .fa,
.header .mid-bar [class^="icon-"],
.header .search-toggle-btn,
.header .cart-heading,
.header .mid-bar .fa::before,
.header .mid-bar [class^="icon-"]::before,
.header-cart-group .fa::before,
.header-cart-group .dropdown-toggle::before,
.header-cart-group [class*="search"]::before,
.header .search-trigger::before {
color: var(--rz-cream) !important;
}
/* hover -> terakota */
.header-cart-group .fa:hover::before,
.header-cart-group .dropdown-toggle:hover::before,
.header .search-trigger:hover::before { color: var(--rz-acc) !important; }
/* pocitadlo kosika (nenulove) - terakotova bublina, biele cislo */
.header-cart-group .count-badge:not(.count-zero) { color: #fff !important; }
/* --------------------------------------------------------------------------
[1m] MOBILNA HLAVICKA
Na mensich sirkach tema prepne na vlastnu .mobile-header (tmava bridlicova
lista, biele ikony, modre/cervene akcenty v zasuvke). Prefarbime ju na
kremovu listu + ink/terakota, aby sedela s desktopovou hlavickou.
-------------------------------------------------------------------------- */
/* mobilna hlavicka prilepena navrch pri scrollovani.
Temova sticky logika (JS .is-sticky) na mobile nedrzala; position:sticky
zlyhalo kvoli overflow/transform na predkoch, preto fixed + kompenzacia
vysky (padding-top na obal), aby obsah nezmizol pod listou. */
.mobile-header-active header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 300 !important;
}
.mobile-header-active .site-wrapper { padding-top: 60px !important; }
/* sticky mobilna lista - kremova namiesto bridlicovej */
.mobile-header-active .mobile-bar,
.mobile-header-active .mobile-bar.sticky-bar,
.mobile-header-active .mobile-1 .mobile-bar,
.mobile-header-active .mobile-2 .mobile-bar {
background: var(--rz-surface) !important;
box-shadow: none !important;
border-bottom: 1px solid var(--rz-line-d) !important;
}
/* hamburger + ikony hladania a kosika v mobilnej liste -> ink, hover terakota */
.mobile-header-active .menu-trigger::before,
.mobile-header-active .menu-trigger button span,
.mobile-header-active .mobile-bar .fa,
.mobile-header-active .mobile-bar .fa::before,
.mobile-header-active .mini-search .search-trigger::before,
.mobile-header-active #cart > a > i,
.mobile-header-active #cart > a > i::before,
.mobile-header-active .mini-cart .dropdown-toggle::before {
color: var(--rz-cream) !important;
}
.mobile-header-active .menu-trigger button span {
font-family: var(--rz-font-body) !important;
}
/* pocitadlo kosika - terakotova bublina, biele cislo */
.mobile-header-active .count-badge:not(.count-zero) {
background: var(--rz-acc) !important;
color: #fff !important;
}
/* logo v mobilnej liste - trochu vacsie bez zvysenia vysky listy.
Zmensime padding kotvy a nastavime vyssi obrazok (25px -> 31px), stale
sa zmesti do 60px listy (31 + 2*13 = 57). */
.mobile-header-active .mobile-logo-wrapper #logo img {
height: 31px !important;
width: auto !important;
max-width: none !important;
}
.mobile-header-active .mobile-logo-wrapper #logo a { padding: 13px 10px !important; }
/* --- vysuvna zasuvka (off-canvas menu) --- */
/* hlavicka zasuvky (MENU + zavriet) - espresso namiesto bridlicovej */
.mobile-header-active .mobile-wrapper-header {
background: var(--rz-ink) !important;
box-shadow: none !important;
}
.mobile-header-active .mobile-wrapper-header > span { color: #efe7d9 !important; }
.mobile-header-active .mobile-wrapper-header > a::before { color: #efe7d9 !important; }
/* polozky menu v zasuvke - Inter, ink text, terakotovy hover/aktiv */
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu > li > a,
.mobile-header-active .mobile-main-menu-container .main-menu.accordion-menu .j-menu > li > a {
font-family: var(--rz-font-body) !important;
color: var(--rz-ink) !important;
}
.desktop .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu > li:hover > a,
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu > li.active > a,
.desktop .mobile-header-active .mobile-main-menu-container .main-menu.accordion-menu .j-menu > li:hover > a,
.mobile-header-active .mobile-main-menu-container .main-menu.accordion-menu .j-menu > li.active > a {
color: var(--rz-acc) !important;
}
/* pod-polozky (druha uroven) - tlmena farba */
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu > li > a,
.mobile-header-active .mobile-main-menu-container .main-menu.accordion-menu .j-menu .j-menu > li > a {
font-family: var(--rz-font-body) !important;
color: var(--rz-muted) !important;
}
/* ikonky pred polozkami + rozbalovaci indikator -> terakota */
.mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu > li > a::before,
.mobile-header-active .mobile-main-menu-container .main-menu.accordion-menu .j-menu > li > a::before,
.mobile-main-menu-wrapper .main-menu .accordion-menu-item.open > a > .open-menu i::before,
.mobile-main-menu-wrapper .main-menu .menu-item.open > a > .open-menu[aria-expanded='true'] i::before {
color: var(--rz-acc) !important;
}
/* CTA "Nakupovat" v zasuvke - drz terakotovy pill aj v accordion menu */
.mobile-main-menu-wrapper .main-menu .j-menu > li.rz-nav-cta > a,
.mobile-header-active .mobile-main-menu-container .main-menu .j-menu > li.rz-nav-cta > a {
color: #fff !important;
}
/* --------------------------------------------------------------------------
[2] HERO - staticky obrazok, teply editorialny panel zlava
Slider skryva override.js; obrazok drzi background. Kremovy gradient
zlava vytvara editorialny "split" pocit s tmavym serifovym nadpisom.
-------------------------------------------------------------------------- */
.module-master_slider-242 {
position: relative;
/* hlavicka ma margin-bottom:-80px (Journal "prekryvna hlavicka") a tahala hero
pod lepkavu navigaciu - vrch mapy sa skryval. Tlacime hero nadol, nech je pod nav. */
margin-top: 80px;
aspect-ratio: 1600 / 661; /* nizsi hero -> zhora ~62% obrazka = cela mapa,
spodok (kopa dielikov) odrezany */
/* obrazok nastaveny tu v CSS (nie cez JS inline styl) - inak ho MasterSlider
pri inicializacii prepise a hero na chvilu zbliknem/zmizne */
/* zakladny obrazok - prepisuju ho [H2] (PC) a mobilne pravidlo nizsie,
takze sa reálne nikdy nezobrazi sam; drzime ho na rovnakom motive, aby
pri zmene kaskady neblysol stary drevenny hero. */
background-image: url('design-assets/hero-stone-real.jpg?v=202608271850') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--rz-bg);
}
.module-master_slider-242 .master-slider,
.module-master_slider-242 .journal-loading,
.module-master_slider-242 > img { display: none !important; }
/* kremovy gradient zlava (svetly editorialny panel) */
.module-master_slider-242::before {
content: "";
position: absolute;
inset: 0;
/* dva prekryvy: (1) zlava tmavy pre citatelnost textu, celkovo drzi mapu v
espresso tone aby sadla do tmavej temy; (2) zdola stmavenie -> plynuly
prechod do machoveho pasu/tela, nie ostra hrana svetla/tma */
background:
linear-gradient(90deg, rgba(20,12,8,0.86) 0%, rgba(20,12,8,0.62) 30%, rgba(20,12,8,0.16) 58%, rgba(20,12,8,0) 78%),
linear-gradient(180deg, rgba(20,12,8,0) 55%, rgba(20,12,8,0.55) 100%);
pointer-events: none;
}
@media (max-width: 760px) {
/* mobil: plna mapa hore (na celu sirku), text pod nou - hero 3:2 by bol prinizky
na prekryvny text, tak ho ulozime pod obrazok. (Prepis .rz-hero-inner je
nizsie za jeho zakladnym pravidlom, aby vyhral v kaskade.) */
.module-master_slider-242 {
margin-top: 0; /* mobilna hlavicka nema prekryv - nadol netlacime */
aspect-ratio: auto; height: auto;
/* na mobile vlastny orez: mapa v strede, nie zarazena vpravo.
!important je nutne - zakladne pravidlo vyssie ma cover !important */
background-image: url('design-assets/hero-stone-mob-real.jpg?v=202608271850') !important;
background-size: 100% auto !important;
background-repeat: no-repeat !important;
background-position: top center !important;
padding-top: 56.7vw; /* cela vyska obrazka (1200x680 -> 680/1200*100vw) */
}
.module-master_slider-242::before { display: none; }
}
.rz-hero-inner {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1300px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 64px);
}
/* eyebrow nad nadpisom */
.rz-hero-inner::before {
content: "Ručne opracované drevo";
font-family: var(--rz-font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rz-acc-soft);
margin-bottom: 18px;
}
.rz-hero-tagline {
margin: 0 0 26px;
max-width: 15ch;
font-family: var(--rz-font-display) !important;
font-weight: 500;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--rz-cream);
text-shadow: 0 2px 22px rgba(12,7,4,.5);
}
/* --------------------------------------------------------------------------
[3] KONTAKT V HERO
Presunute moduly module-button-274 (tel) a -275 (mail).
-------------------------------------------------------------------------- */
.module-master_slider-242 .grid-row-top-3 { padding: 0; }
.module-master_slider-242 .grid-row-top-3 .grid-cols { display: flex; flex-wrap: wrap; gap: 12px; }
.module-master_slider-242 .grid-row-top-3 .grid-col { width: auto; padding: 0; }
.module-master_slider-242 .grid-row-top-3 .grid-item { padding: 0; margin: 0; }
.module-master_slider-242 .module-button .btn {
font-size: 17px;
font-weight: 600;
padding: 13px 28px;
min-height: 56px;
border-radius: 10px;
border: 0;
}
/* telefon - plna terakota */
.module-master_slider-242 .module-button-274 .btn { background: var(--rz-acc); color: #fff; }
.module-master_slider-242 .module-button-274 .btn:hover { background: var(--rz-acc-dark); color: #fff; }
/* mail - obrys ink */
.module-master_slider-242 .module-button-275 .btn {
background: transparent; color: var(--rz-cream); border: 1.5px solid rgba(243,234,215,.5);
}
.module-master_slider-242 .module-button-275 .btn:hover { background: var(--rz-cream); color: var(--rz-ink); }
.module-master_slider-242 .module-button .btn:focus-visible { outline: 3px solid var(--rz-acc); outline-offset: 2px; }
@media (max-width: 760px) {
/* text hero pod obrazkom (v toku, nie prekryv) - musi byt az za zakladnym
.rz-hero-inner pravidlom, aby prebilo position:absolute */
.rz-hero-inner {
position: static; inset: auto; max-width: none;
padding: 26px 20px 34px;
background: var(--rz-bg); /* nepriehladny krem prekryje spodok obrazka pod pasom mapy */
}
.rz-hero-inner::before { margin-bottom: 12px; }
.rz-hero-tagline { max-width: none; }
.module-master_slider-242 .grid-row-top-3 .grid-cols { flex-direction: column; align-items: stretch; }
.module-master_slider-242 .module-button .btn { width: 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
[4] NADPISY SEKCII - Fraunces + terakotovy divider
-------------------------------------------------------------------------- */
.title-wrapper h3,
.title-module h3 {
font-family: var(--rz-font-display) !important;
font-weight: 500;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.01em;
color: var(--rz-cream);
text-transform: none;
}
.title-divider,
.title-wrapper .title-divider {
background: var(--rz-acc) !important;
height: 3px;
}
.title-wrapper .subtitle,
.subtitle { color: var(--rz-muted); font-size: 15px; line-height: 1.65; }
/* --------------------------------------------------------------------------
[5] PRODUKTOVE KARTY + CENY
-------------------------------------------------------------------------- */
.product-thumb {
position: relative;
background: var(--rz-card) !important; /* breza (tema tlacila bielu) */
border: 1px solid var(--rz-line);
/* !important je nutne - tema prebijala nasu hodnotu: na PC dala 8px,
na mobile 0px, takze karty na telefone boli hranate. */
border-radius: 8px !important;
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.product-thumb .caption { background: transparent !important; }
/* obrazkova cast karty na brezu (nie biela) - ak fotka nevyplni cely ramik,
medzera splynie s kartou namiesto bielej skvrny */
.product-thumb .image,
.product-thumb .image a,
.product-thumb .img-responsive { background: var(--rz-card) !important; }
.product-thumb { box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.product-thumb:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.46); transform: translateY(-3px); }
/* [MOBIL] na telefone ziadne nadvihnutie karty - dotyk necha :hover visiet
a karta ostane posunuta hore. Tien ponechavame, ruta sa len posun. */
@media (max-width: 760px) {
.product-thumb:hover { transform: none; }
}
/* [NO-SWAP] pri hoveri karty NEPREPINAT na druhy obrazok - stale drzime prvy.
Tema pri :hover skryje vsetky img a zobrazi .img-second; my prvy necham
viditelny a druhy uplne skryjem. */
.product-thumb:hover .has-second-image img.img-first { visibility: visible !important; opacity: 1 !important; }
.product-thumb .has-second-image img.img-second,
.product-thumb:hover .has-second-image img.img-second { visibility: hidden !important; opacity: 0 !important; }
.product-thumb .caption { padding: 14px 16px 18px; }
/* text a odkazy vnutri karty su na svetlej breze -> tmavy ink (nie svetly default) */
.product-thumb .caption,
.product-thumb .caption a,
.product-thumb .caption span,
.product-thumb .caption div,
.product-thumb .description { color: var(--rz-ink); }
.product-thumb .caption a:hover { color: var(--rz-acc-dark); }
.product-thumb .name a {
font-family: var(--rz-font-display) !important;
font-weight: 500;
font-size: 16px;
color: var(--rz-ink) !important; /* tmavy text na brezovej karte (prebija svetly default) */
}
.product-thumb .name a:hover { color: var(--rz-acc-dark) !important; }
/* nazov aj ako obycajny text (napr. karusel "Najoblubenejsie") - vzdy ink na breze */
.product-thumb .name,
.product-thumb .caption .name { color: var(--rz-ink) !important; }
/* ceny -> mach (tmavsi odtien pre kontrast na breze) */
.price, .price-normal, .price-new, .product-thumb .price {
color: var(--rz-acc-dark) !important;
font-family: var(--rz-font-body);
font-weight: 700;
}
.price-old { color: var(--rz-muted-ink) !important; }
/* NAJ / zlavovy stitok -> maly terakotovy pill v rohu (nie pas cez celu kartu) */
.product-thumb .product-label {
position: absolute !important;
top: 10px; right: 10px; left: auto; bottom: auto;
width: 44px !important;
height: 44px !important;
min-width: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--rz-acc) !important;
color: #fff !important;
padding: 0 !important;
border-radius: 50% !important;
font-family: var(--rz-font-body) !important;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
box-shadow: 0 2px 8px rgba(44,38,32,.2);
z-index: 4;
}
.product-thumb .product-label b {
background: transparent !important;
color: #fff !important;
padding: 0 !important;
font-weight: 700;
border-radius: 0 !important;
}
/* karusel "Najoblubenejsie" (.side-product) - breza + ink text namiesto bielej */
.side-product { background: var(--rz-card) !important; border: 1px solid var(--rz-line); border-radius: 10px; }
.side-product .name, .side-product .name a,
.side-product .caption, .side-product .caption a { color: var(--rz-ink) !important; }
.side-product .name a:hover { color: var(--rz-acc-dark) !important; }
.side-product .price, .side-product .price-new,
.side-product .price-normal { color: var(--rz-acc-dark) !important; }
/* --------------------------------------------------------------------------
[L] ROZLOZENIE KATEGORII (vybrany layout "copy 02")
Kazda sekcia je 2-stlpcovy Journal grid (nadpis+video | produkty+baner).
Prestavame na stack: nadpis / bar / produkty / video pas.
(Vyuziva CSS :has() - podpora v modernych prehliadacoch.)
-------------------------------------------------------------------------- */
/* skrateny podnadpis - inline "precitat viac" */
.title-module .subtitle { max-width: 80ch; margin-left: auto; margin-right: auto; }
.title-module .rz-readmore {
color: var(--rz-acc); text-decoration: underline; text-underline-offset: 2px;
cursor: pointer; font-weight: 600; white-space: nowrap;
}
.title-module .rz-readmore:hover { color: var(--rz-acc-dark); }
/* stack + preusporiadanie stlpcov: nadpis(1) -> produkty(3) -> video(2); baner(4) skryty */
.grid-cols:has(> .grid-col .module-products) { display: flex !important; flex-direction: column; }
.grid-cols:has(> .grid-col .module-products) > .grid-col { width: 100% !important; max-width: none !important; }
.grid-cols:has(> .grid-col .module-products) > .grid-col:nth-child(1) { order: 1; }
.grid-cols:has(> .grid-col .module-products) > .grid-col:nth-child(3) { order: 2; }
.grid-cols:has(> .grid-col .module-products) > .grid-col:nth-child(2) { order: 3; }
.grid-cols:has(> .grid-col .module-products) > .grid-col:nth-child(4) { display: none !important; }
/* kategorie bar (nav-tabs) -> biely pas: lavy stitok + prave tlacidlo */
/* priehladny "toolbar" namiesto prazdnej brezovej krabice: stitok vlavo,
tlacidlo vpravo, jemna machova/tmava linka pod nim */
.tab-container .nav-tabs {
background: transparent; border: 0; border-bottom: 1px solid var(--rz-line-d); border-radius: 0; overflow: visible;
display: flex !important; align-items: center; justify-content: space-between;
padding: 0 2px 12px 2px; min-height: 0; margin-bottom: 24px;
}
.tab-container ul.nav-tabs > li { margin: 0; float: none; border: 0 !important; }
/* tab-1 = nazov kategorie. Opakoval nadpis sekcie hned nad sebou, preto prec.
(Predtym tu bol stitok s machovou ciarkou - cely predpis uz netreba.) */
.tab-container ul.nav-tabs > li.tab-1 { display: none !important; }
/* tlacidlo "Všetky ..." ostava same, takze ide dolava k lavej hrane sekcie.
Tema ho tlacila doprava cez margin-left:auto (na PC to vychadzalo ~1024px). */
.tab-container .nav-tabs { justify-content: flex-start !important; }
/* na mobile dava tema polozkam rovnaky diel sirky - ked ostane tab-2 sam,
roztiahol by sa na celu sirku. Necháme ho siroky presne na svoj text. */
.tab-container ul.nav-tabs > li.tab-2 {
margin-left: 0 !important;
flex: 0 0 auto !important;
width: auto !important;
}
.tab-container ul.nav-tabs > li.tab-2 > a { width: auto !important; }
/* tab-2 (Vsetky ...) - plne terakotove tlacidlo */
.tab-container ul.nav-tabs > li.tab-2 > a,
.tab-container ul.nav-tabs > li.tab-2.active > a,
.tab-container ul.nav-tabs > li.tab-2 > a:hover,
.tab-container ul.nav-tabs > li.tab-2 > a:focus {
background: var(--rz-acc) !important; color: #fff !important; border: 0 !important;
display: flex; align-items: center; padding: 10px 22px !important; height: auto !important;
border-radius: 9px !important;
font-family: var(--rz-font-body) !important; font-weight: 600; font-size: 13.5px;
white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.tab-container ul.nav-tabs > li.tab-2 > a:hover { background: var(--rz-acc-dark) !important; color: #fff !important; }
/* skryjeme temovu ikonu (::before) v tlacidle Vsetky - copy 02 ma len text */
.tab-container ul.nav-tabs > li.tab-2 > a::before,
.tab-container ul.nav-tabs > li.tab-2 > a::after { display: none !important; content: none !important; }
/* KONCEPT E: video karta vlavo (obsah), obrysove tlacidlo "Všetky ..." vpravo
(akcia). Prvky nesuperia - karta je plna, akcia je len obrys. "Všetky ..."
sa presuva sem, preto sa v liste kategorie tab-2 skryva (viz nizsie). */
/* jednotny odstup video riadku od produktov. Theme mal pri niektorych
sekciach (pexeso) na tomto stlpci padding-top (55px z Journal layoutu),
preto bola medzera nekonzistentna - vynulujeme ho. */
.grid-cols:has(> .grid-col .module-products) > .grid-col:nth-child(2) {
margin-top: 24px;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.grid-items.rz-e-row {
display: flex; flex-direction: row; flex-wrap: nowrap;
align-items: center; justify-content: space-between; gap: 24px;
}
.grid-items.rz-e-row > .grid-item,
.grid-items.rz-e-row .module-gallery,
.grid-items.rz-e-row .module-body,
.grid-items.rz-e-row .module-item { width: fit-content; height: 100%; margin: 0; padding: 0; min-width: 0; }
.grid-items.rz-e-row .module-body { display: block; }
.grid-items.rz-e-row .lightgallery { display: none; }
/* video karta */
.grid-items.rz-e-row .rz-video-link {
display: flex; align-items: center; justify-content: flex-start; gap: 18px; height: 112px;
background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 12px;
padding: 11px 26px 11px 11px; overflow: hidden; box-shadow: none;
transition: box-shadow .2s ease, border-color .2s ease;
}
.grid-items.rz-e-row .rz-video-link:hover { box-shadow: 0 12px 26px rgba(44,38,32,.12); border-color: #d9cdb6; }
.grid-items.rz-e-row .rz-video-link:hover .rz-video-caption { color: var(--rz-acc); }
/* nahlad: vyrez z hornej casti fotky (cerveny YT gombik je v strede stvorca -
zoom navrch ho odreze, funguje pre kazdu kategoriu) */
.grid-items.rz-e-row .rz-video-link .gallery-image {
position: relative; width: 158px; height: 100%; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
}
.grid-items.rz-e-row .rz-video-link .gallery-image::before {
content: ""; position: absolute; inset: 0; background: rgba(44,38,32,.16); z-index: 1;
}
.grid-items.rz-e-row .rz-video-link .gallery-image::after { display: none !important; content: none !important; }
.grid-items.rz-e-row .rz-video-link .gallery-image img {
position: absolute; top: 0; left: 50%; margin-left: -80%; transform: none;
width: 160%; height: auto; max-width: none; object-fit: unset;
}
/* play kruh NA nahlade */
.grid-items.rz-e-row .rz-video-link .rz-play {
position: absolute; inset: 0; margin: auto; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
background: rgba(119,162,48,.96); display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.grid-items.rz-e-row .rz-video-link .rz-play::after {
content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px;
}
/* popisok "Pozrieť video" */
.grid-items.rz-e-row .rz-video-link .rz-video-caption {
position: static; transform: none; background: none; color: var(--rz-ink);
display: flex; align-items: center; padding: 0;
font-family: var(--rz-font-display); font-weight: 500; font-size: 18px; letter-spacing: 0;
text-transform: none; text-shadow: none; white-space: nowrap; transition: color .15s ease;
}
/* obrysove tlacidlo "Všetky ..." vpravo od videa (akcia). Lista kategorie
ostava povodna aj so svojim tlacidlom - toto je druhe, pri videu. */
.rz-ghost {
display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none;
border: 1.5px solid var(--rz-acc); color: var(--rz-cream); background: transparent;
font-family: var(--rz-font-body); font-weight: 600; font-size: 15px;
padding: 15px 30px; border-radius: 10px; white-space: nowrap;
transition: background .2s ease, color .2s ease;
}
.rz-ghost:hover { background: var(--rz-acc); color: #fff; }
.rz-ghost .rz-ghost-arw { font-size: 17px; line-height: 1; }
@media (max-width: 760px) {
.grid-items.rz-e-row { flex-direction: column; align-items: stretch; }
.grid-items.rz-e-row > .grid-item,
.grid-items.rz-e-row .module-gallery,
.grid-items.rz-e-row .module-body,
.grid-items.rz-e-row .module-item,
.grid-items.rz-e-row .rz-video-link,
.rz-ghost { width: 100%; }
.grid-items.rz-e-row .rz-video-link { height: 96px; gap: 14px; padding: 9px 18px 9px 9px; }
.grid-items.rz-e-row .rz-video-link .gallery-image { width: 132px; }
.rz-ghost { justify-content: center; }
}
/* --------------------------------------------------------------------------
[6] TLACIDLA - jemne zaoblene, terakota
-------------------------------------------------------------------------- */
.btn,
.btn-cart,
.button,
.buttons .btn {
border-radius: 10px;
font-family: var(--rz-font-body);
font-weight: 600;
}
.btn-cart,
.btn-primary,
.product-thumb .btn-cart {
background: var(--rz-acc) !important;
border-color: var(--rz-acc) !important;
color: #fff !important;
}
.btn-cart:hover,
.btn-primary:hover { background: var(--rz-acc-dark) !important; border-color: var(--rz-acc-dark) !important; }
/* sekundarne/ghost tlacidla - na tmavom podklade svetly obrys */
.btn-default,
.btn-ghost {
background: transparent !important;
border: 1.5px solid rgba(243,234,215,.5) !important;
color: var(--rz-cream) !important;
}
.btn-default:hover { background: var(--rz-cream) !important; color: var(--rz-ink) !important; }
/* "Vsetky puzzle" a pod. odkazy -> mach (limetka na tmavom) */
.title-module a,
.module-title a { color: var(--rz-acc-soft) !important; }
/* --------------------------------------------------------------------------
[7] BANERY / BLOKY / NEWSLETTER / PATICKA
-------------------------------------------------------------------------- */
.module-blocks .block,
.module-banners .banner { background: var(--rz-surface); }
/* vsetky spodne sekcie a ich stlpce - priehladne, nech presvita suvisla
textura dreva (volba A). Tema davala niektorym stlpcom bielu/sivu (napr.
"O nas" blok v row-7), preto rusime aj pozadia stlpcov. Karty/lista/video
maju vlastne (brezove) pozadie a toto sa ich netyka. */
[class*="grid-row-bottom-"],
[class*="grid-col-bottom-"] { background: transparent !important; }
/* "O nas" sekcia (row-7): tema pridala low-poly obrazok, sivy ::before prekryv
(rgba(221,221,221,.7), left:-50%) a biely "expand" fade. Zrusime ich, nech
sekcia sadne na drevo. */
[class*="grid-row-bottom-"]::before,
[class*="grid-row-bottom-"]::after { display: none !important; content: none !important; }
.module-blocks .block-expand-overlay { background: none !important; }
/* PATICKA - theme mala slate rgb(69,82,94) na grid-row-1 (oblubene),
grid-row-2 (stlpce) a grid-row-3 (copyright). Zjednotime na espresso. */
.grid-row-1,
.grid-row-2,
.grid-row-3 { background: var(--rz-ink) !important; }
/* vsetok text/odkazy v paticke -> svetle kremove */
.grid-row-1 p, .grid-row-1 li, .grid-row-1 a, .grid-row-1 span, .grid-row-1 .links-text,
.grid-row-2 p, .grid-row-2 li, .grid-row-2 a, .grid-row-2 span, .grid-row-2 .links-text,
.grid-row-3, .grid-row-3 p, .grid-row-3 a, .grid-row-3 span {
color: #d6ccbb !important;
}
/* nadpisy stlpcov (PRE ZAKAZNIKOV, MOJ UCET, NEWSLETTER) */
.grid-row-2 h3, .grid-row-2 h4, .grid-row-2 .module-title,
.grid-row-1 h3, .grid-row-1 .module-title {
color: #f4ecdf !important;
font-family: var(--rz-font-body) !important;
text-transform: uppercase;
letter-spacing: .09em;
font-size: 14px;
font-weight: 700;
}
/* odkazy hover -> terakota */
.grid-row-1 a:hover, .grid-row-1 a:hover .links-text,
.grid-row-2 a:hover, .grid-row-2 a:hover .links-text,
.grid-row-3 a:hover { color: var(--rz-acc) !important; }
/* socialne ikony v paticke */
.grid-row-1 .fa::before, .grid-row-2 .fa::before,
.grid-row-1 [class^="icon-"]::before, .grid-row-2 [class^="icon-"]::before { color: #d6ccbb !important; }
.grid-row-1 .fa:hover::before, .grid-row-2 .fa:hover::before { color: var(--rz-acc) !important; }
/* newsletter (v grid-row-2) - v ramci espresso, terakotove tlacidlo */
.module-newsletter { background: transparent !important; border-radius: 0; }
.module-newsletter input {
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.06) !important;
color: #fff !important;
}
.module-newsletter input::placeholder { color: rgba(255,255,255,.5); }
.module-newsletter .btn { background: var(--rz-acc) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; }
.module-newsletter .btn:hover { background: var(--rz-acc-dark) !important; }
/* --------------------------------------------------------------------------
[8] YOUTUBE VIDEA - popisok "Pozriet video" (z povodnej upravy), teply
-------------------------------------------------------------------------- */
.rz-video-link { display: block; position: relative; overflow: hidden; border-radius: 12px; }
.rz-video-link img { display: block; width: 100%; transition: transform .35s ease; }
.rz-video-link .gallery-image { position: relative; display: block; }
/* popisok "Pozriet video" - v toku, centrovany pod play tlacidlom (copy 02) */
.module-gallery .module-item > a .rz-video-caption {
position: static; transform: none; z-index: 2; width: auto; height: auto;
padding: 0; background: none; color: #fff;
font-family: var(--rz-font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.12em;
text-transform: uppercase; text-align: center; white-space: nowrap; pointer-events: none;
text-shadow: 0 1px 8px rgba(44,38,32,.55);
}
@media (prefers-reduced-motion: no-preference) {
.rz-video-link:hover img, .rz-video-link:focus-visible img { transform: scale(1.04); }
}
.rz-video-link:focus-visible { outline: 3px solid var(--rz-acc); outline-offset: 3px; }
/* --------------------------------------------------------------------------
[9] DOCISTENIE - prebijeme zvysne cervene akcenty temy terakotou
Journal pouziva rgba(231,40,77) v modulovych pravidlach; hlavne viditelne
miesta prekryvame tu.
-------------------------------------------------------------------------- */
.ms-bullet-selected,
.swiper-pagination-bullet-active { background: var(--rz-acc) !important; }
.count-badge:not(.count-zero) { background: var(--rz-acc) !important; }
::selection { background: var(--rz-acc-soft); color: var(--rz-ink); }
/* --------------------------------------------------------------------------
[H] HOVER STAVY - zjednotenie s teplou temou.
Theme pouzival modru rgb(0,138,221) a cervenu rgb(231,40,77) na hover
pozadia (aj s !important), preto ich prekryvame s !important a dostatocnou
specificitou.
-------------------------------------------------------------------------- */
/* vsetky tlacidla -> tmavsia terakota */
.btn:hover,
.button:hover,
.buttons .btn:hover,
.module-button .btn:hover,
.product-thumb .btn:hover,
.product-thumb .btn-cart:hover,
.btn-cart:hover,
.btn-primary:hover {
background: var(--rz-acc-dark) !important;
border-color: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* produktove grid tlacidla ("Do kosika" a pod.) maju velmi specificke modre
theme hover pravidla (.module-products-XXX .product-grid .product-thumb
.btn-cart.btn:hover = specificita 0,6,0). Prebijeme cez html.desktop +
.main-products retazec (0,6,1) + neskorsie poradie + !important. */
html.desktop .product-grid .product-thumb .btn.btn:hover,
html.desktop .product-grid .product-thumb .btn-cart.btn:hover,
html.desktop .product-list .product-thumb .btn.btn:hover,
html.desktop .main-products .product-thumb .btn.btn:hover {
background: var(--rz-acc-dark) !important;
border-color: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* [H-TOUCH] To iste BEZ .desktop v retazci. Journal dava html triedu .desktop
len na PC; na telefone/tablete je to .mobile, takze pravidla vyssie tam
NEPLATIA a presvitala povodna modra temy rgba(0,138,221) (0,6,0) - pri
tapnuti na "Do kosika" / "Oblubeny produkt" blikla modra dlazdica.
Opakovane .btn zvysuje specificitu bez toho, aby sme sa viazali na cislo
modulu (.module-products-279/280/286/287/291 maju kazdy vlastnu kopiu).
:focus a :active su tu tiez - po tapnuti focus na tlacidle ostava visiet. */
.product-grid .product-thumb .btn.btn.btn.btn:hover,
.product-grid .product-thumb .btn.btn.btn.btn:focus,
.product-grid .product-thumb .btn.btn.btn.btn:active,
.product-grid .product-thumb .btn.btn.btn.btn:hover:active,
.product-list .product-thumb .btn.btn.btn.btn:hover,
.product-list .product-thumb .btn.btn.btn.btn:focus,
.product-list .product-thumb .btn.btn.btn.btn:active,
.product-list .product-thumb .btn.btn.btn.btn:hover:active,
.main-products .product-thumb .btn.btn.btn.btn:hover,
.main-products .product-thumb .btn.btn.btn.btn:focus,
.main-products .product-thumb .btn.btn.btn.btn:active,
.main-products .product-thumb .btn.btn.btn.btn:hover:active,
.side-product .btn.btn.btn.btn:hover,
.side-product .btn.btn.btn.btn:focus {
background: var(--rz-acc-dark) !important;
border-color: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* hero telefon -> tmavsia terakota */
.module-master_slider-242 .module-button-274 .btn:hover {
background: var(--rz-acc-dark) !important;
border-color: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* hero mail (ghost) + ostatne ghost tlacidla -> na tmavej teme svetla vypln + tmavy text
(predtym ink na ink -> text miznul pri hoveri) */
.module-master_slider-242 .module-button-275 .btn:hover,
.btn-default:hover,
.btn-ghost:hover {
background: var(--rz-cream) !important;
border-color: var(--rz-cream) !important;
color: var(--rz-ink) !important;
}
/* nav polozka -> len terakotovy text, ziadne cervene pozadie */
.main-menu > .j-menu > li > a:hover,
.main-menu > .j-menu > li:hover > a {
background: transparent !important;
color: var(--rz-acc) !important;
}
/* rozbalene / dropdown polozky menu */
.main-menu .dropdown a:hover,
.main-menu li li a:hover,
.main-menu .dropdown-menu a:hover,
.top-menu a:hover .links-text {
background-color: var(--rz-acc) !important;
color: #fff !important;
}
/* produktovy obrazok - teple hover prekrytie namiesto modreho/cerveneho */
.product-thumb .image > a::before,
.product-thumb .product-img::before,
.product-thumb .image .product-img::before {
background-color: rgba(44, 38, 32, .28) !important;
}
/* rychle akcie na produktoch (kosik/oblubene/porovnat) hover */
.product-action a:hover,
.product-thumb .buttons-wrapper a:hover,
.wishlist:hover, .compare:hover, .quickview:hover {
background: var(--rz-acc) !important;
border-color: var(--rz-acc) !important;
color: #fff !important;
}
/* ikonka nad obrazkom produktu (bola oranzova theme farba) -> terakota */
html.desktop .product-grid .product-thumb .image a:hover,
html.desktop .product-thumb .image a:hover { color: var(--rz-acc) !important; }
/* rychle tlacidla nad obrazkom (kosik + oblubene, zjavia sa na hover karty) -
defaultny stav bol modry/tmavy; nastavime teply. Hover riesi pravidlo vyssie. */
html.desktop .product-grid .product-thumb .image .btn,
html.desktop .product-grid .product-thumb .image .btn-cart.btn,
html.desktop .product-grid .product-thumb .image .btn-wishlist.btn,
html.desktop .product-grid .product-thumb .image .btn-compare.btn {
background: var(--rz-acc) !important;
border-color: var(--rz-acc) !important;
color: #fff !important;
}
/* sekundarna z dvojice (oblubene) jemne odlisime tmavym inkom */
html.desktop .product-grid .product-thumb .image .btn-wishlist.btn {
background: var(--rz-ink) !important;
border-color: var(--rz-ink) !important;
}
/* --------------------------------------------------------------------------
[C] PRODUKTOVY PRUH TLACIDIEL (kosik + oblubene) - cely terakotovy.
Theme mal pozadie pruhu aj bocnych tlacidiel bridlicovo modre
rgba(53,69,100). Zakladne pravidla temy su BEZ !important, takze nam staci
nizsia specificita s !important; hover stavy temy maju !important, tie
prebijeme cielene. Bunky oddeli jemna svetla ciara. PC aj mobil.
-------------------------------------------------------------------------- */
.product-thumb .button-group,
.product-thumb .button-group .cart-group,
.product-thumb .button-group .btn-wishlist,
.product-thumb .button-group .btn-compare {
background: var(--rz-acc) !important;
border-color: var(--rz-acc) !important;
color: #fff !important;
}
/* jemne oddelenie buniek v pruhu */
.product-thumb .button-group .btn-cart,
.product-thumb .button-group .btn-wishlist,
.product-thumb .button-group .btn-compare {
border-left: 1px solid rgba(255, 255, 255, .20) !important;
}
/* ikony bocnych tlacidiel biele */
.product-thumb .button-group .btn-wishlist::before,
.product-thumb .button-group .btn-compare::before,
.product-thumb .button-group .btn-wishlist .fa::before,
.product-thumb .button-group .btn-compare .fa::before,
.product-thumb .button-group .stepper span i,
.product-thumb .button-group .stepper span i::before { color: #fff !important; }
/* stepper ramik v pruhu do svetlej (bol bridlicovy) */
.product-thumb .button-group .stepper { border-color: rgba(255, 255, 255, .28) !important; }
/* hover bocnych tlacidiel -> tmavsia terakota (theme mal modru s !important) */
.product-thumb .button-group .btn-wishlist:hover,
.product-thumb .button-group .btn-compare:hover,
.main-products .product-grid .product-thumb .btn-wishlist.btn:hover,
.main-products .product-grid .product-thumb .btn-compare.btn:hover {
background: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* slider / gallery navigacia hover (bola modra) */
.ms-nav-next:hover, .ms-nav-prev:hover,
.swiper-button-next:hover, .swiper-button-prev:hover,
.ms-nav-next:hover::before, .ms-nav-prev:hover::before {
background: var(--rz-acc) !important;
color: #fff !important;
}
/* "Vsetky ..." odkazy a title odkazy hover */
.title-module a:hover, .module-title a:hover { color: var(--rz-acc-dark) !important; }
/* kategorie-taby produktovych modulov (cervene "DREVENE PUZZLE" listy) */
.tab-container .nav-tabs > li > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: var(--rz-acc) !important;
border-color: var(--rz-acc) !important;
color: #fff !important;
font-family: var(--rz-font-body) !important;
font-weight: 700;
}
/* --------------------------------------------------------------------------
[S] MACHOVY PAS - signaturny prvok volby A "Lesna tabula".
Vklada ho override.js medzi hero a prvu produktovu sekciu.
-------------------------------------------------------------------------- */
.rz-moss-band {
min-height: 132px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
padding: 22px 0;
background: #1b120c url('design-assets/tex-moss.jpg') center / cover no-repeat;
margin: 0;
}
.rz-moss-band > span {
font-family: var(--rz-font-display);
font-weight: 600;
color: #fff;
font-size: clamp(20px, 3vw, 32px);
text-align: center;
letter-spacing: .01em;
text-shadow: 0 2px 18px rgba(0,0,0,.72);
padding: 0 20px;
}
/* podnadpis - stitok s tym, co na mapach je. Drzime ho vyrazne mensi
a rozstrknuty, aby to bol popisok, nie druhy nadpis. */
.rz-moss-band .rz-moss-band-sub {
font-family: var(--rz-font-body);
font-weight: 600;
font-size: clamp(11px, 1.15vw, 14px);
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .88);
text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
@media (max-width: 760px) {
.rz-moss-band { min-height: 104px; gap: 8px; padding: 18px 0; }
.rz-moss-band .rz-moss-band-sub { letter-spacing: .1em; }
}
/* --------------------------------------------------------------------------
[A2] DOLADENIE VZHLADU (volba A) - nadpisy zlava s machovou ciarkou,
jednotny rytmus. Na konci suboru, aby prebilo skorsie pravidla.
-------------------------------------------------------------------------- */
/* nadpis + podnadpis vzdy pod sebou (niektore sekcie ich tema kladie vedla seba),
zarovnane zlava */
.title-module { display: block !important; text-align: left !important; }
.title-module .title-wrapper { display: block; width: 100%; text-align: left !important; }
.title-module .subtitle { display: block; width: 100%; clear: both; }
/* povodny centrovany divider uz nahradza machova ciarka pri nadpise */
.title-divider, .title-wrapper .title-divider { display: none !important; }
.title-module h3 {
display: flex; align-items: center; gap: 14px; width: 100%;
}
/* niektore sekcie (DREVENE PUZZLE, HODINY) mali z temy tmavy bridlicovy nadpis
rgb(56,68,79) - vynutime kremovu na kazdom nadpise sekcie */
.title-module h3, .title-wrapper h3, .module-title h3,
.title-module .title, .title-wrapper .title { color: var(--rz-cream) !important; }
.title-module h3::before {
content: ""; width: 6px; height: 0.9em; background: var(--rz-acc);
border-radius: 2px; flex: 0 0 auto;
}
.title-module .subtitle {
margin-left: 0 !important; margin-right: 0 !important;
text-align: left; max-width: 68ch;
}
/* ikony v karte ("Kupit hned" $ / "Spytat sa" mail) - theme mal cervenu na
::before glyfe .btn-extra; zjednotime na mach */
.product-thumb .btn-extra::before,
.product-thumb .caption .btn-extra::before,
.product-thumb .caption a i::before,
.product-thumb .caption a .fa::before { color: var(--rz-acc-dark) !important; }
/* "Kupit hned" / "Spytat sa" odkazy - splynut s brezovou kartou (nie biela krabica) */
.product-thumb .btn-extra,
.product-thumb .caption .btn-extra,
.product-thumb .buttons-wrapper { background: transparent !important; border-color: var(--rz-line) !important; }
/* nazvy produktov na 2 riadky (nie orezanie "..." v strede slova) - rovnaka vyska kariet.
Tema mala display:flow-root + white-space:nowrap + ellipsis (0,4,1), preto !important. */
.product-thumb .name a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.25 !important;
/* pevna vyska dvoch riadkov - rovnaky dovod ako v [CARD-M] nizsie:
bez nej by nazov na 3 riadky posunul cenu a tlacidla len v jednej karte */
height: 2.6em !important;
min-height: 2.6em !important;
max-height: 2.6em !important;
}
.product-thumb .name { min-height: 2.5em; }
/* obrazky v "O nas" sekcii - zaoblene rohy ako karty */
.grid-row-bottom-7 .module-banners img,
.grid-row-bottom-7 .module-banners .banner,
.grid-row-bottom-7 img { border-radius: 14px !important; }
/* stitok v toolbari je podriadeny velkemu serifovemu nadpisu -> tlmeny maly kicker */
.tab-container ul.nav-tabs > li.tab-1 > a,
.tab-container ul.nav-tabs > li.tab-1.active > a {
color: var(--rz-muted) !important; font-size: 12px; letter-spacing: .16em;
}
/* --------------------------------------------------------------------------
[NAV-WOOD] navigacna lista = svetle drevo + nove logo (bez kontajnera).
Na svetlom dreve prepneme text menu a ikony na tmavy ink. Na konci suboru,
aby prebilo skorsie hlavickove pravidla.
-------------------------------------------------------------------------- */
.header .mid-bar,
.header-compact .mid-bar,
.mobile-header-active .mobile-bar,
.mobile-header-active .mobile-bar.sticky-bar,
.mobile-header-active .mobile-1 .mobile-bar,
.mobile-header-active .mobile-2 .mobile-bar {
/* farba = PRIEMER textury (namerane), aby lista pocas nacitavania textury
nesvietila bledo-bezovo a potom neskocila do sediveho dreva */
background-color: #917e65 !important;
/* 1040px = 2x zobrazenych 520px (ostre aj na retine); povodny 2000px subor
mal 606 KB, tento 243 KB - lista sa dokresli skor */
background-image: url('design-assets/tex-wood-light-1040.jpg') !important;
background-size: 520px !important;
background-repeat: repeat !important;
border-bottom: 3px solid var(--rz-acc) !important;
box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
}
/* text menu + ikony -> tmavy ink (citatelne na svetlom dreve) */
.main-menu > .j-menu > li > a { color: var(--rz-ink) !important; }
.main-menu > .j-menu > li > a:hover,
.main-menu > .j-menu > li:hover > a { color: var(--rz-acc-dark) !important; }
.header .mid-bar .fa,
.header .mid-bar .fa::before,
.header .mid-bar [class^="icon-"]::before,
.header-cart-group .fa::before,
.header-cart-group .dropdown-toggle::before,
.header-cart-group [class*="search"]::before,
.header .search-trigger::before,
.mobile-header-active .menu-trigger::before,
.mobile-header-active .menu-trigger button span,
.mobile-header-active .mobile-bar .fa,
.mobile-header-active .mobile-bar .fa::before,
.mobile-header-active .mini-search .search-trigger::before,
.mobile-header-active #cart > a > i,
.mobile-header-active #cart > a > i::before {
color: var(--rz-ink) !important;
}
/* nove logo bez kontajnera - nahradime obsah povodneho obrazka.
url() sa vyhodnocuje voci override.css (koren) -> /logo-dark.png
logo-dark.png = rovnaky tvar ako logo.png, len prefarbeny na --rz-ink
(#2b2016 - ten isty tmavy odtien ako text na brezovych kartach).
Alfa ostava, takze okraje su hladke a medzery v znacke priehladne. */
.header #logo img,
.mobile-logo-wrapper #logo img {
content: url('logo-dark.png') !important;
}
/* [NAV-WOOD] nove logo vyrazne vacsie - riadime vyskou (sirka auto zachova pomer) */
.desktop-header-active .header .desktop-logo-wrapper { width: auto !important; flex: 0 0 auto !important; }
.desktop-header-active .header #logo a { padding: 6px 0 !important; }
.header #logo img,
.desktop-header-active .header #logo img {
height: 80px !important; width: auto !important; max-width: none !important;
}
/* Logo v mobilnej liste sa musí zmestiť vedľa troch ikon (menu, hľadanie,
košík = 3x55px). Pri pevnej výške 46px bolo logo široké 186px a na 320px
displeji sa nezmestilo - text loga vytiekol vľavo mimo obrazovku a košík
vpravo bol orezaný. Výška preto rastie s šírkou okna:
šírka loga = výška x 4,325 (pomer 1756/406), takže 22vw - 40px drží logo
vždy v priestore, ktorý po ikonách zostane. Od ~390px hore je to opäť 46px. */
.mobile-header-active .mobile-logo-wrapper #logo img {
height: clamp(28px, calc(22vw - 40px), 46px) !important;
width: auto !important; max-width: none !important;
}
.mobile-header-active .mobile-logo-wrapper #logo a { padding: 7px 8px !important; }
/* --------------------------------------------------------------------------
[RHYTHM] jednotne zvisle medzery medzi sekciami pod hero
Medzera medzi sekciami = padding-bottom hornej + padding-top spodnej.
Tema dava kazdemu riadku ine cisla (40/60, 0/0 + margin-bottom 50, 20/50,
30/30, 80/80, na mobile aj 30/15 a 0/0), takze rytmus skakal:
PC 62 / 60 / 70 / 70 / 80 / 110 px
mobil 48 / 60 / 110 / 60 / 60 / 15 px
Teraz drzia vsetky riadky rovnaky krok (2x --rz-gap).
-------------------------------------------------------------------------- */
.grid-rows [class*="grid-row-bottom-"] {
padding-top: var(--rz-gap) !important;
padding-bottom: var(--rz-gap) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* posledny riadok ma este 20px na vnutornom stlpci - rozhodilo by to rytmus */
.grid-rows [class*="grid-row-bottom-"] > .grid-cols > [class*="grid-col-bottom-"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* machovy pas aj paticka su ostre hrany - tam dava krok cely riadok sam,
takze mu davame dvojnasobok, nech medzera vyzera rovnako ako medzi sekciami */
.rz-moss-band + [class*="grid-row-bottom-"] {
padding-top: calc(var(--rz-gap) * 2) !important;
}
.grid-rows > [class*="grid-row-bottom-"]:last-child {
padding-bottom: calc(var(--rz-gap) * 2) !important;
}
@media (max-width: 760px) {
:root { --rz-gap: 30px; }
}
/* --------------------------------------------------------------------------
[CARD-M] produktove karty na telefone
Merane pri 320px: karta ma 140px, caption z toho brala 32px na bocny padding,
nazov sa lamal na dva riadky pri 16px pisme ("Hrady a zámky -..."), a spodny
biely pruh s "Kúpiť hneď" / "Spýtať sa" pretekal von z karty
(scrollWidth 108 > clientWidth 106) a druhe tlacidlo padalo na novy riadok.
-------------------------------------------------------------------------- */
@media (max-width: 760px) {
/* "Kúpiť hneď" a "Spýtať sa" prec - na uzkych displejoch sa nezmestili */
.product-thumb .extra-group { display: none !important; }
.product-thumb .caption { padding: 10px 10px 12px !important; }
/* nazov: mensie pismo a tri riadky namiesto dvoch, aby sa vosiel cely.
Pevna min-height drzi karty v riadku rovnako vysoke aj pri kratkom nazve. */
.product-thumb .name {
height: auto !important;
min-height: 0 !important;
padding: 2px 0 4px !important;
}
/* !important vsade - vyssie v subore uz clampujeme na 2 riadky s !important
(kvoli teme), a bez neho by tento predpis prehral aj pri neskorsom poradi. */
.product-thumb .name a {
/* Cely predpis clampu sa opakuje aj tu. Predtym tu bol len line-clamp
a min-height, takze display:-webkit-box a box-orient prisli z pravidla
vyssie v subore. Ked sa clamp na nejakom zariadeni neuplatni (napr. ked
Journal admin custom CSS pri minifikacii zahodi -webkit-box-orient),
nazov na 4 riadky rozotvori min-height a cena aj tlacidla v tej karte
klesnu o riadok - susedna karta potom vyzera "vyssie". Pevna vyska to
vylucuje: kazdy nazov drzi presne 3 riadky bez ohladu na dlzku textu. */
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
font-size: 13px !important;
line-height: 1.32 !important;
/* 3 riadky = 3.96em; 4.05em necha pod tretim riadkom rezervu na
zaokruhlovanie riadkovania (Safari), stvrty riadok sa uz nezmesti */
height: 4.05em !important;
min-height: 4.05em !important;
max-height: 4.05em !important;
}
.product-thumb .price {
height: auto !important;
padding: 2px 0 9px !important;
margin: 0 !important;
}
/* tlacidla kosik + oblubene: zaoblena dvojica, obe polovice rovnako siroke
(predtym 41px + 37px z dostupnych 106px, zvysok ostal prazdny) */
.product-thumb .buttons-wrapper { margin: 0 !important; }
.product-thumb .button-group {
border-radius: 8px !important;
overflow: hidden !important;
width: 100% !important;
}
.product-thumb .button-group .cart-group,
.product-thumb .button-group .wish-group { flex: 1 1 0 !important; min-width: 0 !important; }
.product-thumb .button-group .btn {
width: 100% !important;
border-radius: 0 !important;
padding: 10px 6px !important;
}
}
/* --------------------------------------------------------------------------
[HERO-2] Prepracovane hero (schvalene na preview/test.html).
Tieto pravidla su zamerne AZ NA KONCI suboru - presne tak, ako sa predtym
nacitavali z hero-lab.css za override.css, takze poradie v kaskade sedi.
Zhrnutie: mapa vystrihnuta na tmavom orechovom dreve, nadpis hore vlavo,
kontaktne tlacidla pod nim, svetle logo v pravom dolnom rohu.
-------------------------------------------------------------------------- */
/* [H1] prec so zelenym eyebrow textom nad nadpisom (bol cez ::before vyssie) */
.rz-hero-inner::before { display: none !important; }
/* [H2] PC verzia obrazka - mapa v strede, pomer hero (2400x992).
Podklad je hneda kamenna stena s machovym pasom pri zemi
(hero-stone-mob-plain.png od klienta - ten isty subor drzi PC aj mobil),
mapa je vyrez real_map.png (tiez od klienta) s mekkym tienom.
Podklad ma iny pomer ako hero, takze sa zvacsuje na 'cover' a orezava ZHORA -
mach musi zostat cely a prisaty na spodnu hranu obrazka.
Na mobile ide hero-stone-mob-real.jpg (1200x680) - siroky PC obrazok by tam
bol prinizky a mapa by sa orezala. */
@media (min-width: 761px) {
.module-master_slider-242 {
background-image: url('design-assets/hero-stone-real.jpg?v=202608271850') !important;
}
}
/* [H3] hero sadne do obrazovky: viaze sa na vysku okna minus hlavicka (135px).
Pevny pomer 1600/661 predtym na sirokych monitoroch prerastal pod okraj.
Mapa ma v obrazku ~21% dreva po stranach a ~16% hore/dole, takze 'cover'
oreze vzdy len drevo. */
@media (min-width: 761px) {
.module-master_slider-242 {
aspect-ratio: auto !important;
height: calc(100vh - 135px) !important;
min-height: 460px !important;
max-height: 780px !important;
background-position: center center !important;
}
}
/* [H4] prec s tmavym prechodom zlava, ostava len jemne stmavnutie dole,
aby prechod do machoveho pasu nebol ostry */
.module-master_slider-242::before {
background: linear-gradient(180deg, rgba(20,12,8,0) 62%, rgba(20,12,8,0.5) 100%) !important;
}
/* [H5] svetle logo v pravom dolnom rohu hero */
.module-master_slider-242 {
--rz-hero-edge-x: clamp(24px, 3.4vw, 60px);
--rz-hero-edge-y: clamp(18px, 2.8vw, 42px);
--rz-hero-logo-w: clamp(210px, 24vw, 380px);
}
.module-master_slider-242::after {
content: "";
position: absolute;
right: var(--rz-hero-edge-x);
bottom: var(--rz-hero-edge-y);
width: var(--rz-hero-logo-w);
aspect-ratio: 1756 / 406;
background: url('logo-light.png') no-repeat center center / contain;
opacity: .92;
z-index: 3;
pointer-events: none;
}
/* mobil: logo tiez v pravom dolnom rohu, ale rohu OBRAZKA, nie celeho modulu.
Na mobile je hero stohovany: obrazok drzi padding-top:56.7vw (1200x680) a
text stoji v toku pod nim, takze 'bottom' modulu je az pod tlacidlami.
Preto kotvime zhora: spodna hrana loga na 52.2vw (4.5vw nad koncom obrazka)
a translateY(-100%) posunie logo o jeho vlastnu vysku hore - drzi to bez
ohladu na to, ake siroke logo vyjde z clamp(). */
@media (max-width: 760px) {
.module-master_slider-242::after {
display: block !important;
width: clamp(140px, 40vw, 280px);
right: clamp(12px, 4vw, 26px);
top: 52.2vw;
bottom: auto;
transform: translateY(-100%);
opacity: .95;
}
}
/* [H6] PC rozlozenie: nadpis hore vlavo (mensi), tlacidla hned pod nim */
@media (min-width: 761px) {
.rz-hero-inner {
max-width: none !important;
justify-content: flex-start !important;
padding: clamp(22px, 3.6vh, 52px) var(--rz-hero-edge-x) !important;
}
/* sirka drzi zalomenie "Skladaj a spoznávaj" / "Slovensko"
(medzi 8.73em a 9.51em - meranie sirky textu pri tomto pisme) */
.rz-hero-tagline {
margin: 0 !important;
max-width: 9.2em !important;
font-size: clamp(24px, 3.1vw, 40px) !important;
}
.module-master_slider-242 .grid-row-top-3 {
position: static !important;
width: auto !important;
margin: clamp(18px, 2.6vh, 32px) 0 0 !important;
}
.module-master_slider-242 .grid-row-top-3 .grid-cols {
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
margin: 0 !important; /* tema tu dava ~85px gutter - rozhodilo by zarovnanie */
gap: 10px !important; /* medzera medzi tlacidlami (bolo 22px) */
}
/* obrysove emailove tlacidlo: jemna tmava vypln drzi text citatelny
aj tam, kde zasahuje do svetlej mapy */
.module-master_slider-242 .module-button-275 .btn {
background: rgba(20, 12, 8, 0.55) !important;
}
/* mensie tlacidla (bolo 17px / 13px 28px / 56px). Vyska 44px = minimum
pre pohodlne kliknutie. Rohy 2px = povodne ostre (tema prebija 10px vyssie). */
.module-master_slider-242 .module-button .btn {
font-size: 15px !important;
padding: 10px 15px !important;
min-height: 44px !important;
border-radius: 2px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* [H7] mobil: tlacidla pod sebou presne v osi.
Tema pocita s tym, ze tlacidla stoja vedla seba, tak im dava bocnu medzeru:
prvemu margin-right:10px, druhemu margin-left:10px. Ked sa na mobile
zalomia pod seba, kazde sa tym posunie na inu stranu (prve o 10px vlavo,
druhe o 10px vpravo) - opticky su rozhodene. Bocne marginy tu preto rusime
a odstup riesime zvislo. */
@media (max-width: 760px) {
.module-master_slider-242 .module-button .btn,
.rz-hero-inner .module-button .btn {
margin-left: 0 !important;
margin-right: 0 !important;
}
.rz-hero-inner .grid-row-top-3 .grid-cols {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
margin: 0 !important;
}
.rz-hero-inner .grid-row-top-3 .module-button { margin: 0 !important; }
}
/* [H8] uzke telefony (320-390px): pevne velkosti zaplnili cely displej.
Nadpis (34px), tlacidla (17px + 28px bocny padding) a bocne odsadenie hero
boli nastavene v px, takze sa pri uzsom displeji nezmensili - email
"drevene.puzzle@gmail.com" sa na 320px vosiel do tlacidla len tak-tak.
Vsetko preto skaluje s sirkou okna a nad ~400px sa vracia na povodne miery. */
@media (max-width: 760px) {
.rz-hero-inner { padding: 26px clamp(14px, 5vw, 20px) 34px; }
.rz-hero-tagline { font-size: clamp(25px, 8.4vw, 34px) !important; }
.module-master_slider-242 .module-button .btn,
.rz-hero-inner .module-button .btn {
font-size: clamp(14px, 4.3vw, 17px) !important;
padding: 13px clamp(10px, 4vw, 28px) !important;
min-height: 52px !important;
}
}
/* --------------------------------------------------------------------------
[WA] WhatsApp widget (wati.io) - schovame len plavajucu bublinu s textom
"Napíšte nám". Zeleny okruhly button (.wa-widget-send-button) aj chatovacie
okno (.wa-chat-box) ostavaju funkcne. Widget vklada externy skript, preto
to riesime cez CSS - prezije aj opatovne vykreslenie.
-------------------------------------------------------------------------- */
#whatsapp-chat-widget .wa-chat-bubble { display: none !important; }
/* --------------------------------------------------------------------------
[NAV-PANEL] tmavy presklenny panel pod celou skupinou odkazov v menu.
Doskova textura v liste ma vyrazne skary a kresbu, ktora prechadza priamo
cez pismena. Namiesto tabulky pod kazdou polozkou dame jeden tmavy panel
pod cely blok menu: je priesvitny a rozostreny (backdrop-filter), takze
drevo pod nim ostane citatelne ako zrno, ale text uz lezi na pokojnej
tmavej ploche a moze byt kremovy.
Zelene CTA "NAKUPOVAŤ" ostava presne ako bolo - preto vsade :not(.rz-nav-cta).
Backdrop-blur je v tomto projekte povoleny vyhradne v navigacnej liste.
-------------------------------------------------------------------------- */
.desktop-header-active .main-menu > .j-menu {
align-self: center !important;
height: auto !important;
align-items: center !important;
gap: 2px;
padding: 6px 10px !important;
border-radius: 10px !important;
background: rgba(30, 19, 12, .50) !important;
-webkit-backdrop-filter: blur(7px) saturate(1.05);
backdrop-filter: blur(7px) saturate(1.05);
border: 1px solid rgba(243, 234, 215, .20) !important;
box-shadow: 0 2px 10px rgba(20, 12, 8, .30) !important;
}
/* polozky prestanu byt roztiahnute na plnu vysku listy */
.desktop-header-active .main-menu > .j-menu > li {
height: auto !important;
display: flex;
align-items: center;
}
/* odkazy: kremovy text na tmavom panelil (predtym tmavy ink na dreve) */
.desktop-header-active .main-menu > .j-menu > li:not(.rz-nav-cta) > a {
color: var(--rz-cream) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
height: auto !important;
line-height: 1.35 !important;
padding: 8px 12px !important;
border-radius: 6px !important;
}
.desktop-header-active .main-menu > .j-menu > li:not(.rz-nav-cta) > a:hover,
.desktop-header-active .main-menu > .j-menu > li:not(.rz-nav-cta):hover > a {
color: var(--rz-acc-soft) !important;
background: rgba(243, 234, 215, .10) !important;
}
/* --------------------------------------------------------------------------
[NAV-WHITE] logo a ikony (kosik + lupa) v navigacnej liste su biele.
Doskova textura v liste je stredne svetla, preto k bielej pridavame jemny
tmavy tien - rovnaky princip ako pri kremovom texte na sklenenom paneli
menu vyssie. Tien je neutralny a mekky, nie farebna ziara.
Sekcia je na konci suboru, aby prebila [1], [1m] aj [NAV-WOOD].
-------------------------------------------------------------------------- */
/* biela verzia znacky (rovnaky tvar aj rozmery ako logo-dark.png) */
.header #logo img,
.mobile-logo-wrapper #logo img {
content: url('logo-white.png') !important;
}
.header #logo a,
.mobile-logo-wrapper #logo a {
filter: drop-shadow(0 1px 2px rgba(20, 12, 8, .45));
}
/* ikony hladania a kosika + text sumy v kosiku, na telefone aj hamburger */
.header .mid-bar .fa,
.header .mid-bar .fa::before,
.header .mid-bar [class^="icon-"]::before,
.header .cart-heading,
.header .cart-heading #cart-total,
.header-cart-group .fa::before,
.header-cart-group .dropdown-toggle::before,
.header-cart-group [class*="search"]::before,
.header .search-trigger::before,
.mobile-header-active .menu-trigger::before,
.mobile-header-active .menu-trigger button span,
.mobile-header-active .mobile-bar .fa,
.mobile-header-active .mobile-bar .fa::before,
.mobile-header-active .mini-search .search-trigger::before,
.mobile-header-active .mini-cart .dropdown-toggle::before,
.mobile-header-active #cart > a > i,
.mobile-header-active #cart > a > i::before {
color: var(--rz-white) !important;
text-shadow: 0 1px 2px rgba(20, 12, 8, .5);
}
/* hover ostava machovy (znovu deklarovane, lebo povodne pravidla su vyssie) */
.header-cart-group .fa:hover::before,
.header-cart-group .dropdown-toggle:hover::before,
.header .search-trigger:hover::before,
.header .cart-heading:hover,
.header .cart-heading:hover #cart-total,
.header .cart-heading:hover .fa::before {
color: var(--rz-acc-soft) !important;
}
/* --------------------------------------------------------------------------
[SP] ZVISLY RYTMUS V SEKCIACH KATEGORII
Namerane na preview (PC 1440px) pred upravou:
video karta predchadzajucej sekcie -> nadpis 102px (72px riadok + 30px
horny padding title-modulu)
nazov kategorie -> popis 0px (riadky sa dotykali)
popis -> tlacidlo "Vsetky ..." 30px
tlacidlo (linka pod nim) -> produktove karty 34px (24px + 10px)
karty -> video pas 24px
Po uprave drzia vsetky vnutorne medzery jeden krok (24px), nadpis s popisom
su jeden celok (10px medzi nimi) a zlom medzi sekciami je 72px, takze nadpis
sadne blizsie ku kartam nad sebou.
Scope cez :has(.module-products) - tyka sa len riadkov s kategoriami,
nie ostatnych title-modulov na stranke.
-------------------------------------------------------------------------- */
/* nadpis blizsie ku kartam nad nim (zrusime 30px padding z temy)
a jednotny odstup popisu od tlacidla */
.grid-cols:has(> .grid-col .module-products) .title-module {
padding-top: 0 !important;
margin-bottom: 24px !important;
}
/* nazov kategorie -> popis: mala, ale citatelna medzera (predtym 0) */
.grid-cols:has(> .grid-col .module-products) .title-module .subtitle {
margin-top: 10px !important;
}
/* tlacidlo "Vsetky ..." -> prvy rad kariet: 24px ako ostatne kroky
(tema pridavala este 10px na .tab-content) */
.grid-cols:has(> .grid-col .module-products) .tab-content {
padding-top: 0 !important;
}
/* --------------------------------------------------------------------------
[SP-7] Sekcia "O nas" (banner - text - banner) na telefone.
Riadok je 3-stlpcovy flex s wrapom: nad 760px stoja stlpce vedla seba,
pod 760px sa zabalia pod seba a textovy blok sa dotykal oboch fotiek
(namerane 0px hore aj dole). row-gap plati len na zabalene riadky, takze
PC rozlozenie ostava nedotknute a nepotrebujeme media query.
24px = rovnaky krok ako vnutorne medzery v sekciach kategorii [SP].
-------------------------------------------------------------------------- */
.grid-row-bottom-7 .grid-cols { row-gap: 24px; }
/* --------------------------------------------------------------------------
[H9] Kontaktne tlacidla v hero - mail hore, telefon pod nim.
Poradie a farby su prehodene oproti [3] a [H6]:
1. mail (module-button-275) = plna machova zelena (hlavna akcia)
2. telefon (module-button-274) = obrysove tlacidlo s jemnou tmavou vyplnou
Tmava vypln drzi text citatelny tam, kde tlacidlo zasahuje do svetlej mapy -
preto ju z mailu presuvame na telefon.
Na PC stoja pod sebou, zarovnane na lavu hranu nadpisu; na telefone uz
stohovane boli (viz [3]), meni sa im len poradie a farba.
-------------------------------------------------------------------------- */
/* poradie: mail prvy, telefon druhy */
.module-master_slider-242 .grid-row-top-3 .grid-col-top-3-2 { order: 1; }
.module-master_slider-242 .grid-row-top-3 .grid-col-top-3-1 { order: 2; }
/* mail = plna zelena */
.module-master_slider-242 .module-button-275 .btn {
background: var(--rz-acc) !important;
color: #fff !important;
border: 0 !important;
}
.module-master_slider-242 .module-button-275 .btn:hover {
background: var(--rz-acc-dark) !important;
color: #fff !important;
}
/* telefon = obrys s tmavou vyplnou */
.module-master_slider-242 .module-button-274 .btn {
background: rgba(20, 12, 8, .55) !important;
color: var(--rz-cream) !important;
border: 1.5px solid rgba(243, 234, 215, .5) !important;
}
.module-master_slider-242 .module-button-274 .btn:hover {
background: var(--rz-cream) !important;
color: var(--rz-ink) !important;
}
/* PC: jeden stlpec, lave hrany oboch tlacidiel v jednej osi s nadpisom */
@media (min-width: 761px) {
.module-master_slider-242 .grid-row-top-3 .grid-cols {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 12px !important;
}
.module-master_slider-242 .grid-row-top-3 .grid-col { width: auto !important; }
}
/* --------------------------------------------------------------------------
[T] TOOLTIPY ("Oblubeny produkt" / "Porovnat produkt")
Theme ich mal v povodnej modrej rgba(0,138,221) so zaoblenim 3px - ostatny
redizajn uz na modru nikde nenadvazuje, takze bublina trcala. Menime na
espresso bublinu s kremovym textom, v rovnakom pisme ako zvysok stranky.
Theme pravidla su bez !important, staci nam teda rovnaka specificita.
-------------------------------------------------------------------------- */
.tooltip-inner {
background: var(--rz-surface) !important;
color: var(--rz-cream) !important;
font-family: var(--rz-font-body) !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
padding: 7px 11px !important;
border-radius: 7px !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .45) !important;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--rz-surface) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--rz-surface) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--rz-surface) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--rz-surface) !important; }
/* --------------------------------------------------------------------------
[SEO-H1] Zeleny eyebrow nad nadpisom v hero - teraz ako skutocny
.
Povodne to bol .rz-hero-inner::before (vypnuty v [H1] vyssie); obsah
pseudo-elementu vsak vyhladavace necitaju, takze nadpis musi byt realny
element v DOM. Vizual ostava povodny eyebrow: 12px, uppercase, mach.
Text drzi override.js v konstante HERO_H1 (hlavne klucove slovo).
-------------------------------------------------------------------------- */
.rz-hero-h1 {
margin: 0 0 18px !important;
font-family: var(--rz-font-body) !important;
font-weight: 600 !important;
font-size: 12px !important;
line-height: 1.2 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--rz-acc-soft) !important;
text-shadow: 0 1px 10px rgba(12, 7, 4, .45);
}
/* Zaloha pre vypnuty JS: h1 je vyrenderovany serverom v home.tpl HNED za
hlavickou, takze kym ho override.js nepresunie do hero, stoji nad nim.
Drzime ho v mriezke stranky, nech nelipne na lavom okraji obrazovky. */
#common-home > .rz-hero-h1,
body > .rz-hero-h1 {
max-width: 1300px;
margin: 16px auto 0 !important;
padding: 0 clamp(20px, 5vw, 64px);
}
@media (max-width: 760px) {
.rz-hero-h1 {
margin-bottom: 12px !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
}
}
/* --------------------------------------------------------------------------
[CROP] Poistka k automatickemu orezu bielych okrajov (logika je v
override.js, sekcia [CROP]). Ramik nahladu musi orezavat priblizeny
obrazok - Journal to uz ma, drzime to tu pre istotu aj pri inych vypisoch.
-------------------------------------------------------------------------- */
.product-thumb .image,
.product-thumb .image > a,
.product-thumb .product-img {
overflow: hidden !important;
}
/* --------------------------------------------------------------------------
[BOOT] Zabranenie "probleskuu" povodneho layoutu.
override.js prestavuje navigaciu a presuva kontakty do hero az po tom, co
sa stranka dopani - do vtedy bolo na sekundu vidno stare menu. Inline
skript v header.tpl da na triedu .rz-boot este pred prvym vykreslenim
a override.js ju na konci odoberie; casti, ktore sa prestavuju, su dovtedy
skryte. Ked je JS vypnuty, trieda sa nikdy nepridá a nic sa neskryje.
-------------------------------------------------------------------------- */
/* Tento pruh override.js aj tak odstranuje - skryjeme ho hned, nech nebliká. */
.top-menu-2 { display: none !important; }
/* Menu sa prepisuje -> drzime vysku pruhu, ale obsah skryjeme. */
html.rz-boot #main-menu .j-menu { visibility: hidden !important; }
/* Tieto sa presuvaju inam, takze by po presune skocil layout. */
html.rz-boot .grid-row-top-3,
html.rz-boot #rz-hero-h1 { display: none !important; }
/* --------------------------------------------------------------------------
[FOUC] Ziadne "blikanie" povodneho layoutu pri nacitani.
override.js bezi az po nacitani celej stranky (defer), takze prehliadac
stihne na chvilu vykreslit POVODNE menu (kategorie), horny pruh, kontaktny
riadok pod hero a dlhe podnadpisy - az potom ich skript prestavi.
header.tpl preto hned v pridava na triedu rz-pending a
override.js ju po prestavbe zmaze. Poistka v header.tpl ju zmaze po 4 s
vzdy, takze pri chybe skriptu nic neostane skryte. Bez JS sa trieda vobec
neprida - web sa potom zobrazi v povodnej podobe, nic nezmizne.
-------------------------------------------------------------------------- */
/* prvky, ktore sa len PREPISU na mieste - drzime im miesto, nech nic neposkoci */
html.rz-pending #main-menu .j-menu,
html.rz-pending .title-module .subtitle,
html.rz-pending .module-gallery {
visibility: hidden !important;
}
/* prvky, ktore skript PRESUNIE alebo ZMAZE - bez rezervovaneho miesta,
inak by po presune do hero ostala diera a obsah by poskocil */
html.rz-pending .top-menu-2,
html.rz-pending #rz-hero-h1,
html.rz-pending.route-common-home .grid-row-top-3 {
display: none !important;
}
/* --------------------------------------------------------------------------
[PHONE] Skutocny telefon. Journal posiela telefonom INE HTML nez uzkemu
oknu na PC (ine moduly tlacidiel + spodna lista). Predtym sa overovalo len
na uzkom PC okne, preto tieto dve veci ostali na telefone v starom vzhlade.
-------------------------------------------------------------------------- */
/* 1) Spodna lista Journal "Bottom Menu" (Prihlasit, Registrovat, Wishlist,
Kontakt, Telefon) - na domovskej stranke ju skryvame. Tema pre nu drzi pod
obsahom 50px volneho miesta (.has-bottom-menu .site-wrapper) - rusime aj
to, inak by na konci stranky ostal prazdny pas. Podstranky maju listu dalej
(override.css sa tam nenacitava). */
.bottom-menu { display: none !important; }
.has-bottom-menu .site-wrapper { padding-bottom: 0 !important; }
/* 2) Kontaktne tlacidla v hero. Telefon ma VLASTNE moduly (276 = tel,
277 = mail, stlpce top-3-3 / top-3-4), PC ma 274/275. Farby preto viazeme
na TYP odkazu (mailto / tel), nie na cislo modulu - plati pre PC, telefon
aj pripadnu dalsiu verziu. Vzhlad = [H9]: mail plna zelena, telefon obrys. */
.module-master_slider-242 .module-button a.btn[href^="mailto:"] {
background: var(--rz-acc) !important;
color: #fff !important;
border: 0 !important;
}
.module-master_slider-242 .module-button a.btn[href^="mailto:"]:hover {
background: var(--rz-acc-dark) !important;
color: #fff !important;
}
.module-master_slider-242 .module-button a.btn[href^="tel:"] {
background: rgba(20, 12, 8, .55) !important;
color: var(--rz-cream) !important;
border: 1.5px solid rgba(243, 234, 215, .5) !important;
}
.module-master_slider-242 .module-button a.btn[href^="tel:"]:hover {
background: var(--rz-cream) !important;
color: var(--rz-ink) !important;
}
/* poradie aj na telefone: mail prvy, telefon druhy (ako [H9] na PC) */
.module-master_slider-242 .grid-row-top-3 .grid-col-top-3-4 { order: 1; }
.module-master_slider-242 .grid-row-top-3 .grid-col-top-3-3 { order: 2; }
/* --------------------------------------------------------------------------
[CART] Biele okna kosika: oznamenie po "Do kosika", rozbalovaci kosik na PC
(hover na ikonu) a vysuvaci kosik na telefone. Dedili kremovy text urceny
pre tmave drevo, takze na bielom podklade bol takmer neviditelny (kontrast
1.2:1). Na svetlom podklade preto tmavy ink - ten isty ako na produktovych
kartach. Zelene tlacidla (biely text) ostavaju ako vsade inde.
Hlavicka vysuvacieho kosika na telefone je tmava - tu sa nemeni.
-------------------------------------------------------------------------- */
.notification-wrapper .notification,
.notification-wrapper .notification .notification-title,
.notification-wrapper .notification .notification-text,
.cart-content table,
.cart-content td,
.cart-content th {
color: var(--rz-ink) !important;
text-shadow: none !important;
}
/* odkazy (nazov produktu, "nakupneho kosika") - tiez tmave, podciarknutie
ukazuje, ze sa na ne da kliknut */
.notification-wrapper .notification a:not(.btn),
.cart-content td a {
color: var(--rz-ink) !important;
text-shadow: none !important;
}
.notification-wrapper .notification .notification-text a:not(.btn) { text-decoration: underline !important; }
.notification-wrapper .notification a:not(.btn):hover,
.cart-content td a:hover {
color: var(--rz-acc-dark) !important;
text-decoration: underline !important;
}
/* --------------------------------------------------------------------------
[DESC-OPEN] Popis kategorie po kliknuti na "prečítať viac" - na celu sirku
sekcie (ako mriezka produktov pod nim). Zbaleny popis ostava 68ch (2 riadky),
triedu rz-open prepina override.js [LAYOUT] readMore.
-------------------------------------------------------------------------- */
.title-module .subtitle.rz-open { max-width: none !important; }
/* --------------------------------------------------------------------------
[TOPBAR-HOVER] PRIHLASIT / REGISTROVAT / OBLUBENE v hornom pruhu.
Pravidlo pre rozbalovacie menu (.top-menu a:hover .links-text = zelena
vypln + biely text) zasahovalo aj tieto odkazy a iné pravidlo im zaroven
dalo zeleny text -> zelene na zelenom, text zmizol. Na najvyssej urovni
horneho pruhu preto hover = len svetlejsia machova farba textu, bez vyplne.
Polozky pripadnych rozbalovacich podmenu sa nemenia.
-------------------------------------------------------------------------- */
.header .top-bar .top-menu > .j-menu > li > a:hover .links-text,
.header .top-bar .top-menu > .j-menu > li:hover > a .links-text {
background-color: transparent !important;
color: var(--rz-acc-soft) !important;
}
/* --------------------------------------------------------------------------
[HERO-TAG] Pravy dolny roh hero: namiesto svetleho loga text
"Handmade Slovenské výrobky" - pismo ako nadpis "Skladaj a spoznávaj
Slovensko" (Fraunces 500, mierne zuzeny rozpal, bez velkych pismen), farba
rovnaka ako nadpis (--rz-cream, #f3ead7).
Mensie nez nadpis, aby posobil ako podpis, nie druhy nadpis: 19-25px na PC
podla sirky okna, 17px na telefone.
Poloha: PC 14 % nad spodkom hero (na tmavej zemine nad machom, mimo
WhatsApp tlacidla), telefon roh obrazka ako byvalo logo ([H5]).
-------------------------------------------------------------------------- */
.module-master_slider-242::after {
content: "Handmade Slovenské výrobky" !important;
background: none !important;
width: auto !important;
height: auto !important;
aspect-ratio: auto !important;
opacity: 1 !important;
white-space: nowrap;
font-family: var(--rz-font-display) !important;
font-weight: 500 !important;
font-size: clamp(19px, 1.55vw, 25px) !important;
line-height: 1.15 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
color: var(--rz-cream) !important; /* = farba nadpisu "Skladaj a spoznávaj Slovensko" */
text-shadow: 0 1px 10px rgba(12, 7, 4, .45);
}
/* PC: o kusok vyssie nez byvalo logo - na tmavu zeminu NAD machom (mach je
~9-10 % vysky fotky, zeleny text na nom splyval) a mimo plavajuceho
WhatsApp tlacidla vpravo dole (~72px od spodku okna), ktore na beznych
notebookoch zakryvalo koniec textu. 14 % vysky hero splni oboje. */
@media (min-width: 761px) {
.module-master_slider-242::after { bottom: 14% !important; }
}
/* Telefon: mapa sa zmensuje so sirkou displeja, pevna velkost pisma nie -
pri 17px sa text na displejoch uzsich nez 414px dotykal mapy (namerane
2px). Velkost preto rastie so sirkou: 14.4px na 360, 15.6px na 390, 17px
od 425 - odstup od mapy ~19-25px. */
@media (max-width: 760px) {
.module-master_slider-242::after {
width: auto !important;
font-size: clamp(14px, 4vw, 17px) !important;
}
}
/* Najuzsie telefony (do 350px): mapa tu siaha nizsie prave nad zaciatok
textu, jeden riadok by ju pri citatelnej velkosti vzdy zasiahol. Dva riadky
zarovnane doprava (Handmade / Slovenské výrobky), 15px - odstup 18-22px. */
@media (max-width: 350px) {
.module-master_slider-242::after {
content: "Handmade\A Slovenské výrobky" !important;
white-space: pre !important;
text-align: right !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
}
/* --------------------------------------------------------------------------
[S2] Pas "GEOGRAFIA - HISTÓRIA - PRÍRODA - TECHNIKA" pod hero (30.9.):
bez machovej fotky a bez nadpisu. Pas je priehladny, takze pod nim presvita
to iste dlazdicovane drevo ako pod sekciou pod nim (body) - plynulo, bez
predelu. Uz to nie je ostry pas, preto medzery ako medzi sekciami: nad
popiskom cela medzera za ostrou hranou hero, pod nim polovica - popisok
patri k produktovym sekciam, ktore uvadza.
-------------------------------------------------------------------------- */
.rz-moss-band {
background: none !important;
min-height: 0 !important;
padding: calc(var(--rz-gap) * 2) 20px 0 !important;
}
.rz-moss-band + [class*="grid-row-bottom-"] {
padding-top: var(--rz-gap) !important;
}