/*
 * Fil d'Ariane CKLaundry
 * Aligné sur le conteneur principal et lisible de 320 px au grand écran.
 */
:root {
  --ck-breadcrumb-max-width: 1351px;
  --ck-breadcrumb-gutter: 16px;
}

/*
 * Le header CKLaundry utilise un retrait latéral de 24 px sur les formats
 * tablette et desktop intermédiaire. Le fil d'Ariane suit le même axe que
 * le bord gauche visible du logo.
 */
@media (min-width: 769px) and (max-width: 1413px) {
  :root {
    --ck-breadcrumb-gutter: 24px;
  }
}

body
  :is(.e-con, .elementor-container):has(
    > .elementor-widget-woocommerce-breadcrumb
  ) {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body .elementor-widget-woocommerce-breadcrumb {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: calc(100% - (2 * var(--ck-breadcrumb-gutter))) !important;
  max-width: var(--ck-breadcrumb-max-width) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

body .elementor-widget-woocommerce-breadcrumb .elementor-widget-container,
body .woocommerce-breadcrumb {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body .woocommerce-breadcrumb {
  display: block !important;
  padding-block: 4px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.ck-breadcrumb-logo-aligned .elementor-widget-woocommerce-breadcrumb {
  width: calc(100% - (2 * var(--ck-breadcrumb-logo-left))) !important;
  max-width: none !important;
  margin-left: var(--ck-breadcrumb-logo-left) !important;
  margin-right: var(--ck-breadcrumb-logo-left) !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  body
    :is(.e-con, .elementor-container).elementor-hidden-tablet:has(
      > .elementor-widget-woocommerce-breadcrumb
    ) {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  :root {
    --ck-breadcrumb-gutter: 16px;
  }
}

@media (max-width: 767px) {
  body
    :is(.e-con, .elementor-container).elementor-hidden-mobile:has(
      > .elementor-widget-woocommerce-breadcrumb
    ) {
    display: flex !important;
  }

  body .woocommerce-breadcrumb {
    padding-block: 6px !important;
    font-size: clamp(12.5px, 3.5vw, 14px) !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 359px) {
  :root {
    --ck-breadcrumb-gutter: 16px;
  }
}