/**
 * @file layout.css
 * Kontajnery, horná lišta, hlavička (branding), hlavné menu, obsahový panel, päta.
 * Nahrádza Omega zóny #zone-user / #region-branding / #region-menu /
 * #region-content / #zone-footer.
 */

/* --- Kontajner -------------------------------------------------------- */

.dm-container {
  width: 100%;
  max-width: var(--dm-container);
  margin-inline: auto;
  padding-inline: 10px;
}

/* Barrio .row má záporný margin -12px (polovica --bs-gutter-x 1.5rem),
   kontajner len 10px padding -> obsah pretiekol o 2px a stránka sa dala
   na mobile posúvať do strany (slider a karty na titulke, account menu). */
.dm-featured-top .view-content.row {
  --bs-gutter-x: 20px;
}

.region-secondary-menu.row {
  margin-inline: 0;
}

.dm-container.dm-mainmenu__inner {
  padding-inline: 0;
}

/* Povodne nowrap/flex-start -- vyhovovalo, kym tu bol jediny blok
   (Vernostny program). Od vlny 9 su tu 4 bloky (Pridaj blok, Pocet,
   kosik, Vernostny program) a nowrap ich natahoval na jeden riadok bez
   zmensenia -- posledny blok tak vytekal mimo hlavicky (nic obsah
   neorezava). wrap + flex-end drzi vsetko vnutri boxu a zarovnava to
   doprava, rovnako ako zvysok hlavicky. */
/* Grid s 2 stlpcami namiesto flex riadku -- pre 4 bloky (Pridaj blok,
   Pocet, kosik, Vernostny program) to VZDY da presne 2 riadky bez
   ohladu na sirku obsahu (flex-wrap zavisel od dostupnej sirky a
   niekedy zalomil na 3). */
section.row.region.region-branding-action {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: flex-end;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

/* Mobil (rovnaky zlom ako account menu -- pod 992px): 3 odkazy (Pridaj
   blok, Pravidla, Vernostny program) pod sebou v lavom stlpci bez
   pozadia (len text ako link), v pravom stlpci Pocet nad Kosikom.
   Poradie dosiahnute cez `order` -- DOM sa nemeni. Grid este stale
   2 stlpce (pravidlo vyssie), takze poradie 1,2,3,4 vyplni bunky
   riadok po riadku: (Pridaj blok | Pocet) / (Vernostny program | Kosik). */
@media (max-width: 991.98px) {
  section.row.region.region-branding-action {
    align-items: start;
  }

  #block-duluxmaliar-pridaj-blok     { order: 1; }
  #block-duluxmaliar-stav-bodov      { order: 2; }
  #block-duluxmaliar-branding-action { order: 3; }
  #block-duluxmaliar-popup-kosik     { order: 4; }

  /* Odkazy bez zeleneho pozadia -- len tucny biely text (farbu uz drzi
     #block-duluxmaliar-pridaj-blok a / #block-duluxmaliar-branding-action a
     v base.css s !important). */
  #block-duluxmaliar-pridaj-blok a,
  #block-duluxmaliar-branding-action a {
    display: inline;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  #block-duluxmaliar-pridaj-blok a:hover,
  #block-duluxmaliar-pridaj-blok a:focus,
  #block-duluxmaliar-branding-action a:hover,
  #block-duluxmaliar-branding-action a:focus {
    background: none;
  }
}

div#block-duluxmaliar-pridaj-blok,
#block-duluxmaliar-stav-bodov {
  width: auto;
}

/* Kosik (a Pocet) su uzsie ako stlpec, ktory im urcuje sirsi z oboch --
   bez tohto by v ramci vlastnej (sirsej) bunky "viseli" na lavo miesto
   toho, aby lícovali s pravym okrajom bloku. */
#block-duluxmaliar-stav-bodov,
#block-duluxmaliar-popup-kosik {
  justify-self: safe;
}



/* Sticky footer bez table-layoutu (D7 to riešil display:table). */
html, body { height: 100%; }

.dm-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dm-page__main { flex: 1 0 auto; }
.dm-page__footer { flex-shrink: 0; }

/* Vlna 50: admin toolbar (Gin classic) na frontende. Gin dáva body
   padding-top z vlastných premenných (2 × --gin-toolbar-height = 78px),
   no s fontmi témy je lišta 49px + tray 61px = 110px → hlavička (account
   menu) bola pod toolbarom. Drupal displace meria skutočnú výšku do
   --drupal-displace-offset-top — tú použiť. Špecificita kvôli Gin !important. */
html body.toolbar-fixed.toolbar-horizontal,
html body.toolbar-fixed.toolbar-vertical {
  padding-top: var(--drupal-displace-offset-top, 0px) !important;
}

/* --- Horná lišta (D7 zóna "user") ------------------------------------- */

.dm-topbar {
  background: var(--dm-topbar-bg);
}

.dm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.dm-topbar a {
  color: #2f3a57;
  text-transform: uppercase;
  font-weight: 700;
}

.dm-topbar a:hover,
.dm-topbar a:focus { color: var(--dm-orange-alt) !important; }

.dm-topbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-topbar li { display: inline-block; margin: 0; }

/* --- Hlavička / branding ---------------------------------------------- */

/* Tmavý blok nie je na celú šírku okna — je to centrovaný box zarovnaný
   s kontajnerom, so zaobleným pravým horným rohom. Preto pozadie nesie
   `__inner` (ktorý je zároveň .dm-container), nie `.dm-branding`. */
.dm-branding {
  position: relative;
}

.dm-branding__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  background: var(--dm-navy);
  min-height: var(--dm-branding-min-h);
}

@media (min-width: 980px) {
  .dm-branding__inner { border-radius: 0 28px 0 0; }
}

