/* ============================================================
   Ca Phe In — Breadcrumbs CSS
   4 styles: simple-arrow, pill, icon-steps, dark-bar
   Bootstrap 4.3.1 compatible
   ============================================================ */

/* ── Page Header (shared across all inner pages) ── */
.cp-page-header {
    background-color: #111111;
    padding: 50px 0 44px;
    position: relative;
    overflow: hidden;
}
.cp-page-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(30%, #e8c9c1), color-stop(60%, #c9a97e), to(transparent));
    background: linear-gradient(90deg, transparent, #e8c9c1 30%, #c9a97e 60%, transparent);
}
.cp-page-header-eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 10px; font-weight: 900;
    letter-spacing: .24em; text-transform: uppercase;
    color: #c9a97e; display: block; margin-bottom: .5rem;
}
.cp-page-header-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 600; color: #ffffff; line-height: 1.1; margin: 0;
}
.cp-page-header-title em { font-style: italic; color: #e8c9c1; font-weight: 400; }


/* ============================================================
   STYLE A — SIMPLE ARROW TEXT (used on Cart page)
   Home › Order Online › Cart
   ============================================================ */
.bc-bar-white {
    background: #ffffff;
    border-bottom: 1px solid rgba(232, 201, 193, .3);
    padding: 6px 0;
}
.bc-simple {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.bc-simple li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-size: 13px; font-weight: 400;
    color: #666666;
}
.bc-simple li + li::before {
    content: '›';
    margin: 0 8px;
    color: #d4a89a;
    font-size: 15px; line-height: 1;
    opacity: .7;
}
.bc-simple li a { color: #666666; -webkit-transition: color .2s; transition: color .2s; text-decoration: none; }
.bc-simple li a:hover { color: #d4a89a; }
.bc-simple li.bc-active { font-weight: 700; color: #111111; }


/* ============================================================
   STYLE B — PILL BADGE (used on Pick Up Menu page)
   [Home] › [Pick Up Menu]
   ============================================================ */
.bc-pill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.bc-pill li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; }
.bc-pill-item {
    font-family: 'Lato', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #666666;
    background: rgba(232, 201, 193, .15);
    border: 1px solid rgba(232, 201, 193, .35);
    border-radius: 100px;
    padding: 4px 12px;
    white-space: nowrap;
    -webkit-transition: background .2s, color .2s, border-color .2s;
    transition: background .2s, color .2s, border-color .2s;
}
.bc-pill li a { text-decoration: none; }
.bc-pill li a:hover .bc-pill-item { background: rgba(232, 201, 193, .3); color: #111111; border-color: #e8c9c1; }
.bc-pill li.bc-active .bc-pill-item { background: #e8c9c1; color: #111111; border-color: #e8c9c1; font-weight: 900; }
.bc-pill-sep { color: #d4a89a; font-size: 13px; opacity: .6; }


/* ============================================================
   STYLE C — ICON STEPS (used on My Account page)
   🏠 Home › 👤 My Account
   ============================================================ */
.bc-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.bc-icon li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-size: 13px; font-weight: 400;
    color: #666666;
}
.bc-icon li + li::before {
    content: '';
    display: block;
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid rgba(212, 168, 154, .5);
    margin: 0 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.bc-icon-el {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
}
.bc-icon-el svg {
    width: 14px; height: 14px; display: block; -ms-flex-negative: 0; flex-shrink: 0;
    opacity: .5; -webkit-transition: opacity .2s; transition: opacity .2s;
}
.bc-icon li a { color: #666666; text-decoration: none; -webkit-transition: color .2s; transition: color .2s; }
.bc-icon li a:hover { color: #d4a89a; }
.bc-icon li a:hover .bc-icon-el svg { opacity: .9; }
.bc-icon li.bc-active { font-weight: 700; color: #111111; }
.bc-icon li.bc-active .bc-icon-el svg { opacity: 1; }


/* ============================================================
   STYLE D — DARK BAR (used on Order Online page)
   Matches the black navbar aesthetic
   ============================================================ */
.bc-dark-bar {
    background-color: #1a1a1a;
    padding: 11px 0;
    border-bottom: 1px solid rgba(232, 201, 193, .1);
}
.bc-dark {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bc-dark li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(237, 232, 227, .35);
}
.bc-dark li + li::before {
    content: '·';
    margin: 0 10px;
    color: #c9a97e;
    font-size: 16px; line-height: 1;
}
.bc-dark li a { color: rgba(237, 232, 227, .35); text-decoration: none; -webkit-transition: color .2s; transition: color .2s; }
.bc-dark li a:hover { color: #e8c9c1; }
.bc-dark li.bc-active { color: #e8c9c1; }


/* ── Responsive: all styles scale down on mobile ── */
@media (max-width: 575.98px) {
    .bc-simple li { font-size: 12px; }
    .bc-pill-item  { font-size: 10px; padding: 3px 10px; }
    .bc-icon li    { font-size: 12px; }
    .bc-icon-el svg { width: 12px; height: 12px; }
    .bc-dark li    { font-size: 10px; }
}