/**
 * @file components.css
 * Karty, dlaždice katalógu, flip efekt, detail produktu, horizontálne taby,
 * hero na titulke, slider, video, mapa, odtiene farieb.
 */

/* --- Mriežka kariet ---------------------------------------------------- */
/* D7 .grid5: 98 % mobil → 48 % narrow → 23 % normal → 18 % wide. */

.dm-grid {
  display: flex;
  flex-wrap: wrap;
  /* `gap` namiesto space-between/margin techniky: medzera medzi dlaždicami
     je VŽDY rovnaká (aj v neúplnom poslednom riadku), lebo ju nesie sama
     `gap` vlastnosť, nie rozdelenie voľného priestoru. Šírka dlaždice je
     dopočítaná cez calc() tak, aby N dlaždíc + (N-1) medzier dalo presne
     100 % — plný riadok sa preto sám roztiahne na celú šírku kontajnera
     (prvá dlaždica zľava, posledná sprava lícujú s .dm-container, rovnako
     ako .dm-branding__inner). Neúplný posledný riadok (justify-content
     necháva na default flex-start) ostáva zarovnaný zľava, so ROVNAKOU
     medzerou ako v riadkoch nad — nenaťahuje sa. */
  column-gap: 1.5%;
  /* row-gap NESMIE byť percentuálny (na rozdiel od column-gap vyššie) —
     percento pri riadkovej medzere flex kontajnera s auto výškou sa v
     rôznych prehliadačoch počíta inak (vo Firefoxe vychádza 0, kontajner
     preto "nevidel" vlastnú výšku so všetkými riadkami a posledná dlaždica
     v neúplnom riadku pretekala pod kontajner, napr. až do päty). Pevný px
     rozmer je spoľahlivý naprieč prehliadačmi. */
  row-gap: var(--dm-gutter);
}

.dm-grid > * { width: 100%; }

@media (min-width: 740px)  { .dm-grid > * { width: calc((100% - 1.5%) / 2); } }
@media (min-width: 980px)  { .dm-grid > * { width: calc((100% - 3 * 1.5%) / 4); } }
@media (min-width: 1220px) { .dm-grid > * { width: calc((100% - 4 * 1.5%) / 5); } }

/* Trojica dlaždíc (základné produktové skupiny / typy produktu) — 3 v riadku
   od 980px, rovnaký princíp, len vlastná (o niečo väčšia) medzera. */
.dm-grid--3 { column-gap: 2%; row-gap: var(--dm-gutter); }
.dm-grid--3 > * { width: 100%; }

@media (min-width: 740px) { .dm-grid--3 > * { width: calc((100% - 2%) / 2); } }
@media (min-width: 980px) { .dm-grid--3 > * { width: calc((100% - 2 * 2%) / 3); } }

/* --- Dlaždica / karta -------------------------------------------------- */

.dm-tile {
  border-radius: var(--dm-radius-sm);
  overflow: hidden;
  vertical-align: top;
}

.dm-tile__media {
  width: 100%;
  text-align: center;
  background: var(--dm-surface);
  padding: 10px 20px;
}

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

.dm-tile__title {
  background: var(--dm-blue);
  color: var(--dm-text-invert);
  font-weight: 700;
  text-align: left;
  padding: 5px 14px;
  height: 45px;
  line-height: 20px;
  display: flex;
  align-items: center;
}

/* `a` má v colors.css vlastné `color: #0071b3` — cieli priamo na <a>, takže
   vyhráva nad zdedenou farbou z rodiča bez ohľadu na jeho špecificitu. */
.dm-tile__title a { color: var(--dm-text-invert); }

/* Na výpise katalógu (/produkty) je titulok jednoriadkový a väčší —
   D7 mal titulok v <h2> (30px, --dm-h2), tu je to <a> bez h2 wrapperu,
   overené computed stylom naživo (getComputedStyle na .front-title a). */
.dm-tile--catalog .dm-tile__title { line-height: 45px; font-size: var(--dm-h2); }

/* Obrázok kategórie má vyplniť celý rámček bez okrajov — D7 malo
   .front-image bez paddingu (overené computed stylom naživo, 0px). */
.dm-tile--catalog .dm-tile__media { padding: 0; }

/* --- Flip karta -------------------------------------------------------- */

.dm-flip {
  position: relative;
  perspective: 1000px;
  border-radius: 0 35px 0 35px;
}

.dm-flip__front,
.dm-flip__back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
}

.dm-flip__front {
  position: relative;
  z-index: 2;
  background: var(--dm-surface);
  border-radius: var(--dm-radius-sm);
  overflow: hidden;
  text-align: center;
}

.dm-flip__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotateY(-180deg);
  border-radius: 32px;
  background: var(--dm-navy-card);
  color: var(--dm-text-invert);
  overflow: hidden;
  text-align: center;
}

.dm-flip:hover .dm-flip__front,
.dm-flip:focus-within .dm-flip__front,
.dm-flip.is-flipped .dm-flip__front { transform: rotateY(180deg); }

.dm-flip:hover .dm-flip__back,
.dm-flip:focus-within .dm-flip__back,
.dm-flip.is-flipped .dm-flip__back { transform: rotateY(0deg); }

/* `p, div { color: var(--dm-text) }` v base.css cieli priamo aj na <p> v
   poli field_popis vnútri — dedenie z .dm-flip__desc ho neprebije (priame
   pravidlo na elemente vždy vyhráva nad dedením z predka, viď rovnaký
   gotcha pri .dm-tile__title a). Preto `*` a !important — platí pre
   /produkty aj /produkty/<kategoria> (zdieľaný komponent), rovnaký vzor
   ako .dm-ref-grid .dm-flip__desc nižšie. */
.dm-flip__desc,
.dm-flip__desc * {
  text-align: left;
  color: var(--dm-text-invert) !important;
}

/* D11 zámerne odlišné od D7 (20px/15px/18px) — väčší odstup titulku od
   popisu (padding-top 34px), menšie a tesnejšie riadkovanie textu, aby sa
   BIELA FARBA a popis vizuálne nezlepovali (požiadavka crevka, vlna 31). */
.dm-flip__desc {
  padding: 34px 10px 15px;
  font-size: 13px !important;
}

.dm-flip__desc p {
  line-height: 17px;
}

.dm-flip__more {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px 20px;
  background: var(--dm-navy-card-foot);
  border-radius: 0 0 0 14px;
  text-align: left;
}

.dm-flip__more a {
  color: var(--dm-text-invert);
  font-weight: 700;
  background-color: var(--dm-teal);
  padding: 5px 10px;
  border-radius: var(--dm-radius-sm);
  text-decoration: none;
}

.dm-flip__more a:hover,
.dm-flip__more a:focus { background: var(--dm-orange);
color: #fff !important; }

/* Dotykové zariadenia: hover neexistuje — preklopenie rieši JS triedou is-flipped. */
@media (hover: none) {
  .dm-flip:hover .dm-flip__front { transform: none; }
  .dm-flip:hover .dm-flip__back { transform: rotateY(-180deg); }
}

/* --- Hero na titulke --------------------------------------------------- */

.dm-hero {
  position: relative;
  margin-bottom: 20px;
  border-radius: var(--dm-radius-lg);
  overflow: hidden;
}

.dm-hero__caption {
  background: var(--dm-blue);
  width: 100%;
  padding: 5px 14px;
  line-height: 45px;
  text-align: left;
}

.dm-hero__caption h2 {
  padding: 5px 14px;
  margin-bottom: 0;
  color: var(--dm-text-invert);
  font-size: 25px;
}

/* Dvojica akcia + novinka vedľa seba od normal. */
@media (min-width: 980px) {
  .dm-hero-pair { display: flex; gap: 2%; }
  .dm-hero-pair > * { width: 49%; }
}

/* --- Slider ------------------------------------------------------------ */

.dm-slider img { border-radius: 0 25px 0 25px; }

.dm-slider__caption {
  border-radius: 0 0 0 25px;
  border: 1px solid #000;
  padding-left: 25px;
}

/* --- Detail produktu --------------------------------------------------- */

.dm-product { display: flex; flex-wrap: wrap; }

.dm-product__left,
.dm-product__right {
  border-radius: var(--dm-radius-lg);
  width: 100%;
  float: none;
}

.dm-product__left  { background: var(--dm-surface); }
.dm-product__right { background: var(--dm-panel); margin-bottom: 20px; }

@media (min-width: 980px) {
  .dm-product__left  { width: 51.33333%; margin-right: 0.5%; padding-right: 15px; }
  .dm-product__right { width: 45.66667%; margin-left: 0.5%; }
}

.dm-product__right .field { padding: 10px 30px; }

.dm-product .field--name-body,
.dm-product .field--name-field-pouzitie,
.dm-product .field--name-field-vlastnosti {
  border-bottom: 1px solid var(--dm-rule-alt);
}

.dm-product__image { text-align: center; }
.dm-product__image img { padding: 20px 0; }

/* Balenia oddelené čiarkou. */
.dm-product .field--name-field-balenie .field__item {
  display: inline-block;
  padding-right: 10px;
}

.dm-product .field--name-field-balenie .field__item:not(:last-child)::after {
  content: ",";
}

/* "Kde kúpiť" (v D11 markupe pod tabom „Kúpiť online" — field_kde_kupit
   je v node--produkty--full.html.twig zapojený tam, tab „Kde kúpiť" má
   field_produktova_znacka; pomenovanie nesedí s D7, ale nie je to súčasť
   tejto úlohy) — zoznam predajcov s ikonou košíka pred každým odkazom,
   presne D7 vzor. D7 mal rastrový obrázok (images/popup-cart-icon.png);
   v D11 namiesto neho ikona z Font Awesome (fa-cart-shopping, \f07a —
   knižnica je už globálne pripojená, rovnaký vzor ako fa-bars v hlavičke),
   vykreslená priamo cez ::before presne tak, ako to v D7 robil obrázok —
   žiadny <i> tag ani zásah do twigu netreba. */
.field--name-field-kde-kupit.field--type-link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
}

