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

/*
 * Le header CKWash conserve un retrait de 40 px entre 1200 et 1294 px.
 * Le fil d'Ariane reprend exactement cet axe pour rester calé sur le
 * bord gauche visible du rond du logo.
 */
@media (min-width: 1200px) and (max-width: 1294px) {
  :root {
    --ck-breadcrumb-gutter: 40px;
  }
}

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;
}

/*
 * À partir de 993 px, le header affiche le logo dans une boîte de 285 × 65 px.
 * Le SVG conserve son ratio 285 / 83,8 et laisse donc 32 px de vide optique
 * à gauche. Ce retrait aligne le texte sur le bord bleu réellement visible,
 * et non sur la boîte transparente de l'image.
 */
@media (min-width: 993px) {
  body .woocommerce-breadcrumb {
    box-sizing: border-box !important;
    padding-inline-start: 32px !important;
    padding-inline-end: 0 !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) {
  :root {
    --ck-breadcrumb-gutter: 20px;
  }

  body
    :is(.e-con, .elementor-container).elementor-hidden-tablet:has(
      > .elementor-widget-woocommerce-breadcrumb
    ) {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  body .elementor-widget-woocommerce-breadcrumb,
  body .woocommerce-breadcrumb,
  body nav[aria-label="Breadcrumb"],
  body
    :is(.e-con, .elementor-container):has(
      > .elementor-widget-woocommerce-breadcrumb
    ) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

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