/* Opravy layoutu (11.–12. 10. 2026), patria za zrubko-theme-1.0.css.
   Téma je výpis vypočítaných štýlov z jednej konkrétnej stránky, preto obsahuje natvrdo
   zapísané rozmery, ktoré na iných stránkach a šírkach nesedia. */

/* Prázdny div.messages má v téme top: 0 aj bottom: 900px, takže na vysokom displeji
   je to neviditeľná vrstva (z-index 1003) cez celú hlavičku – nedá sa klikať.
   S bottom: auto má výšku obsahu, prázdny teda 0 px. */
div.messages:not(#z):not(#z):not(#z):not(#z) {
  bottom: auto;
}

/* Skryté prvky pre čítačky majú v téme natvrdo top v tisícoch px (napr. 7182px = výška
   domovskej stránky), každá kratšia stránka sa preto natiahne prázdnym miestom pod pätičkou.
   Nadpisy výpisu (blog, kategórie, stránkovanie) doplnené 12. 10. 2026. */
#screen-reader-announcer:not(#z):not(#z):not(#z):not(#z),
#listingControlsHeading:not(#z):not(#z):not(#z):not(#z),
#articlesListHeading:not(#z):not(#z):not(#z):not(#z),
#paginationTitle:not(#z):not(#z):not(#z):not(#z) {
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
}

/* Ikona knihy pri „Montážne návody“ je v téme len pre šírku 480–767 px; inde ostane
   biely štvorec (::before s bielym pozadím bez masky). */
div.navigation-in.menu > ul.menu-level-1 > li.menu-item-1097 > a:not(#z):not(#z):not(#z)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shoptet dáva názvu produktu height: 45px (2 riadky), téma prepisuje overflow na visible,
   takže 3–4-riadkový názov ESSVE prekrýva cenu. Platí v kategóriách aj v slideroch,
   na desktope aj na mobile (desktop doplnený 12. 10. 2026). */
.products-block.products .p .name {
  height: auto;
}

/* Karty v slideri rovnako vysoké, cena a tlačidlo v jednej línii. flex-basis: auto
   je nutné – Shoptetových 100 % by inak pri vyššej karte zalomilo tlačidlo vedľa ceny. */
.products-block .slick-track > .product:not(#z):not(#z) {
  height: auto;
}
.products-block .slick-track > .product > .p:not(#z):not(#z) {
  height: calc(100% - 8px);
}
.products-block .slick-track > .product .p-in-in {
  flex: 1 0 auto;
}
.products-block .slick-track > .product .p-bottom .prices:not(#z):not(#z) {
  flex-basis: auto;
}

/* Mobil: všetko len pod 768 px, kde Shoptet zapína mobilnú hlavičku. */
@media (max-width: 767px) {
  /* Pri scrolle nadol Shoptet vysunie riadok s logom (.top-navigation-bar, 50 px) preč,
     ale #header s vyhľadávaním ostáva na top: 50px – nad ním presvitá obsah. */
  #header {
    transition: transform .15s;
  }
  .scrolled-down body.ums_mobile_header_v1--on:not(.ordering-process):not(.search-window-visible) #header {
    transform: translateY(-50px);
  }

  /* Téma má pevnú šírku karty 195 px (prevzatú z desktopu); na 390 px telefóne sa druhá
     karta orezáva. Dve celé karty = (šírka okna − 2 × 10 px okraj) / 2. */
  div.products.products-block > div.draggable > div > div.product.col-sm-6:not(#z):not(#z) {
    flex-basis: calc((100vw - 20px) / 2);
    min-width: calc((100vw - 20px) / 2);
  }

  /* Chat tlačidlo (zrubko-chat) zakrývalo text a krížik spodného oznamu (57 px).
     Po zavretí oznamu ho Shoptet z DOM odstráni, tlačidlo sa vráti na 20 px. */
  body:has(.site-msg.information) #zr-chat-launcher {
    bottom: 77px;
  }
}