/* Ľavý stĺpec hlavičky: logo a pod ním sociálne siete (D7 .branding-data). */
.dm-branding__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dm-branding__logo {
  padding: 30px 0 0 20px;
}

/* D7: .logo-img img { width: 70% }. Logo je jeden JPG aj s nápisom
   PROFI MALIAR CENTRUM, takže sa neskladá z viacerých prvkov. */
.dm-branding__logo img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 739px) {
  .dm-branding__logo { padding: 10px 0 10px 0; }
  .dm-branding__logo img { width: 70%; }

  /* Logo tu uz nema lavy padding -> socialne ikony zarovnat na 0. */
}

/* Pravý blok hlavičky: superfish menu, sociálne siete, košík, stav bodov. */
.dm-branding__utility {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  margin-right: 30px;
}

.dm-branding__utility a,
.dm-branding__utility .nolink {
  color: var(--dm-text-invert);
  text-transform: uppercase;
  font-weight: 700;
}

.dm-branding__utility a:hover,
.dm-branding__utility a:focus { color: var(--dm-orange-alt) !important; }

/* --- Tlačidlo hamburgera pre account menu (len pod 992px) --------------
   D7 mal na tomto mieste modul responsive_menus (inštancia
   "responsive-menus-0-0"), ktorý pod ~962px menil #block-superfish-1 na
   prepínač ☰. V D11 tlačidlo skladá/rozbaľuje LEN account menu
   (.dm-branding__utility-inner) — rovnaký vzor ako .dm-mainmenu__toggle
   vyššie (js/branding-utility-toggle.js). Tlačidlo "Vernostný program"
   (.dm-branding__action) je mimo skladacej časti, ostáva vždy viditeľné. */

.dm-branding__utility-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: var(--dm-text-invert);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.dm-branding__utility-inner {
  display: contents;
}

@media (max-width: 991.98px) {
  /* `.dm-branding__utility` sa "rozpusti" do `.dm-branding__inner`
     (display:contents nemeni DOM) -- jeho deti (hamburger, account
     menu, nas region s Pridaj blok/Pocet/kosik/Vernostny program) sa
     tak stanu priamymi polozkami .dm-branding__inner, spolu s
     `.dm-branding__brand`. Grid s 2 stlpcami namiesto flex riadku:
     stlpec 1 = brand (logo + soc. ikony), stlpec 2 = nas
     .dm-branding__action -- VEDLA brandu, nie pod nim, takze hlavicka
     je vysoka len podla vyssieho z tych dvoch, nie podla ich suctu.
     Account menu (po rozbaleni hamburgerom) zaberie oba stlpce na
     2. riadku, na celu sirku obrazovky (nie len kontajnera). */
  .dm-branding__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 16px;
    /* Containing block pre absolutne polohovany hamburger nizsie. */
    position: relative;
  }

  #block-duluxmaliar-stav-bodov,
  #block-duluxmaliar-popup-kosik {
    justify-self: end;
  }

  #block-duluxmaliar-popup-kosik {
    width: auto;
  }

  .dm-branding__utility {
    display: contents;
  }

  .dm-branding__brand {
    grid-column: 1;
    grid-row: 1;
  }

  /* Hamburger ostava absolutne polohovany (mimo gridu), vpravo hore vo
     vyske loga. top zodpoveda padding-top loga (30px), right paddingu
     .dm-container. */
  .dm-branding__utility-toggle {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .dm-branding__utility-inner {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    grid-column: 1 / -1;
    grid-row: 2;
    /* Rovnaka sirka ako .dm-branding__inner (grid-column:1/-1 v ramci
       jeho vlastneho content boxu uz to zabezpecuje) -- povodny 100vw
       full-bleed trik (mimo paddingu kontajnera) tu uz nepatri, Marek
       chce obe rovnako siroke. */
    background: var(--dm-navy);
    padding: 15px 20px;
  }

  .dm-branding__utility.is-open .dm-branding__utility-inner {
    display: flex;
  }

  /* Nas blok v 2. stlpci, vedla brandu (nie pod nim). padding-top ho
     posunie pod hamburger, aby sa s nim nekryl -- "priamo pod
     .dm-branding__utility-toggle", ako pytal Marek. */
  .dm-branding__action {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding-top: 40px;
  }
}

/* Neprihlásený používateľ na mobile: žiadny hamburger (tlačidlo sa
   v page.html.twig nevykreslí), account menu (Prihlásenie partnera,
   Registrácia) je vidieť stále vpravo hore pod sebou, pod ním
   .dm-branding__action. .dm-branding__utility sa tu NErozpúšťa
   (display:contents), ostáva jedným stĺpcom gridu vedľa brandu. */
