/* ═══════════════════════════════════════════════════════════
   HEADER BASE
═══════════════════════════════════════════════════════════ */
.ob-header { position:sticky; top:0; z-index:1000; background:var(--ob-surface,#fff);
    border-bottom:1px solid var(--ob-surface-container-high,#e8e8e8);
    box-shadow:0 1px 4px rgba(0,0,0,.06); }
.ob-header-inner { display:grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items:center; gap:.75rem; height:60px; }

/* ═══════════════════════════════════════════════════════════
   MEGA NAV — DESKTOP
═══════════════════════════════════════════════════════════ */
.ob-mega-nav { display:flex; align-items:center; gap:2px; flex-shrink:0; }

/* Trigger button */
.ob-mega-trigger { display:inline-flex; align-items:center; gap:2px;
    background:none; border:none; cursor:pointer;
    font-family:inherit; font-size:.875rem; font-weight:500;
    color:var(--ob-on-surface); padding:6px 10px; border-radius:.4rem;
    transition:background .15s, color .15s; white-space:nowrap; }
.ob-mega-trigger:hover,
.ob-mega-group[data-open] .ob-mega-trigger,
.ob-mega-trigger.is-active { background:var(--ob-surface-container-low,#f5f5f5); color:var(--ob-primary,#8f0020); font-weight:600; }
.ob-mega-chevron { font-size:16px; transition:transform .2s; }
.ob-mega-group[data-open] .ob-mega-chevron { transform:rotate(180deg); }

/* Dropdown panel */
.ob-mega-dropdown { display:none; position:absolute; top:100%; left:0;
    min-width:260px; padding:0; z-index:1001;
    background:var(--ob-surface,#fff);
    border:1px solid var(--ob-surface-container-high,#e8e8e8);
    box-shadow:0 4px 20px rgba(0,0,0,.12); border-radius:.75rem;
    overflow:hidden; margin-top:0; }
/* Puente invisible de 6px sobre el contenido para que el hover no se rompa al pasar del trigger al dropdown */
.ob-mega-dropdown::before {
    content:""; position:absolute; top:-6px; left:0; right:0; height:6px;
}
.ob-mega-group { position:relative; }
/* Apertura por hover (desktop con puntero fino) Y por click/teclado vía data-open.
   NOTA: para los dropdowns "wide" usamos display:grid; el resto usa display:block.
   Sin esta separación, .ob-mega-dropdown--wide { display:grid } sobreescribía
   el display:none base y el dropdown de "Empresas" quedaba siempre visible. */
@media (hover: hover) and (pointer: fine) {
    .ob-mega-group:hover > .ob-mega-dropdown { display:block; }
    .ob-mega-group:hover > .ob-mega-dropdown--wide { display:grid; }
    .ob-mega-group:hover > .ob-mega-trigger { background:var(--ob-surface-container-low,#f5f5f5); color:var(--ob-primary,#8f0020); font-weight:600; }
    .ob-mega-group:hover > .ob-mega-trigger .ob-mega-chevron { transform:rotate(180deg); }
}
.ob-mega-group[data-open] > .ob-mega-dropdown { display:block; }
.ob-mega-group[data-open] > .ob-mega-dropdown--wide { display:grid; }

/* Single-column: actions fill full width */
.ob-mega-dropdown-actions { padding:.5rem; }

/* Two-column layout — SOLO geometría, NO display (el display lo gestiona hover/data-open) */
.ob-mega-dropdown--wide { grid-template-columns:1fr 170px; min-width:460px; }
.ob-mega-dropdown--wide .ob-mega-dropdown-actions { border-right:0; }
.ob-mega-dropdown-quick {
    border-left:1px solid var(--ob-surface-container-high,#e8e8e8);
    padding:.6rem .45rem;
    display:flex; flex-direction:column; gap:1px;
    background:var(--ob-surface-container-lowest,#f9f9f9);
}
.ob-mega-quick-title {
    font-size:.68rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ob-on-surface-variant);
    padding:.15rem .5rem .4rem; display:block;
}
.ob-mega-quicklink {
    display:block; padding:.32rem .55rem; border-radius:.35rem;
    font-size:.8rem; font-weight:500; text-decoration:none;
    color:var(--ob-on-surface); transition:background .1s, color .1s;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ob-mega-quicklink:hover { background:var(--ob-surface-container-low,#f0f0f0); color:var(--ob-primary,#8f0020); }
.ob-mega-quicklink--more { color:var(--ob-primary,#8f0020); font-size:.75rem; margin-top:.3rem; padding-top:.3rem; border-top:1px solid var(--ob-surface-container-high,#e8e8e8); }

/* Dropdown links */
.ob-mega-link { display:flex; align-items:flex-start; gap:.65rem; padding:.55rem .65rem;
    text-decoration:none; color:var(--ob-on-surface); border-radius:.4rem;
    transition:background .12s; }
.ob-mega-link:hover,.ob-mega-link.is-active { background:var(--ob-surface-container-low,#f5f5f5); color:var(--ob-primary,#8f0020); }
.ob-mega-link-icon { font-size:18px; color:var(--ob-on-surface-variant); flex-shrink:0; margin-top:1px; }
.ob-mega-link:hover .ob-mega-link-icon,.ob-mega-link.is-active .ob-mega-link-icon { color:var(--ob-primary,#8f0020); }
.ob-mega-link-text strong { display:block; font-size:.875rem; font-weight:600; }
.ob-mega-link-text span { display:block; font-size:.75rem; color:var(--ob-on-surface-variant); line-height:1.3; margin-top:1px; }
.ob-mega-link.is-active .ob-mega-link-text strong { color:var(--ob-primary,#8f0020); }

/* Plain nav link (Precios) */
.ob-mega-plain { display:inline-flex; align-items:center; padding:6px 10px; border-radius:.4rem;
    font-size:.875rem; font-weight:500; text-decoration:none; color:var(--ob-on-surface);
    transition:background .15s, color .15s; white-space:nowrap; }
.ob-mega-plain:hover,.ob-mega-plain.is-active { background:var(--ob-surface-container-low,#f5f5f5); color:var(--ob-primary,#8f0020); }

/* ═══════════════════════════════════════════════════════════
   USER BUTTON
═══════════════════════════════════════════════════════════ */
.ob-header-user { display:flex; align-items:center; flex-shrink:0; }
.ob-header-user-btn { display:inline-flex; align-items:center; gap:4px; font-size:.875rem;
    padding:6px 12px; border-radius:20px; text-decoration:none;
    transition:background .15s, color .15s; white-space:nowrap; }
.ob-header-user-btn .material-symbols-outlined { font-size:18px; }
.ob-btn--outlined { border:1px solid currentColor; color:var(--ob-primary,#8f0020); background:transparent; }
.ob-btn--outlined:hover { background:var(--ob-primary,#8f0020); color:#fff; }
.ob-btn--ghost { color:var(--ob-on-surface); background:transparent; border:none; }
.ob-btn--ghost:hover { background:var(--ob-surface-container-low); }

/* ═══════════════════════════════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════════════════════════════════ */
.ob-mobile-toggle { display:none; background:none; border:none; cursor:pointer;
    padding:6px; border-radius:.4rem; color:var(--ob-on-surface);
    transition:background .15s; align-items:center; justify-content:center; }
.ob-mobile-toggle:hover { background:var(--ob-surface-container-low); }
.ob-mobile-toggle .material-symbols-outlined { font-size:24px; }

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
═══════════════════════════════════════════════════════════ */
.ob-mobile-nav { position:fixed; top:0; right:0; bottom:0; width:min(320px,90vw);
    background:var(--ob-surface,#fff); z-index:2000; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease; }
.ob-mobile-nav.is-open { transform:translateX(0); }
.ob-mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:1999; opacity:0; pointer-events:none; transition:opacity .25s; }
.ob-mobile-overlay.is-open { opacity:1; pointer-events:all; }
.ob-mobile-nav-inner { padding:1.25rem 1rem 2rem; }
.ob-mobile-search { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.ob-mobile-search .ob-form-input { flex:1; font-size:.9rem; padding:.55rem .75rem; }
/* Accordion */
.ob-mobile-group { border-bottom:1px solid var(--ob-surface-container-high,#eee); }
.ob-mobile-group-title { list-style:none; display:flex; align-items:center; gap:.5rem;
    padding:.75rem .25rem; font-size:.9rem; font-weight:600; cursor:pointer;
    color:var(--ob-on-surface); }
.ob-mobile-group-title .material-symbols-outlined { font-size:18px; color:var(--ob-primary,#8f0020); }
.ob-mobile-group-title::-webkit-details-marker { display:none; }
.ob-mobile-link { display:flex; align-items:center; gap:.5rem; text-decoration:none;
    color:var(--ob-on-surface); font-size:.875rem; padding:.55rem .75rem;
    border-radius:.4rem; transition:background .12s; }
.ob-mobile-link:hover { background:var(--ob-surface-container-low,#f5f5f5); }
.ob-mobile-link .material-symbols-outlined { font-size:18px; color:var(--ob-on-surface-variant); }
.ob-mobile-link--highlight { color:var(--ob-primary,#8f0020); font-weight:600; }
.ob-mobile-link--danger { color:#b00020; }
.ob-mobile-link--borme { background:var(--ob-surface-container-low,#f5f5f5); font-weight:600; border-radius:.4rem; margin-bottom:.75rem; justify-content:flex-start; gap:.5rem; }
.ob-mobile-link--borme em { font-style:normal; font-size:.78rem; opacity:.65; margin-left:auto; }
.ob-mobile-sep { border:none; border-top:1px solid var(--ob-surface-container-high,#eee); margin:1rem 0; }
/* Province chips in mobile drawer */
.ob-mobile-province-chips { display:flex; flex-wrap:wrap; gap:.35rem; padding:.4rem .25rem .9rem; }
.ob-chip { display:inline-block; padding:.28rem .6rem; border:1px solid var(--ob-surface-container-high,#e0e0e0); border-radius:20px; font-size:.78rem; font-weight:500; text-decoration:none; color:var(--ob-on-surface); transition:background .12s, color .12s, border-color .12s; white-space:nowrap; }
.ob-chip:hover { background:var(--ob-primary,#8f0020); color:#fff; border-color:var(--ob-primary,#8f0020); }
.ob-chip--more { color:var(--ob-primary,#8f0020); border-color:var(--ob-primary,#8f0020); }
/* Plan badge */
.ob-plan-badge { display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.1rem .4rem; border-radius:20px; background:var(--ob-primary,#8f0020); color:#fff; margin-left:auto; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    .ob-mega-nav, .ob-header-user { display:none; }
    .ob-mobile-toggle { display:inline-flex; }
    .ob-header-inner { grid-template-columns: auto 1fr auto; }
}
@media (max-width:520px) {
    .ob-header-search { display:none; }
    .ob-header-inner { grid-template-columns: auto auto; justify-content:space-between; gap:.5rem; height:56px; }

    /* Contenedor con padding ajustado para que la hamburguesa no quede pegada al borde */
    .ob-header .ob-container { padding-left:14px !important; padding-right:10px !important; }

    /* Logo institucional más compacto + corchetes desaturados */
    .ob-brand { font-size:19px; gap:0.12em; }
    .ob-brand-bracket { opacity:.4; }

    /* Hamburguesa: tap target 44x44, ligera respiración a la derecha */
    .ob-mobile-toggle { padding:10px; min-width:44px; min-height:44px; }
    .ob-mobile-toggle .material-symbols-outlined { font-size:26px; }
}

/* Pantallas ultra-estrechas: prescindir de corchetes y compactar más */
@media (max-width:360px) {
    .ob-brand { font-size:17px; }
    .ob-brand-bracket { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENÚ · DISEÑO NEWSPAPER INSERT
   Fraunces + granate + paper · hairlines editoriales
═══════════════════════════════════════════════════════════ */

/* Trigger principal del nav */
.ob-mega-trigger,
.ob-mega-plain {
    font-family: 'Inter','IBM Plex Sans',system-ui,sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink, #1a1410);
    padding: 8px 12px;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition: color .12s, border-color .12s;
}
.ob-mega-trigger:hover,
.ob-mega-plain:hover,
.ob-mega-group[data-open] .ob-mega-trigger,
.ob-mega-trigger.is-active,
.ob-mega-plain.is-active {
    background: transparent;
    color: var(--garnet, #8f0020);
    border-bottom-color: var(--garnet, #8f0020);
}
.ob-mega-chevron {
    font-size: 13px;
    color: currentColor;
    opacity: .55;
}

/* ─── Dropdown: insert editorial blanco sobre rule cream ─── */
.ob-mega-dropdown {
    background: #fff;
    border: 1px solid var(--rule, #e6dfce);
    border-top: none;
    border-radius: 0;
    box-shadow: 0 24px 56px -20px rgba(26,20,16,.22), 0 2px 6px rgba(26,20,16,.04);
    min-width: 340px;
    padding: 0;
    margin-top: 0;
}
/* Banda granate fina sobre el insert — hairline editorial */
.ob-mega-dropdown::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--garnet, #8f0020);
    pointer-events: none;
}
.ob-mega-dropdown--wide { grid-template-columns: 1fr 240px; min-width: 640px; }

/* ─── Columna principal: items como entradas de índice editorial ─── */
.ob-mega-dropdown-actions { padding: 18px 20px; }
.ob-mega-link {
    align-items: baseline;
    gap: 0;
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rule-soft, #efe9d8);
    background: transparent !important;
    position: relative;
    transition: padding .15s, color .15s;
}
.ob-mega-link:last-child { border-bottom: 0; }
.ob-mega-link:hover,
.ob-mega-link.is-active {
    padding-left: 10px;
    color: var(--garnet, #8f0020);
}
.ob-mega-link:hover::before,
.ob-mega-link.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 1px;
    background: var(--garnet, #8f0020);
    transform: translateY(-50%);
}

/* Ocultar iconos Material Symbols (chocan con la estética editorial) */
.ob-mega-link-icon { display: none !important; }

.ob-mega-link-text {
    display: block;
    flex: 1;
}
.ob-mega-link-text strong {
    font-family: 'Fraunces','Times New Roman',Georgia,serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink, #1a1410);
    line-height: 1.2;
    font-variation-settings: "opsz" 24;
    transition: color .15s;
}
.ob-mega-link-text span {
    font-family: 'Inter','IBM Plex Sans',sans-serif;
    font-size: 12.5px;
    color: var(--ink-muted, #7a7268);
    line-height: 1.45;
    margin-top: 4px;
}
.ob-mega-link:hover .ob-mega-link-text strong,
.ob-mega-link.is-active .ob-mega-link-text strong {
    color: var(--garnet, #8f0020);
}

/* ─── Columna derecha: quicklinks como side note del insert ─── */
.ob-mega-dropdown-quick {
    background: var(--paper, #faf7f1);
    border-left: 1px solid var(--rule, #e6dfce);
    padding: 22px 18px 18px;
    gap: 0;
    display: flex;
    flex-direction: column;
}
.ob-mega-quick-title {
    font-family: 'Inter',sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--garnet, #8f0020);
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rule, #e6dfce);
}
.ob-mega-quicklink {
    font-family: 'Fraunces','Times New Roman',serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink, #1a1410);
    padding: 7px 0;
    border-radius: 0;
    border-bottom: 1px dotted var(--rule, #e6dfce);
    font-variation-settings: "opsz" 24;
    transition: color .12s, padding .15s;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.ob-mega-quicklink:last-of-type { border-bottom: 0; }
.ob-mega-quicklink:hover {
    background: transparent;
    color: var(--garnet, #8f0020);
    padding-left: 8px;
}
.ob-mega-quicklink--more {
    font-family: 'Inter',sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--garnet, #8f0020);
    border: none !important;
    margin-top: 10px;
    padding: 8px 0 0 !important;
    text-transform: uppercase;
}
.ob-mega-quicklink--more:hover { padding-left: 8px !important; }

/* Botón de cuenta: outline editorial */
.ob-header-user-btn.ob-btn--outlined {
    border: 1px solid var(--ink, #1a1410);
    color: var(--ink, #1a1410);
    background: transparent;
    font-family: 'Inter',sans-serif;
    font-weight: 500;
    border-radius: 0;
    padding: 7px 14px;
    transition: background .12s, color .12s, border-color .12s;
}
.ob-header-user-btn.ob-btn--outlined:hover {
    background: var(--garnet, #8f0020);
    color: #fff;
    border-color: var(--garnet, #8f0020);
}

/* ═══════════════════════════════════════════════════════════
   COMPANIES LIST · SILO NAV · FAQ — globales (todas las páginas)
═══════════════════════════════════════════════════════════ */
.ob-companies-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.ob-company-item { margin:0; }
.ob-company-row {
    display:grid; grid-template-columns:44px 1fr auto 24px; gap:1rem; align-items:center;
    padding:.85rem 1rem .85rem .85rem;
    background:var(--ob-surface,#fff);
    border:1px solid var(--ob-surface-container-high,#ececec);
    border-radius:.65rem;
    text-decoration:none; color:var(--ob-on-surface);
    transition:border-color .15s, box-shadow .15s, transform .12s;
}
.ob-company-row:hover { border-color:var(--ob-primary,#8f0020); box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-1px); }
.ob-company-rank {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    background:var(--ob-surface-container-low,#fafafa);
    border-radius:.45rem;
    font-family:var(--ob-font-headline);
    font-size:.85rem; font-weight:700;
    color:var(--ob-on-surface-variant);
    letter-spacing:-.02em;
}
.ob-company-info { min-width:0; }
.ob-company-name {
    display:block; font-size:.98rem; font-weight:700; line-height:1.3;
    color:var(--ob-on-surface); margin-bottom:.15rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ob-company-meta { display:flex; flex-wrap:wrap; gap:.35rem .65rem; font-size:.8rem; color:var(--ob-on-surface-variant); align-items:center; }
.ob-company-meta-item { display:inline-flex; align-items:center; gap:.25rem; }
.ob-company-meta-item .material-symbols-outlined { font-size:14px !important; }
.ob-company-cif {
    font-family:ui-monospace,"SF Mono",Menlo,monospace;
    font-size:.75rem; background:var(--ob-surface-container-low,#fafafa);
    padding:.12rem .45rem; border-radius:.35rem;
    color:var(--ob-on-surface); font-weight:600; letter-spacing:.02em;
}
.ob-company-cnae { color:var(--cnae-color,var(--ob-on-surface-variant)); font-weight:600; }
.ob-company-cnae .material-symbols-outlined { color:var(--cnae-color,var(--ob-on-surface-variant)); }
.ob-company-capital { color:#16a34a; font-weight:600; }
.ob-company-capital .material-symbols-outlined { color:#16a34a; }
.ob-company-tag-new {
    display:inline-block; font-size:.65rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em;
    background:#16a34a; color:#fff; padding:.05rem .35rem;
    border-radius:4px; margin-left:.15rem;
}
.ob-company-stats { display:flex; flex-direction:column; align-items:flex-end; gap:0; flex-shrink:0; }
.ob-company-acts-num { font-family:var(--ob-font-headline); font-size:1.2rem; font-weight:800; color:var(--ob-primary,#8f0020); line-height:1; letter-spacing:-.02em; }
.ob-company-acts-label { font-size:.68rem; color:var(--ob-on-surface-variant); text-transform:uppercase; letter-spacing:.04em; margin-top:.1rem; }
.ob-company-arrow { color:var(--ob-on-surface-variant); font-size:20px !important; transition:transform .15s, color .15s; }
.ob-company-row:hover .ob-company-arrow { color:var(--ob-primary,#8f0020); transform:translateX(2px); }
@media (max-width:600px) {
    .ob-company-row { grid-template-columns:36px 1fr auto; gap:.65rem; padding:.7rem .8rem; }
    .ob-company-rank { width:32px; height:32px; font-size:.8rem; }
    .ob-company-name { font-size:.92rem; white-space:normal; }
    .ob-company-arrow { display:none; }
    .ob-company-acts-num { font-size:1.05rem; }
}

/* Paginación */
.ob-pagination { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:2rem 0 0; padding:1rem 0; border-top:1px solid var(--ob-surface-container-high,#ececec); }
.ob-pagination-btn {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.55rem 1.1rem; background:var(--ob-surface-container-low,#fafafa);
    border:1px solid var(--ob-surface-container-high,#ececec);
    border-radius:.55rem; font-size:.88rem; font-weight:600;
    color:var(--ob-on-surface); text-decoration:none;
    transition:border-color .15s, background .15s;
}
.ob-pagination-btn:hover { border-color:var(--ob-primary,#8f0020); background:#fff; }
.ob-pagination-btn .material-symbols-outlined { font-size:18px !important; }
.ob-pagination-info { font-size:.85rem; font-weight:600; color:var(--ob-on-surface-variant); }

/* Silo nav (footer cross-links) */
.ob-silo-nav { background:var(--ob-surface-container-low,#fafafa); border-radius:.85rem; padding:1.5rem 1.75rem; }
.ob-silo-nav-title { font-size:1rem; font-weight:700; margin:0 0 1rem; color:var(--ob-on-surface); }
.ob-silo-nav-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.65rem; }
.ob-silo-nav-card {
    display:flex; align-items:flex-start; gap:.65rem;
    padding:.9rem 1rem; background:var(--ob-surface,#fff);
    border:1px solid var(--ob-surface-container-high,#ececec);
    border-radius:.55rem; text-decoration:none; color:var(--ob-on-surface);
    transition:transform .12s, border-color .15s;
}
.ob-silo-nav-card:hover { transform:translateY(-1px); border-color:var(--ob-primary,#8f0020); }
.ob-silo-nav-card .material-symbols-outlined { font-size:22px !important; color:var(--ob-primary,#8f0020); flex-shrink:0; margin-top:1px; }
.ob-silo-nav-card strong { display:block; font-size:.9rem; font-weight:700; margin-bottom:.15rem; }
.ob-silo-nav-card span, .ob-silo-nav-card .ob-silo-desc { font-size:.78rem; color:var(--ob-on-surface-variant); display:block; line-height:1.35; }

/* Breadcrumbs (refuerzo global) */
.ob-breadcrumbs { font-size:.82rem; color:var(--ob-on-surface-variant); margin:0 0 1rem; }
.ob-breadcrumbs ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.ob-breadcrumbs li { display:inline-flex; align-items:center; }
.ob-breadcrumbs li:not(:last-child)::after { content:"›"; margin:0 .35rem; color:var(--ob-on-surface-variant); opacity:.6; }
.ob-breadcrumbs a { color:var(--ob-on-surface-variant); text-decoration:none; }
.ob-breadcrumbs a:hover { color:var(--ob-primary,#8f0020); text-decoration:underline; }
.ob-breadcrumbs li:last-child span { color:var(--ob-on-surface); font-weight:600; }