.field--name-field-kde-kupit.field--type-link a::before {
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  color: var(--dm-teal);
}

/* --- Horizontálne taby ------------------------------------------------- */

.dm-tabs { padding-top: 30px; clear: both; border: 0; }

.dm-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #787c80;
}

.dm-tabs__list li {
  flex: 1 1 auto;
  background: #787c80;
  border-right: 1px solid #727578;
  margin: 0;
  padding: 0;
}

.dm-tabs__list li:last-child { border-right: 0; }

.dm-tabs__list a {
  display: block;
  height: 100%;
  color: var(--dm-text-invert);
  font-size: 14px;
  line-height: 1.3;
  padding: 13px 10px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.dm-tabs__list a::after { content: "\003E"; padding-left: 6px; }

@media (min-width: 1220px) {
  .dm-tabs__list a { font-size: var(--dm-font-size); padding: 13px 12px; }
  .dm-tabs__list a::after { padding-left: 8px; }
}

.dm-tabs__list a.is-active,
.dm-tabs__list a.active,
.dm-tabs__list a:hover,
.dm-tabs__list a:focus {
  color: var(--dm-yellow) !important;
  background: #57595b;
}

.dm-tabs__list a.is-active::after,
.dm-tabs__list a.active::after { content: "\02C5"; }

/* Telefón / tablet: vertikálne taby (položky pod sebou). */
@media (max-width: 979.98px) {
  .dm-tabs__list { flex-direction: column; }
  .dm-tabs__list li {
    border-right: 0;
    border-bottom: 1px solid #727578;
  }
  .dm-tabs__list li:last-child { border-bottom: 0; }
  .dm-tabs__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--dm-font-size);
    padding: 12px 20px;
    text-align: left;
    white-space: normal;
  }
}

.dm-tabs__pane {
  background: var(--dm-panel-alt);
  margin-top: 5px;
  padding: 20px;
}

/* --- Výber odtieňa ----------------------------------------------------- */

.dm-shade {
  position: relative;
  width: 130px;
  margin: 5px;
  display: inline-block;
  vertical-align: top;
}

.dm-shade__swatch {
  border: 2px solid #000;
  border-radius: 17px;
  overflow: hidden;
}

.dm-shade__name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  color: var(--dm-text-invert);
  font-weight: 700;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.dm-shade:hover .dm-shade__swatch,
.dm-shade.is-selected .dm-shade__swatch {
  border-color: var(--dm-teal);
  background: rgba(5, 180, 150, 0.2);
}

.dm-shade.is-selected::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(5, 180, 150, 0.2) url(../images/selected.png) center/22px no-repeat;
  z-index: 2;
}

/* --- Obrázky a galéria ------------------------------------------------- */

.dm-content .field--type-image img,
.dm-figure img {
  margin-bottom: 20px;
  border-radius: var(--dm-radius-lg);
}

/* --- Video (16:9) ------------------------------------------------------ */

.dm-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.dm-video iframe,
.dm-video object,
.dm-video embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Mapa -------------------------------------------------------------- */

.dm-map { margin-bottom: 30px; }

/* --- Kontakt ----------------------------------------------------------- */

.dm-contact__row { width: 100%; margin-bottom: 25px; }

@media (min-width: 980px) {
  .dm-contact__row { width: 48%; display: inline-block; margin-right: 1%; }
}

/* --- Hodnotenie a značky (sprity) -------------------------------------- */
/*
 * POZOR: v D7 boli triedy viazané na TID (rating-42..46, mark-108..116).
 * Po migrácii budú iné TID — v D11 generovať triedy z machine name termu.
 * Sprity: images/sprites.png (237×90) a images/sprites-mark-3.png (336×90).
 */

.dm-rating,
.dm-marks {
  position: relative;
  margin-bottom: 0;
  height: 45px;
  list-style: none;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 -45px;
}

.dm-rating { width: 237px; background-image: url(../images/sprites.png); }
.dm-marks  { width: 336px; background-image: url(../images/sprites-mark-3.png); }

.dm-rating li,
.dm-marks li { display: inline-block; position: relative; margin: 0; }

.dm-rating__item,
.dm-marks__item {
  position: absolute;
  top: -20px;
  height: 42px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  z-index: 2;
}

.dm-rating--empty,
.dm-marks--empty { text-indent: -9999px; }


/* --- Výpis katalógu ---------------------------------------------------- */

.dm-listing__title { padding: 0 30px; }

/* Položka mriežky nesie pozadie, zaoblenie a orez — presne ako D7 `.grid5`.
   Flip kontajner vnútri NESMIE mať overflow: hidden, inak sa v niektorých
   prehliadačoch rozbije preserve-3d. */
.dm-grid__item.dm-tile { overflow: hidden; }

/* Karta musí mať výšku z prednej strany, zadná je absolútna. */
.dm-flip { display: block; }
.dm-flip__front { display: block; }

/* Obrázok produktu vo výpise — D7 mal .grid5 .views-field-field-image padding 10px 20px. */
.dm-tile__media a { display: block; }

/* --- Detail produktu: doplnky ------------------------------------------ */

/* Štítky polí (Použitie, Vlastnosti, Schnutie…) — D7 field-label-above. */
.dm-product .field__label,
.dm-tabs__pane .field__label {
  font-weight: 700;
  color: var(--dm-text-strong);
}

/* Súbory na stiahnutie. */
.dm-tabs__pane .file a { font-weight: 700; }

/* Vnorené polia v záložkách nemajú dvojité odsadenie. */
.dm-tabs__pane > .field { margin-bottom: var(--dm-rhythm); }
.dm-tabs__pane > .field:last-child { margin-bottom: 0; }


/* --- Používateľské menu ------------------------------------------------- */

/* D7 to riešil modulom Superfish (blok #block-superfish-1). Pre Drupal 11
   Superfish vydanú verziu nemá a netreba ho: Barrio vypľuje čisté vnorené
   <ul>, na rozbalenie stačí CSS :hover. `:focus-within` je navyše oproti D7 —
   bez neho sa do podmenu nedá dostať klávesnicou. */

#block-duluxmaliar-account-menu > ul {
  justify-content: flex-end;
  margin: 0;
}

#block-duluxmaliar-account-menu li {
  position: relative;
}

/* D7: #block-superfish-1 li a { color:#fff; text-transform:uppercase;
   font-weight:bold }, li.sf-depth-1 { padding:5px }. */
#block-duluxmaliar-account-menu .nav-link {
  padding: 5px;
  color: var(--dm-text-invert);
  font-weight: 700;
  text-transform: uppercase;
}

#block-duluxmaliar-account-menu .nav-link:hover,
#block-duluxmaliar-account-menu .nav-link:focus,
#block-duluxmaliar-account-menu .nav-link:active {
  color: var(--dm-orange-alt) !important;
}

/* D7: #superfish-1 ul.sf-megamenu { background:#0c1f51; width:16em }. */
#block-duluxmaliar-account-menu li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
  width: 16em;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--dm-navy);
  visibility: hidden;
}

#block-duluxmaliar-account-menu li:hover > ul,
#block-duluxmaliar-account-menu li:focus-within > ul {
  visibility: visible;
}

/* D7: #superfish-1 li.sf-depth-2 a { border-top:1px solid #eee;
   border-bottom:1px solid #D7D7D8; text-transform:none; padding:7px 5px }. */
#block-duluxmaliar-account-menu li > ul .nav-link {
  padding: 7px 5px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid var(--dm-rule);
  text-transform: none;
}

/* Na dotykových šírkach hover neexistuje — podmenu ostane v toku.
   D7 na to mal responsive_menus s prepínačom ☰ pri 962 px. */
@media (max-width: 991.98px) {
  /* Panel account menu je teraz na celu sirku obrazovky (css/layout.css,
     .dm-branding__utility-inner) -- polozky preto zarovnavame zlava, nie
     sprava ako na desktope. */
  #block-duluxmaliar-account-menu > ul {
    justify-content: flex-start;
  }

  #block-duluxmaliar-account-menu li > ul {
    position: static;
    width: auto;
    visibility: visible;
    background: transparent;
  }

  /* Položka s podmenu (tu "Servis pre maliara") na celú šírku, nech sa
     nemusí deliť o riadok so susednými top-level položkami a podmenu pod
     ňou má poriadny priestor. */
  #block-duluxmaliar-account-menu .nav-item.menu-item--expanded {
    flex: 0 0 100%;
  }
}

