/**
 * ProElit — vzhled nad tématem Classic.
 *
 * Potomek přebírá všechno z `classic` a přepisuje jen to, co má vypadat jinak.
 * Díky tomu nerozbije aktualizace PrestaShopu celý vzhled a dá se kdykoli
 * přepnout zpátky.
 *
 * Barvy jsou odečtené přímo z loga, které chodí zákazníkům na fakturách:
 * zelená `#9FC53C`, šedá `#818284`, téměř černá `#231F20`. Modrá z webu
 * proelit.cz je jiné, starší logo — sjednocuje se na tohle.
 *
 * Zelená z loga je ale světlá: bílý text na ní má kontrast 2:1, norma chce
 * 4,5. Tlačítka proto používají tmavší odstín téhož tónu (`#5A7720`, 5,13:1)
 * a logová zelená zůstává na akcenty. V tmavém režimu je to obráceně — tam
 * svítí a text na ní musí být tmavý.
 *
 * Neutrály jsou chladné, ne šedé z loga. Teplá šeď působila zaprášeně;
 * lehký nádech do modra dělá pozadí živější, aniž by konkuroval zelené.
 *
 * Cena nemá vlastní barvu. Je to největší číslo na kartě a najde ji velikost;
 * barvu je lepší utratit za tlačítko. Dřív tu byla červená z firemní palety,
 * jenže ta je vedená jako „danger" a tlačítko z ní četlo jako varování.
 */

:root {
  --pe-ground:      #F6F7F9;
  --pe-surface:     #FFFFFF;
  --pe-surface-alt: #F0F2F5;
  --pe-line:        #D8DCE3;
  --pe-line-soft:   #E6E9EE;

  --pe-ink:         #262A33;
  --pe-ink-2:       #565D69;
  --pe-ink-3:       #7C8494;

  --pe-brand:       #5A7720;
  --pe-brand-soft:  #EDF4DC;
  --pe-brand-ink:   #4E661C;
  --pe-navy:        #22262E;
  --pe-accent:      #9FC53C;

  --pe-price:       #22262E;
  --pe-stock:       #3E8F5F;
  --pe-warn:        #B98105;

  --pe-radius:    3px;
  --pe-radius-lg: 5px;

  --pe-ui: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pe-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --pe-shadow: 0 1px 2px rgb(20 24 27 / .06), 0 1px 8px rgb(20 24 27 / .04);
}

body {
  background: var(--pe-ground);
  color: var(--pe-ink);
  font-family: var(--pe-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { color: var(--pe-brand); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--pe-brand);
  outline-offset: 2px;
}

/* ── Hlavička ───────────────────────────────────────────────────────── */
#header {
  background: var(--pe-surface);
  border-bottom: 1px solid var(--pe-line);
  box-shadow: none;
}
#header .header-nav { border-bottom: 0; }
#header a { color: var(--pe-ink-2); }
#header a:hover { color: var(--pe-brand); }

/* ── Nadpis kategorie ───────────────────────────────────────────────── */
#js-product-list-header h1,
#main .page-header h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--pe-navy);
}
.breadcrumb { font-size: 12.5px; color: var(--pe-ink-3); }
.breadcrumb a { color: var(--pe-ink-3); }

/* ── Filtry ─────────────────────────────────────────────────────────── */
#search_filters {
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  padding: 0;
  /* Sloupec se posouvá sám. Bez toho se k dolním filtrům dá dostat teprve
     po projetí všech produktů. */
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
#search_filters .h6,
#search_filters .facet-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pe-ink);
}
#search_filters .facet {
  border-bottom: 1px solid var(--pe-line-soft);
  padding: 0 15px;
}
#search_filters .facet:last-child { border-bottom: 0; }
#search_filters .facet .facet-label { font-size: 13.5px; color: var(--pe-ink-2); }
#search_filters .facet .facet-label:hover { color: var(--pe-ink); }
#search_filters .custom-checkbox input[type="checkbox"] + span { border-color: var(--pe-line); }
#search_filters .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--pe-brand);
  border-color: var(--pe-brand);
}
#search_filters .magnitude { color: var(--pe-ink-3); font-variant-numeric: tabular-nums; }