/* Farby newslettera, pätičky a cookie lišty (12. 10. 2026). Šablóna má v Shoptete všetky
   hlavné farby čierne (--color-primary atď. = #000000); hnedú dodával starý INAQ_style_v3.css.
   Téma zrubko-theme-1.0.css vznikla zo stránky bez zobrazenej cookie lišty a overovacieho
   obrázka, takže ich farby nepozná – tlačidlá spadli na čiernu, nadpis a odkaz na čiernu
   na tmavozelenom pozadí. Hnedá #A0522D podľa dizajn manuálu, hover #7E4023 z pôvodného štýlu. */
.custom-footer__newsletter h2:not(#z):not(#z):not(#z):not(#z) {
  color: #e5e5e5;
}
.custom-footer__newsletter label:not(#z):not(#z):not(#z),
.custom-footer__newsletter .consents:not(#z):not(#z):not(#z),
.custom-footer__newsletter .consents a:not(#z):not(#z):not(#z) {
  color: #fff;
}
/* Shoptet dáva poľu pre text z obrázka placeholder „Zadajte Váš e-mail“ – mätie, skryť ho. */
.custom-footer__newsletter input[name=captcha]::placeholder {
  color: transparent;
}
.custom-footer__newsletter .btn.btn-primary:not(#z):not(#z):not(#z) {
  background-color: #A0522D;
  border-color: #A0522D;
  color: #fff;
}
.custom-footer__newsletter .btn.btn-primary:not(#z):not(#z):not(#z):hover {
  background-color: #7E4023;
  border-color: #7E4023;
}

/* Odkazy v pätičke mali #4d4d4d na čiernom pozadí (kontrast ~2,4 : 1), ako telefón a e-mail vedľa. */
#footer .footer-section-content a:not(#z):not(#z):not(#z) {
  color: #e5e5e5;
}
#footer .footer-section-content a:not(#z):not(#z):not(#z):hover {
  color: #fff;
}

.siteCookies__button[data-testid=buttonCookiesAccept]:not(#z):not(#z):not(#z),
.siteCookies__link.js-cookies-settings:not(#z):not(#z):not(#z) {
  background-color: #A0522D;
  border-color: #A0522D;
  color: #fff;
}
.siteCookies__button[data-testid=buttonCookiesAccept]:not(#z):not(#z):not(#z):hover,
.siteCookies__link.js-cookies-settings:not(#z):not(#z):not(#z):hover {
  background-color: #7E4023;
  border-color: #7E4023;
  opacity: 1;
}
/* „Odmietnuť“ ako v pôvodnom štýle: biele, podčiarknutý text. */
.siteCookies__button[data-testid=buttonCookiesReject]:not(#z):not(#z):not(#z) {
  background-color: #fff;
  border: none;
  color: #000;
  font-weight: 400;
  text-decoration: underline;
}

/* Prepínač jazykov: téma skrýva názov jazyka (font-size: 0) a cez ::after dáva skratku SK/EN,
   ktorá font-size: 0 zdedí – v rozbalenom menu ostali len vlajky. Zobraziť plný názov
   „Slovenčina“ / „English“ (Pavol, 12. 10. 2026), skratku zrušiť. */
ul.languagesMenu__list.languagesMenu__list--language > li > a.languagesMenu__list__link > span.languagesMenu__list__name:not(#z):not(#z):not(#z) {
  font-size: 14px;
}
ul.languagesMenu__list.languagesMenu__list--language > li > a.languagesMenu__list__link > span.languagesMenu__list__name:not(#z):not(#z):not(#z)::after {
  content: none;
}

/* --- Kontrola layoutu 12. 10. 2026 (kod/zrubko-ui-patch/20261012-kontrola-layoutu.html) --- */

/* Formuláre (registrácia, kontakt, prihlásenie…): téma farbí text popisu poľa v
   span.required-asterisk na bielu – na bielom formulári ho nevidno. Biela patrí len
   tmavému newsletteru, ten má farbu z pravidla vyššie. */
fieldset > div.form-group.smart-label-wrapper > label > span.required-asterisk:not(#z):not(#z):not(#z) {
  color: inherit;
}
.custom-footer__newsletter span.required-asterisk:not(#z):not(#z):not(#z):not(#z) {
  color: #fff;
}

/* Odosielacie tlačidlá formulárov v obsahu stránky („Registrovať“, „Odoslať“…) berú
   --color-primary šablóny, ktorá je čierna. Premennú nemeníme – berú z nej farbu aj
   bežné odkazy na webe. */
#content form .btn.btn-primary:not(#z):not(#z):not(#z),
#content form input[type=submit].btn:not(#z):not(#z):not(#z) {
  background-color: #A0522D;
  border-color: #A0522D;
  color: #fff;
}
#content form .btn.btn-primary:not(#z):not(#z):not(#z):hover,
#content form input[type=submit].btn:not(#z):not(#z):not(#z):hover {
  background-color: #7E4023;
  border-color: #7E4023;
}