/* --- Pozadie stránky --------------------------------------------------- */
/* Prebíja sa dvoje: Bootstrap reboot (`var(--bs-body-bg)`) a stock Barrio
   paleta v colors.css (`background: #292929`). colors.css je v global-styling
   uvedená AŽ ZA týmto súborom, preto tu `!important` — colors.css ostáva
   nedotknutá. */
:root {
  --bs-body-bg: var(--dm-body-bg);
}

body {
  background-color: var(--dm-body-bg) !important;
}

/* --- Legenda partnerov (#rating) --------------------------------------- */
/* Prenesené z D7 global.css 1961–2032. Ikony sú výrezy zo sprite
   images/sprites-mark-3.png, `img_trans.png` je 1×1 px priehľadná výplň.
   Oproti D7 sú pravidlá scopnuté pod #rating — v D7 boli globálne na `td`. */

#rating {
  border: none;
}

#rating td {
  padding: 0 4px;
  position: relative;
}

#rating td.color-mixing,
#rating tr:hover td.color-mixing {
  background: url(../images/sprites-mark-3.png) no-repeat 2px -5px;
  width: 37px;
  height: 36px;
}

#rating td.dulux,
#rating tr:hover td.dulux {
  background: url(../images/sprites-mark-3.png) no-repeat -44px -4px;
  width: 36px;
  height: 36px;
}

#rating td.xyladecor,
#rating tr:hover td.xyladecor {
  background: url(../images/sprites-mark-3.png) no-repeat -91px -6px;
  width: 38px;
  height: 34px;
}

#rating td.luxol,
#rating tr:hover td.luxol {
  background: url(../images/sprites-mark-3.png) no-repeat -138px -8px;
  width: 44px;
  height: 10px;
}

#rating td.hammerite,
#rating tr:hover td.hammerite {
  background: url(../images/sprites-mark-3.png) no-repeat -186px -8px;
  width: 43px;
  height: 18px;
}

#rating td.komaprim,
#rating tr:hover td.komaprim {
  background: url(../images/sprites-mark-3.png) no-repeat -234px 0;
  width: 43px;
  height: 6px;
  position: relative;
  bottom: 6px;
}

#rating td.universal,
#rating tr:hover td.universal {
  background: url(../images/sprites-mark-3.png) no-repeat -234px -28px;
  width: 43px;
  height: 6px;
  position: absolute;
  top: 13px;
}

#rating td.graco,
#rating tr:hover td.graco {
  background: url(../images/sprites-mark-3.png) no-repeat -281px -7px;
  width: 29px;
  height: 36px;
}

/* --- Rozloženie view partneri ------------------------------------------ */
/* D7 (duluxmaliar-alpha-default-wide.css 92–118) mal legendu `position:
   absolute` a filtru vyhradenú pevnú výšku (120 px / 230 px). To drží len
   dovtedy, kým je legenda presne taká vysoká — inak preteká do hlavičky
   tabuľky. Preto tu floaty: legenda si sadne vedľa filtra a tabuľka cez
   `clear: both` začne pod tou vyššou z nich, nech majú akúkoľvek výšku.

   DOM: .view-display-id-page_N > .view-filters
                                > .attachment-before > .view > .view-header
                                                            > .view-content
   Legenda je v hlavičke prílohy, filter patrí stránke — sú v rôznych
   podstromoch, preto float a nie flex/grid.

   D7 page_1 = maliari  → D11 page_2
   D7 page_2 = predajcovia → D11 page_3 */

.view-id-partneri.view-display-id-page_2 .view-filters,
.view-id-partneri.view-display-id-page_3 .view-filters {
  float: left;
  width: 58%;
  /*padding-inline: 30px;*/
}

.js-form-type-textfield,
.js-form-type-entity-autocomplete,
.js-form-type-date {
  margin-right: 5px !important;
}

.view-id-partneri.view-display-id-page_2 .attachment-before .view-header,
.view-id-partneri.view-display-id-page_3 .attachment-before .view-header {
  float: right;
  width: auto;
  max-width: 40%;
  margin: 0 0 20px 0;
  padding: 0;
}

/* Tabuľka začne až pod filtrom aj legendou. */
.view-id-partneri.view-display-id-page_2 .attachment-before .view-content,
.view-id-partneri.view-display-id-page_3 .attachment-before .view-content,
.view-id-partneri.view-display-id-page_2 .view-content,
.view-id-partneri.view-display-id-page_3 .view-content {
  clear: both;
}

/* Bez toho by mapa pod prílohou vyliezla vedľa floatu. */
.view-id-partneri.view-display-id-page_2 .attachment-before::after,
.view-id-partneri.view-display-id-page_3 .attachment-before::after {
  content: "";
  display: table;
  clear: both;
}