/* Volba, pro kterou při současném výběru nezbyl produkt */
#search_filters .facet-label.disabled,
#search_filters li.disabled { opacity: .38; pointer-events: none; }

/* ── Aktivní filtry ─────────────────────────────────────────────────── */
.active_filters {
  background: none;
  padding: 0 0 16px;
}
.active_filters .filter-block {
  background: var(--pe-brand-soft);
  color: var(--pe-brand-ink);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}

/* ── Karta produktu ─────────────────────────────────────────────────── */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius-lg);
  box-shadow: none;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .13s, box-shadow .13s, transform .13s;
}
.product-miniature .thumbnail-container:hover {
  border-color: var(--pe-brand);
  box-shadow: var(--pe-shadow);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .product-miniature .thumbnail-container { transition: none; }
  .product-miniature .thumbnail-container:hover { transform: none; }
}

.product-miniature .product-thumbnail {
  display: block;
  border-bottom: 1px solid var(--pe-line-soft);
  background: var(--pe-surface-alt);
}
.product-miniature .product-thumbnail img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 8px;
}

.product-miniature .product-description {
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
  border: 0;
}

.product-miniature .product-manufacturer,
.product-miniature .product-brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pe-ink-3);
  margin: 0;
}

.product-miniature .product-title { margin: 0; }
.product-miniature .product-title a {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pe-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-miniature .thumbnail-container:hover .product-title a { color: var(--pe-brand); }

/* Krátký popis pod názvem — shrnuje, co je vedle ve štítcích */
.product-miniature .product-desc-short {
  font-size: 12px;
  line-height: 1.45;
  color: var(--pe-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Štítky s klíčovými parametry */
.product-miniature .pe-parametry {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.product-miniature .pe-parametr {
  font-size: 11px;
  color: var(--pe-ink-2);
  background: var(--pe-surface-alt);
  border: 1px solid var(--pe-line-soft);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}

.product-miniature .pe-pn {
  font: 400 10.5px/1 var(--pe-mono);
  color: var(--pe-ink-3);
}

.product-miniature .pe-paticka {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.product-miniature .product-availability,
.product-miniature .pe-sklad {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pe-stock);
  margin: 0;
}
.product-miniature .pe-sklad::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.product-miniature .pe-sklad.pe-dodani { color: var(--pe-warn); }

.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.product-miniature .price {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--pe-price);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.product-miniature .pe-bez-dph {
  font-size: 11px;
  color: var(--pe-ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.3;
}

/* Odznak — v katalogovém režimu zůstává, tlačítko do košíku mizí */
.product-miniature .product-flags li.product-flag {
  background: var(--pe-accent);
  color: #22262E;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  box-shadow: none;
  margin: 0 0 4px;
}
.product-miniature .product-flags li.product-flag.new,
.product-miniature .product-flags li.product-flag.pe-tip { background: var(--pe-brand); }

/* ── Tlačítka ───────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--pe-brand);
  border-color: var(--pe-brand);
  font-weight: 600;
  border-radius: var(--pe-radius);
  box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus { filter: brightness(1.07); background: var(--pe-brand); border-color: var(--pe-brand); }

/* V tmavém režimu svítí logová zelená — bílý text by na ní nebyl čitelný */
@media (prefers-color-scheme: dark) {
  .btn-primary { color: #14161A; }
}

.btn-secondary,
.btn-outline-secondary {
  border-color: var(--pe-line);
  color: var(--pe-ink);
  background: var(--pe-surface);
  border-radius: var(--pe-radius);
}
.btn-secondary:hover { border-color: var(--pe-brand); color: var(--pe-brand); background: var(--pe-surface); }

/* ── Řazení a stránkování ───────────────────────────────────────────── */
.products-sort-order .select-title {
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  color: var(--pe-ink);
  box-shadow: none;
}
.pagination .page-list { background: none; box-shadow: none; }
.pagination a, .pagination .current a {
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  background: var(--pe-surface);
  color: var(--pe-ink-2);
  font-variant-numeric: tabular-nums;
}
.pagination .current a {
  background: var(--pe-brand);
  border-color: var(--pe-brand);
  color: #fff;
  font-weight: 600;
}

/* ── Mřížka ─────────────────────────────────────────────────────────── */
#products .products,
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 14px;
}
#products .products .product,
.products .product { width: auto; margin: 0; }

/* ── Patička ────────────────────────────────────────────────────────── */
#footer {
  background: var(--pe-navy);
  border-top: 0;
  color: var(--pe-ink-3);
}
#footer a, #footer .h3, #footer h3 { color: #E3E8EF; }
#footer a:hover { color: var(--pe-accent); }

/* ── Tmavý režim ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Tmavý režim staví na firemní námořní, ne na neutrální černi */
    --pe-ground:      #14161A;
    --pe-surface:     #1C1F25;
    --pe-surface-alt: #242830;
    --pe-line:        #343A45;
    --pe-line-soft:   #2A2F38;

    --pe-ink:         #E7E9ED;
    --pe-ink-2:       #B3B8C2;
    --pe-ink-3:       #868D99;

    --pe-brand:       #9FC53C;
    --pe-brand-soft:  #2C3A16;
    --pe-brand-ink:   #C3DE7E;
    --pe-navy:        #071A2C;
    --pe-accent:      #47E0FF;

    --pe-price:       #E7E9ED;
    --pe-stock:       #6FCF97;
    --pe-warn:        #FFC107;

    --pe-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 1px 10px rgb(0 0 0 / .25);
  }
}

/* ── Patička: nadpisy, které si rodičovský motiv barví sám ──────────────────
   Odkaz v nadpisu „Váš účet“ má v rodičovském motivu vlastní tmavou barvu
   s vyšší váhou než #footer a, takže na tmavém pozadí patičky zmizel úplně —
   naměřený kontrast 1,04 : 1 při požadovaných 4,5. Selektor níž je záměrně
   dost silný na to, aby to přebil, a pokrývá i ostatní nadpisy s odkazem. */
#footer .h3 a,
#footer .myaccount-title a,
#footer #block_myaccount_infos .myaccount-title a,
#footer .block-contact .h3 a {
  color: #E3E8EF;
}
#footer .h3 a:hover,
#footer .myaccount-title a:hover,
#footer #block_myaccount_infos .myaccount-title a:hover {
  color: var(--pe-accent);
}

