/* ==========================================================================
   LEXAN.SK — vrstva pre články (Tipy/návody/rady + Návody na montáž)
   Tercoplast Design System · brand #1E1EBE · Raleway
   --------------------------------------------------------------------------
   Nahrať na FTP:  /user/documents/assets/css/lx-articles.css
   Načítanie:      versionovaný <link> v admine (HTML kódy → do hlavičky)
   Po každej zmene ZVÝŠIŤ ?v=N v tom <link>, inak sa nová verzia rok neukáže
                   (/user/documents/* má Cache-Control: max-age=31536000).

   POZOR — žiadne rem:
   Šablóna template-11 má html { font-size: 62.5% }, teda 1rem = 10px.
   Všetko je preto v px, aby hodnoty nezáviseli od koreňovej veľkosti.

   Rozsah (nič mimo článkov sa nedotýka):
     body.type-post          … detail článku
     body.type-posts-listing … výpis sekcie
     + iba sekcie .in-navody-na-montaz / .in-tipy-navody-rady-k-polykarbonatovym-doskam
   Komponenty s prefixom .lx-* vytvára lx-articles.js, preto nepotrebujú scope
   — existujú len tam, kde ich skript vloží.
   ========================================================================== */


/* ==========================================================================
   0 · TOKENY
   Zmena --lx-brand na #e9560d preladí celú článkovú vrstvu na oranžovú
   identitu zvyšku eshopu. Nič iné netreba meniť.
   ========================================================================== */
:root {
  /* Brand — Tercoplast Logo Manuál (04 Farebnosť), PANTONE 2736 C */
  --lx-brand:          #1E1EBE;
  --lx-brand-600:      #1818A0;
  --lx-brand-700:      #141480;
  --lx-brand-soft:     #EEEEFB;
  --lx-on-brand:       #FFFFFF;

  /* Neutrály (Cool Gray 1 ladenie) */
  --lx-surface:        #FFFFFF;
  --lx-sunken:         #F5F5F1;
  --lx-border:         #E0E1DD;
  --lx-border-strong:  #C7C9C3;

  --lx-text-strong:    #1a1a1a;
  --lx-text-body:      #4a4a4a;
  --lx-text-muted:     #7C7F7A;
  --lx-text-eyebrow:   #8fb8ff;   /* eyebrow na tmavom hero */

  /* Typografia — dlhý text dostáva čitateľnú škálu (šablóna dáva 14px/1,38),
     kartové UI zostáva na hodnotách z návrhu. */
  --lx-fs-read:        17px;   /* plynulý text článku */
  --lx-lh-read:        1.7;
  --lx-fs-intro:       15.5px; /* perex návodu */
  --lx-fs-card:        13px;
  --lx-fs-step:        14px;
  --lx-measure:        700px;  /* ~70 znakov na riadok */

  --lx-font:           Raleway, Helvetica, Arial, sans-serif;

  /* Geometria — mark je hranatý, radius držíme nízko */
  --lx-radius:         10px;
  --lx-radius-sm:      6px;
  --lx-shadow-sm:      0 1px 3px rgba(0, 0, 0, .06);
  --lx-shadow-lg:      0 6px 18px rgba(10, 10, 40, .10);
  --lx-ease:           160ms ease-out;

  /* Mriežky */
  --lx-step-min:       272px;
  --lx-req-min:        150px;
  --lx-figure-min:     240px;
  --lx-section-gap:    32px;
}


/* ==========================================================================
   1 · ČITATEĽNOSŤ DLHÉHO TEXTU
   Platí pre detail článku v oboch sekciách. Šablóna dáva 14px/1,38 —
   to je hlavný dôvod, prečo sa články nečítajú.
   ========================================================================== */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail {
  font-size: var(--lx-fs-read);
  line-height: var(--lx-lh-read);
  color: var(--lx-text-body);
}

/* Merítko riadku. Netýka sa .lx-* komponentov ani tabuliek — tie idú na plnú
   šírku kolóny, lebo sú to mriežky, nie próza. */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
:is(.news-item-detail > .text > p, .news-item-detail > .text > ul, .news-item-detail > .text > ol) {
  max-width: var(--lx-measure);
}

body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail :is(p, li) {
  font-size: inherit;
  line-height: inherit;
}

body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text > p {
  margin: 0 0 1.15em;
}