/* Pod 980 px sa legenda vedľa filtra nezmestí — obe idú do toku na plnú šírku. */
@media (max-width: 979.98px) {
  .view-id-partneri.view-display-id-page_2 .view-filters,
  .view-id-partneri.view-display-id-page_3 .view-filters,
  .view-id-partneri.view-display-id-page_2 .attachment-before .view-header,
  .view-id-partneri.view-display-id-page_3 .attachment-before .view-header {
    float: none;
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

/* --- Hodnotenie a produktová značka ako sprity ------------------------- */
/* Portované z D7 global.css 1109–1210 a 1813–1960. Views vypisuje čisté TID,
   prepis poľa ho balí do <div class="rating-TID"> / <div class="mark-TID">.
   TID sa migráciou NEZMENILI (overené cez migrate_map_d7_taxonomy_term__rating
   a __produktova_znacka), takže čísla sú tie isté ako v D7.
   `li` je prázdny inline-block nulovej šírky — preto `left` na ikone je
   fakticky odsadenie od ľavého okraja `ul`, nie od tej ktorej položky. */

.views-field-field-rating .item-list,
.views-field-field-produktova-znacka .item-list { padding: 0; }

.views-field-field-rating ul,
.views-field-field-produktova-znacka ul {
  list-style: none;
  margin: 0 0 0;
  padding: 0;
}

.views-field-field-rating ul li,
.views-field-field-produktova-znacka ul li {
  margin: 0;
  display: inline-block;
  position: relative;
}

/* Podklad — šedý rad ikon zo spodnej polovice spritu. */
.views-field-field-rating ul,
.views-field-field-rating .nema {
  margin-bottom: 0;
  background: url(../images/sprites.png) no-repeat;
  background-position: 0 -45px;
  width: 237px;
  height: 45px;
  z-index: 1;
}

.views-field-field-produktova-znacka ul,
.views-field-field-produktova-znacka .mark-nema {
  margin-bottom: 0;
  background: url(../images/sprites-mark-3.png) no-repeat;
  background-position: 0 -45px;
  width: 336px;
  height: 45px;
  z-index: 1;
}

.nema,
.mark-nema { text-indent: -9999px; }

/* Striekanie AIRLESS */
.views-field-field-rating ul li .rating-42 {
  background: url(../images/sprites.png) no-repeat 0 0;
  width: 47px;
  height: 42px;
  top: -20px;
  left: 0px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Certifikát teoretická znalosť produktov DULUX */
.views-field-field-rating ul li .rating-43 {
  background: url(../images/sprites.png) no-repeat -49px 0;
  width: 47px;
  height: 42px;
  top: -20px;
  left: 48px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Certifikát praktická skúška aplikácií produktov Dulux */
.views-field-field-rating ul li .rating-44 {
  background: url(../images/sprites.png) no-repeat -97px 0;
  width: 48px;
  height: 42px;
  top: -20px;
  left: 96px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Certifikát špecialista na náterové hmoty na drevo */
.views-field-field-rating ul li .rating-45 {
  background: url(../images/sprites.png) no-repeat -145px 0;
  width: 44px;
  height: 42px;
  top: -20px;
  left: 146px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Certifikát absolvent školenia kombinácia farieb v interiéri */
.views-field-field-rating ul li .rating-46 {
  background: url(../images/sprites.png) no-repeat -193px 0;
  width: 44px;
  height: 42px;
  top: -20px;
  left: 193px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Colour Mixing Systém */
.views-field-field-produktova-znacka ul li .mark-108 {
  background: url(../images/sprites-mark-3.png) no-repeat 0 2px;
  width: 43px;
  height: 42px;
  top: -20px;
  left: 0px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Dulux */
.views-field-field-produktova-znacka ul li .mark-109 {
  background: url(../images/sprites-mark-3.png) no-repeat -47px 2px;
  width: 47px;
  height: 42px;
  top: -20px;
  left: 48px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Xyladecor */
.views-field-field-produktova-znacka ul li .mark-110 {
  background: url(../images/sprites-mark-3.png) no-repeat -96px 2px;
  width: 48px;
  height: 42px;
  top: -20px;
  left: 96px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Luxol */
.views-field-field-produktova-znacka ul li .mark-111 {
  background: url(../images/sprites-mark-3.png) no-repeat -142px 2px;
  width: 48px;
  height: 42px;
  top: -20px;
  left: 142px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Hammerite */
.views-field-field-produktova-znacka ul li .mark-112 {
  background: url(../images/sprites-mark-3.png) no-repeat -193px 2px;
  width: 44px;
  height: 42px;
  top: -20px;
  left: 193px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Komaprim */
.views-field-field-produktova-znacka ul li .mark-113 {
  background: url(../images/sprites-mark-3.png) no-repeat -238px -20px;
  width: 48px;
  height: 6px;
  top: 2px;
  left: 238px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Universal */
.views-field-field-produktova-znacka ul li .mark-114 {
  background: url(../images/sprites-mark-3.png) no-repeat -238px -28px;
  width: 43px;
  height: 6px;
  top: 9px;
  left: 238px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Graco */
.views-field-field-produktova-znacka ul li .mark-116 {
  background: url(../images/sprites-mark-3.png) no-repeat -290px -7px;
  width: 29px;
  height: 35px;
  top: -10px;
  left: 290px;
  position: absolute;
  z-index: 2;
  text-indent: -9999px;
}

/* Barrio dáva zoznamom vo views Bootstrap triedy `list-group` /
   `list-group-item`. Tie nesú biele pozadie (prekryje podkladový sprite),
   rámček, zaoblenie, `display: flex` a `padding: .5rem 1rem` — a práve to
   posúvalo ikony hore, lebo `top: -20px` sa meria od okraja `li`.
   D7 mal holé `ul`/`li`, takže sa Bootstrap na týchto dvoch bunkách vypína. */

.views-field-field-rating .list-group,
.views-field-field-produktova-znacka .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-width: 0;
  --bs-list-group-border-radius: 0;
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-item-padding-y: 0;
  display: block;
  border-radius: 0;
}

.views-field-field-rating .list-group-item,
.views-field-field-produktova-znacka .list-group-item {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}


/* --- Vernostný program: výpis dlaždíc ---------------------------------- */
/* Predloha je ŽIVÝ D7 web (www.duluxmaliar.sk/vernostny-program), odmerané
   priamo v prehliadači:

     panel        #f4f4f3, padding 30px 0, radius 0 28px      → .dm-content
     view-header  position:absolute; top:35px; right:20px;
                  18px, #F57921, Source Sans Pro 300
     dlaždica     212 px, biela, radius 0 14px, polia padding 0 30px
     názov        Source Sans Pro 300 / 16px / line-height 28px / #05b496
     cena         hneď pod názvom, +30px odsadenie navyše (vnorené polia)
     select       width auto, bez hviezdičky povinnosti
     tlačidlo     teal #05b496, hover #F57921, radius 0 14px,
                  padding 8px 12px, uppercase, width 80 % ŠÍRKY DLAŽDICE (170 px)

   Odchýlka od D7 (vedomá, odsúhlasená): v D7 mala každá dlaždica vlastnú
   výšku. Tu je karta flex-stĺpec a blok „variácia + do košíka" má
   `margin-top: auto`, takže tlačidlá v riadku sedia na jednej linke. */

/* Contextual links dávajú `.contextual-region` position: relative, takže by
   sa hlavička kotvila k wrapperu view, nie k panelu. Na tejto stránke to
   vypneme (body trieda `page-view-vernostn-program` je od Barria). */
body.page-view-vernostn-program .dm-content .contextual-region { position: static; }

/* Hlavička view — vpravo, vo výške H1. Containing block je `.dm-content`. */
.view-vernostn-program .view-header {
  position: absolute;
  top: 35px;
  right: 20px;
  margin: 0;
  padding: 0;
  font-family: var(--dm-font);
  font-size: 18px;
  font-weight: var(--dm-font-weight);
  line-height: 31.5px;
  color: var(--dm-orange);
  text-align: right;
}

.view-vernostn-program .view-header br { display: none; }

/* Na úzkych displejoch niet vedľa nadpisu miesto — vráti sa do toku. */
@media (max-width: 979px) {
  .view-vernostn-program .view-header {
    position: static;
    padding: 0 30px 10px;
    text-align: left;
  }
}

/* Exposed filter zarovnaný s nadpisom, tlačidlá vedľa selectu ako v D7. */
.view-vernostn-program .views-exposed-form,
.view-vernostn-program .view-empty,
.view-vernostn-program .pager { padding-inline: 30px; }

.view-vernostn-program .views-exposed-form > .d-flex {
  align-items: flex-end;
  gap: 10px;
}

.view-vernostn-program .views-exposed-form .form-item { margin-bottom: 0; }
.view-vernostn-program .views-exposed-form select { width: auto; }

.view-vernostn-program .views-exposed-form .form-actions {
  display: flex;
  gap: 8px;
  margin: 0;
}

.view-vernostn-program .views-exposed-form .form-actions .btn { margin-bottom: 0; }

.dm-grid--vp > * { display: flex; }

.dm-vp-card {
  display: flex;
  width: 100%;
}

.dm-vp-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--dm-surface);
  border-radius: var(--dm-radius-sm);
  overflow: hidden;
  padding-bottom: 20px;
}

/* Obrázok produktu — D7 mal padding 0 30px na poli a 20px 0 10px na <img>. */
.dm-vp-card__media {
  padding: 0 30px;
  text-align: center;
}

.dm-vp-card__media img {
  max-width: 100%;
  height: auto;
  padding: 20px 0 10px;
}

/* Logo výrobcu (taxonomy term, obrázok 50×50). */
.dm-vp-card__brand { padding: 0 30px; }
.dm-vp-card__brand img { max-width: 100%; height: auto; }
.dm-vp-card__brand .dm-brand,
.dm-vp-card__brand .field { margin: 0; }

/* Názov — D7 to bol title_field ako bežný odkaz, nie nadpis.
   `!important` kvôli fonts.css, ktoré dáva h1–h6 ColourSansBold naopak. */
.dm-vp-card__title {
  margin: 0;
  padding: 0 30px;
  font-family: var(--dm-font) !important;
  /*font-size: var(--dm-font-size);*/
  font-size: 16px !important;
  font-weight: var(--dm-font-weight);
  line-height: 28px;
  letter-spacing: normal;
}

.dm-vp-card__title a { color: var(--dm-teal); }
.dm-vp-card__title a:hover,
.dm-vp-card__title a:focus { color: var(--dm-orange); }

/* Upútavka (field_text_pre_uputavku) — D7: line-height 1.2, tučné. */
.dm-vp-card__note {
  padding: 0 30px;
  margin-bottom: 10px;
  line-height: 1.2;
  font-weight: 700;
}

/* Blok kúpy: cena v bodoch + formulár do košíka.
   Reťaz flex-stĺpcov: __buy → field_produkt → article. Cena tak ostane hneď
   pod nadpisom a `variations` (select + tlačidlo) sa `margin-top: auto`
   odtlačí na spodok dlaždice. */
.dm-vp-card__buy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-top: 0;
  padding: 0 30px;
  text-align: center;
}

.dm-vp-card__buy > .field--name-field-produkt,
.dm-vp-card__buy > .field--name-field-produkt > article {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.dm-vp-card__buy .field { margin-bottom: 0; }

/* Cena v bodoch — hneď pod nadpisom. Injektované pole variácie má triedu
   `product--variation-field--variation_price__<pid>`, preto zhoda cez
   [class*=]. D7 malo cenu vnorenú v druhom poli s vlastným paddingom 30px,
   preto to `padding-left`. */
.dm-vp-card__buy [class*="variation_price"],
.dm-vp-card__buy .field--name-price {
  order: -1;
  padding-left: 30px;
  margin-bottom: 10px;
  text-align: left;
}

/* Variácia + „vložiť do košíka" držia spodnú hranu dlaždice. */
.dm-vp-card__buy .field--name-variations { margin-top: auto; }

/* Atribúty variácie (Veľkosť, Kubatúra) — vľavo, select na šírku obsahu. */
.dm-vp-card__buy .form-item {
  margin: 0 0 10px;
  text-align: left;
}

/* D7 mal label nad selectom (display: block), nie vedľa neho. */
.dm-vp-card__buy label {
  display: block;
  font-weight: var(--dm-font-weight);
  margin-bottom: 2px;
}

.dm-vp-card__buy select,
.dm-vp-card__buy .form-select {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

/* D7 hviezdičku povinného atribútu/variácie nezobrazoval. */
.dm-vp-card__buy .form-required::after,
.dm-vp-card__buy .form-required::before,
.dm-vp-card__buy abbr.form-required,
.dm-vp-card__buy .form-required .marker {
  content: none !important;
  display: none !important;
}

/* D7 dlaždica množstvo ani jednotkovú cenu nezobrazovala. */
.dm-vp-card__buy .field--name-quantity,
.dm-vp-card__buy .form-item-quantity-0-value,
.dm-vp-card__buy .field--name-unit-price,
.dm-vp-card__buy .form-item-unit-price-0-override { display: none; }

/* Tlačidlo: D7 malo width 80 % ŠÍRKY DLAŽDICE (170 z 212 px), nie obsahu.
   Preto sa akcie roztiahnu späť cez padding 30px. */
.dm-vp-card__buy .form-actions {
  margin: 0 -30px;
  text-align: center;
}

.dm-vp-card__buy .button,
.dm-vp-card__buy .form-submit,
.dm-vp-card__buy input[type="submit"],
.dm-vp-card__buy .btn {
  width: 80%;
  margin-bottom: 0;
  font-size: 13px;
}

/* „Nie je na sklade" — tlačidlo z modulu duluxmaliar_sklad.
   Platí aj mimo dlaždice (detail produktu), preto trieda samostatne.
   `!important` kvôli Bootstrap `.btn-primary`. */
.dm-btn--vypredane,
.dm-btn--vypredane:hover,
.dm-btn--vypredane:focus,
.dm-vp-card__buy .button[disabled],
.dm-vp-card__buy .form-submit[disabled],
.dm-vp-card__buy input[type="submit"][disabled],
.dm-vp-card__buy .btn[disabled],
.dm-vp-card__buy .button[disabled]:hover,
.dm-vp-card__buy .form-submit[disabled]:hover,
.dm-vp-card__buy input[type="submit"][disabled]:hover,
.dm-vp-card__buy .btn[disabled]:hover {
  background-color: var(--dm-navy) !important;
  cursor: default;
  opacity: 1;
}

/* ==========================================================================
   Zoznam bločkov (/zoynam-blockov)
   ========================================================================== */

/* Exposed filtre do jedného riadku aj s tlačidlami. Bootstrap dáva
   form-item spodný margin, ktorý riadok zalamuje. */
.view-id-zoznam_dokladov .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 16px;
}

/*
.view-id-zoznam_dokladov .views-exposed-form .js-form-item,
.view-id-zoznam_dokladov .views-exposed-form .form-item {
  margin: 0 !important;
}*/

.view-id-zoznam_dokladov .views-exposed-form label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 1.2;
}

.view-id-zoznam_dokladov .views-exposed-form input[type="text"],
.view-id-zoznam_dokladov .views-exposed-form input[type="number"] {
  width: 170px;
  max-width: 100%;
}

/* Popis pod filtrom Maliar („Zadajte zoznam používateľských mien…")
   by riadok zalomil. */
.view-id-zoznam_dokladov .views-exposed-form .description,
.view-id-zoznam_dokladov .views-exposed-form .form-text ~ .description {
  display: none;
}

.view-id-zoznam_dokladov .views-exposed-form .form-actions,
.view-id-zoznam_dokladov .views-exposed-form [data-drupal-selector$="actions"] {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 !important;
}

/* Výber operácie VBO.
   Poradie v DOM je select → details „Selected 0 items" → tlačidlo.
   Flexom sa select a tlačidlo dajú do jedného riadku a details spadne
   pod ne cez flex-basis 100 %. */
#vbo-action-form-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

#vbo-action-form-wrapper > .form-item-action {
  order: 1;
  margin: 0 !important;
}

#vbo-action-form-wrapper > .form-item-action select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

#vbo-action-form-wrapper > .form-actions {
  order: 2;
  margin: 0 !important;
}

#vbo-action-form-wrapper > .vbo-multipage-selector {
  order: 3;
  flex: 0 0 100%;
  margin: 0 !important;
  text-align: left;
}

#vbo-action-form-wrapper > .vbo-multipage-selector > summary {
  text-align: left;
}

/* Editovateľné číslo dokladu a jeho tlačidlo. */
.view-id-zoznam_dokladov .dm-cislo-dokladu {
  width: 110px;
  max-width: 100%;
}

.dm-cisla-akcie {
  margin-top: 16px;
}

/* Vlna 47: filter „Pridané" (BEF datepicker, min/max) — Od a Do vedľa
   seba v jednom riadku, popisok vľavo od poľa. */
.view-id-zoznam_dokladov .views-exposed-form fieldset {
  margin: 0 !important;
}

.view-id-zoznam_dokladov .views-exposed-form fieldset .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.view-id-zoznam_dokladov .views-exposed-form fieldset .form-type-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /*margin: 0 !important;*/
}

.view-id-zoznam_dokladov .views-exposed-form fieldset .form-type-date label {
  margin: 0;
}

.view-id-zoznam_dokladov .views-exposed-form input[type="date"] {
  width: 150px;
  max-width: 100%;
}

/* Vlna 47: schválená suma v riadku + tlačidlo „Schváliť sumy a pripísať
   body" (jeden krok namiesto dvoch VBO operácií). */
.view-id-zoznam_dokladov .dm-schvalena-suma {
  width: 90px;
  max-width: 100%;
}

.view-id-zoznam_dokladov .dm-suma-hotovo {
  white-space: nowrap;
}

.view-id-zoznam_dokladov .dm-suma-hotovo span {
  color: #2e7d32;
  font-weight: 700;
}

.dm-sumy-akcie {
  margin-top: 16px;
}


/* --- Skok na objednávku podľa čísla ------------------------------------- */

/* Náhrada D7 commerce_order_ui_redirect_form nad zoznamom objednávok.
   D7 mal pole a tlačidlo v jednom riadku, pole úzke — číslo objednávky má
   nanajvýš päť znakov. */

.dm-objednavka-hladat {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.dm-objednavka-hladat .form-item,
.dm-objednavka-hladat .form-actions {
  margin: 0;
}

.dm-objednavka-hladat input[type="text"] {
  width: 140px;
}

.dm-objednavka-hladat label {
  display: block;
  margin-bottom: 4px;
}

/* --- Referencie pri produkte ------------------------------------------- */

/* D7 `.view-id-referencie_pri_produkte .front-image img` menil max-height po
   breakpointoch: global 388 → narrow 190 → normal 121 → wide 115. Breakpointy
   sú tie isté, na ktorých `.dm-grid` mení šírku dlaždice. */
.dm-ref-grid .dm-tile__media img { max-height: 388px; width: auto; }

@media (min-width: 740px)  { .dm-ref-grid .dm-tile__media img { max-height: 190px; } }
@media (min-width: 980px)  { .dm-ref-grid .dm-tile__media img { max-height: 121px; } }
@media (min-width: 1220px) { .dm-ref-grid .dm-tile__media img { max-height: 115px; } }

.dm-ref-grid .dm-tile__title {
  font-size: 12px;
  line-height: 15px;
}

/* Zadná strana: text musí ostať biely aj pri migrovanom D7 HTML, ktoré si
   často nesie vlastnú farbu v inline štýle alebo v <font>. Preto `*` a
   !important — inak sa čierny text stratí na tmavom podklade. */
.dm-ref-grid .dm-flip__desc,
.dm-ref-grid .dm-flip__desc * {
  color: var(--dm-text-invert) !important;
  font-size: 13px;
  line-height: 13px;
}

/* Karta je vysoká asi ako obrázok + titulok (115 + 45 px), takže popis musí byť
   tesný. Spodných 52 px drží miesto pre absolútne umiestnené `.dm-flip__more`. */
.dm-ref-grid .dm-flip__desc {
  padding: 10px 20px 52px 20px;
}

.dm-ref-grid .dm-flip__desc p { margin: 0 0 5px; }
.dm-ref-grid .dm-flip__desc p:last-child { margin-bottom: 0; }

/* Karta musí mať výšku z prednej strany — zadná je absolútna (pozri .dm-flip). */
.dm-ref-grid .dm-grid__item { overflow: hidden; }

/* Sivý panel `.dm-content` má vlastných 30 px, záložka teda žiadne nepridáva. */
.dm-tabs__pane .dm-ref-grid { margin-top: 10px; }

/* ==========================================================================
   EVA nad nodmi (vlna 8)

   Tri miesta, ktoré D7 skladal modulom EVA a v D11 ich robí preprocess:
   tabuľky so súbormi na /servis/na-stiahnutie, kontakty na /sme-tu-pre-vas
   a „Referenciu pridal" na detaile referencie.
   ========================================================================== */

/* --- /servis/na-stiahnutie: päť tabuliek ---------------------------------- */

.dm-eva-tabulka {
  margin-bottom: 40px;
}

.dm-eva-tabulka__nadpis {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 28px;
  color: #05b496;
}

/* Tri stĺpce sú široké — na mobile radšej vodorovný posun než rozbitá strana. */
.dm-eva-tabulka .views-element-container,
.dm-eva-tabulka .view-content {
  overflow-x: auto;
}

.dm-eva-tabulka table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

/* D7 tabuľky hlavičku nemali — polia majú prázdny popisok. */
.dm-eva-tabulka thead {
  display: none;
}

.dm-eva-tabulka td {
  padding: 8px 10px;
  border-bottom: 1px solid #e3e3e1;
  vertical-align: top;
  font-size: var(--dm-font-size);
  line-height: 20px;
}

.dm-eva-tabulka tr:last-child td {
  border-bottom: 0;
}

.dm-eva-tabulka td:first-child {
  width: 30%;
  min-width: 180px;
}

/* Stĺpec „upraviť" vidí len ten, kto smie produkty upravovať. */
.dm-eva-tabulka .views-field-upravit {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.dm-eva-tabulka .file {
  display: inline-block;
  margin-right: 6px;
}

/* --- /sme-tu-pre-vas: kontakty ------------------------------------------- */

.dm-kontakty__skupina {
  margin-bottom: 30px;
}

.dm-kontakty__nadpis {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 24px;
  color: #05b496;
}

.dm-kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

.dm-kontakt__foto {
  flex: 0 0 auto;
  max-width: 220px;
}

.dm-kontakt__foto img {
  display: block;
  height: auto;
  max-width: 100%;
}

.dm-kontakt__udaje {
  flex: 1 1 240px;
  font-size: 15px;
  line-height: 24px;
}

.dm-kontakt__meno {
  font-weight: 600;
}

/* --- detail referencie: „Referenciu pridal" ------------------------------- */

.dm-pridal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.dm-pridal__foto img {
  display: block;
  height: auto;
}

.dm-pridal__meno {
  font-weight: 600;
}

/* --- Titulkový slider (banner, náhrada D7 nivo_slider) ------------------- */
/* Pomer strán 1120x405 podľa D7 bannerov. Bez šípok/bodiek, len fade. */

.dm-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 405;
  overflow: hidden;
  border-radius: var(--dm-radius-lg);
}

.dm-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
}

.dm-hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.dm-hero-slider__slide img,
.dm-hero-slider__link {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Akcie/Novinky na titulke (2 karty pod sliderom) --------------------- */
/* D7: samostatný blok (view akcia_novinka_na_titulku, display block) v tom
   istom regióne ako slider. Pás s textom nesie --dm-blue, rovnaký odtieň ako
   iné titulkové pásy kariet v téme (viď tokens.css). */

.dm-titulka-karty {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dm-gutter);
  margin-top: var(--dm-gutter);
}

@media (min-width: 740px) {
  .dm-titulka-karty {
    grid-template-columns: 1fr 1fr;
  }
}

.dm-titulka-karta__link {
  display: block;
  position: relative;
  border-radius: var(--dm-radius-lg);
  overflow: hidden;
  color: var(--dm-text-invert);
  text-decoration: none;
}

/* Bootstrap dáva a:hover text-decoration: underline (base.css) — link karty
   má byť ako v D7 bez podčiarknutia aj na hover. */
.dm-titulka-karta__link:hover,
.dm-titulka-karta__link:focus {
  text-decoration: none;
}

.dm-titulka-karta__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.dm-titulka-karta__link:hover .dm-titulka-karta__media img {
  transform: scale(1.04);
}

.dm-titulka-karta__text {
  background: var(--dm-blue);
  padding: 10px 16px;
}

.dm-titulka-karta__text h2 {
  margin-bottom: 0;
  color: var(--dm-text-invert);
  font-size: 25px !important;
  font-weight: 600;
}

@media (max-width: 739px) {
  .dm-titulka-karta__text h2 {
    font-size: 18px !important;
  }
}

/* D7 predloha: .titulka-text h2:hover { color: #ffd800; } */
.dm-titulka-karta__text h2:hover {
  color: var(--dm-yellow);
}

/* === Produktové videá (/na-stiahnutie/produktove-videa, view na_stiahnutie/page_5) ===
   D7 zoskupoval riadky podľa názvu produktu (h3) a pod ním vypisoval
   náhľady všetkých videí produktu vedľa seba. View v D11 je nastavený
   rovnako (style: Unformatted list + grouping podľa title, pole field_video
   s formatterom youtube_thumbnail) — toto len rozloží náhľady do radu. */
body.page-view-na-stiahnutie .view-content > h3 {
  margin: var(--dm-section-gap) 0 10px;
}

body.page-view-na-stiahnutie .view-content > h3:first-child {
  margin-top: 0;
}

body.page-view-na-stiahnutie .views-row {
  margin-bottom: var(--dm-gutter);
}

body.page-view-na-stiahnutie .views-field-field-video .field-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-gutter);
}

body.page-view-na-stiahnutie .views-field-field-video img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.page-view-na-stiahnutie .views-field-field-video a {
  display: block;
  flex: 0 0 auto;
  transition: opacity .15s ease;
}

body.page-view-na-stiahnutie .views-field-field-video a:hover {
  opacity: .85;
}

/* === Časté otázky (/poradenstvo/casto-kladene-otazky, field_faq, modul faqfield) ===
   D7 zobrazoval akordeón v tlmenej bielo-sivej farebnosti (jQuery UI base
   téma bez zásahu). V D11 preberá jasnú modrú z jQuery UI "ui-state-active"
   (theme.css) a zväčšené 24px písmo z globálneho pravidla `h3, .h3 { font-size:
   var(--dm-h3) !important }` v base.css (otázka je značená ako <h3>).
   Táto sekcia to vracia na vzhľad D7 a skrýva popisok poľa, ktorý D7 nemal. */
.field--name-field-faq > .field__label {
  display: none;
}

.field--name-field-faq .faqfield-question {
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 8px 8px 8px 35px;
  background: #e6e6e6;
  color: #555555;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
}

.field--name-field-faq .faqfield-question.ui-state-active,
.field--name-field-faq .faqfield-question.ui-state-hover {
  background: #ffffff;
  color: #212121;
  border-color: #aaaaaa;
}

.field--name-field-faq .faqfield-question.ui-state-active {
  border-radius: 4px 4px 0 0;
}

.field--name-field-faq .faqfield-answer {
  background: #ffffff;
  color: #222222;
  border: 1px solid #aaaaaa;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 16px 35px;
  font-size: 16px;
}

/* ===== Výpis článkov (.dm-listrow) ====================================
   /poradenstvo/uzitocne-rady, /poradenstvo/inspiracie, /akcie, /novinky,
   /uskutocnene-skolenia, /pripravovane-skolenia.
   Markup: templates/content/node--vypis--teaser.html.twig

   D7 predloha (duluxmaliar-alpha-default-normal.css + global.css):
     .view-poradenstvo/.view-akcie/.view-novinky/.view-skolenia .views-row {
        margin-bottom: 20px; position: relative; }
     .required-fields.group-left1  { float: left; width: 50%; }
     .required-fields.group-right1 { position: absolute; top: 50%; left: 50%;
        width: 48%; margin-left: 2%; transform: translateY(-50%); }
     .field-name-field-image, h2   { padding: 0 30px; }
     .field-name-field-image img   { margin-bottom: 20px; border-radius: 0 28px; }

   Prepočet percent: v D7 mali obe skupiny vlastný vnútorný padding 0 30px,
   lebo panel `.region-content-inner` mal `padding: 30px 0`. V D11 odsadzuje
   panel `.dm-content` sám zo všetkých strán (`padding: 30px`, vlna 10),
   takže vnútorný padding tu NIE JE a percentá sú prepočítané na rovnakú
   obsahovú šírku (v D7 pri 1440px: riadok 1180px, obsah 1120px):
       obrázok  530/1120 = 47.3 %
       medzera   83/1120 =  7.4 %
       titulok  506/1120 = 45.3 %  (dopočíta sa sám)

   Namiesto float + position:absolute stačí flex s `align-items: center` —
   výsledok je zhodný, vrátane toho, že titulok je centrovaný voči obrázku
   AJ s jeho 20px spodným okrajom (v D7 to robil translateY(-50%) nad
   riadkom vysokým obrázok + 20px).

   Pod 980px (D7 breakpoint „normal") sa stĺpce rušia a platí základné
   pravidlo z D7 global.css: titulok pod obrázkom, oddelený linkou.
   ==================================================================== */

article.dm-listrow {
  margin: 0 0 20px;
  padding: 0;
}

/* Obrázok: 20px odsadenie a zaoblenie nesie sám <img> (ako v D7),
   obal poľa žiadny vlastný okraj nepridáva. */
.dm-listrow__media .field,
.dm-listrow__media .field__item { margin: 0; padding: 0; }

.dm-listrow__media img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;
  border-radius: var(--dm-radius-lg);
}

/* Titulok. Trieda `.node__title` sa v šablóne zámerne nepoužíva — Barrio
   jej dáva vlastný padding-top a menší spodný okraj. */
.dm-listrow .dm-listrow__title {
  font-family: var(--dm-font-heading);
  font-size: var(--dm-h2);
  line-height: 1.1;
  color: var(--dm-navy-ink);
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

/* D7: `h2 a:link, h2 a:visited { color: #565b60 }` a globálne
   `a:hover { color: #F57921; text-decoration: underline }`.
   Vyššia špecificita je nutná — Barrio má vlastné pravidlo na odkaz
   v nadpise nodu (prebíja zdedenú aj `h2 a` farbu z base.css). */
.dm-listrow .dm-listrow__title a,
.dm-listrow .dm-listrow__title a:link,
.dm-listrow .dm-listrow__title a:visited {
  color: var(--dm-text-strong);
  text-decoration: none;
}

.dm-listrow .dm-listrow__title a:hover,
.dm-listrow .dm-listrow__title a:focus {
  color: var(--dm-orange);
  text-decoration: underline;
}

/* Mobil / tablet — D7 global.css:
   `.required-fields.group-right1 { margin-top: 20px; border-top: 1px solid #d7d7d8 }` */
.dm-listrow__body {
  margin-top: 20px;
  border-top: 1px solid var(--dm-rule);
}

@media (min-width: 980px) {
  .dm-listrow {
    display: flex;
    align-items: center;
    column-gap: 7.4%;
  }

  .dm-listrow__media { flex: 0 0 47.3%; min-width: 0; }

  /* D7 „normal": `border-top: none; margin-top: 0` */
  .dm-listrow__body {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    border-top: 0;
  }
}



/* Vlna 26 — poistka pre .address-container-inline (Meno+Priezvisko, PSČ+Mesto v riadku),
   ak by kniznica address modulu vlastny flex nedodala. */
.address-container-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.address-container-inline > .js-form-item {
  flex: 1 1 0;
  min-width: 160px;
}

/* Vlna 26 -- layout registracie/editacie uctu (.user-form maju obe formulare
   spolocne). Ziadne PHP presuvanie poli - len CSS grid, kazde pole ostava
   v DOM tam, kde ho Drupal postavil. Dolezite: ZIADNE grid-auto-rows
   minmax(), lebo to nafukuje prazdne implicitne riadky medzi skokmi cisel
   riadkov (to sposobilo takmer prazdnu stranku). Vysku riadkov necháme na
   "auto" (predvolene) - kazdy riadok sa prisposobi obsahu.

   Podmienene polia (Konfekcna velkost, Preferovany predajca, Otvaracie
   hodiny) su niekedy skryte cez #states (display:none). Aby vtedy
   nasledujuce pole naskocilo hned pod predchadzajuce bez medzery, tieto
   polia v pravom stlpci NEMAJU explicitne cislo riadku (grid-row) - CSS
   grid ich poskladá automaticky za sebou podla poradia v DOM (viď
   scripts/vlna26_8_form_display_poradie2.php, ktory nastavuje vahy poli
   presne v tomto poradi). Skryte pole (display:none) sa z gridu úplne
   vynecha, takze dalsie pole zaujme jeho miesto. */
@media (min-width: 768px) {
  .user-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    align-items: start;
  }

  /* Default pre vsetko, co sme explicitne neumiestnili - cela sirka. */
  .user-form > * {
    grid-column: 1 / -1;
  }

  /* Odsek 1 -- vlavo: mail/heslo/potvrdenie (#edit-account) + Logo, hned pod sebou. */
  .user-form #edit-account { grid-column: 1 / 3; grid-row: 1 / span 4; }
  .user-form .field--name-field-galeria { grid-column: 1 / 3; grid-row: 5; }

  /* Odsek 1 -- vpravo: Profesia/Konfekcna velkost/Preferovany predajca/
     Organizacia/Ico. Ziadne explicitne riadky -> automaticke skladanie
     bez medzier, ked je niektore pole skryte. */
  .user-form .field--name-field-profesia,
  .user-form .field--name-field-konfekcna-velkost,
  .user-form .field--name-field-preferovany-predajca-u,
  .user-form .field--name-field-organizacia,
  .user-form .field--name-field-ico {
    grid-column: 3 / 5;
  }

  /* Odsek 2 -- vlavo: Adresa (Meno/Priezvisko/Ulica/PSC/Mesto su uz vnutri
     fieldsetu Adresa), Telefon+Mobil v jednom riadku. Hned pod Logom. */
  .user-form .field--name-field-adresa { grid-column: 1 / 3; grid-row: 6; }
  .user-form .field--name-field-telefon { grid-column: 1 / 2; grid-row: 7; }
  .user-form .field--name-field-mobil { grid-column: 2 / 3; grid-row: 7; }

  /* Odsek 2 -- vpravo: Otvaracie hodiny (len predajca) + Www. Explicitne
     riadky 6/7, aby zacinali na urovni Adresy (rovnaky riadok ako lavy
     stlpec Odseku 2), nie hned za Odsekom 1. Ak Otvaracie hodiny nie su
     zobrazene (trieda dm-bez-otvaracich-hodin, prepina ju registracia.js
     podla zvolenej Profesie), Www sa posunie na riadok 6 - na uroven
     Adresy. */
  .user-form .field--name-field-otvaracie-hodiny { grid-column: 3 / 5; grid-row: 6; }
  .user-form .field--name-field-www { grid-column: 3 / 5; grid-row: 7; }
  .user-form.dm-bez-otvaracich-hodin .field--name-field-www { grid-row: 6; }

  /* Odsek 3 (len editacia, len spravca/administrator) -- vlavo Rating,
     vpravo Produktova znacka. Bez explicitneho riadku - naskocia hned pod
     predoslymi polami vo svojom stlpci. */
  .user-form .field--name-field-rating { grid-column: 1 / 3; }
  .user-form .field--name-field-produktova-znacka { grid-column: 3 / 5; }

  /* Tlacidlo vzdy uplne dole, cez celu sirku. */
  .user-form #edit-actions { grid-column: 1 / -1; }
}

/* /poradenstvo/napiste-nam (webform "napiste_nam", node 15) -- Meno/Mesto/
   Email/Telefon boli kazde na celu sirku obsahoveho panela, hoci ide o
   kratke jednoriadkove hodnoty (vyzeralo prazdno/rozťahano). Rovnaky princip
   ako .user-form (vlna 26): ziadne PHP presuvanie poli, len CSS grid, kazde
   pole ostava v DOM tam, kde ho Webform postavil. Default (cez `> *`) je
   cela sirka, len Meno/Mesto/Email/Telefon su explicitne na pol sirky
   vedla seba -- Otazka, suhlas aj tlacidlo ostavaju bez zmeny na celu
   sirku. Pod 768px sa vsetko vrati pod seba (mobile, ziadny media query). */
@media (min-width: 768px) {
  .webform-submission-napiste-nam-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--dm-gutter);
    align-items: start;
  }

  .webform-submission-napiste-nam-form > * {
    grid-column: 1 / -1;
  }

  .webform-submission-napiste-nam-form .form-item-meno,
  .webform-submission-napiste-nam-form .form-item-email {
    grid-column: 1 / 2;
  }

  .webform-submission-napiste-nam-form .form-item-mesto,
  .webform-submission-napiste-nam-form .form-item-telefon {
    grid-column: 2 / 3;
  }
}