@media (max-width: 991.98px) {
  .dm-branding__utility--anon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-right: 0;
    padding: 10px 0 10px;
  }

  .dm-branding__utility--anon .dm-branding__utility-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    background: none;
  }

  .dm-branding__utility--anon .dm-branding__action {
    padding-top: 0;
  }

  /* !important: <ul> má Bootstrap triedu .flex-row
     (flex-direction: row !important). */
  .dm-branding__utility--anon #block-duluxmaliar-account-menu > ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .dm-branding__utility--anon #block-duluxmaliar-account-menu .nav-link {
    padding: 2px 0;
    text-align: right;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }

  /* Nižšia hlavička pre anonyma: bez min-height 140px, stĺpec loga sa
     zúži (minmax(0,1fr)), stĺpec odkazov má šírku podľa obsahu
     (Prihlásenie partnera v jednom riadku). */
  .dm-branding__inner:has(.dm-branding__utility--anon) {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-branding__brand {
    min-width: 0;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-branding__logo {
    padding: 8px 0 6px;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-branding__logo img {
    width: 100%;
    max-width: 190px;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-social {
    margin-bottom: 8px;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-social a {
    height: 26px;
    line-height: 26px;
  }

  .dm-branding__inner:has(.dm-branding__utility--anon) .dm-social i {
    font-size: 15px;
  }

  /* Prihlásenie partnera na úrovni hornej hrany loga (logo má
     padding-top 8px). */
  .dm-branding__utility--anon {
    padding: 8px 0;
    align-self: start;
  }

  /* Barrio .row (záporný margin) okolo account menu. */
  .dm-branding__utility--anon .region-secondary-menu {
    margin: 0;
  }

  /* Päta: vnútorný padding po bokoch (Naše weby, Copyright, Právne
     informácie, Cookie). */
  .dm-footer__inner > .region-footer-first,
  .dm-footer__inner > .region-footer-second {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dm-branding__utility--anon .dm-branding__action a {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* Rozbaľovacie používateľské menu je v components.css, sekcia
   „Používateľské menu" — Superfish sa v D11 nepoužíva. */

/* Tlačidlo „Vernostný program" (D7 #block-block-8 a.verpr). */
.dm-branding__action p { margin: 0; }

.dm-btn--verpr,
.dm-branding__action a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--dm-radius-sm);
  background: var(--dm-teal);
  color: var(--dm-text-invert);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

/* Kosik je tiez <a> vnutri .dm-branding__action, takze zdedil rovnaku
   zelenu pilulku ako Pridaj blok / Pravidla / Vernostny program -- to
   tam nepatri, ikonka ma byt bez pozadia, presne ako v kosik.css. */
.dm-branding__action a.dm-kosik__ikona {
  display: inline-flex;
  padding: 0;
  background: none;
  border-radius: 0;
  text-transform: none;
}

a.dm-kosik__ikona {
  display: flex;
  align-items: flex-start;
}

.dm-btn--verpr:hover,
.dm-branding__action a:hover,
.dm-branding__action a:focus {
  background: var(--dm-orange);
  color: var(--dm-text-invert) !important;
  text-decoration: none !important;
}

.dm-branding__action a.dm-kosik__ikona:hover,
.dm-branding__action a.dm-kosik__ikona:focus {
  background: none;
}

/* Sociálne ikony. */
.dm-social {
  display: inline-flex;
  gap: 2px;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  line-height: 1;
}

/* D7: ul.social-header li a { width:35px; height:35px; line-height:26px;
   border-radius:30px; color:#fff }, li.facebook a { background:#3b5998 }. */
.dm-social a {
  display: inline-block;
  /*width: 35px;*/
  height: 35px;
  line-height: 35px;
  margin-right: 2px;
  border-radius: 50%;
  color: var(--dm-text-invert);
  text-align: center;
}

.dm-social .fa,
.dm-social .fa-brands,
.dm-social i { font-size: 20px; }

/*
.dm-social .facebook a { background: #3b5998; }
.dm-social .facebook a:hover { background: #2d4373; }
.dm-social .instagram a { background: #c13584; }
.dm-social .instagram a:hover { background: #9b2a68; }
*/

/* Stav bodov / košík. */
.dm-points,
.dm-points .block-title,
.dm-cart,
.dm-cart .cart-count { color: var(--dm-text-invert); }

.dm-cart { margin-right: 30px; }

/* --- Drobečky --------------------------------------------------------- */

.dm-breadcrumb {
  padding: 0 15px 8px;
}

.dm-breadcrumb a { color: var(--dm-text); }
.dm-breadcrumb .is-active,
.dm-breadcrumb [aria-current="page"] { color: var(--dm-orange); }

/* --- Obsahový panel --------------------------------------------------- */

/* Podpisový prvok: svetlý panel so zaoblením 0 28px.
   D7 predloha: `#region-content .region-inner.region-content-inner`
   (background #f4f4f3, padding 30px 0, margin-bottom 30px,
   border-radius 0 28px 0 28px) — platilo GLOBÁLNE, na všetkých views,
   nodoch aj produktoch. Trieda je preto priamo na <main> v page.html.twig.

   `position: relative` je nutné — hlavička view vernostného programu
   („Hodnota nakúpeného tovaru…") sa v D7 pozicuje absolútne k tomuto panelu. */
.dm-content {
  position: relative;
  background: var(--dm-panel);
  /* Univerzálny princíp celého webu: sivý panel má 30px zo všetkých strán.
     Preto tu nie sú žiadne vnútorné padding-inline pravidlá na nadpisy
     a texty — panel odsadzuje obsah sám a nič sa nesčítava. */
  padding: 30px;
  margin-bottom: 30px;
  border-radius: var(--dm-radius-lg);
}

.page-node-37 .dm-content {
  background: transparent;
}

.dm-content .dm-prose p { margin: 15px 0 0; }

/* Titulka a katalóg produktov panel nemajú — obsah ide priamo na pozadie.
   .dm-content--plain je pripravená utilitná trieda, ale nikde v šablónach ani
   v preprocesse sa netriggrovala — panel sa preto doteraz zobrazoval aj na
   titulke aj na katalógu (nechcene). Body triedy "front" (jadro Drupalu) a
   "page-view-<view-id>" (Barrio, bootstrap_barrio_preprocess_html()) sú
   automatické, netreba vlastný preprocess — stačí ich použiť ako selektor. */
.dm-content--plain,
body.front .dm-content,
body.page-view-produkty-podla-typov .dm-content,
body.page-view-zakladne-produktove-skupiny .dm-content,
body.page-view-typy-produktu .dm-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Mriežka preklápacích kariet na týchto troch views nemá vlastný spodný
   okraj (rodič .dm-content vyššie má padding 0) — bez neho by dlaždice
   sedeli hneď nad pätou. Medzera len dole (hore mriežka naďalej lícuje s
   hlavičkou, to sa nemení). */
body.page-view-produkty-podla-typov .dm-grid,
body.page-view-zakladne-produktove-skupiny .dm-grid,
body.page-view-typy-produktu .dm-grid {
  margin-bottom: var(--dm-section-gap);
}

/* Oddeľovacia linka pod h2 na obsahových typoch. */
.dm-content--article h2 {
  border-bottom: 1px solid var(--dm-rule-alt);
  margin: 35px 0 0;
  padding-bottom: 20px;
}

/* --- Päta ------------------------------------------------------------- */

.dm-footer__top {
  background: var(--dm-footer-top);
  padding: 10px 0;
  text-align: center;
}

.dm-footer__bottom {
  background: var(--dm-footer-bottom);
  padding: 10px 0;
}

.dm-footer__bottom,
.dm-footer__bottom p,
.dm-footer__bottom a {
  color: var(--dm-text-invert);
  margin-bottom: 0;
}

.dm-footer__inner {
  width: 100%;
  max-width: var(--dm-container);
  margin-inline: auto;
}

/* Barrio pridáva .row (Bootstrap 5 grid: flex, .row > * dostáva width:100%
   + padding + margin-top) do každého regiónu bez vlastného nastavenia —
   vypnúť ho, na blokový tok / vlastnú grid nižšie. */
.dm-footer__top .row {
  display: block;
  margin: 0;
}

.dm-footer__top .row > *,
.dm-footer__bottom .row > * {
  width: auto;
  max-width: none;
  padding: 0;
  margin-top: 0;
}

/* Druhý riadok päty: Právne informácie + Cookie tlačidlo vľavo (jeden stĺpec,
   pod sebou), Copyright vpravo hore. Grid namiesto flexu — potrebujeme, aby
   Copyright (1. v DOM poradí) sedel v pravom stĺpci vedľa oboch riadkov
   ľavého stĺpca súčasne, čo margin-left:auto na flex itemoch nevie čisto. */
.dm-footer__bottom .row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  margin: 0;
}

@media (max-width: 739px) {
  .dm-footer__bottom .row { display: block; }
}

/* "Naše weby" — rad log partnerských webov. */
#block-duluxmaliar-footer-nase-weby {
  text-align: center;
  padding: 10px 0;
}

#block-duluxmaliar-footer-nase-weby h2 {
  font-size: var(--dm-block-title);
  margin: 0;
  text-align: left;
}

.dm-sites {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-sites li {
  display: inline-block;
  width: 39%;
  padding: 20px 5%;
  vertical-align: middle;
}

@media (min-width: 980px) {
  .dm-sites li { width: 15%; padding: 0 2%; }
  /* Sociálne ikony. */
  .dm-social {
    margin: 0 0 0 30px;
  }

}


.dm-sites img {
  max-width: 100%;
  height: auto;
}

/* Päta — druhý riadok (Copyright, Právne informácie, Cookie Settings).
   Ľavý stĺpec (Právne informácie hore, Cookie pod ním), pravý stĺpec
   Copyright zarovnaný nahor a napravo. Na úzkom viewporte (< 740px) grid
   vyššie prechádza na display:block — poradie v DOM (Copyright, Právne,
   Cookie) tam zostáva, len sa Copyright dostane hore, preto mu dávame
   medzeru zospodu Právnych informácií. */
#block-duluxmaliar-footer-pravne {
  grid-column: 1;
  grid-row: 1;
}

#block-duluxmaliar-footer-cookie {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

#block-duluxmaliar-footer-copyright {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

@media (max-width: 739px) {
  #block-duluxmaliar-footer-copyright {
    margin-bottom: 10px;
  }
  #block-duluxmaliar-footer-cookie {
    margin-top: 10px;
  }
}


/* --- Obsahová mriežka --------------------------------------------------- */

/* Zatiaľ jednoduché: bočné panely vedľa obsahu, na úzkych pod ním.
   Podrobný layout sa dolaďuje až pri redizajne obsahu. */
.dm-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-gutter);
  align-items: flex-start;
}