/* „Upraviť nastavenie cookies“ pri copyrighte: čierny odkaz na čiernej pätičke. Cez tento
   odkaz zákazník mení alebo odvoláva súhlas s cookies, musí byť viditeľný. */
#footer .copyright a.cookies-settings:not(#z):not(#z):not(#z) {
  color: #e5e5e5;
  text-decoration: underline;
}
#footer .copyright a.cookies-settings:not(#z):not(#z):not(#z):hover {
  color: #fff;
}

/* Hnedá čiara pod nadpisom stĺpca pätičky má natvrdo top: 27.8px (pod prvým riadkom);
   keď sa nadpis zalomí (napr. „Užitočné informácie“ pri ~1 400 px), ide cez text. */
#footer .footer-section-header h3:not(#z):not(#z):not(#z)::before {
  top: auto;
  bottom: 0;
}

/* Montážne návody: karty „súvisiace“ majú tmavozelené pozadie a biely text, nadpis však
   dostal tmavosivú z témy (kontrast 2,3 : 1). */
.zrn .card4 h2:not(#z):not(#z):not(#z) {
  color: #fff !important;
}

/* Mriežky v obsahu stránok majú v téme natvrdo výšky riadkov (grid-template-rows v px)
   z jednej šírky okna; pri inej šírke alebo dlhšom texte sa text oreže alebo prekrýva
   ďalší riadok (Doprava a platba, O nás, Kontakt, Predajňa, montážne návody, domovská
   stránka). Výška riadku podľa obsahu. */
