.sp-head .sp-pill{ display:inline-block; padding:3px 10px; border-radius:999px; background:#eef2ff; margin-right:6px; font-weight:600;}
.sp-head .sp-pill--muted{ background:#f3f4f6; }
.sp-badge{ display:inline-block; padding:2px 8px; border:1px solid #e5e7eb; border-radius:999px; margin-left:6px; }

.sp-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:12px; }
.sp-kv{ list-style:none; padding:0; margin:0; }
.sp-kv li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed #e5e7eb; }
.sp-kv li span{ color:#6b7280; }
.sp-list{ list-style:disc; margin:0 0 0 18px; }
.single-content p{ margin-bottom:1rem; }

/* ===== Ship Project — pretty single ===== */
.content-wrap { --sp-bg:#fff; --sp-border:#e5e7eb; --sp-muted:#667085; --sp-accent:#1f6feb; --sp-soft:#f7f8fa; }

/* header badges */
.sp-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sp-pill{
    display:inline-block; padding:4px 10px; border-radius:999px;
    background:#eef2ff; color:#243a73; font-weight:600; font-size:.85rem;
    border:1px solid #e0e7ff;
}
.sp-pill--muted{ background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.sp-badge{
    display:inline-block; padding:3px 9px; border-radius:999px;
    border:1px solid var(--sp-border); background:var(--sp-soft); font-weight:600; font-size:.85rem;
}
.sp-flag{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:8px; font-weight:700; font-size:.85rem; }
.sp-flag--verified{ background:#e9f9ef; color:#157f3b; border:1px solid #bce7c9; }
.sp-flag--partner{  background:#fff6e6; color:#9a6700; border:1px solid #ffe0a3; }

/* section titles */
.content-wrap h3.h5,
.content-wrap h3{ font-size:1.15rem; font-weight:800; margin:24px 0 12px; letter-spacing:.2px; }
.content-wrap h3.h5::after{
    content:""; display:block; height:2px; width:40px; margin-top:6px;
    background:linear-gradient(90deg,var(--sp-accent),transparent);
}

/* two cards grid */
.sp-grid2{
    display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0 8px;
}
.sp-grid2>div{
    background:var(--sp-bg); border:1px solid var(--sp-border); border-radius:14px; padding:14px;
    box-shadow:0 1px 0 rgba(16,24,40,.03);
}

/* key–value table */
.sp-kv{ list-style:none; margin:0; padding:0; }
.sp-kv li{
    display:grid; grid-template-columns: 1fr auto; align-items:center;
    gap:14px; padding:8px 0; position:relative;
}
.sp-kv li + li{ border-top:1px dashed var(--sp-border); }
.sp-kv li span{ color:var(--sp-muted); }
.sp-kv li b{ font-weight:700; }

/* bullet lists (repeaters) */
.sp-list{ margin:0; padding-left:18px; }
.sp-list li{ margin:6px 0; }
.sp-list li::marker{ color:var(--sp-accent); }

/* content text */
.single-content{ color:#111827; line-height:1.7; }
.single-content p{ margin:0 0 1rem; }

/* back button */
a.btn.btn-link.p-0{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; border:1px solid var(--sp-border); border-radius:10px;
    text-decoration:none; font-weight:600;
}
a.btn.btn-link.p-0:hover{ border-color:#cbd5e1; background:#f8fafc; }

/* ===== Grouped section cards under each section heading ===== */
.content-wrap h3 + .sp-list,
.content-wrap h3 + p {
    background: var(--sp-soft, #f7f8fa);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-left: 4px solid var(--sp-accent, #1f6feb);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 8px;
    box-shadow: 0 1px 0 rgba(16,24,40,.03);
}

/* компактнее для одиночной строки (DP/LARS/Transportation), но можно и для списков */
.content-wrap h3 + p { padding: 10px 14px; }

/* ===== Make list items look like neat chips/rows ===== */
.sp-list {
    list-style: none;           /* убираем браузерные маркеры */
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 8px;                   /* расстояние между «чипами» */
}

.sp-list li {
    background: #fff;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 10px;
    padding: 8px 12px 8px 36px;
    position: relative;
    line-height: 1.5;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

/* кастомный маркер */
.sp-list li::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sp-accent, #1f6feb);
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(31,111,235,.12);
}

/* лёгкая зебра на больших списках */
.sp-list li:nth-child(2n) { background: #fbfdff; }

/* hover/active */
.sp-list li:hover {
    background: #f8fbff;
    border-color: #d6e4ff;
}
.sp-list li:active { transform: translateY(1px); }

/* ===== Tighten spacing between grouped blocks ===== */
.content-wrap h3 { margin-bottom: 6px; }
.content-wrap h3 + .sp-list li + li { margin-top: 0; }

/* ===== Dark mode polish (если используется prefers-color-scheme) ===== */
@media (prefers-color-scheme: dark){
    .content-wrap h3 + .sp-list,
    .content-wrap h3 + p {
        background: var(--sp-soft, #0f1827);
        border-color: var(--sp-border, #23324a);
    }
    .sp-list li {
        background: #0b1220;
        border-color: var(--sp-border, #23324a);
    }
    .sp-list li:nth-child(2n) { background: #0d1524; }
}


/* responsive */
@media (max-width: 992px){
    .sp-grid2{ grid-template-columns:1fr; }
}
@media (prefers-color-scheme: dark){
    .content-wrap{ --sp-bg:#0b1220; --sp-border:#23324a; --sp-muted:#9aa7bd; --sp-soft:#0f1827; }
    .sp-pill{ background:#1b2440; border-color:#2a3a6b; color:#cbd5ff; }
    .sp-pill--muted{ background:#111827; border-color:#1f2937; color:#e5e7eb; }
    .sp-badge{ background:#0f1827; border-color:#23324a; color:#e5e7eb; }
    .sp-grid2>div{ box-shadow:none; }
    .content-wrap h3.h5::after{ opacity:.7; }
    a.btn.btn-link.p-0{ border-color:#23324a; color:#e5e7eb; }
    a.btn.btn-link.p-0:hover{ background:#0f1827; }
}


@media screen and (max-width: 860px){
    /* базово всё закрыто */
    .nav-menu .sub-menu{
        display: none !important;
        padding-left: 16px !important;
        position: static !important;
        box-shadow: none !important;
        visibility: visible !important; /* на случай theme-хака через visibility */
        opacity: 1 !important;          /* и через opacity */
    }

    /* убираем любые hover-раскрытия темы */
    .nav-menu .menu-item-has-children:hover > .sub-menu{
        display: none !important;
    }

    /* открываем только у .open */
    .nav-menu .menu-item.open > .sub-menu{
        display: block !important; /* или flex, если нужно колонками — но обычно block */
    }

    /* обёртка и кликабельный чеврон */
    .jr_chevron_link_wrap{ display:flex !important; align-items:center !important; gap:6px !important; }
    .jr_chevron{
        width:28px !important; height:28px !important; margin-left:8px !important;
        cursor:pointer !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
        user-select:none !important;
    }
    .jr_chevron::before{
        content:"" !important; width:8px !important; height:8px !important; display:block !important;
        border-right:2px solid currentColor !important; border-bottom:2px solid currentColor !important;
        transform: rotate(45deg) !important; transition: transform .2s ease !important;
    }
    .nav-menu .menu-item.open > .jr_chevron_link_wrap > .jr_chevron::before{
        transform: rotate(225deg) !important;
    }
}