.dm-layout__main { flex: 1 1 60%; min-width: 0; }
.dm-layout__aside { flex: 1 1 100%; }

@media (min-width: 980px) {
  .dm-layout__aside { flex: 0 0 22%; }
}


/* --- Hlavné menu -------------------------------------------------------- */

/* D11 markup je Bootstrap 5 navbar dropdown (base theme bootstrap_barrio,
   knižnica bootstrap_cdn = bootstrap.bundle.min.js vrátane Popper.js):

     nav > ul.nav > li.nav-item(.dropdown)
             > .nav-link(.dropdown-toggle)[data-bs-toggle=dropdown]
             + ul.dropdown-menu[.show]
                 > li.dropdown-item > .nav-link--xxx (alebo <span> bez odkazu)

   Položky bez vlastného odkazu (route:<nolink>) majú <span> namiesto <a>,
   OBE majú triedu `.nav-link` (alebo `.nav-link--strojene-meno` v podmenu)
   — preto sa cieli len na `.nav-link`, nie na značku. `.dropdown-menu` NIE
   JE vnorené v <li>.dropdown-toggle>, je to SÚRODENEC toggle prvku.

   Bootstrap cez Popper.js pozicuje `.dropdown-menu` INLINE štýlom
   (position/inset/transform) pri každom otvorení — to nulujeme cez
   !important a nahrádzame vlastným position:absolute, aby panel sadol
   presne pod položku podľa nášho dizajnu. Otváranie/zatváranie necháva
   táto CSS na Bootstrap: on aj tak pridáva/uberá triedu `.show` pri kliku
   (funguje na mobile/klávesnici), my navyše dopĺňame otvorenie na
   :hover / :focus-within pre myš na desktope (D7 correct UX — malo sa
   otvárať na hover, nie až na klik).

   Hodnoty (farby, šírka mega panelu 940/1180px, --dm-radius-bl na
   "Produkty", --dm-radius-tl na dropdown, modrý "special offer" na
   "Akadémia") sú prevzaté 1:1 z D7 TB Megamenu (css/duluxmaliar-alpha-*). */

