/* IONTMAX Theme managed source: 2026-08-20 */
/*
 * IONTMAX Breadcrumbs
 *
 * Globální jednotný breadcrumb rail.
 *
 * GARANCE:
 * - stejná levá hrana na všech stránkách,
 * - stejná vertikální pozice na všech stránkách,
 * - přesně 14px od spodní hrany headeru,
 * - desktop i mobil používají stejný top offset,
 * - mobil má přesně 16px horizontální odsazení,
 * - page moduly nesmí breadcrumb stáhnout na šířku
 *   formuláře ani mu měnit horní odsazení.
 *
 * Tento modul je jediný vlastník:
 * - breadcrumbs-wrapper railu,
 * - horizontálního zarovnání,
 * - vertikální pozice,
 * - home ikony,
 * - separatorů,
 * - breadcrumb typografie.
 */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --im-bc-pad:
    var(
      --im-pad,
      clamp(16px, 4.2vw, 72px)
    );

  --im-bc-max:
    var(
      --im-max,
      1800px
    );

  /* přesná vzdálenost breadcrumbs od headeru */
  --im-bc-top: 14px;

  --im-bc-bottom: 12px;

  --im-bc-text: #111214;
  --im-bc-muted: #6b7280;
  --im-bc-faint: #9ca3af;
}


/* =========================================================
   GLOBAL BREADCRUMB RAIL
   ========================================================= */

/*
 * Vyšší specificita je záměrná.
 *
 * Přepisuje staré lokální breadcrumb styly například v:
 * - account-auth,
 * - customer-account,
 * - search-results,
 * - category-page,
 * - dalších page modulech.
 */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container {
  box-sizing: border-box !important;

  position: relative !important;

  display: block !important;

  width:
    min(
      calc(
        100% -
        (
          var(--im-bc-pad) * 2
        )
      ),
      var(--im-bc-max)
    ) !important;

  max-width:
    var(--im-bc-max) !important;

  min-height: 0 !important;

  /*
   * Wrapper začíná okamžitě za headerem.
   */
  margin-top: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;

  /*
   * Jediný vlastník vzdálenosti od headeru.
   * PC i mobil = přesně 14px.
   */
  padding-top:
    var(--im-bc-top) !important;

  padding-right: 0 !important;

  padding-bottom: 0 !important;

  padding-left: 0 !important;

  border: 0 !important;

  background: transparent !important;

  text-align: left !important;

  float: none !important;

  clear: both !important;

  transform: none !important;
}


/* =========================================================
   BREADCRUMB TRAIL
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs {
  box-sizing: border-box !important;

  position: static !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: none !important;

  min-height: 0 !important;

  /*
   * Žádný další top margin/padding.
   * Vertikální pozici vlastní wrapper výše.
   */
  margin-top: 0 !important;

  margin-right: 0 !important;

  margin-bottom: 18px !important;

  margin-left: 0 !important;

  padding-top: 0 !important;

  padding-right: 0 !important;

  padding-bottom:
    var(--im-bc-bottom) !important;

  padding-left: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color:
    var(--im-bc-muted) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1.4 !important;

  text-align: left !important;
}


/* =========================================================
   NORMALIZE POSSIBLE NESTED BREADCRUMB CONTAINERS
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .container,

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
ol.breadcrumb,

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumb {
  box-sizing: border-box !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  text-align: left !important;
}


/* =========================================================
   BREADCRUMB ITEMS
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs
> span {
  box-sizing: border-box !important;

  display: inline-flex !important;

  flex: 0 0 auto !important;

  align-items: center !important;

  align-self: center !important;

  width: auto !important;

  max-width: none !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  text-align: left !important;

  white-space: normal !important;

  float: none !important;
}


/* =========================================================
   ITEM CONTENT
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs
> span
> a,

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs
> span
> span {
  box-sizing: border-box !important;

  position: static !important;

  width: auto !important;

  max-width: none !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  text-align: left !important;
}


/* =========================================================
   REMOVE NATIVE SHOPTET DECORATION
   ========================================================= */

.breadcrumbs
> span
> a::before,