/* /form/prihlaska-na-skolenie (webform "prihlaska_na_skolenie", vlna 51) --
   rovnaky princip ako napiste_nam: CSS grid, ziadne PHP presuvanie poli.
   Poradie poli je dane vahami vo webforme (vlna51_4): Meno|Mail,
   Mobil|Pocet ucastnikov, profesia a ubytovanie na celu sirku, tri izby
   vedla seba (od 980px; 768-979px po dvoch), Vecera na pol sirky.
   Izby su skryte cez #states, kym nie je vybrate "S ubytovanim" --
   display:none prvok grid preskoci, ziadna prazdna medzera. */
@media (min-width: 768px) {
  .webform-submission-prihlaska-na-skolenie-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--dm-gutter);
    align-items: start;
  }

  .webform-submission-prihlaska-na-skolenie-form > * {
    grid-column: 1 / -1;
  }

  .webform-submission-prihlaska-na-skolenie-form .form-item-field-meno-a-priezvisko,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-mobil,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-vecera {
    grid-column: 1 / 4;
  }

  .webform-submission-prihlaska-na-skolenie-form .form-item-field-mail,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-pocet-ucastnikov {
    grid-column: 4 / 7;
  }

  .webform-submission-prihlaska-na-skolenie-form .form-item-field-jednopostelov-izba,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba-s-pr-ste {
    grid-column: span 3;
  }
}

