/* 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;
  }
}