/*
 * BARICO – kompaktní drobečková navigace pouze na produktech.
 * Verze 8.0.0 / 2026-11-13
 *
 * Upravuje původní .breadcrumbs. Odkazy, názvy a strukturovaná data
 * nadále generuje Shoptet podle právě otevřené stránky.
 * Soubor načtěte jako poslední vlastní CSS v části HEAD.
 */

:root {
  /* Šířky vycházejí ze současného rozložení www.barico.cz. */
  --barico-breadcrumbs-page-width: 1418px;
  --barico-breadcrumbs-product-width: 1200px;
  --barico-breadcrumbs-gutter: 20px;
  --barico-breadcrumbs-font-size: 12px;
  --barico-breadcrumbs-row-height: 20px;
  --barico-breadcrumbs-top-gap: 6px;
  --barico-breadcrumbs-bottom-gap: 0px;
  --barico-page-title-gap: 16px;
  --barico-page-section-gap: 20px;
  --barico-breadcrumbs-link-color: #6a6a6a;
  --barico-breadcrumbs-current-color: #202020;
  --barico-breadcrumbs-separator-color: #969696;
}

/* Na ostatních stránkách navigace nezabírá žádné místo. */
html body:not(.type-detail) #content-wrapper > .breadcrumbs,
html body:not(.type-detail):has(#header[data-barico-header]) #content-wrapper > .breadcrumbs {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Mobilní zobrazení produktů ponechává stávající pravidla šablony. */
@media (min-width: 768px) {
  /* Kompaktní navigace na detailech produktů. */
  html body.type-detail #content-wrapper > .breadcrumbs {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: var(--barico-breadcrumbs-page-width) !important;
    height: auto !important;
    min-height: var(--barico-breadcrumbs-row-height) !important;
    margin: 0 auto var(--barico-breadcrumbs-bottom-gap) !important;
    padding: var(--barico-breadcrumbs-top-gap) var(--barico-breadcrumbs-gutter) 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: var(--barico-breadcrumbs-font-size) !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    color: var(--barico-breadcrumbs-link-color) !important;
  }

  /*
   * Produkt má vlastní obsah široký 1200 px. Drobečky zarovnáme
   * s jeho levým okrajem, včetně postranního odsazení na menších oknech.
   */
  html body.type-detail #content-wrapper > .breadcrumbs {
    max-width: calc(
      var(--barico-breadcrumbs-product-width)
      + var(--barico-breadcrumbs-gutter)
      + var(--barico-breadcrumbs-gutter)
    ) !important;
  }

  html body.type-detail #content-wrapper > .breadcrumbs::before,
  html body.type-detail #content-wrapper > .breadcrumbs::after {
    content: none !important;
    display: none !important;
  }

  html body.type-detail #content-wrapper > .breadcrumbs > [itemprop="itemListElement"] {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--barico-breadcrumbs-row-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font: inherit !important;
    text-indent: 0 !important;
    white-space: normal !important;
  }

  html body.type-detail #content-wrapper > .breadcrumbs [itemprop="name"] {
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    color: inherit !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html body.type-detail #content-wrapper > .breadcrumbs a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--barico-breadcrumbs-row-height) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    color: var(--barico-breadcrumbs-link-color) !important;
  }

  /* Odstranění původní velké šipky za odkazem v šabloně Step. */
  html body.type-detail #content-wrapper > .breadcrumbs a::before,
  html body.type-detail #content-wrapper > .breadcrumbs a::after {
    content: none !important;
    display: none !important;
  }

  html body.type-detail #content-wrapper > .breadcrumbs a:hover,
  html body.type-detail #content-wrapper > .breadcrumbs a:focus-visible {
    color: var(--barico-breadcrumbs-current-color) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  html body.type-detail #content-wrapper > .breadcrumbs a:focus-visible {
    outline: 2px solid var(--barico-breadcrumbs-current-color);
    outline-offset: 3px;
  }

  /* Jemný oddělovač › bez další ikony, fontu nebo JavaScriptu. */
  html body.type-detail #content-wrapper > .breadcrumbs .navigation-bullet {
    box-sizing: border-box !important;
    display: inline-block !important;
    flex: 0 0 5px !important;
    align-self: center !important;
    position: static !important;
    float: none !important;
    width: 5px !important;
    min-width: 5px !important;
    max-width: 5px !important;
    height: 5px !important;
    min-height: 0 !important;
    margin: 0 7px 1px 5px !important;
    padding: 0 !important;
    border: solid var(--barico-breadcrumbs-separator-color) !important;
    border-width: 1px 1px 0 0 !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: rotate(45deg) !important;
  }

  html body.type-detail #content-wrapper > .breadcrumbs .navigation-bullet::before,
  html body.type-detail #content-wrapper > .breadcrumbs .navigation-bullet::after {
    content: none !important;
    display: none !important;
  }

  /* Poslední položka zůstává celá čitelná, i u dlouhých názvů. */
  html body.type-detail #content-wrapper > .breadcrumbs > [itemprop="itemListElement"]:last-child {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-weight: 500 !important;
    color: var(--barico-breadcrumbs-current-color) !important;
  }

  /* Odstranění dalších 20 px nad detailem produktu. */
  html body.type-detail #content-wrapper > .breadcrumbs + .content-wrapper-in .p-detail-inner {
    padding-top: 0 !important;
  }
}