/* Nadpis „Informace o obchodu“ je span bez odkazu, takže ho předchozí pravidlo
   mířené na odkazy minulo. Naměřený kontrast 1,04 : 1. */
#footer .block-contact .h3,
#footer .title .h3,
#footer .title span {
  color: #E3E8EF;
}

/* Drobný text pod přihlášením k novinkám měl 4,29 : 1 při požadovaných 4,5.
   Ztmavení na #5F5F5F dává 6,1 : 1 a odstín zůstává tlumený. */
#footer .block_newsletter .newsletter-conditions,
#footer .block_newsletter p {
  color: #5F5F5F;
}

/* Nadpisy v patičce nosí podle modulu různé třídy — h3, h4, block-contact-title,
   myaccount-title. Honit je po jedné znamená pokaždé objevit další, proto jsou
   tu pokryté všechny naráz. Tmavý podklad patičky snese jen světlý text. */
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
#footer .block-contact-title,
#footer .myaccount-title,
#footer .block-contact-title a,
#footer .myaccount-title a {
  color: #E3E8EF;
}

/* Údaje o obchodu pod nadpisem měly šedou #7A7A7A — na tmavém 3,5 : 1. */
#footer .block-contact,
#footer .block-contact li,
#footer .links li a {
  color: #C7CEDA;
}

