/**
 * Shared MaxTrac breadcrumbs — PLP reference style (HOME orange, current black).
 *
 * Usage: add class "mt-breadcrumbs" (and optional "breadcrumbs") on the nav/div,
 * or call maxtrac_render_breadcrumbs( $items ).
 *
 * Reuse on any page: enqueue handle "maxtrac-breadcrumbs" or rely on
 * maxtrac_uses_catalog_v2_header() which loads this automatically.
 */

.mt-breadcrumbs,
.plp-v2 .breadcrumbs,
.cms-page .breadcrumbs,
.blog-v2 .breadcrumbs {
  --mt-crumb-orange: #ff641f;
  --mt-crumb-text: #0d0d0d;
  --mt-crumb-font: 'BebasNeue-Regular', 'Bebas Neue', 'agency_fb', sans-serif;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-family: var(--mt-crumb-font);
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mt-crumb-text);
  gap: 0;
}

.mt-breadcrumbs a,
.plp-v2 .breadcrumbs a,
.cms-page .breadcrumbs a,
.blog-v2 .breadcrumbs a,
.blog-v2.blog .mt-breadcrumbs a,
.blog.blog-v2 .breadcrumbs a {
  color: var(--mt-crumb-orange) !important;
  text-decoration: none;
  font-family: var(--mt-crumb-font);
  font-size: 20pt;
  font-weight: normal;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mt-breadcrumbs a:hover,
.plp-v2 .breadcrumbs a:hover,
.cms-page .breadcrumbs a:hover,
.blog-v2 .breadcrumbs a:hover,
.blog-v2.blog .mt-breadcrumbs a:hover,
.blog.blog-v2 .breadcrumbs a:hover {
  color: var(--mt-crumb-text) !important;
  text-decoration: none;
}

.mt-breadcrumbs__sep,
.plp-v2 .breadcrumbs .mt-breadcrumbs__sep,
.plp-v2 .plp-page-header__crumb-sep,
.cms-page .breadcrumbs .mt-breadcrumbs__sep,
.cms-page .breadcrumbs > span,
.blog-v2 .breadcrumbs .mt-breadcrumbs__sep,
.blog-v2 .blog-v2-header__crumb-sep {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  padding: 0;
  color: var(--mt-crumb-text);
  font-family: var(--mt-crumb-font);
  font-size: 24px;
  font-weight: normal;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0;
}

.mt-breadcrumbs__current,
.plp-v2 .breadcrumbs .mt-breadcrumbs__current,
.plp-v2 .plp-page-header__crumb-current,
.cms-page .breadcrumbs .mt-breadcrumbs__current,
.blog-v2 .breadcrumbs .mt-breadcrumbs__current,
.blog-v2 .blog-v2-header__crumb-current {
  color: var(--mt-crumb-text);
  font-family: var(--mt-crumb-font);
  font-size: 20pt;
  font-weight: normal;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .mt-breadcrumbs a,
  .plp-v2 .breadcrumbs a,
  .cms-page .breadcrumbs a,
  .blog-v2 .breadcrumbs a,
  .mt-breadcrumbs__current,
  .plp-v2 .plp-page-header__crumb-current,
  .cms-page .breadcrumbs .mt-breadcrumbs__current,
  .blog-v2 .blog-v2-header__crumb-current {
    font-size: 16pt !important;
  }

  .mt-breadcrumbs__sep,
  .plp-v2 .plp-page-header__crumb-sep,
  .cms-page .breadcrumbs > span,
  .blog-v2 .blog-v2-header__crumb-sep {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .mt-breadcrumbs a,
  .plp-v2 .breadcrumbs a,
  .cms-page .breadcrumbs a,
  .blog-v2 .breadcrumbs a,
  .mt-breadcrumbs__current,
  .plp-v2 .plp-page-header__crumb-current,
  .cms-page .breadcrumbs .mt-breadcrumbs__current,
  .blog-v2 .blog-v2-header__crumb-current {
    font-size: 14pt !important;
  }

  .mt-breadcrumbs__sep,
  .plp-v2 .plp-page-header__crumb-sep,
  .cms-page .breadcrumbs > span,
  .blog-v2 .blog-v2-header__crumb-sep {
    font-size: 18px;
    margin: 0 6px;
  }
}