/*! iStage · Značky A–Z · v1.0.0
 *  Stránka:  https://www.istage.cz/znacka/  (přehled všech značek; Shoptet, šablona Merkur)
 *  Styly platí jen na této stránce (body.type-manufacturers-listing), jen v české verzi a jen když není vypnuto (?zn=0).
 *  Karty A–Z jsou čisté CSS – fungují, i když se skript nenačte. Skript znacky.js přidá nadtitulek, nadpis,
 *  podtitulek, dlaždice Top 12 a vyhledávání. Písmo Poppins se bere ze složky /user/documents/homepage/fonts/.
 */

/* ---------- Písmo: stejné soubory i název jako na úvodní stránce – prohlížeč je stáhne jen jednou ---------- */
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'HP Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/user/documents/homepage/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1) Barvy a rozměry. Rozměry bloků ze skriptu se sčítají do místa rezervovaného předem (oddíl 2) –
   když tu něco změníte, rezervace se přepočítá sama. ---------- */
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing {
  --zn-font: 'HP Poppins', 'Poppins', 'Roboto', Arial, sans-serif;
  --zn-ink: #0b0d10; --zn-2: #55595f; --zn-3: #6b7079; --zn-line: #e2e2df; --zn-line-2: #cdcdc9;
  --zn-blue: #0063c7;                                          /* obrys fokusu – stejná modrá jako na úvodní stránce */
  --zn-lift: 0 8px 20px -8px rgba(11, 13, 16, .16), 0 18px 40px -22px rgba(11, 13, 16, .22);
  --zn-h1: 56px;                                               /* nadpis stránky */
  --zn-eb: 18px; --zn-eb-mb: 10px;                             /* nadtitulek nad nadpisem: řádek + mezera */
  --zn-desc-mt: 14px; --zn-desc-h: 24px;                       /* podtitulek pod nadpisem (jeden řádek) */
  --zn-top-mt: 48px; --zn-head: 60px; --zn-head-mb: 20px;      /* Top 12: odstup, hlavička (18 + 6 + 36), mezera pod ní */
  --zn-cols: 6; --zn-rows: 2; --zn-tile: 84px; --zn-gap: 20px; /* mřížka Top 12 – vždy 12 míst */
  --zn-search-mt: 40px; --zn-search-h: 48px;                   /* vyhledávání */
  --zn-list-mt: 40px;                                          /* odstup seznamu A–Z */
}
@media (max-width: 991px) {
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing { --zn-h1: 44px; --zn-top-mt: 44px; --zn-cols: 4; --zn-rows: 3; --zn-tile: 72px; --zn-gap: 16px; }
}
@media (max-width: 767px) {
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing {
    --zn-h1: 32px; --zn-desc-mt: 12px; --zn-desc-h: 22px; --zn-top-mt: 40px; --zn-head: 54px; --zn-head-mb: 16px;
    --zn-cols: 3; --zn-rows: 4; --zn-tile: 60px; --zn-gap: 10px; --zn-search-mt: 32px; --zn-list-mt: 32px;
  }
}

/* ---------- 2) Než skript doplní bloky (zlomek sekundy), je pro ně místo – nadpis ani seznam pak neposkočí (CLS).
   Místo drží odsazení obsahu stránky (nad nadpisem) a mezera pod nadpisem – samotný nadpis a seznam zůstávají
   na svém místě. Pojistka: kdyby skript nedorazil, místo se po 4 s uvolní. ---------- */
html[lang="cs"]:not(.zn-ready):not(.zn-off) body.type-manufacturers-listing main#content {
  padding-top: calc(var(--zn-eb) + var(--zn-eb-mb));
  animation: zn-free-pt 0s linear 4s forwards;
}
html[lang="cs"]:not(.zn-ready):not(.zn-off) body.type-manufacturers-listing main#content > h1.category-title {
  margin-bottom: calc(var(--zn-desc-mt) + var(--zn-desc-h) + var(--zn-top-mt) + var(--zn-head) + var(--zn-head-mb) +
    var(--zn-rows) * var(--zn-tile) + (var(--zn-rows) - 1) * var(--zn-gap) + var(--zn-search-mt) + var(--zn-search-h) + var(--zn-list-mt));
  animation: zn-free-mb 0s linear 4s forwards;
}
@keyframes zn-free-pt { to { padding-top: 0; } }
@keyframes zn-free-mb { to { margin-bottom: 0; } }

