@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

/* ILP Fund Overview styles */
.ilp-overview {
    font-family: "Open Sans", Arial, sans-serif;
    padding: 80px 0 80px;
}
.ilp-overview .container-custom {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 100px;
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────── */
.ilp-overview-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}
.ilp-overview .fz-h1 {
    font-size: 32px;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.64px;
}
.ilp-overview .fz-h1 b  { font-weight: 600; }
.ilp-overview .fz-h1 span { font-weight: 300; }
@media (min-width: 992px) {
    .ilp-overview .fz-h1 { font-size: 32px; line-height: 1.2; }
}
.ilp-updated-date {
    color: #1c1d1b;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.36px;
    line-height: 1.5;
    margin: 0;
}

/* ── Buttons ─────────────────────────────────────────── */
.ilp-default-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1.5px solid #000;
    color: #000;
    background: transparent;
    border-radius: 32px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.ilp-default-btn:hover,
.ilp-default-btn.active {
    background: #000;
    color: #fff;
    text-decoration: none;
}
.ilp-default-btn .count:not(:empty)::before { content: "("; }
.ilp-default-btn .count:not(:empty)::after  { content: ") "; }

/* ── Self-contained flex layout (no Bootstrap dependency) ── */
.ilp-overview .ilp-select-dropdown {
    display: flex !important;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}
.ilp-overview .ilp-select-dropdown > .ilp-select-item {
    /* Distribute evenly across however many filters are shown (4 or 5). */
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}
.ilp-sort-wrapper .row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 48px;
    margin: 0;
}
.ilp-item .row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    min-height: 72px;
}