/* ── Dlaždice kategorií na titulní straně ──────────────────────────────────
   Titulka měla jen blok „Nové produkty“, takže návštěvník neměl kudy do
   katalogu. Dlaždice míří na druhou úroveň stromu, ne na první: „Elektronika“
   je 93 % obchodu a jako rozcestník neříká nic. */
.pe-kategorie {
  max-width: 1140px;
  margin: 0 auto 2.5rem;
  padding: 0 15px;
}

.pe-kategorie__nadpis {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin: 2.5rem 0 1.5rem;
  color: var(--pe-tmava, #22262E);
}

.pe-kategorie__mriz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.pe-dlazdice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: var(--pe-tmava, #22262E);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pe-dlazdice:hover,
.pe-dlazdice:focus-visible {
  border-color: var(--pe-accent, #9FC53C);
  box-shadow: 0 4px 14px rgba(34, 38, 46, .10);
  transform: translateY(-2px);
  color: var(--pe-tmava, #22262E);
  text-decoration: none;
}

.pe-dlazdice__ikona {
  color: var(--pe-primary, #5A7720);
  line-height: 0;
}

.pe-dlazdice__nazev {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .pe-dlazdice { transition: none; }
  .pe-dlazdice:hover { transform: none; }
}

/* ── Hlavička ──────────────────────────────────────────────────────────────
   Výchozí rozvržení stavělo logo, menu a hledání do jedné řady, ale každé
   začínalo v jiné výšce (logo 107 px, menu 59, hledání 147) — hlavička měřila
   211 px a působila rozházeně. Menu se navíc lámalo do dvou řádků a tlačilo
   hledání pod sebe.

   Nové rozvržení má dvě řady jako u velkých e-shopů: nahoře logo, hledání
   a účet, pod nimi samostatný pruh s kategoriemi. */
#header .header-top > .container > .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 28px;
}

#header #_desktop_logo {
  flex: 0 0 auto;
  margin: 0;
}

#header #_desktop_logo img {
  height: 44px;
  width: auto;
  display: block;
}

#header .header-top-right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 20px;
  padding: 0;
}

/* Hledání dostane hlavní prostor — v katalogu o čtvrt milionu položek je to
   nejrychlejší cesta k produktu. */
#header #search_widget {
  order: 1;
  flex: 1 1 340px;
  max-width: none;
  margin: 0;
}

#header #search_widget form input[type="text"] {
  width: 100%;
  height: 44px;
}

/* Menu do vlastní řady přes celou šířku, ať se nemusí lámat vedle hledání */
#header #_desktop_top_menu {
  order: 2;
  flex: 1 0 100%;
  margin: 0;
}

#header #_desktop_top_menu .menu-top,
#header #_desktop_top_menu ul.top-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
}

#header #_desktop_top_menu .top-menu > li > a {
  padding: 10px 0;
  font-size: .95rem;
  letter-spacing: .01em;
}

#header .header-top {
  padding-top: 12px;
  padding-bottom: 6px;
}

@media (max-width: 767px) {
  #header #_desktop_logo img { height: 36px; }
  #header #search_widget { flex-basis: 100%; }
}

/* Pravá část hlavičky si brala 1112 px, takže se s logem nevešla do řady
   a spadla pod něj. `flex-basis: 0` ji nechá zmenšit na zbylé místo. */
#header .header-top-right {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Levý sloupec se stromem kategorií ─────────────────────────────────────
   Dlouhé názvy lezly přes rozbalovací „+“ („Dílna, stavba, zahrada“,
   „Oblečení, obuv a doplňky“) — odkaz neměl vyhrazené místo a plus se
   umisťovalo absolutně. */
#left-column .block-categories .category-sub-menu li a {
  display: block;
  padding-right: 28px;
  line-height: 1.35;
}

#left-column .block-categories .navbar-toggler {
  right: 0;
  top: 2px;
}

#left-column .block-categories {
  padding: 1rem 1.1rem 1.2rem;
}

