/* ==========================================================================
   Dorazil s.r.o. – redizajn pre Shoptet (šablóna Titan), verzia 3
   Jedno písmo pre celý web, ostré technické tvary, čierna + tyrkysová.
   Písmo Barlow sa načítava odkazom z kod-do-shoptetu.html.
   ========================================================================== */

:root {
  --dz-ink: #0a0e13;          /* čierna z loga */
  --dz-steel: #16212b;        /* grafitová */
  --dz-panel: #111a22;        /* tmavé karty */
  --dz-panel-line: #1f2c38;
  --dz-accent: #22b4d8;       /* tyrkysová z loga */
  --dz-accent-dark: #1599b9;
  --dz-accent-text: #0b7d99;  /* tmavšia tyrkysová pre text na svetlom */
  --dz-on-accent: #04202a;    /* text na tyrkysovej */
  --dz-bg: #f3f6f8;
  --dz-line: #dce3e8;
  --dz-text: #2a333d;
  --dz-muted: #5a6672;
  --dz-radius: 4px;           /* ostré rohy */
  --dz-shadow: 0 12px 32px rgba(10, 14, 19, .12);
  --dz-font: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  --dz-font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

/* ==========================================================================
   1) Farby a písmo celej šablóny
   ========================================================================== */
html:root {
  --template-font: var(--dz-font);
  --template-headings-font: var(--dz-font-head);

  --color-primary: #0b7d99;
  --color-primary-h: 192; --color-primary-s: 87%; --color-primary-l: 32%;
  --color-primary-hover: #096780;
  --color-primary-hover-h: 193; --color-primary-hover-s: 87%; --color-primary-hover-l: 27%;

  --color-secondary: #16212b;
  --color-secondary-h: 209; --color-secondary-s: 32%; --color-secondary-l: 13%;
  --color-secondary-hover: #0a0e13;
  --color-secondary-hover-h: 213; --color-secondary-hover-s: 31%; --color-secondary-hover-l: 6%;

  --color-tertiary: #22b4d8;
  --color-tertiary-h: 192; --color-tertiary-s: 73%; --color-tertiary-l: 49%;
  --color-tertiary-hover: #1599b9;
  --color-tertiary-hover-h: 192; --color-tertiary-hover-s: 80%; --color-tertiary-hover-l: 40%;
}

/* jedno písmo všade: text = Barlow, nadpisy = Barlow Condensed */
body, input, select, textarea, button, .btn { font-family: var(--dz-font); }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4,
.category-title, .products-top-header,
.pageElement__heading, .pageElement__heading span {
  font-family: var(--dz-font-head);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* texty vložené v editore majú vlastné písmo, zjednotíme ich */
.category-perex span, .category-perex p, .welcome span {
  font-family: inherit !important;
}
.category-perex span { font-size: 1.0625rem !important; color: #c9d6e6 !important; }

/* tlačidlá: ostré rohy, technický vzhľad */
.btn, body.st-rounding-corners .btn {
  border-radius: var(--dz-radius);
  font-family: var(--dz-font-head);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ==========================================================================
   2) Horná lišta (len na väčších obrazovkách, na mobile ostáva pôvodná)
   ========================================================================== */
@media (min-width: 768px) {
  .top-navigation-bar { background: var(--dz-ink); color: #c9d3df; }
  .top-navigation-bar a,
  .top-navigation-bar strong { color: #fff; }
  .top-navigation-bar a:hover { color: var(--dz-accent); }
}
.top-navigation-contacts .dz-phone { margin-left: 18px; font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   3) Hlavička, vyhľadávanie, hlavné menu
   ========================================================================== */
#header .search-form .form-control,
#header .search-form input { border-radius: var(--dz-radius); }
#header .search-form .form-control:focus,
#header .search-form input:focus {
  border-color: var(--dz-accent);
  box-shadow: 0 0 0 3px rgba(34, 180, 216, .22);
  outline: none;
}
@media (min-width: 768px) {
  #navigation { border-bottom: 3px solid var(--dz-accent); }
}
#navigation .menu-level-1 > li > a {
  font-family: var(--dz-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#navigation .menu-image img { object-fit: contain; }

/* podkategórie v rozbaľovacom menu: text sa zdvihne a podčiarkne tyrkysovou (rozloženie menu sa nemení) */
#navigation .menu-level-2 li > div > a > span,
#navigation .menu-level-3 li > a {
  position: relative; top: 0;
  transition: top .18s ease, box-shadow .18s ease;
}
#navigation .menu-level-2 li > div > a:hover > span,
#navigation .menu-level-2 li > div > a:focus-visible > span,
#navigation .menu-level-3 li > a:hover,
#navigation .menu-level-3 li > a:focus-visible {
  top: -3px;
  box-shadow: inset 0 -3px 0 var(--dz-accent);
}
#navigation .menu-level-2 li > div > a:hover,
#navigation .menu-level-2 li > div > a:focus-visible,
#navigation .menu-level-3 li > a:hover,
#navigation .menu-level-3 li > a:focus-visible {
  text-decoration: none !important;
  border-bottom-color: transparent;
}

/* ==========================================================================
   4) Bočný panel s kategóriami
   ========================================================================== */
.sidebar .box-categories {
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-radius);
  overflow: hidden;
  background: #fff;
}
.sidebar .box-categories > .pageElement__heading {
  background: var(--dz-ink);
  border-bottom: 3px solid var(--dz-accent);
  margin: 0;
  padding: 14px 18px;
}
.sidebar .box-categories > .pageElement__heading span { color: #fff; }
#categories .topic > a { font-weight: 700; }

/* kategórie: pri nabehnutí myšou sa zdvihnú a podčiarknu tyrkysovou */
#categories .categories .topic > a,
#categories .categories > ul > li > a {
  display: block;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
#categories .categories .topic > a:hover,
#categories .categories .topic > a:focus-visible,
#categories .categories > ul > li > a:hover,
#categories .categories > ul > li > a:focus-visible {
  transform: translateY(-3px);
  box-shadow: inset 0 -3px 0 var(--dz-accent);
  color: var(--dz-ink);
  text-decoration: none !important;
  border-bottom-color: transparent;
}

/* ==========================================================================
   5) Pätička
   ========================================================================== */
#footer { background: var(--dz-ink); color: #aeb9c7; border-top: 4px solid var(--dz-accent); }
#footer a { color: #fff; }
#footer a:hover { color: var(--dz-accent); }
#footer h3, #footer strong, #footer .pageElement__heading, #footer .pageElement__heading span { color: #fff; }
/* logo v pätičke je tmavé, preto biely podklad */
#footer .site-name img { background: #fff; padding: 10px 14px; border-radius: var(--dz-radius); }
#footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
#footer .footer-bottom, #footer #signature { color: #8b98a8; }

/* ==========================================================================
   6) Kategória a výpis produktov
   ========================================================================== */
.category-title { color: #fff; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
.category-title::after {
  content: ""; display: block; width: 72px; height: 5px; margin-top: 12px; background: var(--dz-accent);
}
.category-perex { border-left: 4px solid var(--dz-accent); padding-left: 18px; }

/* hlavička kategórie: tmavý pás s technickým pozadím ako na úvodnej stránke */
body.type-category .sidebar { position: relative; z-index: 1; }
body.type-category .category-top {
  position: relative; padding: 40px 0 36px; margin-bottom: 34px;
  background-color: #0f1820;
  box-shadow: 0 0 0 50vw #0f1820, 0 4px 0 50vw var(--dz-accent);
  clip-path: inset(0 -50vw -4px);
}
body.type-category .category-top::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 320px at 60% 0%, rgba(34, 180, 216, .20), transparent 65%),
    repeating-linear-gradient(0deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px);
}
body.type-category .category-top > * { position: relative; z-index: 1; }
/* „Najpredávanejšie“ v tmavom páse: biely nadpis, produkty na bielych kartách */
body.type-category .products-top-header { color: #fff !important; font-size: 1.75rem; text-transform: uppercase; margin: 34px 0 16px; }
body.type-category .products-top-header::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 8px; background: var(--dz-accent); }
body.type-category .products-top .p { background: #fff; border-radius: var(--dz-radius); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
body.type-category .products-top .p, body.type-category .products-top .p a, body.type-category .products-top .p .name { color: var(--dz-ink); }
body.type-category .products-top .p .p-code, body.type-category .products-top .p .p-code span { color: var(--dz-muted); }
body.type-category .products-top-wrapper .slick-arrow, body.type-category .products-top-wrapper .products-top-arrow { color: #fff; }

/* panel s kategóriami vľavo sa na páse odlíši tyrkysovým orámovaním */
body.type-category .sidebar .box-categories { border-color: rgba(34, 180, 216, .55); box-shadow: 0 12px 30px rgba(10, 14, 19, .28); }
/* dlaždice podkategórií sú biele karty na tmavom páse */
body.type-category .subcategories.with-image li > a { box-shadow: 0 10px 26px rgba(0, 0, 0, .28); border-color: transparent; }
body.type-category .subcategories.with-image li > a:hover { border-color: var(--dz-accent); box-shadow: inset 0 -4px 0 var(--dz-accent), 0 14px 30px rgba(0, 0, 0, .35); }
@media (max-width: 575px) { body.type-category .category-top { padding: 28px 0 26px; } }

/* dlaždice podkategórií s fotkou */
.subcategories.with-image li > a {
  background: #fff; border: 1px solid var(--dz-line); border-radius: var(--dz-radius);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.subcategories.with-image li > a:hover {
  border-color: var(--dz-accent);
  box-shadow: inset 0 -4px 0 var(--dz-accent), var(--dz-shadow);
  transform: translateY(-2px);
}
.subcategories.with-image .image img { object-fit: contain; }
.subcategories.with-image .text {
  font-family: var(--dz-font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: 1.1em; color: var(--dz-ink);
}

/* pás „Najpredávanejšie“ a hlavný výpis */
.products-top-header { color: var(--dz-ink); }
.products.products-block .product .p,
.products.products-inline .product .p,
body.st-rounding-corners .products .product .p {
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius); overflow: hidden; background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.products.products-block .product .p:hover,
.products.products-inline .product .p:hover {
  box-shadow: inset 0 4px 0 var(--dz-accent), var(--dz-shadow);
  border-color: var(--dz-accent);
  transform: translateY(-3px);
}
.products .product .p > a.image { background: #fff; border-bottom: 1px solid var(--dz-line); }
.products .product .p > a.image img { object-fit: contain; }
.products .product .p .name {
  font-family: var(--dz-font-head); font-weight: 700; letter-spacing: .03em; font-size: 1.2em; color: var(--dz-ink);
}
.products .product .p .name:hover { color: var(--dz-accent-text); }
.products .product .p-desc { color: var(--dz-muted); }
.products .product .p-code {
  display: inline-block; color: var(--dz-muted); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
}

/* zoradenie a filtre */
.filter-section fieldset > div {
  --dz-row: #e6f6fb;
  transition: background-color .15s ease, box-shadow .15s ease;
  border-radius: var(--dz-radius);
}
/* pri nabehnutí myšou sa riadok jemne zvýrazní (bez zmeny rozloženia) */
.filter-section fieldset > div:hover {
  background-color: var(--dz-row);
  box-shadow: -8px 0 0 var(--dz-row), 8px 0 0 var(--dz-row);
}
/* zaškrtnutý filter ostáva zvýraznený o odtieň tmavšie */
.filter-section fieldset > div:has(input:checked) {
  --dz-row: #d3eff8;
  background-color: var(--dz-row);
  box-shadow: -8px 0 0 var(--dz-row), 8px 0 0 var(--dz-row);
}
.listSorting__control--current { color: var(--dz-accent-text); font-weight: 700; }
.box-filters {
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius); background: #fff; overflow: hidden;
}
.filter-section > h4 { color: var(--dz-ink); letter-spacing: .06em; }
.filter-section input[type="checkbox"] { accent-color: var(--dz-accent-dark); }
.filter-label .filter-count { color: var(--dz-muted); }

/* ==========================================================================
   7) Úvodná stránka – rozloženie
   ========================================================================== */
body.in-index .sidebar-left { display: none !important; }
body.in-index .content-wrapper-in { display: block !important; }
body.in-index #content {
  width: 100% !important; max-width: none !important; float: none !important;
  flex: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
body.in-index #content-wrapper { padding-top: 0 !important; margin-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.in-index .overall-wrapper { overflow-x: clip; }
/* pôvodný nadpis „Vitajte…“ nahrádza hero (nadpis stránky ostáva pre Google) */
body.in-index .welcome > .h1 { display: none; }
body.in-index .homepage-box.welcome-wrapper,
body.in-index .homepage-box .welcome-wrapper,
body.in-index .homepage-box .welcome { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }

/* ==========================================================================
   8) Úvodná stránka – bloky
   ========================================================================== */
.dz { font-family: var(--dz-font); color: var(--dz-text); line-height: 1.6; font-size: 18px; }
.dz * { box-sizing: border-box; }
.dz a { text-decoration: none; }
.dz p { margin: 0; }
.dz h2, .dz-title, .dz-h2, .dz-cat__title, .dz-service__t, .dz-why li strong, .dz-trust__item strong {
  font-family: var(--dz-font-head);
}

/* každý blok má farbu cez celú šírku obrazovky */
.dz-sec { position: relative; isolation: isolate; padding: 80px 0; }
.dz-sec::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(100vw - var(--scrollbar-width, 0px));
  transform: translateX(-50%);
  background: var(--sec-bg, transparent);
  z-index: -1;
}
.dz-sec--grey { --sec-bg: var(--dz-bg); }
.dz-sec--white { --sec-bg: #fff; }
.dz-sec--dark { --sec-bg: var(--dz-ink); color: #c9d6e6; }

.dz-eyebrow {
  display: block; color: var(--dz-accent-text); font-family: var(--dz-font-head); font-weight: 700;
  font-size: 16px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px;
}
.dz-eyebrow::before {
  content: ""; display: inline-block; width: 30px; height: 4px; margin-right: 12px;
  background: var(--dz-accent); vertical-align: middle;
}
.dz-h2 {
  display: block; color: var(--dz-ink); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 54px); margin: 0 0 14px; line-height: 1.02; letter-spacing: .01em;
}
.dz .dz-lead { color: var(--dz-muted); max-width: 680px; margin: 0 0 44px; font-size: 19px; }
.dz-sec--dark .dz-h2 { color: #fff; }
.dz-sec--dark .dz-eyebrow { color: var(--dz-accent); }
.dz-sec--dark .dz-lead { color: #9fb0c5; }

/* Hero – technický „výkres“ */
.dz-hero {
  --sec-bg:
    radial-gradient(820px 400px at 88% 0%, rgba(34, 180, 216, .34), transparent 62%),
    repeating-linear-gradient(0deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px),
    linear-gradient(135deg, #0a0e13 0%, #16212b 100%);
  color: #fff; padding: 104px 0 150px;
}
.dz-hero::after {
  content: "DOGA"; position: absolute; right: 0; bottom: 60px; z-index: -1; pointer-events: none;
  font-family: var(--dz-font-head); font-weight: 800; line-height: .8; letter-spacing: .04em;
  font-size: clamp(120px, 22vw, 300px);
  color: transparent; -webkit-text-stroke: 2px rgba(34, 180, 216, .5);
}
.dz-hero .dz-eyebrow { color: var(--dz-accent); }
.dz-title {
  display: block; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(46px, 7vw, 92px); line-height: .96; margin: 0 0 24px; max-width: 900px;
}
.dz-title span { color: var(--dz-accent); }
.dz-hero p { color: #c9d6e6; font-size: 20px; max-width: 620px; margin: 0 0 36px; }

.dz-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.dz-btn {
  display: inline-block; padding: 15px 30px; border-radius: var(--dz-radius);
  font-family: var(--dz-font-head); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
.dz-btn--primary { background: var(--dz-accent); color: var(--dz-on-accent); }
.dz-btn--primary:hover { background: #fff; color: var(--dz-ink); transform: translateY(-2px); }
.dz-btn--ghost { border: 2px solid rgba(255, 255, 255, .5); color: #fff; }
.dz-btn--ghost:hover { border-color: var(--dz-accent); color: var(--dz-accent); transform: translateY(-2px); }
.dz-btn--light { background: #fff; color: var(--dz-ink); }
.dz-btn--light:hover { background: var(--dz-ink); color: #fff; transform: translateY(-2px); }

/* Pás dôvery – karta, ktorá zasahuje do hero */
.dz-trust { padding: 0; margin-top: -64px; z-index: 2; }
.dz-trust::before { display: none; }
.dz-trust__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: dzt;
  background: #fff; border-top: 5px solid var(--dz-accent); box-shadow: 0 22px 50px rgba(10, 14, 19, .22);
}
.dz-trust__item { counter-increment: dzt; display: flex; gap: 18px; align-items: flex-start; padding: 30px 30px; }
.dz-trust__item + .dz-trust__item { border-left: 1px solid var(--dz-line); }
.dz-trust__item::before {
  content: counter(dzt, decimal-leading-zero);
  font-family: var(--dz-font-head); font-weight: 800; font-size: 44px; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--dz-accent-dark);
}
.dz-trust__item strong { display: block; color: var(--dz-ink); font-size: 22px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }
.dz-trust__item span { color: var(--dz-muted); font-size: 16px; }
.dz-trust + .dz-sec { padding-top: 96px; }

/* Kategórie */
.dz-cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.dz-cat {
  grid-column: span 4; display: block; position: relative; background: #fff;
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius);
  padding: 28px 24px 26px; color: var(--dz-ink);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dz-cat:hover {
  box-shadow: inset 0 5px 0 var(--dz-accent), var(--dz-shadow);
  transform: translateY(-4px); border-color: var(--dz-accent); color: var(--dz-ink);
}
.dz-cat__num { display: block; color: var(--dz-accent-text); font-family: var(--dz-font-head); font-weight: 800; font-size: 20px; letter-spacing: .12em; }
.dz-cat__title {
  display: block; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  margin: 8px 0 8px; line-height: 1.08; color: var(--dz-ink);
}
.dz-cat__desc { display: block; color: var(--dz-muted); font-size: 16px; margin: 0 0 16px; }
.dz-cat__more { display: block; color: var(--dz-accent-text); font-family: var(--dz-font-head); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }

.dz-cat--photo { grid-column: span 6; display: grid; grid-template-columns: 5fr 6fr; padding: 0; overflow: hidden; }
.dz-cat__img {
  display: flex; align-items: center; justify-content: center; min-height: 250px;
  background: #fff; border-right: 1px solid var(--dz-line); padding: 18px;
}
.dz-cat__img img { display: block; max-width: 100%; max-height: 220px; width: auto; object-fit: contain; }
.dz-cat__txt { display: flex; flex-direction: column; justify-content: center; padding: 28px 24px 26px; }

/* Služby (tmavý blok) */
.dz-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: dzs; }
.dz-service {
  counter-increment: dzs; background: var(--dz-panel); border: 1px solid var(--dz-panel-line);
  border-top: 4px solid var(--dz-accent); border-radius: var(--dz-radius); padding: 32px 28px 34px;
  transition: transform .2s ease, border-color .2s ease;
}
.dz-service:hover { transform: translateY(-4px); border-color: var(--dz-accent); }
.dz-service::before {
  content: counter(dzs, decimal-leading-zero); display: block; margin-bottom: 14px;
  font-family: var(--dz-font-head); font-weight: 800; font-size: 56px; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--dz-accent);
}
.dz-service__t { display: block; color: #fff; font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 10px; }
.dz-service__d { display: block; color: #9fb0c5; font-size: 17px; }

/* Prečo my */
.dz-why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.dz .dz-why ul { list-style: none; margin: 0; padding: 0; }
.dz .dz-why li { list-style: none; padding: 0 0 26px 44px; position: relative; margin: 0; }
.dz .dz-why li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 16px; height: 16px;
  background: var(--dz-accent); transform: rotate(45deg);
}
.dz-why li strong { display: block; color: var(--dz-ink); font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.dz-why li span { color: var(--dz-muted); font-size: 17px; }

/* Výzva na akciu – výrazný tyrkysový pás */
.dz-cta { --sec-bg: var(--dz-accent); color: var(--dz-on-accent); text-align: center; padding: 76px 0; }
.dz-cta .dz-h2 { color: var(--dz-ink); }
.dz-cta p { color: var(--dz-on-accent); margin: 0 auto 32px; max-width: 580px; font-size: 20px; }
.dz-cta .dz-actions { justify-content: center; }
.dz-cta .dz-btn--light { background: var(--dz-ink); color: #fff; }
.dz-cta .dz-btn--light:hover { background: #fff; color: var(--dz-ink); }
.dz-cta .dz-btn--ghost { border-color: var(--dz-ink); color: var(--dz-ink); }
.dz-cta .dz-btn--ghost:hover { background: var(--dz-ink); border-color: var(--dz-ink); color: #fff; }

/* ---------- Tablet a mobil ---------- */
@media (max-width: 991px) {
  .dz-cats { grid-template-columns: repeat(2, 1fr); }
  .dz-cat { grid-column: span 1; }
  .dz-cat--photo { grid-column: span 2; }
  .dz-services { grid-template-columns: 1fr; }
  .dz-why { grid-template-columns: 1fr; gap: 32px; }
  .dz-trust__grid { grid-template-columns: 1fr; }
  .dz-trust__item + .dz-trust__item { border-left: 0; border-top: 1px solid var(--dz-line); }
  .dz-hero::after { display: none; }
}
@media (max-width: 575px) {
  .dz { font-size: 17px; }
  .dz-sec { padding: 52px 0; }
  .dz-hero { padding: 64px 0 110px; }
  .dz-trust { margin-top: -48px; }
  .dz-cats { grid-template-columns: 1fr; }
  .dz-cat--photo { grid-column: span 1; grid-template-columns: 1fr; }
  .dz-cat__img { border-right: 0; border-bottom: 1px solid var(--dz-line); min-height: 190px; }
  .dz-btn { width: 100%; text-align: center; }
}

/* ==========================================================
   9. Detail produktu
   ========================================================== */
body.type-detail .sidebar { position: relative; z-index: 1; }

/* horná časť: tmavý pás s technickým pozadím, fotka na bielej karte */
body.type-detail .p-detail-inner .product-top {
  position: relative; padding: 40px 0 38px; margin-bottom: 34px;
  background-color: #0f1820;
  box-shadow: 0 0 0 50vw #0f1820, 0 4px 0 50vw var(--dz-accent);
  clip-path: inset(0 -50vw -4px);
}
body.type-detail .p-detail-inner .product-top::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 320px at 70% 0%, rgba(34, 180, 216, .20), transparent 65%),
    repeating-linear-gradient(0deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(110, 205, 232, .17) 0 1px, transparent 1px 56px);
}
body.type-detail .p-detail-inner .product-top > * { position: relative; z-index: 1; }

body.type-detail .p-image-wrapper .p-image {
  background: #fff; border-radius: var(--dz-radius); padding: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
body.type-detail .p-thumbnails .p-thumbnail img { background: #fff; border: 2px solid transparent; border-radius: var(--dz-radius); transition: border-color .15s ease; }
body.type-detail .p-thumbnails .p-thumbnail:hover img,
body.type-detail .p-thumbnails .p-thumbnail.highlighted img { border-color: var(--dz-accent); }

/* názov, kód, krátky popis */
body.type-detail .p-detail-inner-header h1 {
  color: #fff; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: .01em;
}
body.type-detail .p-detail-inner-header .p-code,
body.type-detail .p-detail-inner-header .p-code span { color: #9fb1c3; font-size: 15px; letter-spacing: .06em; }
body.type-detail .p-detail-info .stars-wrapper { display: none !important; }
body.type-detail .p-short-description { margin: 18px 0 0; padding-left: 18px; border-left: 4px solid var(--dz-accent); }
body.type-detail .p-short-description p { color: #e6edf5; font-size: 1.25rem; line-height: 1.4; margin: 0 0 10px; }
body.type-detail .p-short-description a { color: #fff !important; font-weight: 600; text-decoration: none; transition: color .15s ease; }
body.type-detail .p-short-description a::after { color: inherit !important; border-color: currentColor !important; }
body.type-detail .p-short-description a:hover, body.type-detail .p-short-description a:focus-visible { color: var(--dz-accent) !important; text-decoration: none; }

/* akcie: Opýtať sa = hlavné tlačidlo, ostatné jemné */
body.type-detail .link-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
body.type-detail .link-icons .link-icon {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, .28); border-radius: var(--dz-radius);
  color: #fff; text-decoration: none; font-family: var(--dz-font-head);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
body.type-detail .link-icons .link-icon:hover { border-color: var(--dz-accent); color: #fff; transform: translateY(-2px); }
body.type-detail .link-icons .link-icon.chat { background: var(--dz-accent); border-color: var(--dz-accent); color: var(--dz-on-accent); order: -1; }
body.type-detail .link-icons .link-icon.chat:hover { background: #fff; border-color: #fff; color: var(--dz-ink); }
body.type-detail .link-icons .link-icon::before, body.type-detail .link-icons .link-icon::after { filter: brightness(0) invert(1); }
body.type-detail .link-icons .link-icon.chat::before, body.type-detail .link-icons .link-icon.chat::after { filter: none; }

/* záložky */
body.type-detail .shp-tabs-wrapper { margin-top: 10px; }
body.type-detail .shp-tabs { border-bottom: 2px solid var(--dz-line); }
body.type-detail .shp-tab-link {
  font-family: var(--dz-font-head); font-size: 1.125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dz-muted); border: 0 !important; background: transparent !important; transition: color .15s ease, box-shadow .15s ease;
}
body.type-detail .shp-tab-link:hover { color: var(--dz-ink); }
body.type-detail .shp-tab.active .shp-tab-link { color: var(--dz-ink); box-shadow: inset 0 -4px 0 var(--dz-accent); }

/* popis a parametre */
body.type-detail .description-inner h3 {
  font-size: 1.75rem; text-transform: uppercase; color: var(--dz-ink); margin: 28px 0 14px;
}
body.type-detail .description-inner h3::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 8px; background: var(--dz-accent); }
body.type-detail .basic-description p { font-size: 1.0625rem; line-height: 1.6; color: var(--dz-text); max-width: 78ch; }
body.type-detail .extended-description .detail-parameters { width: 100%; border-collapse: collapse; border: 1px solid var(--dz-line); border-top: 4px solid var(--dz-ink); }
body.type-detail .extended-description .detail-parameters tr { transition: background-color .15s ease; }
body.type-detail .extended-description .detail-parameters tr:nth-child(even) { background: var(--dz-bg); }
body.type-detail .extended-description .detail-parameters tr:hover { background: #e6f6fb; }
body.type-detail .extended-description .detail-parameters th,
body.type-detail .extended-description .detail-parameters td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--dz-line); text-align: left; vertical-align: top; }
body.type-detail .extended-description .detail-parameters th { width: 38%; color: var(--dz-muted); font-weight: 600; }
body.type-detail .extended-description .detail-parameters td { color: var(--dz-ink); font-weight: 600; }
body.type-detail .extended-description .detail-parameters td a { color: var(--dz-accent-text); }

/* súvisiace súbory */
body.type-detail #relatedFiles ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 640px; }
body.type-detail #relatedFiles li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--dz-line); border-radius: var(--dz-radius); transition: transform .18s ease, box-shadow .18s ease;
}
body.type-detail #relatedFiles li:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 var(--dz-accent); }
body.type-detail #relatedFiles a { color: var(--dz-ink); font-weight: 600; text-decoration: none; }

@media (max-width: 767px) {
  body.type-detail .p-detail-inner .product-top { padding: 26px 0 28px; }
  body.type-detail .link-icons .link-icon { flex: 1 1 auto; justify-content: center; }
}

/* texty v tmavých sekciách úvodnej stránky: biele, nezávisle od štýlov témy */
.dz .dz-hero p, .dz .dz-hero .dz-title { color: #fff !important; }
.dz .dz-hero .dz-title span, .dz .dz-hero .dz-eyebrow { color: var(--dz-accent) !important; }
.dz .dz-sec--dark .dz-h2, .dz .dz-sec--dark .dz-service__t { color: #fff !important; }
.dz .dz-sec--dark .dz-lead, .dz .dz-sec--dark .dz-service__d { color: #e6edf5 !important; }
.dz .dz-sec--dark .dz-eyebrow { color: var(--dz-accent) !important; }

/* pätička: kontakty (e-mail, telefón) a ostatné odkazy vždy biele */
#footer a, #footer .contact-box a, #footer .contact-box li, #footer .contact-box span, #footer .contact-box strong,
#footer .mail a, #footer .cellphone a, #footer .footer-bottom a { color: #fff !important; }
#footer a:hover, #footer .contact-box a:hover, #footer .mail a:hover, #footer .cellphone a:hover { color: var(--dz-accent) !important; }

/* „Zobraziť viac / menej produktov“ v tmavom páse: len tyrkysový text, bez okienka a bez efektov */
body.type-category .toggle-top-products,
body.type-category .toggle-top-products:hover,
body.type-category .toggle-top-products:focus,
body.type-category .toggle-top-products:focus-visible,
body.type-category .toggle-top-products:active,
body.type-category .toggle-top-products[aria-expanded] {
  background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; text-shadow: none !important; outline: 0 !important;
  transform: none !important; transition: none !important; opacity: 1 !important; filter: none !important;
  color: var(--dz-accent) !important;
  height: auto !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important;
  padding: 10px 4px !important; margin: 0 auto !important; line-height: 1.4 !important; overflow: visible !important;
  font-family: var(--dz-font-head); font-size: 1.125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; white-space: normal; cursor: pointer;
}
body.type-category .toggle-top-products::before,
body.type-category .toggle-top-products::after { color: var(--dz-accent) !important; border-color: var(--dz-accent) !important; background-color: transparent !important; }
body.type-category .toggle-top-products::before { display: none !important; }
body.type-category .products-top-wrapper .button-wrapper { text-align: center; }

/* ==========================================================
   10. Tlač / uloženie produktu ako PDF (tlačidlo „Stiahnuť PDF“)
   ========================================================== */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html, body { background: #fff !important; }
  body.type-detail { font-size: 11pt; color: #0a0e13; }
  /* skryť všetko okrem karty produktu */
  body.type-detail .top-navigation-bar, body.type-detail #header, body.type-detail header,
  body.type-detail #navigation, body.type-detail .navigation-wrapper, body.type-detail .breadcrumbs-wrapper,
  body.type-detail .sidebar, body.type-detail #footer, body.type-detail footer,
  body.type-detail .link-icons, body.type-detail .social-buttons-wrapper, body.type-detail .shp-tabs-holder,
  body.type-detail .p-thumbnails, body.type-detail .p-detail-info .stars-wrapper,
  body.type-detail #relatedFiles, body.type-detail #productDiscussion, body.type-detail .tab-pane:not(#description),
  body.type-detail .admin-bar, body.type-detail .skip-link, body.type-detail .skip-link__wrapper, body.type-detail .skip-link__target, body.type-detail #login, body.type-detail .user-action,
  body.type-detail .cookie-consent, body.type-detail .siteCookies, body.type-detail .overall-wrapper > .btn,
  body.type-detail .toggle-top-products, body.type-detail .products-related-header, body.type-detail .products-related { display: none !important; }
  body.type-detail #description { display: block !important; opacity: 1 !important; }
  body.type-detail .shp-tabs-wrapper, body.type-detail .shp-tabs-wrapper *, body.type-detail .tab-content, body.type-detail .tab-pane, body.type-detail .description-inner { break-inside: auto !important; page-break-inside: auto !important; break-before: auto !important; page-break-before: auto !important; }
  body.type-detail .shp-tabs-wrapper, body.type-detail .p-detail-tabs-wrapper, body.type-detail .tab-content, body.type-detail #description { margin-top: 0 !important; padding-top: 0 !important; }
  body.type-detail .description-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 10mm; align-items: start; }
  body.type-detail .description-inner > * { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  body.type-detail .extended-description .detail-parameters tr { break-inside: avoid; }
  body.type-detail .content-wrapper-in, body.type-detail .content, body.type-detail main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }

  /* hlavička a pätička dokumentu */
  /* logo ako skutočný obrázok (generovaný obsah sa tlačí vždy, na rozdiel od pozadia) */
  body.type-detail .p-detail-inner::before {
    content: url(/user/documents/upload/logo-dorazil.png); display: block; zoom: .18; margin: 0 0 5mm; line-height: 0;
  }
  body.type-detail .p-detail-inner .product-top { border-top: 1.2mm solid #22b4d8 !important; padding-top: 7mm !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.type-detail .shp-tabs-wrapper::after {
    content: "Dorazil s.r.o.  ·  www.dorazil.sk  ·  info@dorazil.sk  ·  +421 917 254 160"; display: block; margin-top: 12mm; padding-top: 4mm;
    border-top: 0.4mm solid #9aa7b3; font-size: 9.5pt; color: #3d4a57;
  }

  /* horná časť: biele pozadie, fotka vľavo, údaje vpravo */
  body.type-detail .p-detail-inner .product-top {
    background: none !important; box-shadow: none !important; clip-path: none !important; padding: 0 !important; margin: 0 0 8mm !important;
    display: grid !important; grid-template-columns: 70mm 1fr; gap: 10mm; align-items: start;
  }
  body.type-detail .p-detail-inner .product-top::before { display: none !important; }
  body.type-detail .p-detail-inner .product-top > * { width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
  body.type-detail .p-detail-inner .product-top > .col-xs-12:first-child { display: none !important; }
  body.type-detail .p-detail-inner .product-top > .p-image-wrapper { grid-column: 1; grid-row: 1; }
  body.type-detail .p-detail-inner .product-top > .p-info-wrapper { grid-column: 2; grid-row: 1; }
  body.type-detail .p-image-wrapper .p-image { box-shadow: none !important; border: 0.3mm solid #cfd7de; padding: 3mm; }
  body.type-detail .cloud-zoom-big, body.type-detail .cloud-zoom-lens, body.type-detail .mousetrap { display: none !important; }
  body.type-detail .p-image-wrapper #wrap, body.type-detail .p-image-wrapper .p-main-image { position: static !important; display: block !important; width: 100% !important; height: auto !important; }
  body.type-detail .p-image-wrapper img { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
  body.type-detail .p-detail-inner-header h1 { color: #0a0e13 !important; font-size: 24pt; line-height: 1.1; margin: 0 0 3mm; }
  body.type-detail .p-detail-inner-header .p-code, body.type-detail .p-detail-inner-header .p-code span { color: #3d4a57 !important; font-size: 10.5pt; }
  body.type-detail .p-short-description { border-left: 1.2mm solid #22b4d8; margin-top: 5mm; padding-left: 4mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.type-detail .p-short-description p { color: #0a0e13 !important; font-size: 12pt; }
  body.type-detail .p-short-description a { display: none !important; }

  /* popis a parametre */
  body.type-detail .description-inner h3, body.type-detail .description-inner h3::first-letter { color: #0a0e13 !important; }
  body.type-detail .description-inner h3 { font-size: 14pt; margin: 6mm 0 3mm; break-after: avoid; }
  body.type-detail .description-inner h3::after { content: ""; display: block; width: 14mm; height: 1mm; margin-top: 2mm; background: #22b4d8; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.type-detail .basic-description p { font-size: 11pt; line-height: 1.5; max-width: none; }
  body.type-detail .extended-description .detail-parameters { border-top: 0.8mm solid #0a0e13; }
  body.type-detail .extended-description .detail-parameters tr { break-inside: avoid; }
  body.type-detail .extended-description .detail-parameters tr:nth-child(even) { background: #f1f5f8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.type-detail .extended-description .detail-parameters th, body.type-detail .extended-description .detail-parameters td { font-size: 10.5pt; padding: 2mm 3mm; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* odkaz „Tlač“ na detaile produktu sa zobrazuje ako „Stiahnuť PDF“ (bez skriptu) */
body.type-detail .link-icons .link-icon.print span { font-size: 0 !important; }
body.type-detail .link-icons .link-icon.print span::after { content: "Stiahnuť PDF"; font-size: 1.0625rem; }

/* detail produktu: tlačidlo „Stiahnuť PDF“ vždy zobraziť, popisky tlačidiel čitateľné na tmavom páse */
body.type-detail .link-icons .link-icon.print { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
body.type-detail .link-icons .link-icon span { color: #fff !important; opacity: 1 !important; }
body.type-detail .link-icons .link-icon.chat span { color: var(--dz-on-accent) !important; }
body.type-detail .link-icons .link-icon.chat:hover span { color: var(--dz-ink) !important; }

/* šípky pri miniatúrach fotiek: biele, viditeľné na tmavom páse */
body.type-detail .thumbnail-prev, body.type-detail .thumbnail-next {
  display: flex !important; align-items: center; justify-content: center; min-width: 30px; min-height: 30px;
  background: #fff !important; color: var(--dz-ink) !important; border: 0 !important; border-radius: var(--dz-radius);
  opacity: 1 !important; visibility: visible !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
body.type-detail .thumbnail-prev::before, body.type-detail .thumbnail-prev::after,
body.type-detail .thumbnail-next::before, body.type-detail .thumbnail-next::after { color: var(--dz-ink) !important; border-color: var(--dz-ink) !important; }
body.type-detail .thumbnail-prev:hover, body.type-detail .thumbnail-next:hover { background: var(--dz-accent) !important; }
@media print { body.type-detail .thumbnail-prev, body.type-detail .thumbnail-next { display: none !important; } }

@media print {
  html body.type-detail .p-detail-inner .product-top { padding-top: 7mm !important; }
}

/* logo pre PDF: načítať ho vopred na obrazovke, aby bol pri tlači hneď k dispozícii */
body.type-detail::after {
  content: url(/user/documents/upload/logo-dorazil.png); position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
@media print { body.type-detail::after { display: none !important; } }

/* nápis DOGA v tmavých pásoch (kategória, produkt) */
body.type-category .category-top::after,
body.type-detail .p-detail-inner .product-top::after {
  content: "DOGA"; position: absolute; right: 0; bottom: 6px; z-index: 0; pointer-events: none;
  font-family: var(--dz-font-head); font-weight: 800; line-height: .8; letter-spacing: .04em;
  font-size: clamp(70px, 10vw, 140px);
  color: transparent; -webkit-text-stroke: 2px rgba(34, 180, 216, .5);
}
body.type-category .category-top::after { bottom: auto; top: 18px; }
@media (max-width: 767px) {
  body.type-category .category-top::after,
  body.type-detail .p-detail-inner .product-top::after { display: none; }
}
@media print { body.type-detail .p-detail-inner .product-top::after { display: none !important; } }