/* Nadpisy: bez verzálok pri H1, hierarchia zvýraznená. Sekcie v článkoch
   používajú H3 aj H4 vperemieška — obom dávame rovnakú váhu sekcie.
   Nadpisy prestavané na hlavičku sekcie (.lx-section-title) sú z tohto
   pravidla vyňaté — majú vlastnú, menšiu škálu z návrhu. */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail :is(h2, h3, h4):not(.lx-section-title) {
  font-family: var(--lx-font);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lx-text-strong);
  line-height: 1.25;
  margin: 36px 0 12px;
  scroll-margin-top: 24px;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail h2:not(.lx-section-title) { font-size: 24px; }
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail :is(h3, h4):not(.lx-section-title) { font-size: 18px; }

/* Odkazy v texte — v obsahu je veľa odkazov na kategórie, majú byť viditeľné */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text a:not(.btn) {
  color: var(--lx-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text a:not(.btn):hover { color: var(--lx-brand-700); }

/* Obrázky: v obsahu majú inline padding:10px a pevné width atribúty */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail img {
  max-width: 100%;
  height: auto;
  padding: 0 !important;
}

/* Neutralizácia editorových inline štýlov (36pt, helvetica, #333333 …).
   Cielené na .text, aby sa nedotklo hlavičky, sidebaru ani produktov. */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text :is(span, font, p, td, div, strong, b, a)[style*="font-family"] {
  font-family: var(--lx-font) !important;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text :is(span, font, strong, b, a)[style*="font-size"] {
  font-size: inherit !important;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail > .text span[style*="color: #333333"] { color: inherit !important; }

/* Dátové tabuľky (záťažové podmienky, polomer ohybu) — Shoptet obalí časť
   tabuliek do .scroll-wrapper, skript doplní obal tam, kde chýba. */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.5;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail :is(td, th) {
  border: 1px solid var(--lx-border) !important;
  padding: 10px 11px;
  vertical-align: top;
}
/* Hlavičkové bunky majú oranžovú zapečenú v inline style — ťaháme ich na token,
   aby tabuľka ladila s ostatnými komponentmi (a aby prepnutie --lx-brand
   preladilo aj ju). */
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail td[style*="#e9560d"] {
  background: var(--lx-brand) !important;
  border-color: var(--lx-brand) !important;
}
body.type-post:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item-detail td[style*="#e9560d"] :is(a, span, strong) { color: var(--lx-on-brand) !important; }

/* Vodorovný posun širokých tabuliek + tieňový signál, že sa dá posúvať */
.lx-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border-radius: var(--lx-radius-sm);
  background:
    linear-gradient(to right, var(--lx-surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--lx-surface) 30%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,   rgba(10, 10, 40, .12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(10, 10, 40, .12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lx-scroll > table { margin: 0; min-width: 540px; }


/* ==========================================================================
   2 · META LIŠTA (dátum aktualizácie + doba čítania)
   Dátum je v článkoch len v microdata, nikde sa nezobrazoval.
   ========================================================================== */
.lx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lx-border);
  font: 600 12px/1 var(--lx-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-text-muted);
}
.lx-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.lx-meta__item svg { width: 14px; height: 14px; flex: none; }
.lx-meta time { font: inherit; }


/* ==========================================================================
   3 · OBSAH ČLÁNKU (TOC) + UKAZOVATEĽ ČÍTANIA
   ========================================================================== */
.lx-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  z-index: 1200;
  background: transparent;
  pointer-events: none;
}
.lx-progress__bar {
  height: 100%;
  width: 0;
  background: var(--lx-brand);
  transition: width 90ms linear;
}

.lx-toc {
  margin: 0 0 28px;
  border: 1px solid var(--lx-border);
  border-left: 3px solid var(--lx-brand);
  border-radius: var(--lx-radius-sm);
  background: var(--lx-sunken);
  overflow: hidden;
}
.lx-toc > summary {
  cursor: pointer;
  padding: 13px 16px;
  font: 800 12px/1 var(--lx-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lx-brand);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lx-toc > summary::-webkit-details-marker { display: none; }
.lx-toc > summary::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--lx-ease);
}
.lx-toc[open] > summary::after { transform: rotate(-135deg); }
.lx-toc__list { margin: 0; padding: 0 16px 16px 18px; list-style: none; }
.lx-toc__list li { margin: 6px 0; }
.lx-toc__list a {
  font: 600 14px/1.4 var(--lx-font);
  color: var(--lx-text-body);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  display: block;
  transition: color var(--lx-ease), border-color var(--lx-ease);
}
.lx-toc__list a:hover { color: var(--lx-brand); }
.lx-toc__list a[aria-current="true"] {
  color: var(--lx-brand);
  border-left-color: var(--lx-brand);
}
.lx-toc__list li[data-depth="2"] a { padding-left: 22px; font-weight: 400; }

/* Kotva pri nadpise — neúčastní sa toku, aby nerozhodila hlavičku sekcie */
.lx-anchor {
  position: absolute;
  margin-left: 6px;
  font-weight: 400;
  color: var(--lx-border-strong);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--lx-ease);
}
:is(h2, h3, h4):hover > .lx-anchor,
.lx-anchor:focus-visible { opacity: 1; }


/* ==========================================================================
   4 · NÁVOD NA MONTÁŽ — layout podľa návrhu
   (export/lexan-navod-montaz-1b-standalone.html)
   Aktivuje sa až keď skript pridá .lx-guide, takže bez JS ostáva pôvodný
   článok nedotknutý a čitateľný.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.lx-hero {
  position: relative;
  height: clamp(220px, 30vw, 320px);
  margin: 0 0 var(--lx-section-gap);
  overflow: hidden;
  border-radius: var(--lx-radius);
  background: #0b0b2b;
  isolation: isolate;
}
.lx-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0 !important;
}
.lx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 40, .85), rgba(10, 10, 40, .15));
}
.lx-hero__text {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 2.4vw, 28px);
}
.lx-eyebrow {
  margin: 0 0 10px;
  font: 700 11px/1 var(--lx-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lx-text-eyebrow);
}
.lx-hero .lx-h1 {
  margin: 0;
  font: 800 clamp(26px, 4vw, 36px)/1.1 var(--lx-font);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}
.lx-hero__sub {
  margin: 10px 0 0;
  max-width: 544px;
  font: 400 15px/1.45 var(--lx-font);
  color: rgba(255, 255, 255, .82);
}

/* --- Perex -------------------------------------------------------------- */
.lx-intro {
  margin: 0 0 var(--lx-section-gap);
  max-width: 640px;
}
.lx-intro > p {
  margin: 0 0 .7em;
  font-size: var(--lx-fs-intro) !important;
  line-height: 1.65;
  color: var(--lx-text-body);
}
.lx-intro > p:last-child { margin-bottom: 0; }

/* --- Hlavička sekcie ---------------------------------------------------- */
.lx-section { margin: 0 0 var(--lx-section-gap); }
.lx-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lx-border);
}
.lx-guide .lx-section-title,
.lx-section-head .lx-section-title {
  margin: 0;
  font: 800 15px/1.2 var(--lx-font);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--lx-text-strong);
  scroll-margin-top: 24px;
}
.lx-section-meta {
  flex: none;
  font: 600 11px/1 var(--lx-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-text-muted);
}

