/*
|--------------------------------------------------------------------------
| WooCommerce Breadcrumb
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: min(100% - (var(--cf-space-xl) * 2), var(--cf-container-width));
  margin: var(--cf-space-lg) auto 0;
  padding: 0;
  color: var(--cf-color-text-muted);
  font-family: var(--cf-font-family-base, sans-serif);
  font-size: var(--cf-font-size-sm);
  font-weight: var(--cf-font-normal);
  line-height: 1.5;
}
/*
|--------------------------------------------------------------------------
| Breadcrumb Links
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb a {
  display: inline-flex;
  align-items: center;
  color: var(--cf-color-text-muted);
  text-decoration: none;
  transition: color var(--cf-transition-fast);
}
/*
|--------------------------------------------------------------------------
| Breadcrumb Link Hover
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
  color: var(--cf-color-primary);
  text-decoration: none;
}
/*
|--------------------------------------------------------------------------
| Current Breadcrumb
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb > :last-child {
  color: var(--cf-color-text);
  font-weight: var(--cf-font-medium);
}
/*
|--------------------------------------------------------------------------
| Breadcrumb Separators
|--------------------------------------------------------------------------
|
| WooCommerce outputs separators as text nodes:
|
| Home  /  Category  /  Product
|
| Since these are text nodes, flex gap provides the spacing naturally.
|
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb {
  word-break: normal;
  overflow-wrap: anywhere;
}
/*
|--------------------------------------------------------------------------
| Breadcrumb Focus
|--------------------------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cf-color-primary) 30%, transparent);
  outline-offset: 3px;
  border-radius: var(--cf-radius-sm);
}
/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width: 48rem) {
  .woocommerce .woocommerce-breadcrumb {
    width: min(100% - (var(--cf-space-md) * 2), var(--cf-container-width));
    margin-top: var(--cf-space-md);
    font-size: var(--cf-font-size-xs);
    line-height: 1.5;
  }
}
/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/
@media (prefers-reduced-motion: reduce) {
  .woocommerce .woocommerce-breadcrumb a {
    transition: none;
  }
}