.dropdown-item.active, .dropdown-item:active,
.dropdown-item:focus, .dropdown-item:hover {
   background-color: transparent !important;
}

.dm-mainmenu {
  position: relative;
  margin: 5px 0 30px 0;
}

.dm-mainmenu__inner {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

/* --- Tlačidlo harmoniky (len pod 980px) --------------------------------- */

.dm-mainmenu__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 15px 16px;
  background: transparent;
  border: 0;
  color: var(--dm-text-invert);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 979px) {
  .dm-mainmenu__toggle { display: inline-flex; }
}

.dm-mainmenu nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Úroveň 0 — vodorovný pás -------------------------------------------- */

.dm-mainmenu nav > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Položky majú prirodzenú (jednoriadkovú) šírku podľa textu —
   "Produktové novinky 2026" je najširšia, ostatné rastú (flex-grow), aby
   spolu vyplnili celú šírku bloku a za poslednou položkou (Kontakt)
   nezostávalo prázdne miesto. */
.dm-mainmenu nav > ul > li {
  position: relative;
  flex: 1 1 auto;
  border-right: 1px solid var(--dm-menu-sep);
}

.dm-mainmenu nav > ul > li:last-child { border-right: none; }

.dm-mainmenu nav > ul > li > .nav-link {
  display: block;
  padding: 15px 16px;
  /* Pozadie je TU (nie na spoločnom kontajneri), inak zaoblený roh na
     "Produkty" nemá oproti čomu vytvoriť viditeľný zárez (D7: farbu mal
     každý <li> samostatne). */
  background: var(--dm-menu-bg);
  border: 0;
  color: var(--dm-text-invert);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

@media (min-width: 1220px) {
  .dm-mainmenu nav > ul > li > .nav-link { font-size: 16px; }
}

.dm-mainmenu nav > ul > li:hover > .nav-link,
.dm-mainmenu nav > ul > li:focus-within > .nav-link,
.dm-mainmenu nav > ul > li > .nav-link.show,
.dm-mainmenu nav > ul > li > .nav-link.active {
  background: var(--dm-menu-bg-hover);
  color: var(--dm-yellow) !important;
  text-decoration: none;
}

/* "Produkty" — jediná položka so zaobleným ľavým dolným rohom (D7). */
.dm-mainmenu nav > ul > li > .nav-link.dm-menu-mega {
  border-radius: var(--dm-radius-bl);
}

/* "Akadémia" — modrý akciový odtieň, priamo na nav-link (tam trieda je). */
.dm-mainmenu nav > ul > li > .nav-link.dm-menu-special-offer {
  background: var(--dm-special-offer);
}

.dm-mainmenu nav > ul > li:has(> .nav-link.dm-menu-special-offer) {
  border-right-color: var(--dm-special-offer);
}

.dm-mainmenu nav > ul > li > .nav-link.dm-menu-special-offer:hover,
.dm-mainmenu nav > ul > li:focus-within > .nav-link.dm-menu-special-offer,
.dm-mainmenu nav > ul > li > .nav-link.dm-menu-special-offer.active,
.dm-mainmenu nav > ul > li > .nav-link.dm-menu-special-offer.show {
  background: var(--dm-menu-bg-hover);
}

.dm-mainmenu nav > ul > li:has(> .nav-link.dm-menu-special-offer):hover,
.dm-mainmenu nav > ul > li:has(> .nav-link.dm-menu-special-offer):focus-within {
  border-right-color: var(--dm-menu-bg-hover);
}

/* --- Dropdown panel (Bootstrap .dropdown-menu) --------------------------- */

.dm-mainmenu .dropdown-menu {
  /* Nulujeme Popperov inline position/inset/transform — panel je odteraz
     čisto na našej CSS. */
  position: absolute !important;
  inset: auto !important;
  transform: none !important;
  top: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  z-index: 100;
  min-width: 240px;
  background: var(--dm-menu-row);
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  overflow: hidden;
  z-index: 9999;
}

/* Otvorenie na hover / klávesnicu (myš, desktop). Bootstrap sám pridáva
   `.show` pri kliku (mobil, klávesnica, screen reader) — necháme mu to.
   VÝHRADNE desktop (min-width:980px) — na mobile realny tap necha na <li>
   "prilepeny" :hover (bezny jav na dotykovych prehliadacoch), a bez tejto
   @media by potom podmenu pri druhom kliku (ktory uz spravne odstrani
   triedu .show) zostalo vizualne otvorene aj tak, len kvoli :hover. */
@media (min-width: 980px) {
  .dm-mainmenu nav > ul > li:hover > .dropdown-menu,
  .dm-mainmenu nav > ul > li:focus-within > .dropdown-menu {
    display: block !important;
  }
}

.dm-mainmenu .dropdown-item {
  position: relative;
  border-bottom: 1px solid var(--dm-rule);
  /* Bootstrap dava .dropdown-item padding 4px 16px — tu je <li> len obal,
     padding nesie az samotny <a>/<span> (D7 vzor). Bez tohto resetu sa
     16px zlava aj zprava scitava s paddingom odkazu (spolu 32px). */
  padding: 0;
}

.dm-mainmenu .dropdown-item:last-child { border-bottom: 0; }

/* Len samotný odkaz/popis — nie vnorený zoznam. Položky s vlastným
   podmenu (D7 "menu-item--expanded") musia ostať na jednom riadku
   rovnako ako v D7, preto sa cieli presne na <a>/<span>, nie na `> *`. */
.dm-mainmenu .dropdown-item > a,
.dm-mainmenu .dropdown-item > span {
  display: block;
  /* D7: padding 5px 0 5px 10px — zlava 10px, zprava 0. */
  padding: 8px 0 8px 10px;
  color: var(--dm-text-strong);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 1220px) {
  .dm-mainmenu .dropdown-item > a,
  .dm-mainmenu .dropdown-item > span { font-size: 16px; }
}

/* :not(:has(...)) — hover na RODIČOVI (napr. "Farby na steny a omietky")
   sa nemá zvýrazniť len preto, že myš je vnútri jeho VLASTNÉHO vnoreného
   podmenu (napr. hover na "Interiérové farby"). CSS :hover sa inak bublí
   na všetkých predkov v DOM strome — hover na potomkovi automaticky
   znamená aj :hover na obalovom <li>, keďže podmenu je jeho priamym
   dieťaťom (nie súrodencom mimo neho). Zvýrazniť sa má vždy len položka,
   nad ktorou je myš skutočne priamo, nie celý jej predkovský reťazec. */
.dm-mainmenu .dropdown-item:hover:not(:has(> .dropdown-menu:hover)):not(:has(> ul:hover)) > a,
.dm-mainmenu .dropdown-item:hover:not(:has(> .dropdown-menu:hover)):not(:has(> ul:hover)) > span,
.dm-mainmenu .dropdown-item:focus-within:not(:has(> .dropdown-menu:focus-within)):not(:has(> ul:focus-within)) > a,
.dm-mainmenu .dropdown-item:focus-within:not(:has(> .dropdown-menu:focus-within)):not(:has(> ul:focus-within)) > span {
  background-color: var(--dm-menu-bg-open);
  color: var(--dm-text-invert);
}

/* Bootstrap defaultne farbí .dropdown-item.active/:active na modrú
   (--bs-dropdown-link-active-bg) — prebíjame na D7 odtieň (rovnaký ako
   hover, žiadna osobitná "aktívna" farba). */
/* Drupal značí aktívnu stopu (active-trail) rovnakou triedou "active" ako
   skutočne aktuálnu stránku — bez tohto výberu by sa preto zvýraznil aj
   nadradený nadpis kategórie (napr. "Farby na steny a omietky"), keď je
   aktuálna stránka až jeho vnorená podpoložka (napr. "Interiérové farby").
   Zvýrazniť sa má len položka, ktorá vo svojom vlastnom podmenu už nemá
   ďalšiu .active položku — teda skutočný koniec aktívnej stopy. */
.dm-mainmenu .dropdown-item.active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)),
.dm-mainmenu .dropdown-item:active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)) {
  background-color: var(--dm-menu-bg-open);
  color: var(--dm-text-invert);
  text-decoration: none;
}