#left-column .block-categories .category-top-menu > li > a {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Menu v hlavičce: při užší pravé části se lámalo na dva řádky.
   Menší mezery a písmo ho udrží na jednom. */
#header #_desktop_top_menu .top-menu > li > a {
  font-size: .88rem;
  letter-spacing: 0;
}

#header #_desktop_top_menu .menu-top,
#header #_desktop_top_menu ul.top-menu {
  gap: 2px 16px;
}

/* ── Katalog v levém sloupci ───────────────────────────────────────────────
   Nabídka se 13. 8. 2026 přesunula z hlavičky do levého sloupce (jako má
   Alza a Mironet). Modul ps_mainmenu je ale psaný pro vodorovnou nabídku
   nahoře: podnabídka se otevírá jako plovoucí panel pod položkou a mezi
   položkou a panelem zůstává mezera, takže při pohybu myší panel zmizí —
   „musí se za nabídkou honit".

   Tady se z toho dělá svislý katalog s vysouváním doprava:
   panel navazuje přímo na položku (žádná mezera), drží se otevřený i když
   je myš nad ním, a nepřekrývá se s obsahem stránky.
   ────────────────────────────────────────────────────────────────────── */

#left-column #_desktop_top_menu { position: relative; }

#left-column .top-menu[data-depth="0"] > li {
  position: relative;
  border-bottom: 1px solid #ececec;
}
#left-column .top-menu[data-depth="0"] > li:last-child { border-bottom: 0; }

#left-column .top-menu[data-depth="0"] > li > a {
  display: block;
  padding: .55rem .75rem;
  font-weight: 600;
  color: #232323;
}
#left-column .top-menu[data-depth="0"] > li:hover > a {
  background: #f2f5f2;
  color: #7ab51d;
}

/* Vysouvací panel: přisazený k pravé hraně sloupce, bez mezery. */
#left-column .top-menu[data-depth="0"] > li > .sub-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 32rem;
  max-height: 30rem;
  overflow-y: auto;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  z-index: 60;
}
/* Otevře se najetím na položku i na samotný panel — bez toho zmizí
   ve chvíli, kdy myš opustí text odkazu. */
#left-column .top-menu[data-depth="0"] > li:hover > .sub-menu,
#left-column .top-menu[data-depth="0"] > li > .sub-menu:hover {
  display: block;
}

#left-column .sub-menu .top-menu { display: block; }
#left-column .sub-menu .top-menu li { border: 0; }
#left-column .sub-menu .top-menu a {
  display: block;
  padding: .2rem 0;
  font-weight: 400;
  font-size: .92rem;
  color: #444;
}
#left-column .sub-menu .top-menu a:hover { color: #7ab51d; }

/* Na úzkém displeji se panel nevysouvá — rozbaluje se pod položkou,
   jinak by vyjel mimo obrazovku. */
@media (max-width: 991px) {
  #left-column .top-menu[data-depth="0"] > li > .sub-menu {
    position: static;
    width: auto;
    box-shadow: none;
    border: 0;
    border-top: 1px solid #ececec;
  }
}

/* ── Katalog vlevo: bez vysouvacích panelů ─────────────────────────────────
   Modul ps_mainmenu si polohu podnabídky dopočítává v JavaScriptu podle
   vodorovné nabídky nahoře. V levém sloupci z toho vycházel panel ukotvený
   k celé nabídce místo k položce — překryl katalog a při pohybu myší zmizel.
   Majitel 13. 8. 2026: „levé menu dost zlobí, musíš honit nabídku."

   CSS proti dopočítávané poloze nevyhraje, tak se panel v levém sloupci
   nezobrazuje vůbec. Podkategorie se ukazují na stránce kategorie, kde je
   PrestaShop vypisuje jako dlaždice — stejně jako je má Mironet po rozkliknutí.
   ────────────────────────────────────────────────────────────────────── */

#left-column .top-menu .sub-menu,
#left-column .top-menu .popover {
  display: none !important;
}