@media (min-width: 980px) {
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-jednopostelov-izba,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba,
  .webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba-s-pr-ste {
    grid-column: span 2;
  }
}

/* Selecty s cislom (pocet osob/izieb) netreba na celu bunku. */
.webform-submission-prihlaska-na-skolenie-form .form-item-field-pocet-ucastnikov select,
.webform-submission-prihlaska-na-skolenie-form .form-item-field-jednopostelov-izba select,
.webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba select,
.webform-submission-prihlaska-na-skolenie-form .form-item-field-dvojposte-ov-izba-s-pr-ste select {
  width: auto;
  min-width: 8em;
}

/* --- Webformy: spolocny kompaktny vzhlad (vlna 51b) -------------------
   Formulare boli na celu sirku obsahoveho panela (1100px), hoci obsahuju
   len kratke polia, selecty a poznamku. Sirka formulara obmedzena
   (prihlaska sirsia kvoli 6-stlpcovemu gridu), textarea nizsia, popisky
   14px, CAPTCHA zhustena (obrazok a kod pod sebou, legenda ako
   popisok, nie nadpis 24px). Kalkulacka vypocet_plochy (tabulka) sa
   netyka. Grid napiste_nam / prihlasky ostava -- len v uzsom kontajneri. */
.webform-submission-form:not(.webform-submission-vypocet-plochy-form) {
  max-width: 720px;
}