.dm-mainmenu .dropdown-item.active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)) > a,
.dm-mainmenu .dropdown-item.active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)) > span,
.dm-mainmenu .dropdown-item:active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)) > a,
.dm-mainmenu .dropdown-item:active:not(:has(.dropdown-menu .active)):not(:has(> ul .active)) > span {
  /*color: var(--dm-text-invert);*/
  color: #fff !important;
}

/* Vnorený zoznam (3.+ úroveň) v BEŽNOM (nie mega) dropdowne — vysúva sa
   doprava od rodiča ako flyout (D7 "dropdown-submenu"), nie mriežka. */
.dm-mainmenu .dropdown-item > ul,
.dm-mainmenu .dropdown-item > .dropdown-menu {
  position: absolute !important;
  inset: auto !important;
  transform: none !important;
  top: 0 !important;
  left: 100% !important;
  margin: 0 !important;
  z-index: 101;
  min-width: 200px;
  background: var(--dm-menu-row);
  border: 0;
  border-radius: 0;
  padding: 0;
  list-style: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  display: none;
}

.dm-mainmenu .dropdown-item:hover > ul,
.dm-mainmenu .dropdown-item:focus-within > ul,
.dm-mainmenu .dropdown-item:hover > .dropdown-menu,
.dm-mainmenu .dropdown-item:focus-within > .dropdown-menu,
.dm-mainmenu .dropdown-item > .dropdown-menu.show {
  display: block !important;
}

/* Rodicovsky panel ma `overflow: hidden` (viz .dm-mainmenu .dropdown-menu).
   Flyout 3. urovne vsak lezi CELY mimo neho (left: 100%), takze ho ten
   overflow orezal na nulu - polozky "Uskutocnene skolenia" a "Pripravovane
   skolenia" pod "Skolenia" (Akademia) sa preto vobec nezobrazovali, hoci
   v DOM aj v CSS existovali. Na paneloch, ktore vnorene podmenu naozaj
   obsahuju, orezavanie vypiname. Mega panel "Produkty" sa vynecha - tam su
   podpolozky v mriezke v toku, ziadny flyout, a orezavanie tam ma zostat. */
.dm-mainmenu .nav-link:not(.dm-menu-mega) + .dropdown-menu:has(.dropdown-item > .dropdown-menu),
.dm-mainmenu .nav-link:not(.dm-menu-mega) + .dropdown-menu:has(.dropdown-item > ul) {
  overflow: visible;
}

/* Ak sa flyout vpravo nezmesti do okna, js/menu-toggle.js
   (Drupal.behaviors.duluxmaliarMenuFlyoutFit) povesi na rodicovske <li>
   triedu `dm-flyout--left` a podmenu sa vysunie na druhu stranu.
   Len desktop - pod 980px je podmenu v toku (harmonika). */
