/* =============================================================================
   Centralized Breadcrumb Styles
   Used across all pages: catalog, product, blog, faq, etc.
   Uses theme.css variables for consistency
   ============================================================================= */

/* Base breadcrumb container */
.breadcrumb,
.catalog-breadcrumb,
.product-breadcrumb,
.blog-breadcrumb,
.faq-breadcrumb,
.page-breadcrumb {
    background-color: #ffffff;
    padding: 0.875rem 0;
}

/* Breadcrumb inner container */
.breadcrumb .container,
.catalog-breadcrumb .container,
.product-breadcrumb .container,
.blog-breadcrumb .container,
.faq-breadcrumb .container,
.page-breadcrumb .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--breadcrumb-font-size, 0.8125rem);
    color: var(--theme-text-muted, #6b7280);
}

/* Breadcrumb links */
.breadcrumb a,
.catalog-breadcrumb a,
.product-breadcrumb a,
.blog-breadcrumb a,
.faq-breadcrumb a,
.page-breadcrumb a {
    color: var(--theme-text-muted, #6b7280);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover,
.catalog-breadcrumb a:hover,
.product-breadcrumb a:hover,
.blog-breadcrumb a:hover,
.faq-breadcrumb a:hover,
.page-breadcrumb a:hover {
    color: var(--theme-primary, #e43131);
}

/* Separator between items */
.breadcrumb .separator,
.catalog-breadcrumb .separator,
.product-breadcrumb .separator,
.blog-breadcrumb .separator,
.faq-breadcrumb .separator,
.page-breadcrumb .separator {
    color: var(--theme-border-light, #d1d5db);
}

/* Current page (last item) */
.breadcrumb .current,
.catalog-breadcrumb .current,
.product-breadcrumb .current,
.blog-breadcrumb .current,
.faq-breadcrumb .current,
.page-breadcrumb .current {
    color: var(--theme-text-primary, #1f2937);
    font-weight: 500;
}

/* Home icon in breadcrumb */
.breadcrumb .home-icon,
.catalog-breadcrumb .home-icon,
.product-breadcrumb .home-icon,
.blog-breadcrumb .home-icon,
.faq-breadcrumb .home-icon,
.page-breadcrumb .home-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .breadcrumb .container,
    .catalog-breadcrumb .container,
    .product-breadcrumb .container,
    .blog-breadcrumb .container,
    .faq-breadcrumb .container,
    .page-breadcrumb .container {
        font-size: var(--breadcrumb-font-size-mobile, 0.75rem);
        gap: 0.375rem;
    }
}