.crumbs {
  position: absolute; z-index: 5; top: calc(16px + 54px + 14px); inset-inline-start: var(--gutter);
  max-width: calc(100% - 2 * var(--gutter));
}
.crumbs[hidden] { display: none; }
.crumbs ol {
  display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 6px 0 4px; height: 40px; list-style: none; border-radius: 999px;
  background: rgba(251,249,246,.66); border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(35,31,32,.07), inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -18px rgba(19,16,17,.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.cr-item { position: relative; flex: none; display: flex; align-items: center; }
.cr-sep { width: 14px; height: 14px; margin: 0 2px; position: relative; flex: none; }
.cr-sep::before { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; border-left: 1px solid var(--c-ink-300); transform: rotate(22deg); }
html[dir="rtl"] .cr-sep::before { transform: rotate(-22deg); }

.cr-link, .cr-here {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; color: var(--c-ink-500); text-decoration: none; transition: color .25s, background-color .25s;
}
.cr-link:hover, .cr-link:focus-visible { color: var(--c-ink-900); background: rgba(35,31,32,.05); }
.cr-link:focus-visible, .cr-switch:focus-visible, .cr-menu a:focus-visible { outline: 2px solid var(--c-red-600); outline-offset: 1px; }
.cr-home { width: 32px; padding: 0; justify-content: center; color: var(--c-ink-700); }
.cr-home svg { width: 16px; height: 16px; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-here { color: var(--c-ink-900); font-weight: 600; }
.cr-here::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-red-500); }
html[lang="ar"] .cr-link, html[lang="ar"] .cr-here { font-size: 14.5px; letter-spacing: 0; }

.cr-switch { position: relative; flex: none; width: 26px; height: 26px; margin-inline-start: -6px; border-radius: 50%; color: var(--c-ink-500); transition: background-color .25s, color .25s; }
.cr-switch:hover, .cr-item.open .cr-switch { background: rgba(35,31,32,.07); color: var(--c-ink-900); }
.cr-switch i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -5px 0 0 -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease); }
.cr-item.open .cr-switch i { transform: rotate(225deg); margin-top: -1px; }

.cr-menu {
  position: absolute; z-index: 6; top: calc(100% + 12px); inset-inline-start: -10px; min-width: 230px; margin: 0; padding: 6px; list-style: none; border-radius: 18px;
  background: rgba(250,247,243,.86); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(35,31,32,.08), 0 24px 50px -24px rgba(19,16,17,.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  display: none; transform-origin: top; translate: var(--cr-shift, 0) 0;
}
.cr-item.open .cr-menu { display: block; animation: cr-menu .35s var(--ease) both; }
@keyframes cr-menu { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.cr-menu a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 12px; border-radius: 12px; color: var(--c-ink-800); text-decoration: none; transition: background-color .2s; }
.cr-menu a:hover { background: rgba(35,31,32,.05); }
.cr-menu b { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.cr-menu b::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-ink-300); }
.cr-menu a[aria-current] b { font-weight: 600; }
.cr-menu a[aria-current] b::before { background: var(--c-red-500); }
.cr-menu span { font-size: 12px; color: var(--c-ink-400); white-space: nowrap; }

.cr-new { animation: cr-in .55s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes cr-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
html[dir="rtl"] .cr-new { animation-name: cr-in-rtl; }
@keyframes cr-in-rtl { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px), (max-aspect-ratio: 9/10) {
  .crumbs { top: calc(12px + 52px + 12px); }
}
@media (max-width: 640px) {

  .cr-item:not(:first-child):not(.cr-last):not(:nth-last-child(2)) { display: none; }
  .cr-link, .cr-here { padding: 0 9px; font-size: 13px; }
}
@media (hover: none) and (pointer: coarse) {
  .crumbs ol, .cr-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,247,243,.95); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-new { animation: none; }
  .cr-item.open .cr-menu { animation: none; }
}