@media (min-width: 980px) {
  .dm-mainmenu .dropdown-item.dm-flyout--left > ul,
  .dm-mainmenu .dropdown-item.dm-flyout--left > .dropdown-menu {
    left: auto !important;
    right: 100% !important;
  }
}

.dm-mainmenu .dropdown-item > ul > li,
.dm-mainmenu .dropdown-item > .dropdown-menu > li {
  border-bottom: 1px solid var(--dm-rule);
}

.dm-mainmenu .dropdown-item > ul > li > a,
.dm-mainmenu .dropdown-item > ul > li > span,
.dm-mainmenu .dropdown-item > .dropdown-menu > li > a,
.dm-mainmenu .dropdown-item > .dropdown-menu > li > span {
  display: block;
  padding: 8px 0 8px 10px;
  color: var(--dm-text-strong);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
}

.dm-mainmenu .dropdown-item > ul > li:hover > a,
.dm-mainmenu .dropdown-item > ul > li:hover > span,
.dm-mainmenu .dropdown-item > .dropdown-menu > li:hover > a,
.dm-mainmenu .dropdown-item > .dropdown-menu > li:hover > span,
.dm-mainmenu .dropdown-item > ul > li.active > a,
.dm-mainmenu .dropdown-item > ul > li.active > span,
.dm-mainmenu .dropdown-item > .dropdown-menu > li.active > a,
.dm-mainmenu .dropdown-item > .dropdown-menu > li.active > span {
  background-color: var(--dm-menu-bg-open);
  color: var(--dm-text-invert);
}

.dm-mainmenu .dropdown-item .dropdown-toggle::after {
  display: none;
}

/* --- Mega dropdown (len "Produkty", trieda dm-menu-mega na toggli) ------- */

/* `dm-menu-mega` pristáva na `.nav-link` (toggli), nie na <li> — trieda sa
   nastavuje cez `link.options.attributes.class` v scripts/…dokoncenie.php,
   ktorý mení atribúty odkazu, nie obalového <li>. Preto sa cieli cez `+`
   na súrodiaci `.dropdown-menu`. D7 mal "Produkty" ako plochý zoznam
   kategórií rozložený do viacerých stĺpcov (`.row-fluid .spanN`) —
   presne to isté robí táto mriežka nad plochým zoznamom `.dropdown-item`. */

/* D7 mal .tb-products-dropdown { width: 940px / 1180px } — presne
   hodnoty --dm-container pri tých istých breakpointoch (980/1220px), teda
   PRESNE šírka ul.nav.navbar-nav (`.dm-mainmenu__inner` je `.dm-container`,
   ul ju vypĺňa celú). "Produkty" je prvá položka, takže jej ľavý okraj =
   ľavý okraj ul — stačí teda pevná šírka na pôvodnom pozičnom kontexte
   <li>, netreba nič presúvať na <nav>. */
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu {
  width: var(--dm-container);
  padding: 10px 0;
}

@media (min-width: 980px) {
  /* Mriezkovy (viacstlpcovy) layout mega panelu je VYHRADNE desktopovy
     jav (otvaranie na hover). Na mobile (max-width:979px nizsie) sa panel
     otvara len klikom (trieda .show) a musi zostat jednostlpcovy - preto
     tento blok NESMIE byt bez @media, inak jeho vyssia specificita
     (obsahuje "nav > ul > li") prebije aj mobilny override, ak realny tap
     na mobile vyvola aj kompatibilny :hover (bezny jav na dotykovych
     prehliadacoch). */
  .dm-mainmenu nav > ul > li:hover > .nav-link.dm-menu-mega + .dropdown-menu,
  .dm-mainmenu nav > ul > li:focus-within > .nav-link.dm-menu-mega + .dropdown-menu,
  .dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu.show {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    align-items: start;
  }
}

