/* Písmo Montserrat sa od 30. 9. načítava <link>-om priamo v hlavičke (s preconnect),
   nie cez @import — @import zdržiaval prvé vykreslenie o jeden request navyše. */

/* ===========================================================================
   drevostav.css — vlastná dizajnová vrstva nad šablónou Shoptet Classic
   ---------------------------------------------------------------------------
   Nasadené: Vzhľad a obsah → Správca súborov
   Adresa:   https://www.drevostav.sk/user/documents/upload/drevostav.css
   Pripojené: HTML kód → hlavička, jeden <link>

   Zdroj pravdy je tento súbor v repozitári (kod/drevostav.css).
   Po každej zmene ho treba nahrať znova — postup je v CLAUDE.md.

   ZÁSADY
   - Nič neprepisujeme natvrdo, kde stačí prepísať premennú šablóny.
   - `!important` len tam, kde to šablóna vynúti, a vždy s poznámkou prečo.
   - Každý blok má komentár, čo rieši a z ktorého nálezu auditu vychádza
     (audit/DIZAJN_29-09-2026.md).
   =========================================================================== */

:root {
  /* --- značka (brand biblia) --- */
  --dvst-modra:        #1B3F8B;
  --dvst-modra-tmava:  #15316E;
  --dvst-cervena:      #D32027;
  --dvst-tmava:        #1A1A1A;
  --dvst-seda:         #58595B;

  /* --- písmo --- */
  --dvst-font: 'Montserrat', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- typografická stupnica (audit, nález 2: 11 veľkostí → 6) ---
     POZOR: Shoptet Classic má `html { font-size: 10px }` (trik 62,5 %),
     takže `1rem` je 10 px, nie 16. Tokeny sú preto v pixeloch.
     Raz ma to už stálo zmenšenie textu zo 14 px na 10 px. */
  --dvst-text-xs:   13px;  /* len drobné popisky   */
  --dvst-text-sm:   14px;  /* vedľajšie údaje      */
  --dvst-text-base: 16px;  /* základný text        */
  --dvst-text-lg:   18px;  /* perex, dôležitý údaj */
  --dvst-text-xl:   22px;  /* nadpis sekcie        */
  --dvst-text-2xl:  28px;  /* nadpis stránky       */

  /* --- šírka textu (audit, nález 4: riadky až 191 znakov) --- */
  --dvst-max-text: 68ch;
}

/* Kontrolná značka — podľa nej sa dá overiť, že sa súbor načítal.
   V prehliadači: getComputedStyle(document.body).getPropertyValue('--dvst-nacitane') */
:root { --dvst-nacitane: 'ano-2026-09-30'; }


/* ===========================================================================
   1. PÍSMO ZNAČKY
   Audit, nález 1: na webe bežali Shoptetove Source Sans 3 a Exo 2, hoci brand
   biblia hovorí Montserrat. V ponuke Editora vzhľadu Montserrat nie je, preto
   sa nahráva odtiaľto.

   Nastavuje sa len RODINA písma, nie veľkosti. Veľkosti má nastavené vlastný
   kód v hlavičke (h1 30 px, .product .name 15 px, .price-final 20/32 px…)
   a plošná zmena by rozhádzala hlavičku aj karty. Rieši sa to nižšie, cielene.
   =========================================================================== */

body,
button, input, select, textarea,
.btn, a.btn,                  /* tlačidlá sú často <a class="btn">, nie <button> */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--dvst-font);
}

/* Nadpisy v Montserrate pôsobia ťažšie než v Exo 2 — o pol stupňa ubrať,
   aby mali rovnakú optickú váhu ako predtým. */
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.01em; }


/* ===========================================================================
   2. ŠÍRKA A VEĽKOSŤ SÚVISLÉHO TEXTU
   Audit, nález 4 + meranie 29. 9.: odstavce v našich vlastných blokoch
   (.dv-t, .dv-hl) mali pri šírke okna 1440 px až 149 znakov na riadok.
   Čitateľné je 45–75. Postihnuté sú len bloky so súvislým textom — karty,
   hlavička ani pätička sa nedotknú.
   =========================================================================== */

.dv-t p, .dv-hl p,
.welcome-wrapper p,
.news-item-detail p,          /* články v Poradni            */
.p-description p,             /* dlhý popis na detaile       */
.text-page p {                /* textové stránky, služby     */
  max-width: var(--dvst-max-text);
}

/* Súvislý text na 16 px. Zvyšok webu zostáva, ako bol — plošná zmena
   základnej veľkosti by roztiahla navigáciu aj karty produktov. */
.dv-t p, .dv-hl p,
.welcome-wrapper p,
.news-item-detail p,
.p-description p,
.text-page p,
.p-short-description {
  font-size: var(--dvst-text-base);
  line-height: 1.6;
}


/* ===========================================================================
   3. DETAIL PRODUKTU NA MOBILE: CENA A TLAČIDLO NA PRVÚ OBRAZOVKU
   Audit, nález 5: pás s výhodami zaberie na mobile 145 px, nadpis začína
   až na 190 px a tlačidlo „Pridať do košíka" je na 900 px — pri obrazovke
   vysokej 812 px teda pod okrajom.

   Na desktope pás zaberá len 41 px a necháva sa. Skrýva sa LEN na mobile
   a LEN na detaile produktu; na úvodnej a v kategóriách zostáva všade.
   =========================================================================== */

@media (max-width: 767px) {
  body.type-product .dv-vyh { display: none; }
}


/* ===========================================================================
   4. KLIKACIE PLOCHY NA MOBILE
   Audit, nález 7: 39 odkazov na desktope je nižších než 24 px.
   Tlačidlá do košíka už 44 px majú (rieši vlastný kód v hlavičke),
   ide o textové odkazy typu „Všetky strešné krytiny →".
   =========================================================================== */

@media (max-width: 767px) {
  .dv-t a, .dv-hl a,
  .welcome-wrapper a:not(.btn) {
    display: inline-block;
    padding-block: 6px;
  }
}


/* ===========================================================================
   5. OBRÁZKY V NAŠICH VLASTNÝCH BLOKOCH: KONIEC POSKAKOVANIA
   Recon 29. 9.: 15 obrázkov bez `width`/`height` je sústredených v bloku .dv-k
   (kartičky Bramac / Braas / Terran) — je to náš obsah, nie Shoptetov.
   Prehliadač preto nevie, koľko miesta nechať, a stránka pri načítaní skáče.

   Pomer 4:3 zodpovedá formátu, ktorý pre tieto fotky pýta obrázkový server
   Shoptetu (`?ff=1&x=423&y=318`).

   Pozn.: váha obrázkov sa NERIEŠI — overené 29. 9., že Shoptet posiela
   skutočným prehliadačom WebP (153 kB .png = 22 kB .webp), celá úvodná má
   pre návštevníka 0,88 MB, nie 1,71 MB, ako vyšlo pri meraní bez hlavičky Accept.
   =========================================================================== */

.dv-k img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
  height: auto;
}


/* ===========================================================================
   6. ÚVODNÁ: NEVYKRESĽOVAŤ, ČO NIE JE VIDIEŤ
   Úvodná má na mobile 18 obrazoviek. `content-visibility` povie prehliadaču,
   aby sekcie mimo obrazovky nevykresľoval, kým sa k nim človek nedoroluje.
   `contain-intrinsic-size` drží odhad výšky, aby neposkakoval posuvník.
   =========================================================================== */

.type-index .dv-t,
.type-index .products[class*="homepage-products"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}


/* ===========================================================================
   7. DETAIL PRODUKTU NA MOBILE: NÁKUP STÁLE PO RUKE
   Po zapnutí hodnotení (29. 9.) pribudol nad fotkou blok s hviezdičkami,
   ktorý na mobile zaberá 104 px, a tlačidlo „Pridať do košíka" sa posunulo
   na 949 px — pri obrazovke 812 px teda pod okraj.

   SKÚSENOSŤ Z 29. 9.: prvé riešenie bolo `position: sticky` na nákupnom bloku.
   Tlačidlo síce bolo na prvej obrazovke, ale sticky prvok si drží pôvodné miesto
   v toku a pripnutý sa vykreslí NAD obsahom medzi — takže prekryl cenu.
   Horšie než pôvodný problém, vrátené. Namiesto trikov sa preto len šetrí miesto
   nad tlačidlom: fotka zostáva dominantná, uberá sa na náhľadoch a rozostupoch.
   =========================================================================== */

@media (max-width: 767px) {
  /* Riadok s hodnotením pribudol 29. 9. a zabral 104 px nad fotkou.
     Stlačiť ho, nech neodtláča to, čo predáva. */
  .type-product .product-top .stars-wrapper { margin-block: 2px; }
  .type-product .product-top .col-xs-12 > .flags { margin-bottom: 2px; }

  /* Pás náhľadov: 100 px je na štyri malé škridly zbytočne veľa. */
  .type-product .p-thumbnails { margin-block: 6px; }
  .type-product .p-thumbnails img { max-height: 64px; width: auto; }

  /* Rozostupy okolo hlavnej fotky a cenového bloku. */
  .type-product .p-image-wrapper { margin-bottom: 6px; }
  .type-product .p-final-price-wrapper { margin-block: 6px; }
}