/* ── Tmavý režim: co v něm zůstávalo světlé ────────────────────────────────
   Nahlásil majitel 29. 8. 2026: e-shop se řídí systémovým nastavením a na
   jiném počítači se přepnul do tmavého, kde „vypadá špatně a rozbije se
   logo". Šablona **paletu pro tmavý režim má** (proměnné výš), ale řada
   míst ji obchází a nese barvu napsanou natvrdo se světlým podkladem
   v hlavě.

   Naměřeno v prohlížeči přepnutém do tmavého režimu; požadováno 4,5 : 1:

     logo „PRO"              #231F20 na #14161A   1,2 : 1
     .pe-dlazdice            pozadí #FFFFFF, text #22262E
     #wrapper                pozadí #F6F6F6
     a.dropdown-item         #232323 na #14161A   1,15 : 1   19 odkazů v menu
     .products-section-title #232323 na #14161A   1,15 : 1
     .pe-kategorie__nadpis   #22262E na #14161A   1,19 : 1
     .product-description    pozadí #FFFFFF uvnitř tmavé karty, a v něm
                             světlý text #E7E9ED — 1,22 : 1, tedy název
                             zboží ani cena nebyly na kartě vidět

   `!important` je tu nutné, ne pohodlné: bez něj pravidlo prohraje.
   Ověřeno pokusem — táž deklarace bez něj barvu nezmění, s ním ano.
   Rodičovský motiv je nastavuje stejně silně; autor téhle šablony na to
   narazil už u patičky a řešil to týmž způsobem. */