.breadcrumbs
> span
> a::after {
  display: none !important;

  content: none !important;
}


/* =========================================================
   HOME ITEM WRAPPER
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs
> span.navigation-home-icon-wrapper,

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs
> .navigation-home-icon-wrapper {
  box-sizing: border-box !important;

  display: inline-flex !important;

  flex: 0 0 auto !important;

  align-items: center !important;

  width: auto !important;

  max-width: none !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* =========================================================
   REMOVE CLASSIC HOME DECORATION
   ========================================================= */

.navigation-home-icon-wrapper::before {
  display: none !important;

  content: none !important;
}


/* =========================================================
   HOME LINK
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.navigation-home-icon {
  box-sizing: border-box !important;

  position: static !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 6px !important;

  width: auto !important;

  height: auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  color:
    var(--im-bc-muted) !important;

  text-align: left !important;

  text-decoration: none !important;
}


/* =========================================================
   HOME ICON
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.navigation-home-icon::before {
  content: "" !important;

  box-sizing: border-box !important;

  display: inline-block !important;

  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  flex: 0 0 14px !important;

  width: 14px !important;

  height: 14px !important;

  margin: 0 !important;

  padding: 0 !important;

  vertical-align: -2px;

  background-color: currentColor !important;

  transform: none !important;

  -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='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E")
    center /
    contain
    no-repeat !important;

  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='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z'/%3E%3C/svg%3E")
    center /
    contain
    no-repeat !important;
}

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.navigation-home-icon::after {
  display: none !important;

  content: none !important;
}


/* =========================================================
   HOME ACCESSIBLE LABEL
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.navigation-home-icon
.sr-only {
  position: static !important;

  width: auto !important;

  height: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: visible !important;

  clip: auto !important;

  clip-path: none !important;

  white-space: normal !important;

  border: 0 !important;

  text-align: left !important;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.navigation-bullet {
  box-sizing: border-box !important;

  display: inline-flex !important;

  align-items: center !important;

  width: auto !important;

  height: auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin:
    0
    8px !important;

  padding: 0 !important;

  color:
    var(--im-bc-faint) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  background: none !important;
}


/* =========================================================
   LINKS
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
a {
  color:
    var(--im-bc-muted) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1.4 !important;

  text-align: left !important;

  text-decoration: none !important;
}

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
a:hover {
  color:
    var(--im-bc-text) !important;

  text-decoration: none !important;
}


/* =========================================================
   LAST / ACTIVE ITEM
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
> span:last-child
> span[itemprop="name"],

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
> span[data-testid="breadcrumbsLastLevel"]
> span[itemprop="name"] {
  color:
    var(--im-bc-text) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.4 !important;

  text-align: left !important;
}


/* =========================================================
   APPENDIX
   ========================================================= */

html
body
.overall-wrapper
.breadcrumbs-wrapper.container
.breadcrumbs
.appendix {
  display: none !important;
}


/* =========================================================
   AUTH PAGES
   ========================================================= */

/*
 * Login a registrace mají historicky vlastní:
 *
 * padding: 12px 0 0
 *
 * Tady jej explicitně přebírá globální breadcrumbs modul.
 */

html
body.in-login
.overall-wrapper
.breadcrumbs-wrapper.container,

html
body.in-registration
.overall-wrapper
.breadcrumbs-wrapper.container,

html
body.in-registrace
.overall-wrapper
.breadcrumbs-wrapper.container,

html
body.in-rejestracja
.overall-wrapper
.breadcrumbs-wrapper.container {
  width:
    min(
      calc(
        100% -
        (
          var(--im-bc-pad) * 2
        )
      ),
      var(--im-bc-max)
    ) !important;

  max-width:
    var(--im-bc-max) !important;

  margin-top: 0 !important;

  margin-right: auto !important;

  margin-bottom: 0 !important;

  margin-left: auto !important;

  padding:
    var(--im-bc-top)
    0
    0 !important;

  text-align: left !important;
}


/* =========================================================
   CUSTOMER ACCOUNT
   ========================================================= */

/*
 * Customer center má historicky také vlastní
 * padding-top: 12px.
 */