/* ===========================================================================
   8. ČLÁNKY V PORADNI: TABUĽKY A ODRÁŽKY
   Nové články (30. 9.) majú porovnávacie tabuľky s triedou .dvst-tab. Šablóna
   im nedáva okraje ani odsadenie — stĺpce boli nalepené na sebe. Na mobile
   má tabuľka 6–7 stĺpcov, preto sa posúva vodorovne vo vlastnom okne
   a stránka sama sa do strán nehýbe.
   Odrážky v článkoch dostanú rovnakú veľkosť ako odseky (bod 2 riešil len <p>).
   =========================================================================== */

.dvst-tab {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 18px 0 8px;
  font-size: var(--dvst-text-sm);
  line-height: 1.45;
}
.dvst-tab th,
.dvst-tab td {
  padding: 8px 12px;
  border: 1px solid #DCE1E8;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.dvst-tab thead th {
  background: #F2F5F9;
  color: var(--dvst-tmava);
  font-weight: 600;
}
.dvst-tab tbody tr:nth-child(even) td { background: #FAFBFC; }
.dvst-tab td:first-child { font-weight: 600; white-space: normal; min-width: 150px; }
/* .news-item-detail p (bod 2) má vyššiu špecificitu, preto ten istý predok aj tu */
.news-item-detail .dvst-pozn { font-size: var(--dvst-text-xs); color: var(--dvst-seda); margin: 2px 0; }

.news-item-detail li {
  font-size: var(--dvst-text-base);
  line-height: 1.6;
  margin-bottom: 6px;
}


/* ===========================================================================
   9. OPRAVY Z AUDITU 30. 9. 2026 (audit/AUDIT_30-09-2026.md, vizuálna časť)
   =========================================================================== */

/* 9a. Písmo značky aj na kartách a cenách. Bod 1 nastavil len body/nadpisy/tlačidlá;
   šablóna dáva názvom produktov a cenám vlastné Exo 2, takže na kategórii zostalo
   102 prvkov v Exo 2. Vyberáme len textové prvky — ikonové písmo Shoptetu je na ::before
   iných tried a toto ho nezasiahne. */
.p .name, .product .name,
.price-final, .price-additional, .price-standard, .price-save, .price-measure,
.availability, .availability-amount, .flag,
.p-detail-inner .p-code, .pr-list-unit {
  font-family: var(--dvst-font);
}

/* 9b. Rozcestník podkategórií (.dv-sub) je v popise kategórie s vlastným <style>,
   kde má `repeat(4,1fr)`. Stĺpce 1fr sa nezmrštia pod dĺžku najdlhšieho slova, takže
   /naradie-a-stroje/ mala na mobile 406 px pri obrazovke 375 a na tablete +151 px.
   `body` pred triedou zvýši špecificitu nad pravidlo v popise (to je až v <body>). */
body .dv-sub { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
body .dv-sub a { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 700px) {
  body .dv-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body .dv-sub a { padding: 8px 10px; gap: 8px; font-size: 13px; min-height: 60px; }
  body .dv-sub img { width: 40px; height: 40px; flex-basis: 40px; }
}

/* 9c. Veta „Spotreba závisí od latovania" patrí len k cene za m² (škridly).
   Predtým ju pravidlo v pätičke lepilo ku každej cene, aj k Makita vŕtačke.
   Triedu .dv-m2 pridáva drevostav.js tam, kde jednotková cena obsahuje m2. */
.price-measure.dv-m2::after {
  content: "Spotreba závisí od latovania – viď parameter Spotreba";
  display: block;
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
}

/* 9d. Košík a objednávka: pás s výhodami tu len odvádza pozornosť od dokončenia
   nákupu; tlačidlo na odstránenie položky je vidieť aj bez myši (mobil). */
body.ordering-process .dv-vyh { display: none; }
.ordering-process .remove-item, .ordering-process [data-testid="buttonDeleteItem"] { opacity: 1; visibility: visible; }

/* 9e. Súvislý text 16 px aj na textových stránkach (O nás, Kontakty, služby)
   a v popise rubriky — bod 2 ich minul, šablóna ich má v .pageArticleDetail. */
.pageArticleDetail p, .pageArticleDetail li,
.sectionDescription p, .news-item p {
  font-size: var(--dvst-text-base);
  line-height: 1.6;
}
.pageArticleDetail p, .sectionDescription p { max-width: var(--dvst-max-text); }

/* 9f. Karty modelov škridiel na úvodnej (.dv-k): celý text bol podčiarknutý odkaz. */
.dv-k a, a.dv-k { text-decoration: none; }

/* 9g. Úvodná na mobile: odhad výšky pre content-visibility bol 1 200 px, skutočná
   sekcia s 24 kartami v 2 stĺpcoch má ~4 900 px → posuvník pri dorolovaní skákal. */
@media (max-width: 767px) {
  .type-index .products[class*="homepage-products"] { contain-intrinsic-size: auto 4800px; }
}

/* 9i. Karusel „top produktov" v kategórii: skryté karty (.product.inactive) majú
   position:absolute a šírku 375 px v kontajneri 355 px → stránka bola na mobile
   o 10 px širšia než obrazovka (Shoptetov prvok, nie náš). */
/* position:relative je nutné — skryté karty sú absolútne voči <body>, takže samotné
   overflow ich neorezalo (overené 30. 9.: bez neho 385 px, s ním 375 px). */
.products-top-wrapper { position: relative; overflow: hidden; }

/* ===========================================================================
   10. ÚVODNÁ: KARTY „SLUŽBY", „PORADŇA" A „ĎALEJ U NÁS NÁJDEŠ" (1. 10. 2026)
   Martin: „táto časť je úplne suchá". Karty .dv-kz sú v uvítacom texte titulky
   (HTML sa nemení) — dizajn je čisto tu. Selektor „body .dv-s a.dv-kz" má vyššiu
   špecificitu než pravidlá v <style> uvítacieho textu aj než šablónové podčiarknutie.
   Sekcie sa rozlišujú cez :has() podľa odkazu, ktorý v nich je.
   Ikony sú inline SVG (bez externých súborov); obrázky kategórií dopĺňa drevostav.js
   do premennej --dvk-img z obrázkov v menu.
   =========================================================================== */

body .dv-s .dv-kg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }

body .dv-s a.dv-kz {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 18px 46px 18px 18px;
  border: 1px solid #E4E8EE;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body .dv-s a.dv-kz * { text-decoration: none; }
body .dv-s a.dv-kz:hover {
  border-color: var(--dvst-modra);
  background: #fff;
  box-shadow: 0 10px 26px rgba(27, 63, 139, .13);
  transform: translateY(-2px);
}
body .dv-s a.dv-kz b {
  grid-column: 2; align-self: end;
  display: block; margin: 0 0 3px;
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--dvst-tmava);
}
body .dv-s a.dv-kz span {
  grid-column: 2; align-self: start;
  display: block;
  font-size: 13.5px; line-height: 1.45; color: var(--dvst-seda);
}
body .dv-s a.dv-kz:hover b { color: var(--dvst-modra); }

/* Ikona / obrázok v štvorci vľavo */
body .dv-s a.dv-kz::before {
  content: "";
  grid-column: 1; grid-row: 1 / span 2;
  width: 52px; height: 52px; border-radius: 12px;
  background: #EEF2FA no-repeat center / 26px;
}
/* Šípka vpravo */
body .dv-s a.dv-kz::after {
  content: "→";
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 18px; line-height: 1; color: #B8C2D1;
  transition: right .15s, color .15s;
}
body .dv-s a.dv-kz:hover::after { right: 13px; color: var(--dvst-modra); }

/* --- Služby: ikona podľa cieľa odkazu --- */
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
body .dv-s a.dv-kz[href="/kupelnove-studio/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v2a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6z'/%3E%3Cpath d='M6 12V6a2 2 0 0 1 4 0'/%3E%3Cpath d='M7 20l-1 2M17 20l1 2'/%3E%3C/svg%3E"); }
body .dv-s a.dv-kz[href="/fasadne-studio/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='6' rx='1.5'/%3E%3Cpath d='M17 6h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-7v3'/%3E%3Crect x='10' y='14' width='4' height='7' rx='1'/%3E%3C/svg%3E"); }
body .dv-s a.dv-kz[href="/fukana-izolacia/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3'/%3E%3Cpath d='M3 12h15a3 3 0 1 1-3 3'/%3E%3Cpath d='M3 16h7'/%3E%3C/svg%3E"); }
body .dv-s a.dv-kz[href="/ohybacka-plechu/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4z'/%3E%3C/svg%3E"); }
body .dv-s a.dv-kz[href="/pozicovna-strojov-a-naradia/"]::before, body .dv-s a.dv-kz[href*="boels.com"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3F8B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h3v3H8z'/%3E%3C/svg%3E"); }

/* Obhliadka strechy zdarma = hlavná výzva sekcie, preto plná modrá */
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"] {
  background: linear-gradient(135deg, var(--dvst-modra), var(--dvst-modra-tmava));
  border-color: transparent;
}
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"] b,
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"]:hover b { color: #fff; }
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"] span { color: #D6E0F5; }
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"]::before {
  background-color: rgba(255, 255, 255, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
}
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"]::after,
body .dv-s a.dv-kz[href="/strechy-obhliadka-a-cenova-ponuka/"]:hover::after { color: #fff; }

/* --- Poradňa: kniha v červenom štvorci --- */
body .dv-s:has(.dv-hl a[href="/poradna/"]) a.dv-kz::before {
  background-color: #FCEDEE;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D32027' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E");
}
body .dv-s:has(.dv-hl a[href="/poradna/"]) a.dv-kz:hover { border-color: var(--dvst-cervena); box-shadow: 0 10px 26px rgba(211, 32, 39, .12); }
body .dv-s:has(.dv-hl a[href="/poradna/"]) a.dv-kz:hover b,
body .dv-s:has(.dv-hl a[href="/poradna/"]) a.dv-kz:hover::after { color: var(--dvst-cervena); }

/* --- Kategórie: obrázok kategórie z menu (drevostav.js → --dvk-img), inak krabica --- */
body .dv-s:has(a.dv-kz[href="/stresne-doplnky/"]) a.dv-kz::before {
  background-color: #F5F7FA;
  background-image: var(--dvk-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358595B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"));
  background-size: var(--dvk-size, 26px);
  background-blend-mode: multiply;
}

@media (max-width: 991px) {
  body .dv-s .dv-kg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  body .dv-s .dv-kg { grid-template-columns: 1fr; gap: 10px; }
  body .dv-s a.dv-kz { min-height: 76px; padding: 14px 40px 14px 14px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 13px; }
  body .dv-s a.dv-kz::before { width: 44px; height: 44px; border-radius: 10px; background-size: 22px; }
  body .dv-s:has(a.dv-kz[href="/stresne-doplnky/"]) a.dv-kz::before { background-size: var(--dvk-size-m, 22px); }
  body .dv-s a.dv-kz b { font-size: 15px; }
  body .dv-s a.dv-kz span { font-size: 13px; }
}

/* ===========================================================================
   11. ÚVODNÁ — PRESTAVBA 1. 10. 2026 (Martin: „sprav všetko čo vieš sám", bod 2 súhlas)
   - bez bočného panela (kategórie sú v hornom menu), obsah na celú šírku
   - „Vyber si krytinu" (4 značky), „Ako to u nás funguje" (3 kroky),
     „Skladom u nás vo Zvolene" = pás produktov na posúvanie (drevostav.js ho presunie)
   =========================================================================== */
body.type-index .sidebar { display: none; }
body .dv-hero p.dv-hero-d { margin: 14px 0 0; font-size: 13.5px; color: #C9D6F2; }
body.type-index main.content { padding-left: 0; max-width: none; }

/* --- Vyber si krytinu --- */
body .dv-zn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
body .dv-zn a.dv-znk {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #E4E8EE; border-radius: 14px; background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body .dv-zn a.dv-znk:hover { border-color: var(--dvst-modra); box-shadow: 0 12px 30px rgba(27, 63, 139, .14); transform: translateY(-3px); }
body .dv-zn .dv-znk-o { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 14px; background: #F5F7FA; }
body .dv-zn .dv-znk-o img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
body .dv-zn .dv-znk-t { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
body .dv-zn .dv-znk-m { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dvst-cervena); }
body .dv-zn .dv-znk-n { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--dvst-tmava); }
body .dv-zn .dv-znk-p { flex: 1; font-size: 14px; line-height: 1.5; color: var(--dvst-seda); }
body .dv-zn .dv-znk-b { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--dvst-modra); }
body .dv-zn a.dv-znk:hover .dv-znk-b { text-decoration: underline; }
body .dv-krytiny .dv-hl p a { white-space: normal; text-decoration: underline; }

/* --- Ako to u nás funguje --- */
body .dv-ako {
  padding: 26px 28px 28px; border-radius: 16px;
  background: linear-gradient(135deg, #F2F5FB, #E8EEF8);
}
body .dv-ako .dv-hl p a { white-space: nowrap; text-decoration: underline; }
body .dv-kroky { counter-reset: krok; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 20px; padding: 0; }
body .dv-kroky li {
  counter-increment: krok; position: relative;
  padding: 20px 20px 20px 74px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
body .dv-kroky li::before {
  content: counter(krok);
  position: absolute; left: 20px; top: 20px;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dvst-modra); color: #fff; font-size: 17px; font-weight: 700;
}
body .dv-kroky b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--dvst-tmava); }
body .dv-kroky span { display: block; font-size: 14px; line-height: 1.5; color: var(--dvst-seda); }
body .dv-ako .dv-ako-b { margin: 0; }

/* --- Pás produktov: šípky v hlavičke sekcie --- */
body #dv-skladom .dv-hl { align-items: center; }
body #dv-skladom .dv-car { display: flex; gap: 8px; }
body #dv-skladom .dv-car button {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #D5DCE6; background: #fff; color: var(--dvst-modra);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
body #dv-skladom .dv-car button:hover { background: var(--dvst-modra); border-color: var(--dvst-modra); color: #fff; }
body #dv-skladom .dv-car button[disabled] { opacity: .35; cursor: default; background: #fff; color: var(--dvst-modra); }
body #dv-skladom .products { margin-top: 16px; }

@media (max-width: 991px) {
  body .dv-zn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .dv-kroky { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body .dv-zn { gap: 10px; }
  body .dv-zn .dv-znk-t { padding: 12px 12px 14px; }
  body .dv-zn .dv-znk-n { font-size: 18px; }
  body .dv-zn .dv-znk-p { font-size: 13px; }
  body .dv-ako { padding: 20px 16px; border-radius: 12px; }
  body .dv-kroky li { padding: 16px 16px 16px 64px; }
  body .dv-kroky li::before { left: 16px; top: 16px; width: 34px; height: 34px; font-size: 15px; }
  body #dv-skladom .dv-car { display: none; }
  body .dv-hero .dv-b { display: block; text-align: center; }
}

/* úpravy po náhľade 1. 10.: globálne max-width 68ch na <p> tlačilo popis vedľa nadpisu;
   karty v páse rovnako vysoké, popis na 3 riadky, košík vždy dole */
body .dv-w .dv-hl p { max-width: none; }
body .dv-w .dv-hl p a { display: inline; padding: 0; }
body #dv-skladom .product > .p { display: flex !important; flex-direction: column; height: 100%; }
body #dv-skladom .product .p-in { flex: 1; display: flex !important; flex-direction: column; }
body #dv-skladom .product .p-in-in { flex: 1; }
body #dv-skladom .product .p-desc {
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 4.6em;
}

/* 9h. Blok „Tovar k článku" v Poradni (odkazy článok → kategórie/produkty). */
.dvst-tovar { margin: 28px 0 8px; padding: 16px 20px; border: 1px solid #DCE1E8;
  border-left: 4px solid var(--dvst-modra); background: #F7F9FC; }
.dvst-tovar h2 { font-size: var(--dvst-text-lg); margin: 0 0 8px; }
.dvst-tovar ul { margin: 0; padding-left: 18px; }
.dvst-tovar li { font-size: var(--dvst-text-base); line-height: 1.6; margin-bottom: 4px; }

/* ===========================================================================
   12. ÚVODNÁ — POSÚVACÍ BANNER S FOTKAMI (nasadené 5. 10. 2026, návrh z Canvy)
   Tmavomodrá plocha s textom vľavo, šikmý červený pruh, vlastná fotka vpravo,
   okrúhly červený odznak. 5 snímok, šípky, bodky, swipe, samé každých 7 s.
   =========================================================================== */
body .dv-hero.dv-sl { position: relative; background: #062754; overflow: hidden; }
body .dv-sl-tr {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
body .dv-sl-tr::-webkit-scrollbar { display: none; }
body .dv-sl-s {
  position: relative; flex: 0 0 100%; min-width: 0; height: 480px;
  scroll-snap-align: start; overflow: hidden;
}
body .dv-sl-ph {
  position: absolute; top: 0; right: 0; width: 52%; height: 100%;
  object-fit: cover; object-position: center;
}
body .dv-sl-bg {
  position: absolute; inset: 0; background: #062754;
  clip-path: polygon(0 0, 53% 0, 48.5% 100%, 0 100%);
}
body .dv-sl-st {
  position: absolute; inset: 0; background: var(--dvst-cervena);
  clip-path: polygon(53% 0, 55% 0, 50.5% 100%, 48.5% 100%);
}
body .dv-sl-in {
  position: relative; z-index: 2; box-sizing: border-box;
  width: 47%; height: 100%;
  padding: 52px 24px 92px max(64px, calc((100vw - 1418px) / 2 + 64px));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
  color: #fff;
}
body .dv-sl-k {
  padding: 6px 12px; border-radius: 3px; background: var(--dvst-cervena);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
body .dv-sl .dv-sl-in h2 {
  margin: 0; font-size: 54px; line-height: 1.06; font-weight: 800; letter-spacing: -.01em; color: #fff !important;
}
body .dv-sl .dv-sl-in p { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.55; font-weight: 600; color: #D9E2F4; }
body .dv-sl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
body .dv-sl-cta .dv-b { margin: 0; }
body .dv-sl-bd {
  position: absolute; z-index: 3; left: calc(48.5% - 64px); bottom: 34px;
  width: 136px; height: 136px; border-radius: 50%; background: var(--dvst-cervena);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #fff; text-align: center; padding: 0 14px; box-sizing: border-box;
}
body .dv-sl-bd b { font-size: 36px; line-height: 1; font-weight: 800; }
body .dv-sl-bd span { font-size: 12px; line-height: 1.25; font-weight: 700; }
body .dv-sl-bd.dv-sl-bd-hore { left: auto; right: 40px; top: 28px; bottom: auto; }
body .dv-sl-a {
  position: absolute; top: calc(50% - 24px); z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5); background: rgba(6, 39, 84, .35);
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .15s;
}
body .dv-sl-a:hover, body .dv-sl-a:focus-visible { background: #fff; color: #062754; }
body .dv-sl-p { left: 14px; }
body .dv-sl-n { right: 14px; }
body .dv-sl-f {
  position: absolute; z-index: 4; bottom: 26px;
  left: max(64px, calc((100vw - 1418px) / 2 + 64px));
  display: flex; align-items: center; gap: 20px;
}
body .dv-sl-d { display: flex; gap: 8px; }
body .dv-sl-d button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px;
  background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .2s, background .2s;
}
body .dv-sl-d button.on { width: 28px; background: #fff; }
body .dv-sl .dv-sl-f p.dv-hero-d { margin: 0; font-size: 13px; color: #C6D3EE; }

@media (max-width: 1199px) {
  body .dv-sl-s { height: 440px; }
  body .dv-sl .dv-sl-in h2 { font-size: 42px; }
  body .dv-sl-in { padding-left: 64px; }
  body .dv-sl-f { left: 64px; }
}
@media (max-width: 767px) {
  body .dv-sl-s { height: auto; display: flex; flex-direction: column; }
  body .dv-sl-ph { position: relative; width: 100%; height: 190px; }
  body .dv-sl-bg { display: none; }
  body .dv-sl-st { position: relative; inset: auto; height: 5px; clip-path: none; }
  body .dv-sl-in { width: 100%; height: auto; padding: 18px 16px 58px; gap: 12px; justify-content: flex-start; }
  body .dv-sl .dv-sl-in h2 { font-size: 30px; }
  body .dv-sl .dv-sl-in p { font-size: 15px; }
  body .dv-sl-cta { flex-direction: column; width: 100%; }
  body .dv-sl-cta .dv-b { display: block; text-align: center; }
  body .dv-sl-bd, body .dv-sl-bd.dv-sl-bd-hore { left: auto; right: 12px; top: 12px; bottom: auto; width: 92px; height: 92px; padding: 0 8px; }
  body .dv-sl-bd b { font-size: 24px; }
  body .dv-sl-bd span { font-size: 10px; }
  body .dv-sl-a { display: none; }
  body .dv-sl-f { left: 16px; right: 16px; bottom: 18px; gap: 12px; }
  body .dv-sl .dv-sl-f p.dv-hero-d { font-size: 11px; }
}

/* ===========================================================================
   13. STRÁNKA KÚPEĽŇOVÉ ŠTÚDIO (id 744, /kupelnove-studio/) — 5. 10. 2026
   Plná šírka bez bočného panela, vlastný H1 v úvodnom bloku (.dvk).
   =========================================================================== */
body.id-744 .sidebar { display: none; }
body.id-744 .pageArticleDetail > header { display: none; }
body.id-744 .content-inner, body.id-744 .pageArticleDetail { max-width: none; }

body .dvk { --dvk-n: #062754; --dvk-b: #1B3F8B; --dvk-r: #D32027; --dvk-bg: #F3F6FB; --dvk-l: #DDE4F0;
  font-family: var(--dvst-font); color: #1A1A1A; font-size: 16px; line-height: 1.6; }
body .dvk p, body .dvk li { max-width: none; }
body .dvk h1, body .dvk h2, body .dvk h3 { font-family: var(--dvst-font); color: var(--dvk-n); letter-spacing: -.01em; }
body .dvk h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 800; }
body .dvk h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 800; }
body .dvk .dvk-kick { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 3px;
  background: var(--dvk-r); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body .dvk .dvk-sub { margin: 0 0 28px; max-width: 640px; color: #58595B; font-size: 17px; }

/* úvodný blok */
body .dvk-hero { position: relative; display: grid; grid-template-columns: 50% 50%; min-height: 500px; overflow: hidden;
  border-radius: 14px; background: var(--dvk-n); color: #fff; }
body .dvk-hero-txt { position: relative; z-index: 2; align-self: center; padding: 48px 76px 48px 48px; }
body .dvk-hero-foto { position: relative; margin-left: -9%; background: var(--dvk-r);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
body .dvk-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  clip-path: polygon(18.5% 0, 100% 0, 100% 100%, 2.5% 100%); }
body .dvk-badge { position: absolute; z-index: 3; right: 28px; bottom: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 128px; height: 128px; padding: 0 12px; box-sizing: border-box; border-radius: 50%; background: var(--dvk-r); color: #fff; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.25; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
body .dvk-badge b { display: block; font-size: 38px; line-height: 1; font-weight: 800; margin-bottom: 4px; }
body .dvk .dvk-hero h1 { margin: 0 0 16px; color: #fff; font-size: clamp(32px, 2.75vw, 44px); line-height: 1.12; font-weight: 800; }
body .dvk .dvk-lead { margin: 0 0 26px; color: #D9E2F4; font-size: 18px; font-weight: 500; }
body .dvk-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
body .dvk a.dvk-btn { display: inline-block; padding: 14px 24px; border-radius: 6px; font-weight: 800; font-size: 16px; text-decoration: none; transition: background .15s, color .15s; }
body .dvk a.dvk-btn-r { background: var(--dvk-r); color: #fff; }
body .dvk a.dvk-btn-r:hover { background: #B01A20; color: #fff; }
body .dvk a.dvk-btn-o { border: 2px solid rgba(255,255,255,.7); color: #fff; padding: 12px 22px; }
body .dvk a.dvk-btn-o:hover { background: #fff; color: var(--dvk-n); }
body .dvk-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; color: #C6D3EE; font-size: 14px; }
body .dvk-trust li { margin: 0; padding: 0; }
body .dvk-trust li::before { content: none; }
body .dvk-trust b { color: #fff; }
body .dvk-card { position: relative; z-index: 1; padding: 28px 28px 24px; border-radius: 12px; background: #fff; color: #1A1A1A; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
body .dvk .dvk-card-h { margin: 0 0 14px; color: var(--dvk-n); font-size: 19px; font-weight: 800; }
body .dvk .dvk-card-f { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--dvk-l); color: #58595B; font-size: 14px; }
body .dvk-check { margin: 0; padding: 0; list-style: none; }
body .dvk-check li { position: relative; margin: 0 0 9px; padding-left: 30px; font-size: 15px; line-height: 1.45; }
body .dvk-check li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--dvk-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }

/* sekcie */
body .dvk-sec { margin: 56px 0 0; }
body .dvk-sec-alt { padding: 48px 48px 44px; border-radius: 14px; background: var(--dvk-bg); }
body .dvk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body .dvk-f { padding: 26px 24px 22px; border: 1px solid var(--dvk-l); border-radius: 12px; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
body .dvk-f:hover { transform: translateY(-3px); border-color: #B9C6DE; box-shadow: 0 12px 28px rgba(6,39,84,.10); }
body .dvk .dvk-f p { margin: 0; color: #46484A; font-size: 15px; }
body .dvk-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 10px; background: var(--dvk-b); }
body .dvk-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body .dvk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: dvk; }
body .dvk-steps li { position: relative; margin: 0; padding: 0 0 0 0; counter-increment: dvk; }
body .dvk-steps li::before { content: counter(dvk); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--dvk-r); color: #fff; font-size: 19px; font-weight: 800; }
body .dvk-steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -6px; height: 2px; background: #C8D3E6; }
body .dvk-steps b { display: block; margin-bottom: 6px; color: var(--dvk-n); font-size: 17px; }
body .dvk-steps span { display: block; color: #46484A; font-size: 15px; line-height: 1.5; }

body .dvk-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
body .dvk .dvk-split p { margin: 0 0 12px; color: #46484A; }
body .dvk-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body .dvk-links li { margin: 0; padding: 0; }
body .dvk-links li::before { content: none; }
body .dvk-links a { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border: 1px solid var(--dvk-l); border-left: 4px solid var(--dvk-b);
  border-radius: 8px; background: #fff; color: var(--dvk-n); font-weight: 700; text-decoration: none; transition: border-color .15s, background .15s; }
body .dvk-links a::after { content: "→"; color: var(--dvk-r); font-weight: 800; }
body .dvk-links a:hover { border-left-color: var(--dvk-r); background: var(--dvk-bg); }

body .dvk-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
body .dvk-gal figure { position: relative; margin: 0; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; background: var(--dvk-bg); }
body .dvk-gal img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
body .dvk-gal figure:hover img { transform: scale(1.04); }
body .dvk-gal figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 4px; background: rgba(6,39,84,.88);
  color: #fff; font-size: 13px; font-weight: 700; }

body .dvk-proc { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; margin-top: 22px; }
body .dvk-proc .dvk-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 28px; margin: 0; }
body .dvk-proc .dvk-steps li::after { display: none; }
body .dvk-sec-alt .dvk-card { box-shadow: 0 10px 30px rgba(6,39,84,.10); border: 1px solid var(--dvk-l); }
body .dvk-faq { display: grid; gap: 10px; margin-top: 18px; }
body .dvk-faq details { border: 1px solid var(--dvk-l); border-radius: 10px; background: #fff; }
body .dvk-faq summary { position: relative; padding: 17px 52px 17px 20px; color: var(--dvk-n); font-weight: 700; cursor: pointer; list-style: none; }
body .dvk-faq summary::-webkit-details-marker { display: none; }
body .dvk-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--dvk-r); font-size: 24px; font-weight: 700; line-height: 1; }
body .dvk-faq details[open] summary::after { content: "–"; }
body .dvk .dvk-faq p { margin: 0; padding: 0 20px 18px; color: #46484A; }

body .dvk-kontakt { margin: 56px 0 8px; border-radius: 14px; background: var(--dvk-n); color: #fff; }
body .dvk-kontakt-in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 44px 48px; }
body .dvk .dvk-kontakt h2 { color: #fff; }
body .dvk .dvk-kontakt p { margin: 0; color: #D9E2F4; font-size: 17px; font-weight: 600; }
body .dvk-kontakt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; color: #D9E2F4; }
body .dvk-kontakt li { margin: 0; padding: 0; }
body .dvk-kontakt li::before { content: none; }
body .dvk-kontakt a { color: #fff; font-size: 22px; font-weight: 800; text-decoration: none; }
body .dvk-kontakt a:hover { text-decoration: underline; }

@media (max-width: 1199px) {
  body .dvk-hero { min-height: 480px; }
  body .dvk-hero-txt { padding: 44px 80px 44px 40px; }
  body .dvk .dvk-hero h1 { font-size: 34px; }
  body .dvk-badge { width: 108px; height: 108px; right: 20px; bottom: 20px; font-size: 11px; }
  body .dvk-badge b { font-size: 32px; }
  body .dvk-proc { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  body .dvk-hero { grid-template-columns: 1fr; min-height: 0; }
  body .dvk-hero-foto { order: -1; height: 300px; margin-left: 0; clip-path: none; background: none; }
  body .dvk-hero-foto img { clip-path: none; }
  body .dvk-hero-txt { padding: 36px 32px 36px; }
  body .dvk-split, body .dvk-kontakt-in { grid-template-columns: 1fr; }
  body .dvk-grid { grid-template-columns: repeat(2, 1fr); }
  body .dvk-gal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  body .dvk h2 { font-size: 25px; }
  body .dvk .dvk-sub { font-size: 16px; }
  body .dvk-hero, body .dvk-sec-alt, body .dvk-kontakt { border-radius: 10px; }
  body .dvk-hero-foto { height: 220px; }
  body .dvk-hero-txt { padding: 24px 18px 26px; }
  body .dvk .dvk-hero h1 { font-size: 28px; }
  body .dvk .dvk-lead { font-size: 16px; }
  body .dvk-badge { width: 84px; height: 84px; right: 12px; bottom: auto; top: 136px; padding: 0 6px; font-size: 9px; }
  body .dvk-badge b { font-size: 24px; margin-bottom: 2px; }
  body .dvk-cta { flex-direction: column; }
  body .dvk a.dvk-btn { text-align: center; }
  body .dvk-card { padding: 22px 18px 18px; }
  body .dvk-sec { margin-top: 40px; }
  body .dvk-sec-alt { padding: 30px 18px 26px; }
  body .dvk-grid, body .dvk-steps, body .dvk-proc .dvk-steps { grid-template-columns: 1fr; }
  body .dvk-steps, body .dvk-proc .dvk-steps { gap: 20px; }
  body .dvk-steps li { min-height: 40px; padding-left: 56px; }
  body .dvk-steps li::before { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: 0; font-size: 17px; }
  body .dvk-gal { gap: 8px; }
  body .dvk-gal figcaption { left: 8px; bottom: 8px; padding: 4px 8px; font-size: 11px; }
  body .dvk-kontakt-in { padding: 30px 18px; }
  body .dvk-kontakt a { font-size: 20px; }
}

/* ===========================================================================
   14. FÚKANÁ IZOLÁCIA (id 750) + DOPYTOVÝ FORMULÁR (.dvd) — 5. 10. 2026
   Stránka používa komponenty .dvk zo sekcie 13. Formulár posiela do
   kontaktného formulára Shoptetu (/action/MailForm/SendEmail/, formId 1),
   správu poskladá dopyt() v drevostav.js.
   =========================================================================== */
body.id-750 .sidebar { display: none; }
body.id-750 .pageArticleDetail > header { display: none; }
body.id-750 .content-inner, body.id-750 .pageArticleDetail { max-width: none; }

body .dvk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
body .dvk-facts > div { padding: 22px 22px 20px; border: 1px solid var(--dvk-l); border-left: 4px solid var(--dvk-r); border-radius: 10px; background: #fff; }
body .dvk-facts b { display: block; margin-bottom: 6px; color: var(--dvk-n); font-size: 28px; line-height: 1.1; font-weight: 800; }
body .dvk-facts span { display: block; color: #46484A; font-size: 14.5px; line-height: 1.45; }
body .dvk .dvk-zdroj { margin: 18px 0 0; color: #6B6E72; font-size: 13px; }

body .dvd { scroll-margin-top: 90px; }
body .dvd-in { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; padding: 44px 48px; border-radius: 14px; background: var(--dvk-n); color: #fff; }
body .dvk .dvd h2 { color: #fff; }
body .dvk .dvd-txt p { margin: 0 0 12px; color: #D9E2F4; font-size: 16px; }
body .dvk .dvd-tel a { color: #fff; font-weight: 800; font-size: 20px; text-decoration: none; }
body .dvd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 26px; border-radius: 12px; background: #fff; color: #1A1A1A; }
body .dvd-f { display: flex; flex-direction: column; gap: 6px; margin: 0; color: var(--dvk-n); font-size: 13.5px; font-weight: 700; }
body .dvd-form input, body .dvd-form select, body .dvd-form textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 13px;
  border: 1px solid #C9D3E3; border-radius: 7px; background: #fff; color: #1A1A1A; font: 500 15px var(--dvst-font); }
body .dvd-form textarea { min-height: 84px; resize: vertical; }
body .dvd-form input:focus, body .dvd-form select:focus, body .dvd-form textarea:focus { outline: 2px solid var(--dvk-b); outline-offset: 1px; border-color: var(--dvk-b); }
body .dvd-w { grid-column: 1 / -1; }
body .dvk .dvd-gdpr { margin: 0; color: #6B6E72; font-size: 12.5px; }
body .dvk .dvd-err { margin: 0; color: var(--dvk-r); font-size: 14px; font-weight: 700; }
body .dvk .dvd-err:empty { display: none; }
body .dvd-form button.dvk-btn { display: block; width: 100%; padding: 15px 24px; border: 0; border-radius: 6px; background: var(--dvk-r);
  color: #fff; font: 800 16px var(--dvst-font); cursor: pointer; transition: background .15s; }
body .dvd-form button.dvk-btn:hover { background: #B01A20; }
body .dvd-form button.dvk-btn:disabled { opacity: .7; cursor: wait; }
body .dvd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 991px) {
  body .dvk-facts { grid-template-columns: repeat(2, 1fr); }
  body .dvd-in { grid-template-columns: 1fr; gap: 24px; padding: 34px 28px; }
}
@media (max-width: 767px) {
  body .dvk-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  body .dvk-facts > div { padding: 16px 14px; }
  body .dvk-facts b { font-size: 22px; }
  body .dvd-in { padding: 26px 16px; border-radius: 10px; }
  body .dvd-form { grid-template-columns: 1fr; padding: 18px 14px; }
}

/* ===========================================================================
   15. STRECHY — OBHLIADKA A CENOVÁ PONUKA (id 738) — 5. 10. 2026
   Komponenty .dvk zo sekcie 13, formulár .dvd zo sekcie 14.
   =========================================================================== */
body.id-738 .sidebar { display: none; }
body.id-738 .pageArticleDetail > header { display: none; }
body.id-738 .content-inner, body.id-738 .pageArticleDetail { max-width: none; }

body .dvk-znacky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
body .dvk-znacky a { display: flex; flex-direction: column; gap: 4px; padding: 24px 22px; border: 1px solid var(--dvk-l); border-top: 4px solid var(--dvk-b);
  border-radius: 10px; background: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
body .dvk-znacky a:hover { transform: translateY(-3px); border-top-color: var(--dvk-r); box-shadow: 0 12px 28px rgba(6,39,84,.10); }
body .dvk-znacky b { color: var(--dvk-n); font-size: 22px; font-weight: 800; }
body .dvk-znacky span { color: #58595B; font-size: 14px; }
body .dvk-znacky span::after { content: " →"; color: var(--dvk-r); font-weight: 800; }
body .dvk .dvk-zdroj a { color: var(--dvk-b); font-weight: 700; }

@media (max-width: 991px) { body .dvk-znacky { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { body .dvk-znacky a { padding: 16px 14px; } body .dvk-znacky b { font-size: 18px; } }

/* ===========================================================================
   16. RECENZIE ZO GOOGLE (.dvk-rec) — strechy 738, kúpeľne 744 — 5. 10. 2026
   Doslovné úryvky z verejných recenzií na Google (profil BigMat DREVOSTAV ZVOLEN).
   =========================================================================== */
body .dvk-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
body .dvk-rec figure { position: relative; margin: 0; padding: 26px 26px 22px; border: 1px solid var(--dvk-l); border-radius: 12px; background: #fff; }
body .dvk-rec figure::before { content: "“"; position: absolute; top: 4px; right: 18px; color: #E3E9F4; font: 800 72px/1 Georgia, serif; }
body .dvk-rec .dvk-hv { color: #F2B01E; font-size: 18px; letter-spacing: 2px; }
body .dvk .dvk-rec blockquote { margin: 8px 0 14px; padding: 0; border: 0; color: #1A1A1A; font-size: 16px; line-height: 1.55; font-style: normal; }
body .dvk-rec figcaption { color: #58595B; font-size: 14px; }
body .dvk-rec figcaption b { color: var(--dvk-n); }
body .dvk .dvk-rec-sum { margin: 16px 0 0; color: #58595B; font-size: 14px; }
body .dvk .dvk-rec-sum b { color: var(--dvk-n); }

/* ===========================================================================
   17. DIZAJNOVÝ AUDIT — P1 (5. 10. 2026)
   a) odznak „Odporúčaná cena výrobcu“ na fotke: modrý kruh → nenápadný štítok
   b) textové stránky a články: bez bočného menu kategórií, čitateľný stĺpec,
      výraznejšie nadpisy a odrážky (landing stránky 738/744/750 majú vlastný dizajn)
   c) Poradňa: mriežka kariet namiesto zoznamu
   d) mobil: pás výhod v jednom posuvnom riadku
   =========================================================================== */

/* a) odznak ceny výrobcu */
body .flags-extra .flag-discount {
  width: auto; height: auto; min-width: 0; min-height: 0; padding: 5px 8px; border-radius: 5px;
  background: rgba(255,255,255,.95); color: #58595B; box-shadow: 0 1px 4px rgba(6,39,84,.18);
  font-size: 10.5px; line-height: 1.2; font-weight: 600; text-align: left;
}
body .flags-extra .flag-discount .price-standard { color: #58595B; font-size: 12px; }
body .products .p .flags-extra { top: auto; bottom: 8px; right: 8px; left: auto; }

/* b) textové stránky a články */
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .sidebar,
body.type-post .sidebar,
body.type-posts-listing .sidebar { display: none; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .content-inner,
body.type-post .content-inner { max-width: 860px; margin: 0 auto; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h1,
body.type-post h1 {
  position: relative; margin: 6px 0 26px; padding-bottom: 16px; color: #062754;
  font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
}
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h1::after,
body.type-post h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 2px; background: #D32027; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h2,
body.type-post .pageArticleDetail h2, body.type-post article h2 {
  margin: 38px 0 12px; padding-left: 14px; border-left: 4px solid #D32027; color: #062754;
  font-size: 23px; line-height: 1.25; font-weight: 800;
}
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h3,
body.type-post article h3 { margin: 26px 0 8px; color: #062754; font-size: 18px; font-weight: 800; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail p,
body.type-post article p { color: #2B2D2F; font-size: 16.5px; line-height: 1.7; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail ul,
body.type-post article ul { margin: 12px 0 20px; padding: 0; list-style: none; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail ul li,
body.type-post article ul li { position: relative; margin: 0 0 9px; padding-left: 28px; font-size: 16px; line-height: 1.6; }
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail ul li::before,
body.type-post article ul li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 9px; height: 9px; border-radius: 2px; background: #1B3F8B; transform: rotate(45deg);
}
body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail a:not(.btn):not(.dvk-btn),
body.type-post article a:not(.btn) { color: #1B3F8B; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(27,63,139,.35); }

/* c) Poradňa — karty */
body.type-posts-listing .content-inner { max-width: none; }
body.type-posts-listing .news-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.type-posts-listing .news-item {
  position: relative; display: flex; margin: 0; padding: 0; border: 1px solid #DDE4F0; border-top: 4px solid #1B3F8B;
  border-radius: 12px; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s;
}
body.type-posts-listing .news-item:hover { transform: translateY(-3px); border-top-color: #D32027; box-shadow: 0 12px 28px rgba(6,39,84,.10); }
body.type-posts-listing .news-item .text { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; }
body.type-posts-listing .news-item .title { color: #062754; font-size: 18.5px; line-height: 1.3; font-weight: 800; text-decoration: none; }
body.type-posts-listing .news-item .title::after { content: ""; position: absolute; inset: 0; }
body.type-posts-listing .news-item time { order: -1; color: #8A8D91; font-size: 12.5px; font-weight: 600; }
body.type-posts-listing .news-item .description, body.type-posts-listing .news-item .description p {
  margin: 0; color: #46484A; font-size: 14.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
body.type-posts-listing .news-item .text::after { content: "Čítať článok →"; margin-top: auto; padding-top: 6px; color: #D32027; font-size: 14px; font-weight: 800; }

@media (max-width: 991px) {
  body.type-posts-listing .news-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h1, body.type-post h1 { font-size: 28px; }
  body.type-page:not(.id-738):not(.id-744):not(.id-750):not(.id-29):not(.id-732) .pageArticleDetail h2, body.type-post article h2 { font-size: 20px; }
  body.type-posts-listing .news-wrapper { grid-template-columns: 1fr; gap: 12px; }
  /* d) pás výhod v jednom posuvnom riadku */
  body .dv-vyh ul { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 18px; overflow-x: auto; padding: 9px 14px; scrollbar-width: none; }
  body .dv-vyh ul::-webkit-scrollbar { display: none; }
  body .dv-vyh li { flex: 0 0 auto; white-space: nowrap; font-size: 13px; margin: 0; padding: 0; }
}

/* ===========================================================================
   18. O NÁS (id 732) a KONTAKTY (id 29) — 5. 10. 2026
   Komponenty .dvk zo sekcie 13, formulár .dvd zo sekcie 14, recenzie zo 16.
   =========================================================================== */
body.id-29 .sidebar, body.id-732 .sidebar { display: none; }
body.id-29 .pageArticleDetail > header, body.id-732 .pageArticleDetail > header { display: none; }
body.id-29 .content-inner, body.id-29 .pageArticleDetail,
body.id-732 .content-inner, body.id-732 .pageArticleDetail { max-width: none; }

/* O nás */
body .dvo-facts { grid-template-columns: repeat(4, 1fr); }
body .dvo-sluzby { grid-template-columns: repeat(3, 1fr); }
body .dvo-sluzby b { font-size: 19px; }
body .dvo-foto { margin: 0; }
body .dvo-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 34px rgba(6,39,84,.16); }
body .dvk .dvk-split .dvk-btn { margin-top: 8px; }

/* Kontakty — kto čo rieši */
body .dvc-ludia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body .dvc-k { display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 22px; border: 1px solid var(--dvk-l); border-top: 4px solid var(--dvk-b);
  border-radius: 12px; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
body .dvc-k:hover { transform: translateY(-3px); border-top-color: var(--dvk-r); box-shadow: 0 12px 28px rgba(6,39,84,.10); }
body .dvc-tema { color: var(--dvk-n); font-size: 19px; font-weight: 800; line-height: 1.25; }
body .dvk .dvc-k p { flex: 1; margin: 0 0 8px; color: #58595B; font-size: 14.5px; line-height: 1.5; }
body .dvk .dvc-tel { color: var(--dvk-r); font-size: 22px; font-weight: 800; text-decoration: none; white-space: nowrap; }
body .dvk .dvc-tel::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
body .dvk .dvc-mail { color: var(--dvk-b); font-size: 14.5px; font-weight: 700; word-break: break-word; }

/* Kontakty — cesta, hodiny, firemné údaje */
body .dvc-cesta { grid-template-columns: 1fr 1fr; }
body .dvk .dvc-adr { margin: 0 0 12px; color: var(--dvk-n); font-size: 18px; line-height: 1.55; }
body .dvc-hod { width: auto; min-width: 280px; margin: 6px 0 20px; border-collapse: collapse; font-size: 15.5px; }
body .dvc-hod th, body .dvc-hod td { padding: 9px 0; border: 0; border-bottom: 1px solid var(--dvk-l); background: none; text-align: left; }
body .dvc-hod th { padding-right: 28px; color: #58595B; font-weight: 600; }
body .dvc-hod td { color: var(--dvk-n); font-weight: 800; }
body .dvc-firma { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body .dvc-firma > div { padding: 22px 24px; border: 1px solid var(--dvk-l); border-radius: 12px; background: #fff; }
body .dvk .dvc-firma h3 { margin: 0 0 8px; color: var(--dvk-n); font-size: 16px; font-weight: 800; }
body .dvk .dvc-firma p { margin: 0; color: #46484A; font-size: 14.5px; line-height: 1.65; }

@media (max-width: 991px) {
  body .dvo-facts, body .dvc-ludia, body .dvo-sluzby { grid-template-columns: repeat(2, 1fr); }
  body .dvc-cesta { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body .dvc-ludia, body .dvo-sluzby, body .dvc-firma { grid-template-columns: 1fr; }
  body .dvo-facts { grid-template-columns: 1fr 1fr; }
  body .dvc-hod { min-width: 0; width: 100%; }
}

/* ===========================================================================
   19. HORNÁ LIŠTA — nové menu (5. 10. 2026)
   Pôvodné menu Shoptetu ostáva v HTML (mobil, a záloha keď JS nezbehne).
   Na počítači ho skryje až trieda body.dvl, ktorú pridá funkcia lista().
   =========================================================================== */
body .dvl-nav { display: none; }
body .dvl-mob, body .dvl-top { display: none; }

@media (min-width: 992px) {
  body.dvl #navigation { display: none; }
  body.dvl .top-navigation-menu, body.dvl .top-navigation-contacts strong { display: none; }
  body.dvl .dv-vyh li:nth-child(4) { display: none; }

  /* horný prúžok */
  body.dvl .top-navigation-bar .container { display: flex; align-items: center; gap: 22px; }
  body.dvl .top-navigation-bar .container > .top-navigation-contacts,
  body.dvl .top-navigation-bar .container > .top-navigation-tools { flex: 0 0 auto; }
  body.dvl .top-navigation-bar .container > .dvl-top { display: flex; flex: 1 1 auto; align-items: center; gap: 20px; font-size: 13px; }
  body .dvl-top .dvl-hod { margin-right: auto; color: #58595B; }
  body .dvl-top a { color: #062754; font-weight: 600; text-decoration: none; }
  body .dvl-top a:hover { color: #D32027; }

  /* modrá lišta */
  body .dvl-nav { display: block; position: relative; z-index: 50; background: #1B3F8B; font-family: var(--dvst-font, Montserrat, sans-serif); }
  body .dvl-in { display: flex; align-items: stretch; max-width: 1418px; min-height: 50px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
  body .dvl-dd { position: relative; display: flex; }
  body .dvl-kat { position: static; }
  body .dvl-btn { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 22px; border: 0; background: #062754; color: #fff;
    font: 800 15px var(--dvst-font, Montserrat, sans-serif); cursor: pointer; white-space: nowrap; }
  body .dvl-btn i { position: relative; width: 18px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
  body .dvl-kat.dvl-open .dvl-btn, body .dvl-btn:hover { background: #D32027; }
  body .dvl-pr { display: flex; margin: 0 0 0 6px; padding: 0; list-style: none; }
  body .dvl-pr a, body .dvl-a, body .dvl-btn2 { display: flex; align-items: center; height: 100%; padding: 0 16px; border: 0; background: none; color: #fff;
    font: 700 15px var(--dvst-font, Montserrat, sans-serif); text-decoration: none; white-space: nowrap; cursor: pointer; }
  body .dvl-pr a:hover, body .dvl-a:hover, body .dvl-btn2:hover, body .dvl-sl.dvl-open .dvl-btn2 { background: rgba(255,255,255,.12); color: #fff; }
  body .dvl-akt { box-shadow: inset 0 -4px 0 #D32027; }
  body .dvl-btn2::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  body .dvl-r { display: flex; align-items: stretch; margin-left: auto; }
  body .dvl-cta { display: flex; align-items: center; margin: 8px 0 8px 12px; padding: 0 18px; border-radius: 6px; background: #D32027; color: #fff;
    font: 800 14px var(--dvst-font, Montserrat, sans-serif); text-decoration: none; white-space: nowrap; }
  body .dvl-cta:hover { background: #B01A20; color: #fff; }

  /* rozbaľovacie panely */
  body .dvl-pan { display: none; position: absolute; top: 100%; z-index: 60; background: #fff; box-shadow: 0 18px 40px rgba(6,39,84,.22); }
  body .dvl-open > .dvl-pan { display: block; }
  body .dvl-mega { left: 0; right: 0; }
  body .dvl-kat.dvl-open > .dvl-mega { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 18px; max-width: 1418px; margin: 0 auto;
    padding: 24px 28px 26px; box-sizing: border-box; border-top: 4px solid #D32027; }
  body .dvl-k { padding: 12px 10px 14px; border-radius: 10px; }
  body .dvl-k:hover { background: #F3F6FB; }
  body .dvl-kt { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: #062754; font-size: 16px; font-weight: 800; text-decoration: none; }
  body .dvl-kt img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid #DDE4F0; }
  body .dvl-kt:hover span { color: #D32027; }
  body .dvl-k ul { margin: 0 0 8px 56px; padding: 0; list-style: none; }
  body .dvl-k li { margin: 0 0 4px; }
  body .dvl-k li a { color: #46484A; font-size: 14px; text-decoration: none; }
  body .dvl-k li a:hover { color: #1B3F8B; text-decoration: underline; }
  body .dvl-vsetko { display: inline-block; margin-left: 56px; color: #D32027; font-size: 13px; font-weight: 800; text-decoration: none; }
  body .dvl-vsetko::after { content: " →"; }
  body .dvl-sl > .dvl-pan { right: 0; width: 330px; border-top: 4px solid #D32027; }
  body .dvl-sll { margin: 0; padding: 10px; list-style: none; }
  body .dvl-sll a { display: block; padding: 11px 14px; border-radius: 8px; text-decoration: none; }
  body .dvl-sll a:hover { background: #F3F6FB; }
  body .dvl-sll b { display: block; color: #062754; font-size: 15px; font-weight: 800; }
  body .dvl-sll span { display: block; margin-top: 2px; color: #6B6E72; font-size: 13px; }
  body .dvl-sll a:hover b { color: #D32027; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  body .dvl-d2, body .dvl-d3, body .dvl-top .dvl-hod { display: none; }
  body .dvl-pr a, body .dvl-a, body .dvl-btn2 { padding: 0 12px; font-size: 14px; }
  body .dvl-kat.dvl-open > .dvl-mega { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  body .dvl-d3 { display: none; }
}

/* mobilné menu: nadpisy skupín a kontakt na konci */
@media (max-width: 991px) {
  body .navigation-in > ul.menu-level-1 > li:first-child::before,
  body .navigation-in > ul.menu-level-1 > li.dvl-prva-sluzba::before {
    content: "Kategórie tovaru"; display: block; padding: 18px 20px 8px; background: #F3F6FB; color: #8A8D91;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  body .navigation-in > ul.menu-level-1 > li.dvl-prva-sluzba::before { content: "Služby a poradenstvo"; }
  body .dvl-mob { display: block; margin: 0; padding: 20px; background: #062754; color: #D9E2F4; font-size: 14px; line-height: 1.5; }
  body .dvl-mob p { margin: 12px 0 0; }
  body .dvl-mob b { color: #fff; }
  body .dvl-mtel { display: block; padding: 14px; border-radius: 8px; background: #D32027; color: #fff; font-size: 17px; font-weight: 800; text-align: center; text-decoration: none; }
  body .dvl-ml { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  body .dvl-ml a { color: #fff; font-weight: 700; }
}

/* ===========================================================================
   20. KALKULAČKA DOPRAVY (.dvx) — košík + stránka Doprava a platba — 5. 10. 2026
   Cenník: 2 € bez DPH/km tam aj späť · vykládka 7 €/paleta · záloha 16,50 €/paleta · 12 paliet/auto
   =========================================================================== */
body .dvx { margin: 28px 0 8px; padding: 26px 28px 22px; border: 1px solid #DDE4F0; border-top: 4px solid #D32027; border-radius: 12px;
  background: #F3F6FB; font-family: var(--dvst-font, Montserrat, sans-serif); }
body .dvx h2 { margin: 0 0 6px; color: #062754; font-size: 22px; font-weight: 800; }
body .dvx .dvx-p { margin: 0 0 16px; color: #46484A; font-size: 15px; }
body .dvx-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 16px; }
body .dvx-f label { display: flex; flex-direction: column; gap: 6px; margin: 0; color: #062754; font-size: 13.5px; font-weight: 700; }
body .dvx-f input[type=text], body .dvx-f input[type=number] { min-width: 240px; min-height: 46px; padding: 10px 13px; box-sizing: border-box;
  border: 1px solid #C9D3E3; border-radius: 7px; background: #fff; font: 600 16px var(--dvst-font, Montserrat, sans-serif); }
body .dvx-f input[type=number] { min-width: 0; width: 120px; }
body .dvx-f input:focus { outline: 2px solid #1B3F8B; outline-offset: 1px; }
body .dvx-f .dvx-ch { flex-direction: row; align-items: center; gap: 9px; min-height: 46px; font-weight: 600; cursor: pointer; }
body .dvx .dvx-ch input[type=checkbox] { position: static; display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; opacity: 1;
  visibility: visible; -webkit-appearance: checkbox; appearance: auto; clip: auto; accent-color: #D32027; }
body .dvx .dvx-ch::before, body .dvx .dvx-ch::after { display: none; }
body .dvx-hint, body .dvx-pal-info { margin: 0 0 12px; color: #46484A; font-size: 15px; }
body .dvx-pal-info b { color: #062754; }
body .dvx-pal-info span { display: block; margin-top: 4px; color: #6B6E72; font-size: 13px; }
body .dvx-t { width: 100%; margin: 0; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 15px; }
body .dvx-t th, body .dvx-t td { padding: 11px 14px; border: 0; border-bottom: 1px solid #E6EBF3; background: none; text-align: left; vertical-align: top; }
body .dvx-t td { width: 110px; text-align: right; white-space: nowrap; font-weight: 700; color: #062754; }
body .dvx-t thead td { color: #8A8D91; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
body .dvx-t th { color: #2B2D2F; font-weight: 500; }
body .dvx-t .dvx-sum th, body .dvx-t .dvx-sum td { border-bottom: 0; background: #062754; color: #fff; font-size: 17px; font-weight: 800; }
body .dvx .dvx-pozn { margin: 12px 0 0; color: #6B6E72; font-size: 12.5px; line-height: 1.5; }
@media (max-width: 767px) {
  body .dvx { padding: 20px 14px 16px; }
  body .dvx h2 { font-size: 19px; }
  body .dvx-f input[type=text] { min-width: 0; width: 100%; }
  body .dvx-f label:first-child { flex: 1 1 100%; }
  body .dvx-t { font-size: 13.5px; }
  body .dvx-t th, body .dvx-t td { padding: 9px 8px; }
  body .dvx-t td { width: auto; }
}

/* ===========================================================================
   21. DROBNOSTI Z AUDITU — stránka 404, kontakt v košíku (5. 10. 2026)
   =========================================================================== */
body.dv404-on #content > :not(.dv404) { display: none; }
body .dv404 { max-width: 920px; margin: 30px auto 50px; padding: 0 16px; text-align: center; font-family: var(--dvst-font, Montserrat, sans-serif); }
body .dv404-k { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 4px; background: #D32027; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body .dv404 h1 { margin: 0 0 12px; color: #062754; font-size: 38px; font-weight: 800; }
body .dv404 > p { max-width: 640px; margin: 0 auto 24px; color: #46484A; font-size: 16.5px; line-height: 1.6; }
body .dv404-f { display: flex; max-width: 600px; margin: 0 auto 32px; }
body .dv404-f input { flex: 1; min-height: 52px; padding: 0 16px; border: 2px solid #1B3F8B; border-right: 0; border-radius: 8px 0 0 8px; font: 600 16px var(--dvst-font, Montserrat, sans-serif); }
body .dv404-f button { padding: 0 26px; border: 0; border-radius: 0 8px 8px 0; background: #1B3F8B; color: #fff; font: 800 16px var(--dvst-font, Montserrat, sans-serif); cursor: pointer; }
body .dv404-f button:hover { background: #D32027; }
body .dv404-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
body .dv404-g a { display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 18px; border: 1px solid #DDE4F0; border-top: 4px solid #1B3F8B; border-radius: 10px; background: #fff;
  text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
body .dv404-g a:hover { transform: translateY(-3px); border-top-color: #D32027; box-shadow: 0 12px 28px rgba(6,39,84,.10); }
body .dv404-g b { color: #062754; font-size: 17px; font-weight: 800; }
body .dv404-g span { color: #58595B; font-size: 14px; }
body .dv404-g span::after { content: " →"; color: #D32027; font-weight: 800; }
@media (max-width: 767px) {
  body .dv404 h1 { font-size: 27px; }
  body .dv404-g { grid-template-columns: 1fr 1fr; gap: 10px; }
  body .dv404-g a { padding: 14px 12px; }
  body .dv404-f button { padding: 0 16px; }
}

/* ===========================================================================
   22. DOPRAVA DREVOSTAV V OBJEDNÁVKE (.dvx-obj) — výsledok kalkulačky — 6. 10. 2026
   =========================================================================== */
body .dvx-obj { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; padding: 16px 18px; border: 1px solid #F2C6C8; border-left: 5px solid #D32027;
  border-radius: 10px; background: #FFF6F6; color: #2B2D2F; font-family: var(--dvst-font, Montserrat, sans-serif); font-size: 14px; line-height: 1.5; text-align: left; }
body .dvx-obj > b { color: #062754; font-size: 17px; font-weight: 800; }
body .dvx-obj a { align-self: flex-start; margin-top: 2px; color: #1B3F8B; font-weight: 700; text-decoration: underline; }
body.ordering-process .payment-shipping-price { white-space: normal; overflow-wrap: anywhere; }
body.ordering-process [data-testid=recapDeliveryMethod] { overflow-wrap: anywhere; }
@media (max-width: 767px) { body .dvx-obj { margin: 14px 10px; } }

/* ===========================================================================
   23. ILUSTRAČNÝ OBRÁZOK (.dv-ilu) — 67 produktov s ilustračnou fotkou — 6. 10. 2026
   =========================================================================== */
body .dv-ilu { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid #D32027; border-radius: 4px; background: #FFF6F6;
  color: #46484A; font-family: var(--dvst-font, Montserrat, sans-serif); font-size: 13px; line-height: 1.45; }

/* ===========================================================================
   24. DETAIL PRODUKTU — upratanie (6. 10. 2026)
   a) kruh „Odporúčaná cena výrobcu“ na fotke preč (cena výrobcu je v cenovom bloku)
   b) jediný variant „Farba: základná“ sa neukazuje (výber zostáva v HTML, je predvolený)
   c) bez hodnotenia: namiesto 5 prázdnych hviezd a „Neohodnotené“ len odkaz „Ohodnoťte ako prvý“
   =========================================================================== */
body.type-product .p-image .flags-extra { display: none; }
body.type-product tr.dvd-skry { display: none; }
body.type-product .stars-wrapper.dvh-0 .stars,
body.type-product .stars-wrapper.dvh-0 .stars-label { display: none; }
body.type-product .stars-wrapper.dvh-0 .js-ratingDialogTrigger { padding: 0; color: #58595B; font-size: 13px; font-weight: 600; text-decoration: underline; }
/* d) oprava lišty: pod 992 px sa horný prúžok (hodiny, Doprava, O nás, Kontakt) lepil do jedného riadku */
@media (max-width: 991px) { body .top-navigation-bar .container > .dvl-top { display: none; } }
body.type-product .stars-wrapper.dvh-0 .js-ratingDialogTrigger::before { content: "☆ "; color: #D32027; text-decoration: none; display: inline-block; margin-right: 3px; }

/* ===========================================================================
   25. MENU 768–991 px (6. 10. 2026) — nadpisy mobilného menu („Kategórie tovaru“)
   sa ukazovali aj vo vodorovnom menu a tlačili položky pod modrý pás výhod
   =========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  body .navigation-in > ul.menu-level-1 > li:first-child::before,
  body .navigation-in > ul.menu-level-1 > li.dvl-prva-sluzba::before { content: none; display: none; }
  body .dvl-mob { display: none; }
}

/* ===========================================================================
   26. DETAIL PRODUKTU NA MOBILE — tlačidlo „Do košíka“ na prvej obrazovke (6. 10. 2026)
   fotka 266 → 200 px (celá, contain), menšia medzera, náhľady 100 → 58 px
   =========================================================================== */
@media (max-width: 767px) {
  body.type-product .p-image { margin-bottom: 10px; }
  body.type-product .p-image img { height: 200px; width: 100%; object-fit: contain; }
  body.type-product .p-thumbnails-wrapper { margin-bottom: 4px; }
  body.type-product .p-thumbnails-wrapper, body.type-product .p-thumbnails { height: 60px; min-height: 0; }
  body.type-product .p-thumbnails-inner > div > a { width: 58px; height: 58px; }
  body.type-product .p-thumbnails-inner img { width: 100%; height: 100%; object-fit: contain; }
}

/* ===== 27. Výpredaj zásob / Posledné kusy / Dopredaj (Etapa 2, 6. 10. 2026) ===== */
.dvv{display:inline-block;font:700 12px/1 Montserrat,sans-serif;color:#fff;padding:6px 9px;border-radius:4px;letter-spacing:.3px;text-transform:uppercase}
.dvv-v{background:#D32027}.dvv-p{background:#E87511}.dvv-d{background:#58595B}
.p.dvv-k .image{position:relative}.p.dvv-k .image>.dvv{position:absolute;left:8px;top:8px;z-index:5}
.p.dvv-k .flags-default{display:none}
.dvv-t{display:block;font:600 12.5px/1.3 Montserrat,sans-serif;color:#D32027;margin-top:4px}
.p-image{position:relative}.p-image>.dvv-det{position:absolute;left:10px;top:10px;z-index:5}
.dvv-dr{display:block}
body.dvv-on .p-image .flags-default{display:none}

/* ===== 28. Rezerva miesta pred spustením drevostav.js (CLS, 7. 10. 2026) =====
   JS vkladá nad obsah pás výhod, vlastnú lištu a na úvodnej banner → obsah poskočil (CLS 1,0 mobil / 0,47 PC).
   Kým go() nedobehne (html bez .dvok), držíme #content-wrapper posunutý o rovnakú výšku. Hodnoty = merané rozdiely. */
@media(max-width:767px){html:not(.dvok) body:not(.type-product) #content-wrapper{margin-top:62px}html:not(.dvok) body.type-index #content-wrapper{margin-top:649px}}
@media(min-width:768px) and (max-width:1199px){html:not(.dvok) #content-wrapper{margin-top:45px}html:not(.dvok) body.type-index #content-wrapper{margin-top:485px}}
@media(min-width:1200px){html:not(.dvok) #content-wrapper{margin-top:59px}html:not(.dvok) body.type-index #content-wrapper{margin-top:539px}}

/* ===== 29. Výpredaj skladu (7. 10. 2026) — odkaz v lište ===== */
.dvl-vyp::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#D32027;box-shadow:0 0 0 2px #fff;margin-right:7px;vertical-align:1px}


/* ===== 30. Cookie lišta bez posunu pri načítaní písma (7. 10. 2026) ===== */
.siteCookies,.siteCookies *{font-family:Montserrat,Arial,Helvetica,sans-serif}