/* Shared breadcrumb rhythm for city and catalogue pages. */
:root { --sf-breadcrumb-top:32px; --sf-breadcrumb-gap:16px; }
:is(.breadcrumbs, div.breadcrumb) {
  color:#696c69;
  font:400 14px/1.4 Onest,Arial,sans-serif;
}

div.breadcrumb, nav.breadcrumbs {
  display:flex;
  justify-content:flex-start;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  white-space:nowrap;
}
div.breadcrumb { flex:1 1 auto; padding:var(--sf-breadcrumb-top) 0 var(--sf-breadcrumb-gap); }
nav.breadcrumbs { width:100%; }
nav.breadcrumbs ol {
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:none;
  width:max-content;
  min-width:100%;
}
:is(div.breadcrumb, nav.breadcrumbs) ol {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:0;
  flex:none;
  width:max-content;
  min-width:100%;
  margin:0;
  padding:0;
  list-style:none;
}
:is(div.breadcrumb, nav.breadcrumbs) ol > li { display:inline-flex; align-items:center; flex:none; font:inherit; }
:is(div.breadcrumb, nav.breadcrumbs) ol > .sf-breadcrumb-separator {
  justify-content:center;
  flex:none;
  width:22px;
  font-size:0;
}
:is(div.breadcrumb, nav.breadcrumbs) ol > .sf-breadcrumb-separator::after {
  content:"";
  width:5px;
  height:5px;
  border-top:1px solid #aaa;
  border-right:1px solid #aaa;
  transform:rotate(45deg);
}
:is(.breadcrumbs, div.breadcrumb) a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#cecece;
  text-underline-offset:3px;
}
:is(.breadcrumbs, div.breadcrumb) a:hover { color:var(--sf-shell-green,#67b346); }
:is(.breadcrumbs, div.breadcrumb) a:focus-visible {
  outline:2px solid #67b346;
  outline-offset:3px;
  border-radius:2px;
}
@media(max-width:700px) {
  :root { --sf-breadcrumb-top:21px; }
  :is(div.breadcrumb, nav.breadcrumbs) ol > .sf-breadcrumb-separator { width:18px; }
}