/* --- „Čo budete potrebovať" — karty ------------------------------------- */
.lx-req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lx-req-min), 1fr));
  gap: 14px;
  margin: 0 0 var(--lx-section-gap);
}
.lx-req-card {
  padding: 18px;
  background: var(--lx-sunken);
  border-radius: var(--lx-radius);
  border-top: 4px solid var(--lx-brand);
}
.lx-req-card__icon {
  display: block;
  width: 22px; height: 22px;
  margin: 0 0 10px;
  color: var(--lx-brand);
}
.lx-req-card__icon svg { display: block; width: 100%; height: 100%; }
.lx-req-card h4 {
  margin: 0 0 8px !important;
  font: 700 12px/1.25 var(--lx-font) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lx-brand) !important;
}
.lx-req-card h4 a { color: inherit; text-decoration: none !important; }
.lx-req-card h4 a:hover { text-decoration: underline !important; }
.lx-req-card__body {
  font-size: var(--lx-fs-card);
  line-height: 1.55;
  color: #5a5a5a;
}
.lx-req-card__body :is(p, span, br + a) { margin: 0; font-size: inherit !important; line-height: inherit; }
.lx-req-card__body p { margin: 0 0 .35em; }
.lx-req-card__body p:last-child { margin-bottom: 0; }
.lx-req-card__body a {
  color: var(--lx-text-strong) !important;
  text-decoration: underline;
  text-decoration-color: var(--lx-border-strong);
  text-underline-offset: .15em;
}
.lx-req-card__body a:hover { color: var(--lx-brand) !important; text-decoration-color: currentColor; }
.lx-req-note {
  margin: -18px 0 var(--lx-section-gap) !important;
  max-width: 640px;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--lx-text-muted);
}