/*
 * Návaznost navigace na začátek stránky.
 * Nativní H1 má nahoře 0.67em, tedy přibližně 23 px prázdného místa.
 * Měníme jen hlavní nadpisy konkrétních šablon, ne nadpisy uvnitř obsahu.
 */
@media (min-width: 768px) {
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > .category-top > h1.category-title,
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > .content-inner > .pageArticleDetail > header > h1,
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > .content-inner > .sectionDescription > h1,
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > .content-inner > .news-item-detail > h1,
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > .content-inner > h1:first-of-type,
  html body #content-wrapper > .breadcrumbs + .content-wrapper-in #content > h1:first-of-type {
    margin-top: 0 !important;
    margin-bottom: var(--barico-page-title-gap) !important;
  }

  html body.type-category #content-wrapper #content > .category-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body.type-category #content-wrapper .category-top > .category-perex {
    margin-top: 0 !important;
    margin-bottom: var(--barico-page-section-gap) !important;
  }

  html body.type-category #content-wrapper .category-perex > p:first-of-type {
    margin-top: 0 !important;
  }

  html body.type-category #content-wrapper .category-perex > p:last-child {
    margin-bottom: 0 !important;
  }

  html body.type-category #content-wrapper .category-top > .subcategories {
    margin-top: 0 !important;
    margin-bottom: var(--barico-page-section-gap) !important;
  }

  /* Bannery vyplní celou šířku obsahu a zarovnají se s nadpisem. */
  html body.type-category #content-wrapper .category-perex > .custom-banner-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.type-category #content-wrapper .category-perex .custom-banner-section > .banner-slider {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.type-category #content-wrapper .category-perex .banner-slider > .banner {
    min-width: 0 !important;
    width: auto !important;
    height: clamp(320px, 30vw, 400px) !important;
  }

  html body.type-category #content-wrapper .category-perex .banner > .banner-content {
    min-width: 0;
    padding: 18px !important;
  }

  html body.type-category #content-wrapper .category-perex .banner-content > h2 {
    margin: 0 0 8px !important;
    font-size: clamp(20px, 1.7vw, 24px) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
  }

  html body.type-category #content-wrapper .category-perex .banner-content > p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word;
  }

  /*
   * Odstranění dvojité mezery: 24 px pod sliderem + 24 px nad FAQ.
   * Mezi sousedními sekcemi zůstane jeden rozestup 20 px.
   * Obecný sourozenec ~ funguje i přes vložené značky STYLE.
   */
  html body.type-category #content-wrapper .category-perex > .custom-banner-section ~ .custom-banner-section {
    margin-top: var(--barico-page-section-gap) !important;
  }

  html body.type-category #content-wrapper .category-perex .custom-banner-section > .faq-box {
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 12px !important;
    background: #fafafa !important;
  }

  html body.type-category #content-wrapper .category-perex .faq-box > h3 {
    gap: 16px;
    line-height: 1.35 !important;
  }
}

/* Dva čitelné sloupce místo čtyř stísněných karet na tabletu. */
@media (min-width: 768px) and (max-width: 1099px) {
  html body.type-category #content-wrapper .category-perex .custom-banner-section > .banner-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/*
 * Vlastní hlavička BARICO mezi 768 a 1099 px přidává drobečkům
 * svislé odsazení přes !important. Tento cílený přepis ho odstraní.
 */
@media (min-width: 768px) and (max-width: 1099px) {
  html body.type-detail:not(.in-index):has(#header[data-barico-header]) #content-wrapper > .breadcrumbs {
    min-height: var(--barico-breadcrumbs-row-height) !important;
    margin-top: 0 !important;
    margin-bottom: var(--barico-breadcrumbs-bottom-gap) !important;
    padding-top: var(--barico-breadcrumbs-top-gap) !important;
    padding-bottom: 0 !important;
  }
}