/* ==================================================
   Aynazi Shared Breadcrumb
   --------------------------------------------------
   Purpose:
   - One reusable breadcrumb system for all templates.
   - Placement: directly under the main header and before the hero section.
   - Width: locked to 1480px rhythm, same as the latest shared inner-page width system.
   - Markup target: <nav class="aynazi-breadcrumb" aria-label="..."><ol>...</ol></nav>
   ================================================== */

:root {
  --breadcrumb-container-width: 1480px;
  --breadcrumb-inline-gap: 72px;
  --breadcrumb-inline-gap-mobile: 32px;
  --breadcrumb-top-space: clamp(18px, 1.6vw, 28px);
  --breadcrumb-bottom-space: clamp(12px, 1.1vw, 18px);
  --breadcrumb-font-size: clamp(12px, .82vw, 13px);
  --breadcrumb-font-weight: 700;
  --breadcrumb-line-height: 1.8;
  --breadcrumb-color: #667085;
  --breadcrumb-current-color: var(--color-primary, #111827);
  --breadcrumb-separator-color: #a2a7af;
  --breadcrumb-hover-color: var(--color-primary, #111827);
  --breadcrumb-focus-ring: rgba(17, 24, 39, .16);
}

/* Wrapper used once per page, outside hero and directly below the header. */
.aynazi-breadcrumb-section {
  direction: rtl;
  width: min(100% - var(--breadcrumb-inline-gap), var(--breadcrumb-container-width));
  max-width: var(--breadcrumb-container-width);
  margin-inline: auto;
  padding-top: var(--breadcrumb-top-space);
  margin-bottom: var(--breadcrumb-bottom-space);
}

/* Main reusable breadcrumb component. */
.aynazi-breadcrumb {
  direction: rtl;
  display: block;
  width: 100%;
  color: var(--breadcrumb-color);
  font-size: var(--breadcrumb-font-size);
  font-weight: var(--breadcrumb-font-weight);
  line-height: var(--breadcrumb-line-height);
}

.aynazi-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aynazi-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit;
}

.aynazi-breadcrumb li:not(:last-child)::after {
  content: "‹";
  flex: 0 0 auto;
  margin-inline: 10px;
  color: var(--breadcrumb-separator-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
    transform: rotate(180deg);
}

.aynazi-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease, box-shadow .18s ease;
}

.aynazi-breadcrumb a:hover,
.aynazi-breadcrumb a:focus-visible {
  color: var(--breadcrumb-hover-color);
}

.aynazi-breadcrumb a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--breadcrumb-focus-ring);
  border-radius: 8px;
}

.aynazi-breadcrumb [aria-current="page"] {
  color: var(--breadcrumb-current-color);
  font-weight: 800;
}

/* Prevent long product/page titles from breaking the layout on narrow screens. */
.aynazi-breadcrumb li:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .aynazi-breadcrumb-section {
    width: min(100% - var(--breadcrumb-inline-gap-mobile), var(--breadcrumb-container-width));
    padding-top: 18px;
    margin-bottom: 12px;
  }

  .aynazi-breadcrumb ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .aynazi-breadcrumb ol::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .aynazi-breadcrumb-section {
    width: min(100% - 28px, var(--breadcrumb-container-width));
    padding-top: 14px;
    margin-bottom: 10px;
  }

  .aynazi-breadcrumb {
    font-size: 12px;
  }

  .aynazi-breadcrumb li:not(:last-child)::after {
    margin-inline: 8px;
  }
}