/* ---------- 3) Nadpis a bloky nad seznamem ---------- */
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing main#content > h1.category-title {
  box-sizing: content-box; margin: 0; padding: 0;
  font-family: var(--zn-font) !important; font-size: var(--zn-h1) !important; font-weight: 600 !important; line-height: 1.05 !important;
  letter-spacing: -.03em; text-transform: none !important; color: var(--zn-ink) !important; text-wrap: balance;
}
@media (max-width: 499px) {                                    /* nový nadpis má na úzkém displeji dva řádky – místo pro ně hned */
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing main#content > h1.category-title { min-height: 2.2em; line-height: 1.1 !important; }
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-eyebrow {
  height: var(--zn-eb); margin: 0 0 var(--zn-eb-mb); padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 12px/var(--zn-eb) var(--zn-font); letter-spacing: .09em; text-transform: uppercase; color: var(--zn-3);
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-desc {
  max-width: 720px; min-height: var(--zn-desc-h); margin: var(--zn-desc-mt) 0 0; padding: 0;
  font-size: 15px; line-height: var(--zn-desc-h); color: var(--zn-2);
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-top { margin: var(--zn-top-mt) 0 0; padding: 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-head { height: var(--zn-head); margin: 0 0 var(--zn-head-mb); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-head .zn-eyebrow { margin-bottom: 6px; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing h2.zn-title {
  height: 36px; margin: 0 !important; padding: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--zn-font) !important; font-size: 32px !important; font-weight: 600 !important; line-height: 36px !important;
  letter-spacing: -.02em; text-align: left; text-transform: none !important; color: var(--zn-ink) !important;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing h2.zn-title::before, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing h2.zn-title::after { content: none !important; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-top-grid {
  display: grid; grid-template-columns: repeat(var(--zn-cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--zn-rows), var(--zn-tile));
  gap: var(--zn-gap); margin: 0; padding: 0; list-style: none;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-top-grid > li { min-width: 0; margin: 0; padding: 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-top-grid > li::before { content: none; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; padding: 0 12px;
  border: 1px solid var(--zn-line); border-radius: 14px; background: #fff; color: var(--zn-2) !important; text-decoration: none !important;
  font: 700 14px/1.2 var(--zn-font); letter-spacing: -.02em; transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile:hover { color: var(--zn-ink) !important; border-color: var(--zn-line-2); box-shadow: var(--zn-lift); transform: translateY(-2px); }

/* vyhledávání */
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-search { position: relative; max-width: 380px; height: var(--zn-search-h); margin: var(--zn-search-mt) 0 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-search-ico { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--zn-3); pointer-events: none; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing input.zn-q {
  box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0; padding: 0 14px 0 46px;
  border: 1px solid var(--zn-line-2); border-radius: 14px; background: #fff; box-shadow: none; outline: none;
  font-family: inherit; font-size: 16px; line-height: normal; color: var(--zn-ink); -webkit-appearance: none; appearance: none;   /* 16 px: iPhone při psaní nepřibližuje */
  transition: border-color .15s, box-shadow .15s;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing input.zn-q::placeholder { color: var(--zn-3); opacity: 1; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing input.zn-q:hover { border-color: var(--zn-3); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing input.zn-q:focus { border-color: var(--zn-ink); box-shadow: 0 0 0 3px rgba(0, 99, 199, .28); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-empty { margin: 24px 0 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--zn-2); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-empty[hidden] { display: none !important; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- 4) Seznam A–Z: písmeno nad skupinou, značky jako karty (jen CSS, funguje i bez skriptu) ---------- */
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing main#content > ul.manufacturers { margin: var(--zn-list-mt) 0 72px; padding: 0; list-style: none; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li { display: block; margin: 0 0 32px; padding: 0; border: 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li:last-child { margin-bottom: 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers li[hidden] { display: none !important; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > h2 {
  width: auto; margin: 0 0 12px !important; padding: 0 !important;
  font-family: var(--zn-font) !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.2 !important;
  letter-spacing: -.015em; text-align: left; text-transform: none !important; color: var(--zn-ink) !important;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > h2::before, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > h2::after { content: none !important; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li { display: block; min-width: 0; margin: 0; padding: 0; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li::before { content: none; }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; height: 100%; min-height: 58px;
  padding: 14px 16px 14px 18px; border: 1px solid var(--zn-line); border-radius: 16px; background: #fff;
  font: 700 15px/1.35 var(--zn-font); letter-spacing: -.01em; color: var(--zn-ink) !important; text-decoration: none !important;
  overflow-wrap: anywhere; transition: border-color .2s, box-shadow .2s, transform .2s;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a::after {                  /* šipka */
  content: ''; flex: 0 0 16px; width: 16px; height: 16px; color: var(--zn-3); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform .2s, color .2s;
}
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a:hover { border-color: var(--zn-line-2); box-shadow: var(--zn-lift); transform: translateY(-2px); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a:hover::after { color: var(--zn-ink); transform: translateX(3px); }
html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers a:focus-visible, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile:focus-visible { outline: 3px solid var(--zn-blue); outline-offset: 2px; }

@media (max-width: 1199px) { html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-desc { font-size: 14px; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing h2.zn-title { height: 30px; font-size: 25px !important; line-height: 30px !important; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile { padding: 0 8px; border-radius: 12px; font-size: 13.5px; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing .zn-search { max-width: none; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing main#content > ul.manufacturers { margin-bottom: 56px; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li { margin-bottom: 26px; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > h2 { margin-bottom: 10px !important; font-size: 20px !important; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a { gap: 8px; min-height: 52px; padding: 12px 12px 12px 14px; border-radius: 14px; font-size: 14px; }
}
@media (hover: none) {
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile:hover, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a::after, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing input.zn-q { transition: none; }
  html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing a.zn-tile:hover, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a:hover, html[lang="cs"]:not(.zn-off) body.type-manufacturers-listing ul.manufacturers > li > ul > li > a:hover::after { transform: none; }
}