html
body.customer-page
.overall-wrapper
.breadcrumbs-wrapper.container {
  width:
    min(
      calc(
        100% -
        (
          var(--im-bc-pad) * 2
        )
      ),
      var(--im-bc-max)
    ) !important;

  max-width:
    var(--im-bc-max) !important;

  margin-top: 0 !important;

  margin-right: auto !important;

  margin-bottom: 0 !important;

  margin-left: auto !important;

  padding:
    var(--im-bc-top)
    0
    0 !important;

  text-align: left !important;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

/*
 * Search měl historicky:
 *
 * padding-top: clamp(14px, 1.2vw, 18px)
 *
 * Nově používá přesně stejných 14px jako celý web.
 */

html
body.type-search
.overall-wrapper
.breadcrumbs-wrapper.container,

html
body.in-vyhledavani
.overall-wrapper
.breadcrumbs-wrapper.container,

html
body.template-search
.overall-wrapper
.breadcrumbs-wrapper.container {
  width:
    min(
      calc(
        100% -
        (
          var(--im-bc-pad) * 2
        )
      ),
      var(--im-bc-max)
    ) !important;

  max-width:
    var(--im-bc-max) !important;

  margin-top: 0 !important;

  margin-right: auto !important;

  margin-bottom: 0 !important;

  margin-left: auto !important;

  padding:
    var(--im-bc-top)
    0
    0 !important;

  text-align: left !important;
}


/* =========================================================
   AUTH / CUSTOMER / SEARCH TRAIL RESET
   ========================================================= */

html
body.in-login
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.in-registration
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.in-registrace
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.in-rejestracja
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.customer-page
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.type-search
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.in-vyhledavani
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs,

html
body.template-search
.overall-wrapper
.breadcrumbs-wrapper.container
> .breadcrumbs {
  width: 100% !important;

  max-width: none !important;

  min-height: 0 !important;

  margin-top: 0 !important;

  margin-right: 0 !important;

  margin-bottom: 18px !important;

  margin-left: 0 !important;

  padding-top: 0 !important;

  padding-right: 0 !important;

  padding-bottom:
    var(--im-bc-bottom) !important;

  padding-left: 0 !important;

  text-align: left !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  :root {
    /*
     * Na mobilu přesně 16px od levého i pravého okraje.
     */
    --im-bc-pad: 16px;

    /*
     * Vertikální pozice zůstává stejná jako na desktopu.
     */
    --im-bc-top: 14px;
  }


  /* -------------------------------------------------------
     MOBILE GLOBAL RAIL
     ------------------------------------------------------- */

  html
  body
  .overall-wrapper
  .breadcrumbs-wrapper.container {
    box-sizing: border-box !important;

    width:
      min(
        calc(100% - 32px),
        var(--im-bc-max)
      ) !important;

    max-width:
      var(--im-bc-max) !important;

    min-height: 0 !important;

    margin-top: 0 !important;

    margin-right: auto !important;

    margin-bottom: 0 !important;

    margin-left: auto !important;

    padding-top:
      var(--im-bc-top) !important;

    padding-right: 0 !important;

    padding-bottom: 0 !important;

    padding-left: 0 !important;

    text-align: left !important;

    float: none !important;

    clear: both !important;
  }


  /* -------------------------------------------------------
     MOBILE TRAIL
     ------------------------------------------------------- */

  html
  body
  .overall-wrapper
  .breadcrumbs-wrapper.container
  > .breadcrumbs {
    width: 100% !important;

    max-width: none !important;

    min-height: 0 !important;

    margin-top: 0 !important;

    margin-right: 0 !important;

    margin-bottom: 18px !important;

    margin-left: 0 !important;

    padding-top: 0 !important;

    padding-right: 0 !important;

    padding-bottom:
      var(--im-bc-bottom) !important;

    padding-left: 0 !important;

    text-align: left !important;
  }


  /* -------------------------------------------------------
     MOBILE ITEMS
     ------------------------------------------------------- */

  html
  body
  .overall-wrapper
  .breadcrumbs-wrapper.container
  > .breadcrumbs
  > span {
    text-align: left !important;
  }
}