.webform-submission-form.webform-submission-prihlaska-na-skolenie-form {
  max-width: 860px;
}

.webform-submission-form:not(.webform-submission-vypocet-plochy-form) .js-form-item {
  margin-bottom: 14px;
}

.webform-submission-form:not(.webform-submission-vypocet-plochy-form) label:not(.form-check-label),
.webform-submission-form:not(.webform-submission-vypocet-plochy-form) legend:not(.captcha__title) {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.webform-submission-form:not(.webform-submission-vypocet-plochy-form) textarea {
  min-height: 0;
  height: 110px;
  resize: vertical;
}

/* Radio/checkbox zoznamy (certifikat, profesia, ubytovanie) hustejsie. */
.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox {
  margin-bottom: 2px;
  min-height: 0;
}

.webform-submission-form .description {
  font-size: 13px;
  margin-top: 4px;
}

/* CAPTCHA: ramcek, obrazok a pole na kod pod sebou -- vsade (webformy,
   /user/password, /user/register). Modul captcha (image_captcha.css) dava
   .captcha__element flex row = obrazok vedla pola; tu (0,2,1) to prebije. */
fieldset.captcha {
  margin: 6px 0 16px;
  padding: 12px 14px;
  border: 1px solid #ced4da;
  background: var(--dm-panel);
}

fieldset.captcha legend.captcha__title {
  float: none;
  width: auto;
  padding: 0 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

fieldset.captcha .captcha__element {
  display: block;
}

fieldset.captcha .captcha__element > .form-item {
  min-width: 0;
}

fieldset.captcha .captcha__image-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px !important;
}

fieldset.captcha .captcha__image-wrapper img {
  display: block;
  background: #fff;
}

fieldset.captcha .reload-captcha {
  font-size: 13px;
}

fieldset.captcha .form-item-captcha-response {
  margin-bottom: 0 !important;
}

fieldset.captcha .form-item-captcha-response input {
  width: 12em;
}

fieldset.captcha .description {
  margin: 4px 0 0;
}

/* /user/login, /user/password (vlna 51c): len e-mail a heslo -- formular
   uzsi nez webformy (720px). */
.user-login-form,
.user-pass {
  max-width: 400px;
}

.webform-submission-form .form-actions {
  margin-top: 6px;
}

/* --- Odtiene farieb (field_odtiene_tax, taxonomy-term.vocabulary-color) -
   D7 predloha (global.css): vzorky vedľa seba, 130px box, čierny 2px
   rámik + zaoblenie 17px na obrázku, meno odtieňa vycentrované na
   obrázku (biely tučný text s čiernym "obrysom" cez text-shadow).
   D7 mal meno odtieňa v samostatnom poli mimo (skrytého) <h2><a>; D11
   markup ho vykresľuje PRIAMO vnútri <h2><a> (field--name-name), takže
   odkaz sa tu (na rozdiel od D7) nedá skryť bez straty textu — necháva sa
   viditeľný a klikateľný, len zbavený predvolenej farby/podčiarknutia. */

.field--name-field-odtiene-tax .field__item {
  display: inline-block;
  width: auto;
  vertical-align: top;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color {
  position: relative;
  display: inline-block;
  width: 130px;
  margin: 5px;
  vertical-align: top;
}

.field--name-field-odtiene-tax .field__item {
  color: #fff;
  letter-spacing: 2px;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color .field--name-field-obrazok {
  border: 2px solid #000;
  border-radius: 17px;
  overflow: hidden;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color .field--name-field-obrazok img {
  display: block;
  width: 100%;
  height: auto;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color h2 {
  margin: 0;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color h2 a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  font-size: var(--dm-font-size);
  text-align: center;
  text-decoration: none;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color h2 a:hover,
.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color h2 a:focus {
  color: #fff !important;
  text-decoration: none;
}

.field--name-field-odtiene-tax .taxonomy-term.vocabulary-color h2 a .field--name-name {
  display: inline;
}

/* --- Klikateľný náhľad videa (js/video-facade.js) -----------------------
   Nahrádza živý YouTube iframe (formatter youtube_video) ostrým náhľadom
   priamo z YouTube CDN + tlačidlom Prehrať; skutočný iframe sa vloží až po
   kliku. Vizuál napodobuje natívne pozastavené UI YouTube iframu (názov +
   kanál vľavo hore, ikonky vľavo dole, odkaz "Pozrieť na YouTube" vpravo
   dole, červené tlačidlo Prehrať v strede), aby náhľad vyzeral rovnako ako
   živý embed na /videa/* stránkach. Obal (.youtube-container--responsive)
   rieši pomer strán a position:relative — modul youtube
   (youtube.responsive.css), naň sa toto pravidlo nabaľuje rovnako ako
   predtým na <iframe>. */
.dm-video-facade {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

.dm-video-facade__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-video-facade__gradient-top,
.dm-video-facade__gradient-bottom {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.dm-video-facade__gradient-top {
  top: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.dm-video-facade__gradient-bottom {
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.dm-video-facade__info {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.dm-video-facade__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dm-video-facade__channel {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

.dm-video-facade__icons-left {
  position: absolute;
  left: 16px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.dm-video-facade__icons-left svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.dm-video-facade__watch {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.dm-video-facade__watch svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dm-video-facade__watch:hover,
.dm-video-facade__watch:focus-visible {
  color: var(--dm-yellow);
  text-decoration: none;
}

.dm-video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: #ff0000;
  border-radius: 14px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.dm-video-facade__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.dm-video-facade:hover .dm-video-facade__play,
.dm-video-facade:focus-visible .dm-video-facade__play {
  background: #cc0000;
  transform: translate(-50%, -50%) scale(1.08);
}

/* --- Propagácia maliara: detail + formulár web stránky (vlna 40) --------
   D7: group-left obrázok (53 %), group-right text + cena + formulár (46 %).
   Formulár: riadky ako D7 group-priezvisko / group-ulica / group-telefon,
   len CSS grid na pôvodných prvkoch (žiadne PHP presúvanie, vlna 26). */
.dm-vpm__obsah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--dm-gutter);
}
.dm-vpm__vlavo,
.dm-vpm__vpravo { width: 100%; }
.dm-vpm__vlavo img { display: block; max-width: 100%; height: auto; }
@media (min-width: 980px) {
  .dm-vpm__vlavo { width: 53%; }
  .dm-vpm__vpravo { width: 46%; }
}
.dm-web-stranka-form .form-item { margin-bottom: 12px; }
.dm-web-stranka-form .form-text,
.dm-web-stranka-form .form-email { width: 100%; max-width: 100%; }
.dm-web-stranka-form select { max-width: 100%; }
@media (min-width: 768px) {
  .dm-web-stranka-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--dm-gutter);
    align-items: start;
  }
  .dm-web-stranka-form > * { grid-column: 1 / -1; }
  .dm-web-stranka-form > .field--name-field-nazov-spolocnosti { grid-column: span 5; }
  .dm-web-stranka-form > .field--name-field-meno { grid-column: span 3; }
  .dm-web-stranka-form > .field--name-field-priezvisko { grid-column: span 4; }
  .dm-web-stranka-form > .field--name-field-ulica-cislo { grid-column: span 5; }
  .dm-web-stranka-form > .field--name-field-psc { grid-column: span 2; }
  .dm-web-stranka-form > .field--name-field-mesto { grid-column: span 5; }
  .dm-web-stranka-form > .field--name-field-telefon-propagacia { grid-column: span 5; }
  .dm-web-stranka-form > .field--name-field-mail-propagacia { grid-column: span 7; }
}

/* --- Detail produktu VP (vlna 41) ---------------------------------------
   Šablóna node--vernostny-program--full.html.twig, layout .dm-vpm z vlny 40.
   D7: logo výrobcu pod obrázkom, vpravo popis → tabuľka veľkostí → cena →
   sklad → atribúty → množstvo → tlačidlo. Cena zámerne výraznejšia než D7. */
/* Logo výrobcu = biely pás pod obrázkom, tvári sa ako súčasť bieleho
   obrázka (vlna 42). S logom: obrázok bez oblúka vľavo dole, oblúk nesie
   pás. Bez loga ostáva obrázku pôvodný --dm-radius-lg. */
.dm-vpm__logo img { display: block; height: auto; }
.dm-vpm__vlavo:has(.dm-vpm__logo) .field--name-field-obrazok-pvp { margin-bottom: 0; }
.dm-vpm__vlavo:has(.dm-vpm__logo) .field--name-field-obrazok-pvp img { border-bottom-left-radius: 0; }
.dm-vpm__vlavo .dm-vpm__logo {
  margin-top: 0;
  padding: 6px 20px 16px 28px;
  background: var(--dm-surface);
  border-radius: 0 0 0 28px;
}
.dm-vpm__vlavo .dm-vpm__logo .field { margin: 0; }
.dm-vpm__vlavo .dm-vpm__logo img { border-radius: 0; }
.dm-vpm__vpravo .field--name-field-tabulka-velkosti { margin: 16px 0; }
.dm-vpm__vpravo .field--name-field-tabulka-velkosti .field__label { font-weight: 700; margin-bottom: 6px; }
.dm-vpm__kupa { margin-top: 20px; }
.dm-vpm__kupa .field--label-inline { display: flex; align-items: baseline; gap: 8px; }
.dm-vpm__kupa .field--label-inline .field__label { font-weight: 700; }
.dm-vpm__kupa .field--label-inline .field__label::after { content: ":"; }
/* Cena: biely podklad len na šírku „Cena: xxx b.“, bez oranžovej čiary
   (vlna 42). Obal variácie bez podkladu, nesie ho len samotné pole. */
.dm-vpm__kupa [class*="variation_price"] { margin: 4px 0 8px; }
.dm-vpm__kupa .field--name-price {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 8px;
  padding: 10px 20px;
  background: var(--dm-surface);
  border: 0;
  border-radius: var(--dm-radius-sm);
}
.dm-vpm__kupa [class*="variation_price"] .field--name-price { margin: 0; }
.dm-vpm__kupa .field--name-price .field__item {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dm-navy-ink);
}
.dm-vpm__kupa .field--name-price .field__label { font-size: 18px; color: var(--dm-navy-ink); }
.dm-vpm__kupa .field--name-field-sklad { margin-bottom: 12px; }
.dm-vpm__kupa form .form-item { margin-bottom: 12px; }
.dm-vpm__kupa form select { width: auto; max-width: 100%; }
.dm-vpm__kupa form .form-item-quantity-0-value input,
.dm-vpm__kupa form input[name^="quantity"] { width: 90px; }