/* Priami potomkovia mega panelu = stĺpce (kategórie). */
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item {
  border-bottom: 0;
  border-right: 1px solid var(--dm-rule);
  vertical-align: top;
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item:last-child {
  border-right: 0;
}

/* Hlavička stĺpca (kategória) — nadradená položka, VEĽKÝMI PÍSMENAMI.
   Smie ísť aj na 2 riadky (dôležitejšie je, že panel má pevnú šírku
   ul.nav.navbar-nav a nepreteká cez ňu). */
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item > span {
  display: block;
  /* D7 mega: 10px 0 10px 10px */
  padding: 5px 0 5px 10px;
  color: var(--dm-text-strong);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  white-space: normal;
  border-bottom: 1px solid var(--dm-rule);
  line-height: 18px;
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item > a:hover {
  color: #fff !important;
}

@media (min-width: 1220px) {
  .dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item > a,
  .dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item > span {
    font-size: 16px;
  }
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item:hover:not(:has(.dropdown-menu :hover)):not(:has(> ul :hover)) > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu > .dropdown-item:hover:not(:has(.dropdown-menu :hover)):not(:has(> ul :hover)) > span {
  background: var(--dm-menu-bg-open);
  color: var(--dm-text-invert);
}

/* 3. úroveň — zoznam POD kategóriou, v stĺpci VŽDY viditeľný (nie ďalší
   hover/klik panel). Pokryté, či D11 vykreslí čistú <ul> alebo znova zabalí
   ako .dropdown-menu (Bootstrapova šípka sa nižšie skrýva). */
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu > li,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul > li {
  border-bottom: 1px solid var(--dm-rule);
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu > li > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu > li > span,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul > li > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul > li > span {
  display: block;
  padding: 4px 0 4px 10px;
  color: var(--dm-text-strong);
  font-size: 13px;
  font-weight: 400;
  white-space: normal;
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu > li:hover > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item .dropdown-menu > li:hover > span,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul > li:hover > a,
.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-item > ul > li:hover > span {
  background: var(--dm-menu-bg-open);
  /*color: var(--dm-text-invert);*/
  color: #fff !important;
}

.dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu .dropdown-toggle::after {
  display: none;
}

/* --- Hamburger — text za ikonou (D7 zvyk) -------------------------------- */

.dm-mainmenu__toggle .fa-bars::after { content: " MENU"; }

/* Rovnaky vzor (D7: viditelny text MENU za ikonou) aj pre hamburger
   account menu v hlavicke. */
.dm-branding__utility-toggle .fa-bars::after { content: " MENU"; }

/* --- Mobil (< 980px): harmonika ------------------------------------------ */

@media (max-width: 979px) {
  /* Ziadna medzera pod modrou hlavickou (desktopovy margin-top:5px by tu
     presvital bielym pozadim stranky). */
  .dm-mainmenu {
    margin-top: 0;
  }

  /* Trvalo siva liniska LEN v ramci kontajnera (sirka hlavicky), nie cez
     celu sirku obrazovky - aj kym je harmonika zatvorena a nav este nema
     svoje vlastne pozadie z nav-linkov. */
  .dm-mainmenu__inner {
    background: var(--dm-menu-bg);
  }

  .dm-mainmenu nav {
    flex-basis: 100%;
    display: none;
  }

  .dm-mainmenu.is-open nav { display: block; }

  .dm-mainmenu nav > ul { flex-direction: column; }

  .dm-mainmenu nav > ul > li {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--dm-menu-sep);
  }

  .dm-mainmenu nav > ul > li > .nav-link {
    display: block;
    text-align: left;
    border-radius: 0 !important;
  }

  /* Vrchný panel (priamo pod nav-link) nie je plávajúci — skladá sa pod
     položku v bežnom toku, otvára/zatvára ho Bootstrap sám (klik na
     .nav-link pridá/uberie `.show`). Hover na mobile ignorujeme. */
  .dm-mainmenu nav > ul > li > .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: none;
    border-radius: 0;
    display: none;
  }

  .dm-mainmenu nav > ul > li > .dropdown-menu.show {
    display: block !important;
  }

  .dm-mainmenu .nav-link.dm-menu-mega + .dropdown-menu.show {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Čokoľvek vnorené hlbšie (kategórie v mega paneli aj bežné flyouty) sa
     už len skladá pod seba bez ďalšieho kliku — netreba rozbaľovať
     jednotlivo. */
  .dm-mainmenu .dropdown-item > ul,
  .dm-mainmenu .dropdown-item > .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: none;
    border-radius: 0;
    display: block !important;
  }

  .dm-mainmenu .dropdown-item > a,
  .dm-mainmenu .dropdown-item > span {
    padding-left: 30px;
    white-space: normal;
  }

  .dm-mainmenu .dropdown-item .dropdown-item > a,
  .dm-mainmenu .dropdown-item .dropdown-item > span {
    padding-left: 45px;
  }
}

/* --- Široký panel pre správcovské agendy -------------------------------- */

/* Triedu `dm-wide` vešia duluxmaliar_preprocess_html() na views zo zoznamu
   DULUXMALIAR_SIROKE_VIEWS. Rozširuje sa VÝHRADNE obsahový kontajner
   `.dm-container--content` — premennú --dm-container prepisovať nemožno,
   tú zdieľa aj horná lišta, branding a hlavné menu, a tie majú ostať
   v pôvodnej šírke. Pod 1220px sa nič nemení, tam je kontajner aj tak úzky
   alebo na 100 %. */

@media (min-width: 1220px) {
  body.dm-wide .dm-container--content { max-width: 90vw; }
}

/* --- Výpisy článkov: Barrio `.row` na .view-content -------------------- */

/* Barrio pridáva `.row` aj do `.view-content` týchto views. Bootstrap 5
   `.row` je `display:flex` s `margin-inline: -12px`, a `.row > *` dostáva
   natvrdo `width: 100%` + `padding-inline: 12px` — riadky výpisu preto
   pretekali 12px cez sivý panel `.dm-content` na obe strany.
   Rovnaká gotcha ako pri päte (viď vyššie), preto rovnaký fix: reset
   scopovaný cez automatické body triedy `page-view-<view-id>`
   (Barrio, bootstrap_barrio_preprocess_html()), nie globálne na `.row`.
   view id-čka: poradenstvo (Užitočné rady + Inšpirácie), akcie, novinky,
   skolenia (uskutočnené + pripravované). */

body.page-view-poradenstvo .view-content.row,
body.page-view-akcie .view-content.row,
body.page-view-novinky .view-content.row,
body.page-view-skolenia .view-content.row {
  display: block;
  margin-inline: 0;
}

body.page-view-poradenstvo .view-content.row > .views-row,
body.page-view-akcie .view-content.row > .views-row,
body.page-view-novinky .view-content.row > .views-row,
body.page-view-skolenia .view-content.row > .views-row {
  width: auto;
  max-width: none;
  padding: 0;
  margin-top: 0;
}

/* Pod 600px uz nie je priestor ani na 2 stlpce -- vsetko pod sebou,
   v poradi Pridaj blok / Pravidla / Vernostny program / Pocet / Kosik.
   Poradie riesi `order` (rovnaky trik ako vyssie), stlpec sa zmeni na
   jeden (1fr), takze grid jednoducho poskladá bunky pod seba. */
@media (max-width: 600px) {
  section.row.region.region-branding-action {
    grid-template-columns: 1fr;
  }

  #block-duluxmaliar-pridaj-blok     { order: 1; }
  #block-duluxmaliar-branding-action { order: 2; }
  #block-duluxmaliar-stav-bodov      { order: 3; }
  #block-duluxmaliar-popup-kosik     { order: 4; }
}