/* ── Desktop filter dropdowns ────────────────────────── */
.ilp-select-dropdown-wrapper { margin: 0 0 16px; }
.ilp-reset-btn { margin-bottom: 24px; text-align: center; }
.ilp-select-item { position: relative; margin-bottom: 8px; }
.ilp-select-item label { font-size: 12px; color: #1c1d1b; margin-bottom: 6px; display: block; font-weight: 600; }
.ilp-select {
    border: 1px solid #696b68;
    border-radius: 8px;
    padding: 13px 40px 13px 16px;
    cursor: pointer;
    background: #fff;
    user-select: none;
    position: relative;
    font-size: 14px;
    color: #1c1d1b;
    height: 48px;
    box-sizing: border-box;
    line-height: 1.5;
}
.ilp-select-item.has-selection .ilp-select { border-color: #1c1d1b; }
.ilp-select-item.has-selection .ilp-select .selected { font-weight: 600; color: #1c1d1b; }
/* Show the chosen value on one line; clip long values with an ellipsis.
   The 40px right padding on .ilp-select keeps the text clear of the chevron. */
.ilp-select .selected {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ilp-select::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #696b68;
    pointer-events: none;
}
.ilp-select-option {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #696b68;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
/* Align dropdown panel width with the visible select field (exclude column gutters). */
.ilp-overview .ilp-select-dropdown > .ilp-select-item .ilp-select-option {
    left: 12px;
    right: 12px;
}
.ilp-select-item.open .ilp-select-option { display: block; }
.ilp-opt-item { padding: 8px 12px; }
.ilp-opt-item:hover { background: #f5f5f5; }

/* ── Checkbox / Radio ─────────────────────────────────── */
.ilp-checkbox, .ilp-radio-button {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    padding: 4px 12px;
}
.ilp-checkbox input, .ilp-radio-button input { margin: 4px; cursor: pointer; }
.checkbox-title { flex: 1; }

/* Title + descriptive caption stacked (share class + asset class parents). The checkbox must
   sit on the title's line (not vertically centred against the 2-line block), so top-align any
   captioned row; the caption then flows directly beneath the title. */
.ilp-checkbox-text { display: flex; flex-direction: column; flex: 1; }
.ilp-checkbox-text .checkbox-title { flex: 0 0 auto; }
.ilp-checkbox.has-caption,
.ilp-checkbox.ilp-asset-parent { align-items: flex-start; }
/* The dropdown field-label rule `.ilp-select-item label { display:block }` (0,1,1) also matches
   these option labels and outranks `.ilp-checkbox { display:flex }`, stacking the checkbox above
   the text. Restore the flex row with a higher-specificity selector (applies in the dropdowns). */
.ilp-select-item label.ilp-checkbox { display: flex; }
.lbl-caption { font-weight: 400; }
.lbl-caption { font-size: 12px; color: #6b6b6b; line-height: 1.35; margin-top: 2px; }

/* ── Asset class type — 2-level tree ──────────────────── */
.ilp-opt-item { border-bottom: 1px solid #f0f0f0; }
.ilp-opt-item:last-child { border-bottom: 0; }
.ilp-asset-parent-row { display: flex; align-items: flex-start; }
.ilp-asset-parent-row .ilp-asset-parent { flex: 1; }
.ilp-asset-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    color: #333;
    display: flex;
    align-items: center;
    align-self: stretch;
    transition: transform 0.15s ease;
}
.ilp-opt-item.expanded > .ilp-asset-parent-row .ilp-asset-toggle { transform: rotate(180deg); }
.ilp-opt-item-sub { display: none; padding-left: 28px; }
.ilp-opt-item.expanded > .ilp-opt-item-sub { display: block; }

/* ── Column visibility — toggled from the component dialog ── */
/* Each hides both the header cell and every row cell for that column (they share the class).
   These must outrank the layout rules that force the cells back to `display:flex`:
   `.ilp-sort-wrapper .col` (same specificity, declared later — this is why header cells used
   to stay visible while row cells hid) and the breakpoint rules `.ilp-col-sm`/`.ilp-col-xs`
   { display:flex !important }. Hence `.ilp-overview` prefix (0,3,0) + !important. */
.ilp-overview.ilp-hide-1y .ilp-col-1y,
.ilp-overview.ilp-hide-3y .ilp-col-3y,
.ilp-overview.ilp-hide-5y .ilp-col-5y,
.ilp-overview.ilp-hide-dividend .ilp-col-dividend,
.ilp-overview.ilp-hide-currency .ilp-col-currency,
.ilp-overview.ilp-hide-factsheet .ilp-col-factsheet { display: none !important; }

/* ── Sort header (table header) ──────────────────────── */
.ilp-sort-wrapper {
    background-color: #68737a;
    border-radius: 4px 4px 0 0;
    padding: 0 24px;
    margin-bottom: 0;
}
.ilp-sort-wrapper .col,
.ilp-sort-wrapper [class*="col-"] { display: flex; align-items: center; padding-top: 16px; padding-bottom: 16px; }

.ilp-sort-name, .ilp-sort-year, .ilp-sort-div {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.32px;
    gap: 8px;
    align-items: center;
    display: flex;
    white-space: nowrap;
}
.ilp-sort-name:hover, .ilp-sort-year:hover, .ilp-sort-div:hover { color: #f0c0c0; text-decoration: none; }

.ilp-sort-header-label {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.32px;
}

/* Sort icons — arrow-up-line top-left / arrow-down-line bottom-right (matches Figma diagonal layout) */
.icon-up-down {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    overflow: hidden;
}
.icon-up-down .up,
.icon-up-down .down {
    position: absolute;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    border: none;
}
.icon-up-down .up {
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7.828V20h-2V7.828L4.929 13.9 3.515 12.485 12 4l8.485 8.485-1.414 1.415L13 7.828z'/%3E%3C/svg%3E");
}
.icon-up-down .down {
    bottom: 0;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 16.172L4.929 10.1 3.515 11.515 12 20l8.485-8.485-1.414-1.414L13 16.172V4h-2v12.172z'/%3E%3C/svg%3E");
}
.ilp-sort-name.sort-asc .up,
.ilp-sort-year.sort-asc .up,
.ilp-sort-div.sort-asc .up    { opacity: 1; }
.ilp-sort-name.sort-desc .down,
.ilp-sort-year.sort-desc .down,
.ilp-sort-div.sort-desc .down { opacity: 1; }

/* Tooltips */
.ilp-tooltip { display: none; }

/* Column sizing helpers */
.ilp-col-name { flex: 2 1 0 !important; min-width: 0; }
.ilp-col-perf { flex: 1 1 0 !important; min-width: 0; }
.ilp-col-sm   { flex: 1 1 0 !important; min-width: 0; }
.ilp-col-xs   { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; justify-content: center; }

/* ── Fund rows ───────────────────────────────────────── */
.ilp-item {
    border-bottom: 1px solid #ebebeb;
    padding: 0 24px;
    transition: background .15s;
}
.ilp-item:nth-child(odd)  { background: #fff; }
.ilp-item:nth-child(even) { background: #f8f9fb; }
.ilp-item:hover { background: #f0f0f0; }
.ilp-item .row > .col,
.ilp-item .row > [class*="col-"] { padding-top: 20px; padding-bottom: 20px; }

/* Mirror header column sizing on rows */
.ilp-item .ilp-col-name { flex: 2 1 0 !important; min-width: 0; }
.ilp-item .ilp-col-perf { flex: 1 1 0 !important; min-width: 0; }
.ilp-item .ilp-col-sm   { flex: 1 1 0 !important; min-width: 0; }
.ilp-item .ilp-col-xs   { flex: 0 0 80px !important; width: 80px !important; max-width: 80px !important; justify-content: center; }

.ilp-fund-name-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ilp-fund-arrow {
    color: #da291c;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
}
.ilp-fund-name {
    font-weight: 400;
    font-size: 16px;
    color: #da291c;
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: -0.32px;
}
.ilp-fund-name:hover { text-decoration: underline; color: #da291c; }

.item-label { display: none; font-size: 11px; color: #888; }
.item-value { font-size: 16px; }
/*.co-green { color: #22a84b; font-weight: 600; }
.co-red   { color: #e8000d; font-weight: 600; }*/
.co-green { color: #1FB566; font-weight: 400; }
.co-red   { color: #da291c; font-weight: 400; }
.ilp-cell-dash { color: #333; font-size: 16px; }

/* Dividend column tick (parity with old site's icon-check) */
.ilp-dividend-yes { display: inline-flex; align-items: center; color: #333; }
.ilp-dividend-check { display: block; }

/* Factsheet "→ View" link */
.factsheet-view-link {
    color: #da291c;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.factsheet-view-link:hover { text-decoration: none; color: #da291c; }
.factsheet-view-link .fv-arrow { font-size: 15px; }

/* Compare button — filled red circle (override shared CSS specificity with !important) */
.compare-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #da291c !important;
    color: #fff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto;
    padding: 0 !important;
    transition: background .2s, opacity .2s;
    flex-shrink: 0;
}
.compare-btn:hover { background: #b5220f !important; }
.compare-btn.added { background: #b5220f !important; }
.compare-btn.added:hover { background: #9a1c0c !important; }
.compare-btn.max-reached { background: #68737a !important; cursor: not-allowed; }
.compare-btn.max-reached:hover { background: #68737a !important; }
.compare-btn.currency-locked { background: #68737a !important; cursor: not-allowed; }
.compare-btn.currency-locked:hover { background: #68737a !important; }

/* ── Pagination ──────────────────────────────────────── */
.ilp-btn-opt { margin: 24px 0; text-align: center; }
.ilp-btn-opt a { margin: 0 8px; }
.ilp-item.hidden { display: none; }

/* ── No results ──────────────────────────────────────── */
.ilp-no-result p { font-size: 16px; color: #555; }

/* ── Compare selected bar ────────────────────────────── */
.ilp-compare-selected {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 200;
    box-shadow: 0px -24px 38px 0px rgba(0,59,92,0.04);
}
.ilp-compare-top {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ilp-compare-bottom {
    border-top: 1px solid #ebebeb;
    padding: 24px 100px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.ilp-compare-count {
    font-size: 18px;
    margin: 0;
    color: #1c1d1b;
    font-weight: 400;
    letter-spacing: -0.36px;
}
.ilp-count-highlight {
    color: #da291c;
    font-weight: 600;
}
.ilp-selected-funds {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ilp-selected-funds::-webkit-scrollbar { display: none; }
.ilp-selected-tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    background: #eff0f1;
    border-radius: 96px;
    padding-left: 20px;
    padding-right: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #1c1d1b;
    letter-spacing: -0.32px;
    line-height: 1.5;
    max-width: 300px;
}
.ilp-selected-tag button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background .15s;
}

.ilp-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ilp-compare-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.compare-selected-funds-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #da291c;
    color: #fff;
    border-radius: 96px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, opacity .2s;
    white-space: nowrap;
}
.compare-selected-funds-btn:hover { background: #b5220f; color: #fff; text-decoration: none; }
.compare-selected-funds-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
.clear-selected-funds-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 2px solid #373a36;
    border-radius: 96px;
    color: #373a36;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}
.clear-selected-funds-btn:hover { border-color: #da291c; color: #da291c; text-decoration: none; }

/* ── Mobile ──────────────────────────────────────────── */
.ilp-sort-filter-wrapper { display: none; margin-bottom: 16px; }
.ilp-filter-sms, .ilp-sort-sms {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    z-index: 300;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}
.ilp-filter-sms.open, .ilp-sort-sms.open { display: block; }
.ilp-filter-sms-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; font-size: 18px;
    cursor: pointer; color: #333;
}
.ilp-filter-sms-opt .item { margin-bottom: 20px; }
.ilp-filter-sms-opt .item > p { font-weight: 600; margin-bottom: 8px; }
.ilp-filter-sms-btn { border-top: 1px solid #eee; padding-top: 16px; margin-top: 8px; }
.ilp-filter-sms-btn .row { display: flex !important; gap: 12px; margin: 0; }
.ilp-filter-sms-btn .col-auto { flex: 1; padding: 0; }
.ilp-sms-reset, .ilp-sms-apply {
    display: block;
    width: 100%;
    padding: 10px 24px;
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background .2s, color .2s, border-color .2s;
}
.ilp-sms-reset { border: 1.5px solid #333; background: #fff; color: #333; }
.ilp-sms-reset:hover { border-color: #da291c; color: #da291c; }
.ilp-sms-apply { border: none; background: #da291c; color: #fff; }
.ilp-sms-apply:hover { background: #b5220f; }

.ilp-footnote { font-size: 12px; color: #888; }
.ilp-loading { color: #888; }

/* ── Tablet (768–991px): horizontal-scroll table, all columns visible ── */
@media (min-width: 768px) and (max-width: 991px) {
    .ilp-overview .container-custom { padding-left: 24px; padding-right: 24px; }
    .ilp-compare-top,
    .ilp-compare-bottom { padding-left: 24px; padding-right: 24px; }

    /* Table wrapper: edge-to-edge horizontal scroll */
    .ilp-item-list-wrapper {
        margin-left: -24px;
        margin-right: -24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ilp-btn-opt  { padding: 0 24px; }
    .ilp-footnote { padding: 0 24px; }

    /* Sort header: no outer border-radius, min-width forces scroll */
    .ilp-sort-wrapper { border-radius: 0; padding: 0; min-width: 1000px; }
    .ilp-sort-wrapper .row {
        display: flex !important;
        flex-wrap: nowrap;
        min-width: 1000px;
        min-height: 48px;
        margin: 0;
    }

    /* Fund rows */
    .ilp-item { padding: 0; }
    .ilp-item .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 1000px;
        align-items: center;
    }

    /* Fund name: sticky left */
    .ilp-col-name,
    .ilp-item .ilp-col-name {
        flex: 0 0 220px !important;
        width: 220px !important;
        max-width: 220px !important;
        position: sticky;
        left: 0;
        z-index: 2;
        padding-left: 24px;
        padding-right: 8px;
        box-shadow: 2px 0 6px rgba(0,0,0,.06);
        overflow: hidden;
    }
    .ilp-item:nth-child(odd)  .ilp-col-name { background: #fff; }
    .ilp-item:nth-child(even) .ilp-col-name { background: #f8f9fb; }
    .ilp-item:hover           .ilp-col-name { background: #f0f0f0; }
    .ilp-sort-wrapper         .ilp-col-name { background: #68737a; z-index: 3; }

    /* Performance columns */
    .ilp-col-perf,
    .ilp-item .ilp-col-perf {
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
    }

    /* Sm columns: show */
    .ilp-col-sm,
    .ilp-item .ilp-col-sm {
        display: flex !important;
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
    }

    /* Compare column: show */
    .ilp-col-xs,
    .ilp-item .ilp-col-xs {
        display: flex !important;
        flex: 0 0 80px !important;
        width: 80px !important;
        max-width: 80px !important;
    }
}

/* ── Mobile (≤767px): horizontal-scroll table ─────────────
   Matches Figma: fund name 200px sticky-left, each data
   column 120px wide, full table scrolls horizontally.      */
@media (max-width: 767px) {

    /* Section & container */
    .ilp-overview { padding: 40px 0 80px; }
    .ilp-overview .container-custom { padding-left: 16px; padding-right: 16px; }

    /* Heading */
    .ilp-overview .fz-h1 { font-size: 22px; line-height: 1.2; letter-spacing: -0.44px; }
    .ilp-updated-date { font-size: 14px; letter-spacing: -0.28px; }

    /* Show mobile filter/sort buttons, hide desktop dropdowns */
    .ilp-sort-filter-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .ilp-sort-filter-wrapper .ilp-default-btn { flex: 1; text-align: center; }
    .ilp-select-dropdown-wrapper { display: none; }

    /* Table wrapper: break out of container padding → edge-to-edge scroll */
    .ilp-item-list-wrapper {
        margin-left: -16px;
        margin-right: -16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination + footnote: restore indent inside the wrapper */
    .ilp-btn-opt { padding: 0 16px; }
    .ilp-footnote { padding: 0 16px; }

    /* Sort header: SHOW on mobile, full table width, no outer border-radius */
    .ilp-sort-wrapper { display: block !important; border-radius: 0; padding: 0; min-width: 1000px; }
    .ilp-sort-wrapper .row {
        display: flex !important;
        flex-wrap: nowrap;
        min-width: 1000px;
        min-height: 44px;
        margin: 0;
    }

    /* Fund rows: no wrapping, full table width */
    .ilp-item { padding: 0; background: none; }
    .ilp-item:nth-child(odd)  { background: #fff; }
    .ilp-item:nth-child(even) { background: #f8f9fb; }
    .ilp-item .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 1000px;
        min-height: 75px;
        align-items: center;
    }
    .ilp-item .row > .col,
    .ilp-item .row > [class*="col-"] { padding-top: 20px; padding-bottom: 20px; }

    /* ── Column widths ── */
    /* Fund name: sticky left, truncate overflow */
    .ilp-col-name,
    .ilp-item .ilp-col-name {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        position: sticky;
        left: 0;
        z-index: 2;
        padding-left: 16px;
        padding-right: 8px;
        box-shadow: 2px 0 6px rgba(0,0,0,.06);
        overflow: hidden;
    }
    .ilp-item:nth-child(odd)  .ilp-col-name { background: #fff; }
    .ilp-item:nth-child(even) .ilp-col-name { background: #f8f9fb; }
    .ilp-item:hover .ilp-col-name { background: #f0f0f0; }
    .ilp-sort-wrapper .ilp-col-name { background: #68737a; z-index: 3; }

    /* Truncate long fund names on mobile */
    .ilp-fund-name-cell { overflow: hidden; }
    .ilp-fund-name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

    /* Performance columns */
    .ilp-col-perf,
    .ilp-item .ilp-col-perf {
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        min-width: 0;
    }

    /* Sm columns (Dividend, Currency, Factsheet): show + fixed width */
    .ilp-col-sm,
    .ilp-item .ilp-col-sm {
        display: flex !important;
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        min-width: 0;
    }

    /* Compare column: show + fixed width */
    .ilp-col-xs,
    .ilp-item .ilp-col-xs {
        display: flex !important;
        flex: 0 0 80px !important;
        width: 80px !important;
        max-width: 80px !important;
    }

    /* Column headers visible — hide per-cell labels */
    .item-label { display: none; }

    /* Compare bar */
    .ilp-compare-top,
    .ilp-compare-bottom { padding-left: 16px; padding-right: 16px; }
    .ilp-compare-top { gap: 8px; padding-top: 14px; padding-bottom: 14px; }
    .ilp-compare-bottom { padding-top: 14px; padding-bottom: 14px; }
    .ilp-compare-count { font-size: 16px; cursor: default; }
    .ilp-compare-actions { flex-wrap: wrap; gap: 12px; }
    .compare-selected-funds-btn,
    .clear-selected-funds-btn { font-size: 14px; padding: 10px 20px; }

    /* Tags row — override desktop max-width + font size */
    .ilp-selected-tag {
        max-width: 220px;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 4px;
    }
    .ilp-selected-tag button { width: 40px; height: 40px; padding: 8px; }
}