.shipping-section-grid:not(#z):not(#z):not(#z),
.shipping-section-paymethods:not(#z):not(#z):not(#z),
.shipping-section-contacts:not(#z):not(#z):not(#z),
.about-us-section-grid:not(#z):not(#z):not(#z),
.about-us-section-gallery:not(#z):not(#z):not(#z),
.about-us-section-hero:not(#z):not(#z):not(#z),
.about-us-section-box-row:not(#z):not(#z):not(#z),
.contact-section-info-grid:not(#z):not(#z):not(#z),
.store-section-gallery:not(#z):not(#z):not(#z),
.store-section-maps:not(#z):not(#z):not(#z),
.store-section-hero:not(#z):not(#z):not(#z),
.blk-articles > .articles:not(#z):not(#z):not(#z),
.blk-products > .prod:not(#z):not(#z):not(#z),
.zrn .g2:not(#z):not(#z):not(#z),
#zr-brand-osmo > ul:not(#z):not(#z):not(#z),
#zr-brand-osmo > div:not(#z):not(#z):not(#z) {
  grid-template-rows: none;
}

@media (max-width: 767px) {
  /* Pole množstva pri „Do košíka“: label má natvrdo height: 72px a pole v ňom sedí nižšie
     ako tlačidlá +/− – číslo vyzerá posunuté k spodnému okraju. */
  form.variant-submit > fieldset > span.quantity > label:not(#z):not(#z):not(#z) {
    height: auto;
  }
}

/* Hlavné tlačidlo nákupu (detail produktu ESSVE „Pridať do košíka“, rovnaká trieda aj
   v objednávke) berie --color-secondary šablóny = čierna. Dizajn manuál, kap. 04: primárne
   tlačidlo #A0522D, pri prejdení #7E4023, zaoblenie 5 px, váha 600; čierne tlačidlá sa
   nepoužívajú. Pri dreve má „Do košíka“ hnedú už z vlastného skriptu. (12. 10. 2026) */
.btn.btn-conversion:not(#z):not(#z):not(#z),
a.btn.btn-conversion:not(#z):not(#z):not(#z) {
  background-color: #A0522D;
  border-color: #A0522D;
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
}
.btn.btn-conversion:not(#z):not(#z):not(#z):hover,
a.btn.btn-conversion:not(#z):not(#z):not(#z):hover {
  background-color: #7E4023;
  border-color: #7E4023;
  color: #fff;
}
.btn.btn-conversion:not(#z):not(#z):not(#z):focus-visible,
a.btn.btn-conversion:not(#z):not(#z):not(#z):focus-visible {
  outline: 2px solid #1B2E1B;
  outline-offset: 2px;
}

/* Štítok „Novinka“: Shoptet ho farbí #6495ED (S 79 %, L 66 %) – mimo palety, biely text
   len 3,0 : 1. Variant E (Pavol, 12. 10. 2026): odtieň modrej ostáva (H 219°), sýtosť a
   svetlosť z akčnej sienny #A0522D (S 56 %, L 40 %) → #2D539F, biely text 7,4 : 1.
   Písmo Medium 500 a zaoblenie 5 px podľa dizajn manuálu. */
.flag.flag-new:not(#z):not(#z):not(#z) {
  background-color: #2D539F;
  color: #fff;
  font-weight: 500;
  border-radius: 5px;
}

/* Štítky produktov podľa dizajn manuálu 2.1 (kap. 02, Štítky produktov). Akcia a zľava
   (kruh/obdĺžnik „−X %“) majú jednu farbu – obe znamenajú nižšiu cenu. (12. 10. 2026) */
.flag.flag-action:not(#z):not(#z):not(#z),
.flag.flag-discount:not(#z):not(#z):not(#z) {
  background-color: #9F2D40;
  color: #fff;
}
.flag.flag-action:not(#z):not(#z):not(#z),
.flag.flag-tip:not(#z):not(#z):not(#z) {
  font-weight: 500;
  border-radius: 5px;
}
.flag.flag-tip:not(#z):not(#z):not(#z) {
  background-color: #1B2E1B;
  color: #fff;
}
/* Technické príznaky riadia skripty dopravy a rezania, zákazník ich nevidí. „Rezanie na
   mieru“ malo bielu farbu – biely štítok na fotke, ktorý čítačka aj tak prečíta. */
.flag.flag-rezanie-na-mieru:not(#z):not(#z):not(#z),
.flag.flag-atyp-doprava:not(#z):not(#z):not(#z) {
  display: none;
}

/* Predchádzajúca cena pri zľave (§ 7 zákona 108/2024 Z. z.): prečiarknutá, tlmená farba
   textu z manuálu. .zr-prev-price dopĺňa zrubko-predchadzajuca-cena_N.js (drevo, cena
   za m² a varianty), .price-standard vykresľuje Shoptet (ESSVE a ostatné). */
.zr-prev-price,
.price-final .price-standard,
.p-final-price-wrapper .price-standard {
  margin-left: 6px;
  color: #5C5C5C;
  font-size: .85em;
  font-weight: 400;
  text-decoration: line-through;
  white-space: nowrap;
}
.variant-summary-main .zr-prev-price {
  display: block;
  margin-left: 0;
}
/* Percento zľavy pri cene na detaile – farba zľavy z manuálu namiesto žiarivo červenej. */
.p-final-price-wrapper .price-save:not(#z):not(#z):not(#z) {
  color: #9F2D40;
}

/* Po zapnutí „Štandardná cena: zobraziť“ dostane karta so zľavou triedu action-price a téma
   ju farbí #FF4433 (žiarivá červená mimo palety) a pôvodnú cenu čiernou s vyššou prioritou
   ako pravidlo vyššie. Cena ostáva ako pri ostatných kartách, pôvodná cena tlmená. */
div.prices > div.price.price-final.action-price:not(#z):not(#z):not(#z):not(#z),
div.prices > div.price.price-final.action-price > strong.action-price:not(#z):not(#z):not(#z):not(#z) {
  color: #000;
}
div.prices > div.price.price-final > span.price-standard:not(#z):not(#z):not(#z),
div.prices > div.price.price-final > span.price-standard > span:not(#z):not(#z):not(#z) {
  color: #5C5C5C;
}

/* --- Kontrola na šírkach 1440 / 1366 / 1280 / 1024 / 768 / 390 px (12. 10. 2026) --- */

/* Horný riadok 768–1199 px: otváracie hodiny (::after pri telefóne) natiahnu riadok, prepínač
   jazykov vypadne za okraj obrazovky a s ním sa posunie aj tlačidlo prihlásenia, ktoré
   potom prekrýva ikonu košíka (klik na košík otvoril prihlásenie). Hodiny sú v pätičke. */
@media (min-width: 768px) and (max-width: 1199px) {
  .top-navigation-contacts a.project-phone:not(#z):not(#z):not(#z):not(#z)::after {
    content: none;
    display: none;
  }
}

/* Zľava na karte: téma ju posúva natvrdo (left: 187px / 256px podľa šírky, pri ktorej vznikla);
   pri 768 px skončí mimo karty aj obrazovky. Vždy vpravo hore v karte. */
.products-block .p .flags-extra:not(#z):not(#z):not(#z):not(#z) {
  left: auto;
  right: 10px;
  width: auto;
}

/* Detail dreva: „Cena za m² / Balenie / Cena za balenie“ sú tri stĺpce bez zalomenia; keď je
   karta variantu úzka (≈1366–1400 px, mobil, EN texty), text vyteká do susedného stĺpca.
   Pri úzkej karte dva stĺpce, tretí pod nimi. */
.variant-meta:not(#z):not(#z):not(#z) {
  container-type: inline-size;
}
@container (max-width: 330px) {
  .variant-summary-info:not(#z):not(#z):not(#z) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
}

/* Rezanie na mieru (zrubko-doprava): téma dáva prepínačom position: absolute a ruší ich vzhľad,
   takže ležia neviditeľné pod textom – zákazník nevidí, čo má vybrané. */
.zd-choice input[type=radio]:not(#z):not(#z):not(#z):not(#z) {
  position: static;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 0;
  background: none;
  -webkit-appearance: radio;
  appearance: auto;
  accent-color: #1B2E1B;
}

/* Jednotka pri cene („/ bal.“, „/ ks“) mala #B2B2B2 – kontrast 2,1 : 1. Tlmený text z manuálu. */
.pr-list-unit:not(#z):not(#z):not(#z) {
  color: #5C5C5C;
}

/* Detail dreva: poradie zhora nadol varianta → doprava → rezanie (12. 10. 2026). Téma dáva
   každému div v stĺpci order: -7, tabuľke doručenia -4 a košíku -2. Box dopravy a rezania
   (div.zd-root) tak pri dreve bez variantov (KVH) predbehol cenu aj košík; pri obkladoch
   sedel len vďaka poradiu v HTML. Košík preto patrí k výberu variantu (-7) a box dopravy
   za neho (-6), pred krátky popis (-5). :has() obmedzuje zmenu na drevo, ESSVE ostáva. */
#product-detail-form .p-info-wrapper:has(> .zd-root) > table.detail-parameters:not(#z):not(#z):not(#z):not(#z),
#product-detail-form .p-info-wrapper:has(> .zd-root) > div.add-to-cart:not(#z):not(#z):not(#z):not(#z) {
  order: -7;
}
#product-detail-form .p-info-wrapper > div.zd-root:not(#z):not(#z):not(#z):not(#z) {
  order: -6;
}


/* _12: Výpis produktov – pri dreve s cenou za m²/bm skryť cenu na karte, kým zrubko-pdp_4.js nevykreslí
   cenu za m² (nastaví data-zr-price). Inak zákazník na chvíľu vidí cenu za balenie „/ ks“ a potom preblik.
   Len produkty s parametrom „Cena za m2“ / „Cena za bm“ (ID z data-micro-product-id, stav 13. 10. 2026) –
   ostatný tovar (ESSVE, KVH, farby) ukazuje cenu hneď. Nový produkt dreva = doplniť jeho ID sem
   (bez neho cena funguje, len krátko preblikne). visibility drží výšku karty, stránka neposkočí.
   Poistka: ak skript nebeží, cena sa ukáže sama po 1,5 s. */
.products .product:not([data-zr-price]):has(> .p:is(
    [data-micro-product-id="57"],
    [data-micro-product-id="60"],
    [data-micro-product-id="63"],
    [data-micro-product-id="81"],
    [data-micro-product-id="84"],
    [data-micro-product-id="273"],
    [data-micro-product-id="282"],
    [data-micro-product-id="285"],
    [data-micro-product-id="291"],
    [data-micro-product-id="3191"],
    [data-micro-product-id="3194"],
    [data-micro-product-id="3200"],
    [data-micro-product-id="3202"],
    [data-micro-product-id="3208"]
  )) .prices {
  visibility: hidden;
  animation: zr-price-reveal 0s linear 1.5s forwards;
}
@keyframes zr-price-reveal {
  to {
    visibility: visible;
  }
}

/* Blog a rubriky: téma zrubko-theme-1.0.css (riadok 1551) skrýva zoznam článkov #newsWrapper od 480 px. */
@media (min-width: 480px) {
  #newsWrapper#newsWrapper:not(#z):not(#z):not(#z) {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Karty produktov (úvodná stránka, produkty v článkoch, ďalšie výpisy): vnútro karty je stĺpec s flex-wrap:wrap
   a pevnou výškou, takže sa „Na sklade“ a „Detail“ na mobile zalomili do ďalšieho stĺpca mimo kartu
   (úvodná stránka 34 z 34 kariet, článok 28 z 28). Na desktope a v kategóriách sa poloha nemení (overené). */
.p .p-bottom > div:not(#z):not(#z):not(#z):not(#z) {
  flex-wrap: nowrap;
}

/* Okno „Pridané do košíka“: téma má pre stmavenie #cboxOverlay natvrdo height:900px – na vyššej obrazovke
   ostal spodok stránky nestmavený. */
#cboxOverlay#cboxOverlay:not(#z):not(#z):not(#z) {
  height: auto;
  top: 0;
  bottom: 0;
}

/* Okno „Pridané do košíka“ musí byť nad stmavením: téma dáva #cboxOverlay z-index 10000, #colorbox len 1002,
   takže vrstva ležala nad oknom a nedalo sa kliknúť na jeho tlačidlá. */
#colorbox#colorbox:not(#z):not(#z):not(#z) {
  z-index: 10001;
}

/* Tooltipy (napr. „Už obsahuje zľavu …“ v košíku, limity množstva): téma má div.tooltip.fade{opacity:0} so zvýšenou
   prioritou, takže zobrazený tooltip (trieda .in) bol priehľadný. */
div.tooltip.fade.in:not(#z):not(#z):not(#z) {
  opacity: 1;
}

/* Okno „Pridané do košíka“: téma dáva #cboxContent natvrdo max-height:800px a overflow:hidden, takže dlhší obsah
   (4 odporúčané produkty) sa orezal a nedalo sa posúvať (13. 10. 2026, CZ košík). Výšku okna počíta colorbox sám. */
#cboxContent#cboxContent:not(#z):not(#z):not(#z) {
  max-height: none;
}

/* Hlavné menu: všetky položky vždy viditeľné, „Montážne návody“ posledné (Pavol, 13. 10. 2026).
   Téma dáva menu pevnú výšku 60 px a kontajneru .navigation-in umelú šírku ~140 000 px a Shoptet presúva položky,
   ktoré sa nezmestia, do „≡ Viac“ (trieda .splitted) – v EN sa tak skrývali 4 z 8 položiek už pri 1024 px.
   Preto má kontajner šírku menu, položky sa zalomia do ďalšieho riadku (44 px), keď sa nezmestia, a odsadenie a písmo
   sa na užších šírkach zmenšia. Namerané (SK/CZ/EN): od 1440 px 1/1/1 riadok, 1200–1439 px 1/1/2, 992–1199 px 2/2/2,
   768–991 px 2/2/3. V admine ostávajú návody prvé – keby pravidlá neplatili, Shoptet skryje do „Viac“ radšej
   kategóriu než návody; poradie zobrazenia určuje `order`. Téma má pre každú položku menu vlastné pravidlo
   (napr. li.menu-item-744 > a), preto !important. */
@media (min-width: 768px) {
  #navigation#navigation:not(#z):not(#z):not(#z),
  #navigation#navigation .navigation-in:not(#z):not(#z):not(#z),
  #navigation#navigation .menu-level-1:not(#z):not(#z):not(#z),
  #navigation#navigation .menu-level-1 > li:not(#z):not(#z):not(#z) {
    height: auto !important;
  }
  #navigation#navigation .navigation-in:not(#z):not(#z):not(#z) {
    position: relative !important;
    width: 100% !important;
  }
  #navigation#navigation .menu-level-1:not(#z):not(#z):not(#z) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    min-height: 60px;
  }
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a:not(#z):not(#z):not(#z) {
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #navigation#navigation .menu-level-1 > li.menu-item-1097 > a:not(#z):not(#z):not(#z) {
    margin: 4px 0 4px 8px !important;
  }
  /* _20: Shoptet (splitMenu) dáva triedu .splitted každej položke, ktorej pravý okraj presahuje ľavý okraj „≡“,
     a prepočíta to len pri načítaní a zmene šírky okna – podľa toho, či už bolo načítané písmo a toto CSS, raz
     položku skryl, raz nie (EN 1280/1366 „Hardware“, SK 1024 „Kovanie“). Téma skrýva .splitted cez visibility. */
  #navigation#navigation .menu-level-1 > li.splitted:not(#z):not(#z):not(#z) {
    display: block !important;
    visibility: visible !important;
  }
  /* „≡“ (.menu-helper) je súrodenec #navigation v .navigation-wrapper, nie potomok – pravidlo z _18 na #navigation
     .menu-helper nezaberalo. Nesmie mať display:none: jQuery by mu vrátil polohu 0 a Shoptet by skryl všetky
     položky. Preto ostáva v layoute s nulovou šírkou na pravom okraji kontajnera, kam žiadna položka nesiaha. */
  #header .navigation-wrapper > .menu-helper:not(#z):not(#z):not(#z) {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    left: auto !important;
    right: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  #navigation#navigation .menu-level-1 > li.menu-item-1097:not(#z):not(#z):not(#z) {
    order: 99 !important;
  }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a:not(#z):not(#z):not(#z) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #navigation#navigation .menu-level-1 > li > a:not(#z):not(#z):not(#z) {
    font-size: 13px !important;
  }
  /* _20: téma má pre každú položku vlastné pravidlá (písmo na <b>, centrovanie, bez deliacej čiary), ale pod 1200 px
     nie pre všetky – „Farby a oleje“ a „Kovanie“ boli pri jej výpise v „≡“ a mali tenšie písmo zarovnané hore
     s čiarou, ostatné písmo 16 px namiesto 13 px. Jednotne pre všetky položky okrem návodov. */
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097):not(#z):not(#z):not(#z) {
    border-left-width: 0 !important;
  }
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a:not(#z):not(#z):not(#z) {
    display: flex !important;
    align-items: center !important;
  }
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a > b:not(#z):not(#z):not(#z) {
    font-size: inherit !important;
    font-weight: 600 !important;
  }
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a:not(#z):not(#z):not(#z) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #navigation#navigation .menu-level-1 > li:not(.menu-item-1097) > a:not(#z):not(#z):not(#z) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ---- _19 (13. 10. 2026): vzhľad hlásení Shoptetu, variant B z navrh-hlasenia/ (20261013-hlasenia-varianty.html) ---- */
/* Hlásenia Shoptetu (div.messages > .msg).
   Najmenšia zmena: hlásenie ostáva pás cez celú šírku hore, ako ho pozná Shoptet. Mení sa farba
   (stavové farby dizajn manuálu 2.1 namiesto #3c840f, #3531ff, #c75300, #d33a36), výška
   (12 px odsadenie namiesto 38 px – pás prekryje len hornú lištu, nie logo), pribudne ikona typu
   (význam nesie aj tvar, kap. 06) a krížik. Biely text spĺňa 4,5 : 1 na všetkých troch farbách.
   Písmo „inherit“ (web je zatiaľ v Poppins). Špecificita :not(#z) ×4 ako v zrubko-oprava-layoutu_N.css. */

div.messages:not(#z):not(#z):not(#z):not(#z) {
  --zr-msg-accent: #1B7A4B;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  pointer-events: none;
}

div.messages:not(#z):not(#z):not(#z):not(#z) > .msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--zr-msg-accent);
  border: 0;
  border-radius: 0;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  pointer-events: auto;
  animation: zr-msg-in .2s ease-out;
}

div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-success,
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-notice { --zr-msg-accent: #1B7A4B; }
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-warning { --zr-msg-accent: #8A5A00; }
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-error { --zr-msg-accent: #B3261E; }
/* Manuál nemá farbu „informácia“; Zrubko zelená, aby nevznikla farba mimo palety. */
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-info { --zr-msg-accent: #1B2E1B; }

/* Téma dáva .container šírku stránky; text má ostať pri ikone, nie roztiahnutý na 1200 px. */
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg > .container {
  flex: 0 1 auto;
  width: auto;
  max-width: 75ch;
  margin: 0;
  padding: 0;
}

div.messages:not(#z):not(#z):not(#z):not(#z) > .msg a {
  color: inherit;
  text-decoration: underline;
}

div.messages:not(#z):not(#z):not(#z):not(#z) > .msg::before,
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg::after {
  content: "";
  background: #FFFFFF;
  -webkit-mask: var(--zr-msg-icon) center / contain no-repeat;
  mask: var(--zr-msg-icon) center / contain no-repeat;
}

div.messages:not(#z):not(#z):not(#z):not(#z) > .msg::before {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  --zr-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-warning::before {
  --zr-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-error::before {
  --zr-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg-info::before {
  --zr-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

/* Krížik len naznačuje zatvorenie – Shoptet zatvára hlásenie kliknutím kamkoľvek do .msg. */
div.messages:not(#z):not(#z):not(#z):not(#z) > .msg::after {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  --zr-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

@keyframes zr-msg-in {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  div.messages:not(#z):not(#z):not(#z):not(#z) > .msg { animation: none; }
}

/* Na mobile text zarovnaný vľavo a pás pod výrezom displeja. */
@media (max-width: 767px) {
  div.messages:not(#z):not(#z):not(#z):not(#z) > .msg {
    justify-content: flex-start;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  div.messages:not(#z):not(#z):not(#z):not(#z) > .msg > .container {
    flex: 1 1 auto;
  }
}

/* ===== _21 (15. 10. 2026, ZM-45): stránky ESSVE pre projektantov =====
   1) Stránky majú vlastný <h1> v úvodnom bloku ako montážne návody ESSVE, preto sa na nich
      nadpis vypisovaný Shoptetom skryje (inak by boli na stránke dva nadpisy H1).
   2) Téma štýluje položky horného menu len podľa ID existujúcich stránok, takže nová položka
      „Pre projektantov“ by bola veľkými písmenami a bez podčiarknutia. Pravidlá nižšie platia
      pre všetky položky rovnako a hodnoty zodpovedajú doterajším položkám. */
body.in-essve-pre-projektantov .pageArticleDetail > header[itemprop="headline"],
body.in-essve-pre-projektantov-drevo .pageArticleDetail > header[itemprop="headline"],
body.in-essve-pre-projektantov-beton .pageArticleDetail > header[itemprop="headline"],
body.in-essve-for-designers .pageArticleDetail > header[itemprop="headline"],
body.in-essve-for-designers-timber .pageArticleDetail > header[itemprop="headline"],
body.in-essve-for-designers-concrete .pageArticleDetail > header[itemprop="headline"],
body.in-essve-pro-projektanty .pageArticleDetail > header[itemprop="headline"],
body.in-essve-pro-projektanty-drevo .pageArticleDetail > header[itemprop="headline"],
body.in-essve-pro-projektanty-beton .pageArticleDetail > header[itemprop="headline"] {
  display: none !important;
}
.top-navigation-menu > ul.top-navigation-bar-menu > li::before {
  display: none !important;
}
.top-navigation-menu > ul.top-navigation-bar-menu > li {
  font-size: 14px !important;
  line-height: 19.3846px !important;
}
.top-navigation-menu > ul.top-navigation-bar-menu > li > a {
  text-transform: none !important;
  text-decoration-line: underline !important;
}
#navigation ul.top-navigation-bar-menu.cloned-mobile-menu > li::before {
  display: none !important;
}
#navigation ul.top-navigation-bar-menu.cloned-mobile-menu > li {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  font-size: 14px !important;
}
#navigation ul.top-navigation-bar-menu.cloned-mobile-menu > li > a {
  text-transform: none !important;
  text-decoration-line: underline !important;
}