/*
 * Naturalky: drobné opravy rozvržení (Realness), soubor /user/documents/opravy.css
 * Načítá se v HTML kódech → Záhlaví hned za dlazdice.css. Při změně zvýšit ?v=.
 *
 * 1) Obsah pod pevnou hlavičkou (od 26. 10. 2026)
 *    Od šířky 768 px je #header position: fixed, ale stránky kromě homepage
 *    pod ním nemají odsazení. Hlavička tak překrývala začátek obsahu:
 *    na detailu produktu horní část nadpisu a fotky, v kategorii na tabletu
 *    celý nadpis. Výška hlavičky: 140 px pro 768 až 823 px (menu ve dvou
 *    řádcích), 88 px od 824 px. Homepage (body.type-index) má hero pod
 *    hlavičkou záměrně a košík s objednávkou (body.ordering-process) má
 *    odsazení vlastní, proto obojí beze změny. Na mobilu (do 767 px) je jiná
 *    hlavička a obsah pod ní sedí správně.
 *    Lepivý pravý sloupec detailu (.p-info-wrapper, od 992 px) se zastaví
 *    20 px pod hlavičkou místo původních 60 px od horní hrany okna.
 */
@media (min-width: 768px) {
  body:not(.type-index):not(.ordering-process) .overall-wrapper {
    padding-top: 140px;
  }
}

@media (min-width: 824px) {
  body:not(.type-index):not(.ordering-process) .overall-wrapper {
    padding-top: 88px;
  }
}

@media (min-width: 992px) {
  body.type-detail .p-info-wrapper {
    top: 108px;
  }
}

/*
 * 2) Drobečková navigace ve stylu webu (od 28. 10. 2026)
 *    Šablona 11 kreslí navigaci jako bílý pruh s šedou linkou, šipky dělá
 *    z pseudoprvků odkazů a domeček je ikona písma shoptet
 *    v .breadcrumbs::before. Do 26. 10. 2026 navigaci zakrývala pevná
 *    hlavička, oprava 1) ji odkryla.
 *    Návrh: bez pruhu na béžovém pozadí, zelený text značky, malé šipky,
 *    aktuální stránka tučně, místo domečku slovo „Domů“ (text v HTML je,
 *    jen skrytý pro čtečky). Na mobilu (do 767 px) ji šablona skrývá, to
 *    zůstává. Schválil Jirka 27. 10. 2026.
 */
.breadcrumbs-wrapper .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 20px 0 16px;
  background: transparent;
  border: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.breadcrumbs-wrapper .breadcrumbs::before {
  display: none;
}

.breadcrumbs-wrapper .breadcrumbs > span {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs-wrapper .breadcrumbs a::before,
.breadcrumbs-wrapper .breadcrumbs a::after {
  display: none;
}

/* Šablona dává odkazům pevnou výšku a odsazení pro šipky, proto !important */
.breadcrumbs-wrapper .breadcrumbs a,
.breadcrumbs-wrapper .breadcrumbs [data-testid="breadcrumbsLastLevel"] > span {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: var(--green, #007041);
}

.breadcrumbs-wrapper .breadcrumbs a {
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.breadcrumbs-wrapper .breadcrumbs a:hover,
.breadcrumbs-wrapper .breadcrumbs a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Domeček → slovo Domů */
.breadcrumbs-wrapper .breadcrumbs a.navigation-home-icon .sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  color: inherit !important;
  background: none !important;
}

/* Oddělovač: malá šipka v barvě značky */
.breadcrumbs-wrapper .breadcrumbs > span + span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 11px 0 8px;
  border-top: 1.5px solid var(--green, #007041);
  border-right: 1.5px solid var(--green, #007041);
  opacity: 0.45;
  transform: rotate(45deg);
}

/* Aktuální stránka */
.breadcrumbs-wrapper .breadcrumbs [data-testid="breadcrumbsLastLevel"] > span {
  font-weight: 600;
}

/* Článek blogu: šablona blogu má vlastní odkaz „Zpět na blog“ a užší
   sloupec, navigace by byla dvakrát a mimo zarovnání. Skrýt jen vizuálně,
   strukturovaná data BreadcrumbList v HTML zůstávají. */
body.type-post .breadcrumbs-wrapper {
  display: none;
}

/* Na mobilu (do 767 px) navigaci šablona skrývá na .breadcrumbs a naše
   display: flex výše to přebilo; skrytí se proto vrací tady. */
@media (max-width: 767px) {
  .breadcrumbs-wrapper {
    display: none;
  }
}

/*
 * 3) Dlaždice podkategorií stejně široké (od 29. 10. 2026)
 *    Šablona skládá dlaždice (ul.subcategories) přes flex s flex: 1 a
 *    zalamováním, takže dlaždice, která zbyde sama na řádku, se roztáhne
 *    přes celou šířku (na mobilu 430 px poslední dlaždice 390 px místo
 *    185 px, na 390 px řádky 2+1+2+1+1). Mřížka drží všechny dlaždice
 *    stejně široké: na mobilu vždy dva sloupce, od 768 px tolik sloupců
 *    aspoň 190 px širokých, kolik se vejde (užší dlaždice uřízne „Sady na
 *    vyzkoušení“), od 1440 px stačí 175 px, takže na 1440 px je všech 7
 *    v jednom řádku jako dřív. Dřív se lámalo i na počítači (1280 px:
 *    6 dlaždic a sedmá přes celou šířku).
 *    Na mobilu menší vnitřní odsazení a do 399 px písmo 13 px a mezera 12 px, aby
 *    se celé vešlo i „vyzkoušení“ a „Separační“. Podnět Jirky 29. 10. 2026.
 */
.subcategories.with-image {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (min-width: 1440px) {
  .subcategories.with-image {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  }
}

.subcategories.with-image li {
  width: auto;
  max-width: none;
  min-width: 0;
}

@media (max-width: 767px) {
  .subcategories.with-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subcategories.with-image li a {
    padding-right: 22px;
  }

  .subcategories.with-image li a .text {
    padding-left: 8px;
  }
}

@media (max-width: 399px) {
  .subcategories.with-image {
    gap: 12px;
  }

  .subcategories.with-image li a .text {
    font-size: 13px;
  }
}