/* ================================================================
   麵包屑 Breadcrumb
   - 統一視覺、行動版橫滾、最後項灰色不可點
   - 蓋掉 common.css / shop-enhancements.css / shopContent_design.css / member_style.css 的舊規則
   ================================================================ */

.breadcrumb-wrap {
    max-width: 1400px;
    margin: 12px auto 18px;
    padding: 0 20px;
    overflow: hidden; /* 包住內部橫滾條 */
    box-sizing: border-box;
}

ul.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-wrap: nowrap;          /* 不換行，超出橫滾 */
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 隱藏 scrollbar 但保留滑動功能 */
    scrollbar-width: none;
    background: transparent;    /* 蓋掉 bootstrap 預設 */
    font-size: 13px;
    line-height: 1.5;
    color: #888;
}
ul.breadcrumb::-webkit-scrollbar { display: none; }

ul.breadcrumb li.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 220px;          /* 單項過長截斷 */
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.breadcrumb li.breadcrumb__item a {
    color: #5d6878;
    text-decoration: none;
    padding: 4px 2px;
    transition: color .15s ease-out;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul.breadcrumb li.breadcrumb__item a:hover {
    color: #333;
    text-decoration: underline;
}

/* 分隔符號 ›（在每個 li 之間，除了第一個） */
ul.breadcrumb li.breadcrumb__item + li.breadcrumb__item::before {
    content: '›';
    color: #c0c0c0;
    margin: 0 8px;
    font-weight: 400;
    flex-shrink: 0;
}

/* 最後一項：當前頁，灰色、不可點 */
ul.breadcrumb li.breadcrumb__item.is-current {
    color: #999;
    font-weight: 500;
}
ul.breadcrumb li.breadcrumb__item.is-current span {
    cursor: default;
}

/* 行動版：放大可點區域、留邊距 */
@media (max-width: 576px) {
    .breadcrumb-wrap {
        padding: 0 12px;
    }
    ul.breadcrumb {
        padding: 8px 0;
        font-size: 12px;
    }
    ul.breadcrumb li.breadcrumb__item {
        max-width: 160px;
    }
    ul.breadcrumb li.breadcrumb__item a {
        max-width: 160px;
        padding: 6px 2px;
    }
}

/* 列印不顯示 */
@media print {
    .breadcrumb-wrap { display: none !important; }
}