/* --- Postup montáže — karty krokov ------------------------------------- */
.lx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lx-step-min), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lx-step {
  display: flex;
  flex-direction: column;
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
  box-shadow: var(--lx-shadow-sm);
}
.lx-step__figure {
  margin: 0;
  padding: 8px;
  background: var(--lx-sunken);
  border-bottom: 1px solid var(--lx-border);
}
/* Odchýlka od návrhu: návrh mal height:130px + object-fit:cover. Montážne
   schémy majú pomer 1,1–1,8, cover by z nich odrezal až polovicu. Preto
   pevný pomer 3:2 a contain — karty držia rovnakú výšku a schéma je celá. */
.lx-step__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  padding: 0 !important;
}
.lx-step__body { padding: 16px; }
.lx-step__num {
  margin: 0 0 8px !important;
  font: 700 11.5px/1 var(--lx-font) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lx-brand);
}
.lx-step__text { font-size: var(--lx-fs-step); line-height: 1.55; color: var(--lx-text-body); }
.lx-step__text :is(p, span) { margin: 0 0 .5em; font-size: inherit !important; line-height: inherit !important; }
.lx-step__text > :last-child { margin-bottom: 0; }
.lx-step__text strong { color: var(--lx-text-strong); font-weight: 700; }
.lx-step__text a { color: var(--lx-brand) !important; text-decoration: underline; text-underline-offset: .15em; }

/* --- Diagramy (nosná konštrukcia) -------------------------------------- */
.lx-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lx-figure-min), 1fr));
  gap: 16px;
  margin: 0 0 20px;
}
.lx-figure {
  margin: 0;
  padding: 14px;
  background: var(--lx-sunken);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  text-align: center;
}
.lx-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; cursor: zoom-in; }
.lx-figure figcaption {
  margin-top: 10px;
  font: 600 11px/1.3 var(--lx-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-text-muted);
}

/* --- Čistenie a údržba — callout --------------------------------------- */
.lx-care {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 var(--lx-section-gap);
  padding: 22px 24px;
  background: var(--lx-sunken);
  border-radius: var(--lx-radius);
}
.lx-care__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--lx-brand); }
.lx-care__icon svg { display: block; width: 100%; height: 100%; }
.lx-care h5 {
  margin: 0 0 6px !important;
  font: 700 12.5px/1.25 var(--lx-font) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--lx-brand) !important;
}
.lx-care__body { font-size: var(--lx-fs-card); line-height: 1.6; color: var(--lx-text-body); }
.lx-care__body p { margin: 0 0 .5em; font-size: inherit !important; line-height: inherit !important; }
.lx-care__body p:last-child { margin-bottom: 0; }

/* Pôvodné okrasné prvky, ktoré po transformácii nemajú funkciu */
.lx-guide > .text > p:empty { display: none; }


/* ==========================================================================
   5 · FAQ AKORDEÓN (článok „Časté otázky")
   ========================================================================== */
.lx-faq { margin: 0 0 var(--lx-section-gap); }
.lx-faq__item {
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  margin-bottom: 8px;
  background: var(--lx-surface);
  overflow: hidden;
}
.lx-faq__item[open] { border-color: var(--lx-brand); }
.lx-faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 40px 15px 16px;
  position: relative;
  font: 700 16px/1.4 var(--lx-font);
  color: var(--lx-text-strong);
}
.lx-faq__item > summary::-webkit-details-marker { display: none; }
.lx-faq__item > summary:hover { color: var(--lx-brand); }
.lx-faq__item > summary::after {
  content: "";
  position: absolute;
  right: 18px; top: 21px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--lx-brand);
  border-bottom: 2px solid var(--lx-brand);
  transform: rotate(45deg);
  transition: transform var(--lx-ease);
}
.lx-faq__item[open] > summary::after { transform: rotate(-135deg); }
.lx-faq__answer {
  padding: 0 16px 16px;
  font-size: var(--lx-fs-read);
  line-height: var(--lx-lh-read);
  color: var(--lx-text-body);
}
.lx-faq__answer > p { margin: 0 0 .8em; }
.lx-faq__answer > p:last-child { margin-bottom: 0; }


/* ==========================================================================
   6 · LIGHTBOX
   ========================================================================== */