@media (prefers-color-scheme: dark) {
  /* Logo: `src` se z CSS přepsat nedá, proto `content`. Varianta má tmavou
     část přebarvenou na #E7E9ED; zelená a šedá zůstaly. */
  #header #_desktop_logo img { content: url('../img/logo-dark.png'); }

  /* Plochy, které si nesly světlé pozadí. */
  #wrapper { background: var(--pe-ground) !important; }
  .pe-dlazdice {
    background: var(--pe-surface) !important;
    border-color: var(--pe-line) !important;
    color: var(--pe-ink) !important;
  }
  .pe-dlazdice:hover,
  .pe-dlazdice:focus-visible {
    color: var(--pe-ink) !important;
    box-shadow: 0 4px 14px rgb(0 0 0 / .35);
  }
  /* Ikona dlaždice byla v tmavozelené #5A7720 — na tmavém 1,9 : 1. */
  .pe-dlazdice__ikona { color: var(--pe-brand) !important; }
  .product-miniature .product-description { background: var(--pe-surface) !important; }

  /* Text, který počítal se světlým podkladem. */
  #left-column a.dropdown-item,
  #left-column .category-sub-menu a,
  .products-section-title,
  .pe-kategorie__nadpis,
  #content h1, #content h2, #content h3 { color: var(--pe-ink) !important; }

  /* Tlumený text: „Všechny produkty", drobečky, rychlý náhled.
     `--pe-ink-2` (#B3B8C2) dává na #14161A 8,1 : 1. */
  .all-product-link,
  .breadcrumb span,
  #left-column .material-icons { color: var(--pe-ink-2) !important; }

  /* Ovládání na kartě (srdce, „Rychlý náhled") leží **nad fotkou zboží**,
     a ta je od dodavatelů skoro vždy na bílém pozadí. Zesvětlit je proto
     nelze — první pokus je obarvil na #B3B8C2 a kontrast spadl na 1,99 : 1.
     Tmavá #5F5F5F dává na bílé 6,1 : 1. */
  .product-miniature .quick-view,
  .product-miniature .material-icons { color: #5F5F5F !important; }
}

/* ── Tmavý režim: stránka produktu ─────────────────────────────────────────
   Úvodní stránka byla po první opravě čistá, ale detail produktu ne —
   a tam zákazník tráví čas. Naměřeno 31. 8. 2026, 39 míst pod 4,5 : 1:

     h1 s názvem zboží        #232323 na #14161A   1,15 : 1
     krátký popis             #232323 na #14161A   1,15 : 1
     „Sdílet", šipky u záložek                     1,12 – 1,15 : 1
     „S DPH"                  #7A7A7A na #14161A   4,22 : 1
     zásady obchodu           #000000 **inline**   1,16 : 1
     okna (oblíbené, hlášení) světlý text na bílém 1,22 : 1
     odznak „Nové"            bílá na #24B9D7      2,33 : 1

   Zásady obchodu a popisy od dodavatelů mají barvu zapsanou **přímo
   v HTML** (`style="color:#000000"`). Vlastní styl přebije jen
   `!important`, jinak se nedá dělat nic. Trvalejší je nepouštět takové
   barvy do katalogu vůbec — to řeší `ocistiPopis()` v backendu. */
@media (prefers-color-scheme: dark) {
  /* Text stránky produktu. */
  #product h1, #product .h1,
  #product .product-description,
  #product .product-information,
  #product .social-sharing span,
  .product-tabs .nav-link,
  #product .tabs .nav-link { color: var(--pe-ink) !important; }

  /* „S DPH" a podobné popisky. */
  #product .tax-shipping-delivery-label,
  #product .product-reference,
  #product .product-quantities { color: var(--pe-ink-2) !important; }

  /* Barvy zapsané přímo v HTML — popis zboží a bloky se zásadami.
     Odkazy uvnitř si necháváme firemní, ať nezmizí. */
  #product .product-description *,
  .block-reassurance *,
  .product-information * { color: var(--pe-ink) !important; }
  #product .product-description a,
  .block-reassurance a { color: var(--pe-brand-ink) !important; }

  /* Šipky u rozbalovacích záložek na tmavě modrém podkladu. */
  #product .material-icons,
  .products-selection .material-icons { color: var(--pe-ink-2) !important; }

  /* Vyskakovací okna si nesla bílé pozadí z rodičovského motivu, zatímco
     text už byl světlý — 1,22 : 1. */
  .modal-content,
  .modal-header,
  .modal-body,
  .modal-footer { background: var(--pe-surface) !important; color: var(--pe-ink) !important; }
  .modal-title { color: var(--pe-ink) !important; }

  /* Odznak „Nové": bílá na světle modré dávala 2,33 : 1. Tmavý text na
     téže modré dává 8,6 : 1 a odznak zůstane výrazný. */
  .product-flag { color: var(--pe-navy) !important; }
}

/* ── Tmavý režim: plochy na detailu, které zůstaly bílé ────────────────────
   Po předchozím bloku byl text světlý, ale několik ploch si drželo bílé
   pozadí z rodičovského motivu — takže se světlý text ztratil na bílé
   (1,22 : 1). Vypsané jsou všechny, které měření našlo; fotka zboží
   v seznamu **není**, ta bílá zůstat má. */
@media (prefers-color-scheme: dark) {
  #product .tabs,
  #product .tabs .nav-link.active,
  .product-comment-list-item,
  .social-sharing li { background: var(--pe-surface) !important; }

  /* Aktivní záložka se od ostatních musí lišit jinak než bílou. */
  #product .tabs .nav-link.active { color: var(--pe-brand-ink) !important; border-bottom-color: var(--pe-brand) !important; }

  /* Formulářová pole — hledání, hodnocení, poznámky. */
  #main input:not([type=submit]):not([type=button]),
  #main textarea,
  #main select {
    background: var(--pe-surface) !important;
    color: var(--pe-ink) !important;
    border-color: var(--pe-line) !important;
  }
  #main input::placeholder,
  #main textarea::placeholder { color: var(--pe-ink-3) !important; }

  button.btn-comment-inverse {
    background: var(--pe-surface) !important;
    color: var(--pe-ink) !important;
    border-color: var(--pe-line) !important;
  }

  /* Ikony sdílení jsou tmavé kresby — na tmavém podkladu je nechat
     tmavé nejde. */
  .social-sharing li a { color: var(--pe-ink) !important; }
}