.lx-lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.lx-lightbox::backdrop { background: rgba(10, 10, 40, .88); }
.lx-lightbox__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 40px 16px 24px;
}
.lx-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 112px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--lx-radius-sm);
  background: #fff;
}
.lx-lightbox__cap {
  margin: 0;
  font: 600 13px/1.4 var(--lx-font);
  color: rgba(255, 255, 255, .85);
  text-align: center;
  max-width: 640px;
}
.lx-lightbox__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lx-lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lx-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.lx-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lx-lightbox__nav--prev { left: 12px; }
.lx-lightbox__nav--next { right: 12px; }
.lx-lightbox__nav::before {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.lx-lightbox__nav--prev::before { transform: rotate(135deg); }
.lx-lightbox__nav--next::before { transform: rotate(-45deg); }

body.lx-lightbox-open { overflow: hidden; }


/* ==========================================================================
   7 · NAHOR
   ========================================================================== */
.lx-top {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 1100;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--lx-brand);
  color: #fff;
  box-shadow: var(--lx-shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--lx-ease), transform var(--lx-ease), visibility var(--lx-ease);
}
.lx-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.lx-top:hover { background: var(--lx-brand-600); }
.lx-top::before {
  content: "";
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}


/* ==========================================================================
   8 · VÝPIS SEKCIE — karty
   ========================================================================== */
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  overflow: hidden;
  background: var(--lx-surface);
  box-shadow: var(--lx-shadow-sm);
  cursor: pointer;
  transition: transform var(--lx-ease), box-shadow var(--lx-ease), border-color var(--lx-ease);
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--lx-shadow-lg);
  border-color: var(--lx-brand);
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item .image { margin: 0; overflow: hidden; background: var(--lx-sunken); }
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 240ms ease-out;
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item:hover .image img { transform: scale(1.03); }
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item .text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item a.title {
  font: 800 16px/1.3 var(--lx-font);
  letter-spacing: .01em;
  color: var(--lx-text-strong);
  text-decoration: none;
  margin: 0 0 8px;
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item:hover a.title { color: var(--lx-brand); }
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item .description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lx-text-body);
}
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.news-item .description p { margin: 0; font-size: inherit; line-height: inherit; }

/* Výzva na akciu — pridáva skript, aby zostala dostupná z klávesnice */
.lx-card-cta {
  margin-top: auto;
  padding-top: 14px;
  font: 700 12px/1 var(--lx-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-brand);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.lx-card-cta::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--lx-ease);
}
.news-item:hover .lx-card-cta::after { transform: rotate(-45deg) translate(2px, 2px); }

/* Úvodný text sekcie */
body.type-posts-listing:is(.in-navody-na-montaz, .in-tipy-navody-rady-k-polykarbonatovym-doskam)
.sectionDescription {
  max-width: var(--lx-measure);
  margin: 0 0 32px;
  font-size: var(--lx-fs-read);
  line-height: var(--lx-lh-read);
  color: var(--lx-text-body);
}


/* ==========================================================================
   9 · MOBIL
   Pozor: Shoptet dáva <body> triedu desktop/mobile serverovo z User-Agenta,
   pri 375 px šírke tam bola trieda „desktop". Preto výhradne media queries.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --lx-fs-read: 16px;
    --lx-section-gap: 24px;
    --lx-step-min: 220px;
  }
  .lx-hero { border-radius: var(--lx-radius-sm); }
  .lx-care { flex-direction: column; gap: 12px; padding: 18px; }
  .lx-req-card { padding: 14px; }
  .lx-lightbox__nav { width: 36px; height: 36px; }
  .lx-top { right: 12px; bottom: 12px; }
  .lx-faq__item > summary { font-size: 15px; padding: 13px 36px 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-progress__bar,
  .news-item,
  .news-item .image img,
  .lx-top { transition: none; }
}

/* Tlač — kroky pod seba, bez plávajúcich prvkov */
@media print {
  .lx-progress, .lx-top, .lx-toc, .lx-lightbox { display: none !important; }
  .lx-steps { grid-template-columns: 1fr 1fr; }
  .lx-step { break-inside: avoid; box-shadow: none; }
  .lx-hero { height: auto; }
  .lx-hero__img { position: static; height: auto; }
  .lx-hero__text { position: static; }
  .lx-hero .lx-h1, .lx-hero__sub, .lx-eyebrow { color: #000; }
  .lx-hero::after { display: none; }
}