#comparision-table-container .grid-contents {
    padding: 5px 14px 14px;
    border: 2px solid var(--alice-blue-2);
    position: relative;
}

#comparision-table-container .versich-column-highlight {
    width: calc((100% - 28px) / 2);
    height: calc(100% + 36px);
    border: 1px solid var(--bleu-de-france-a10);
    box-shadow: 0 0 10px 5px var(--polynesian-blue-a10);
    border-radius: 6px;
    pointer-events: none;
    position: absolute;
    top: -18px;
    left: calc((100% - 14px) / 2);
    z-index: 1;
    overflow: hidden;
}

#comparision-table-container .versich-column-highlight::before {
    content: "";
    width: 150%;
    height: 100%;
    border: 20px solid transparent;
    border-top-color: var(--white);
    border-bottom-color: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#comparision-table-container .grid-header,
#comparision-table-container .grid-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--white);
}

#comparision-table-container .cell {
    text-align: center;
    background-color: inherit;
    padding: 16px 12px;
}

#comparision-table-container .cell.category {
    font-weight: 700;
    background-color: #e9f3fd;
    color: var(--oxford-blue);
}

#comparision-table-container .grid-header>.cell {
    font-size: 1.25rem;
    font-weight: 500;
}

#comparision-table-container .grid-header>.cell.versich {
    font-weight: 700;
    color: var(--bleu-de-france);
}

#comparision-table-container .grid-row:nth-of-type(2n-1)>.cell:not(.category) {
    background-color: #f3f6f9;
}

#comparision-table-container .cell:has(img) {
    display: flex;
    align-items: center;
}

#comparision-table-container .cell-content {
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#comparision-table-container .cell-content>img {
    width: 20px;
    height: 20px;
}

/* cols-4 */
#comparision-table-container.cols-4 .grid-header,
#comparision-table-container.cols-4 .grid-row {
    grid-template-columns: repeat(4, 1fr);
}

#comparision-table-container.cols-4 .grid-row>.cell>.cell-content,
#comparision-table-container.cols-6 .grid-row>.cell>.cell-content {
    text-align: center;
    justify-content: center;
}

#comparision-table-container.cols-4 .grid-header>.cell:not(.versich) {
    background-color: var(--alice-blue-2);
}

#comparision-table-container.cols-4 .versich-column-highlight {
    width: calc((100% - 28px) / 4);
    left: calc((100% - 28px) / 4 + 14px);
}

#comparision-table-container.cols-4 .grid-row>.cell:nth-child(3) {
    border-right: 2px solid rgba(0, 0, 0, 0.06);
}

/* cols-6 — total fractions: 1.4+1+0.8+0.8+1+1.4 = 6.4, col2 starts at 1.4fr */
#comparision-table-container.cols-6 .grid-header,
#comparision-table-container.cols-6 .grid-row {
    grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 1fr 1.4fr;
}

#comparision-table-container.cols-6 .grid-header>.cell:not(.versich) {
    background-color: var(--alice-blue-2);
}

#comparision-table-container.cols-6 .cell:has(img) {
    justify-content: center;
}

#comparision-table-container.cols-6 .cell-content>img {
    width: 18px;
    height: 18px;
}

#comparision-table-container.cols-6 .versich-column-highlight {
    width: calc((100% - 28px) * 1 / 6.4);
    left: calc((100% - 28px) * 1.4 / 6.4 + 14px);
}

#comparision-table-container.cols-6 .badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

#comparision-table-container.cols-6 .badge-success {
    background-color: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

#comparision-table-container.cols-6 .badge-warning {
    background-color: rgba(234, 179, 8, 0.15);
    color: #a16207;
}

#comparision-table-container.cols-6 .badge-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

#comparision-table-container.cols-6 .cost-bar {
    display: inline-flex;
    flex-direction: row-reverse;
}

#comparision-table-container.cols-6 .cost-bar .coin {
    width: 22px;
    height: 22px;
    margin-left: -6px;
    position: relative;
}

#comparision-table-container.cols-6 .cost-bar .coin + .coin {
    z-index: 1;
}

#comparision-table-container.cols-6 .grid-row>.cell:nth-child(5) .cell-content>span.high {
    color: #2563eb;
    font-weight: 600;
}

#comparision-table-container.cols-6 .grid-row>.cell:nth-child(5) .cell-content>span.very-high {
    color: #dc2626;
    font-weight: 600;
}

#comparision-table-container.cols-4 .grid-row>.cell:not(:last-child),
#comparision-table-container.cols-6 .grid-row>.cell:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 1360px) {
    #comparision-table-container .cell {
        font-size: 15px;
    }
}

@media (max-width: 1080px) {
    #comparision-table-container.wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #comparision-table-container .cell-content {
        width: 95%;
    }
}

@media (max-width: 900px) {
    #comparision-table-container.cols-6 .grid-contents {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #comparision-table-container.cols-6 .grid-header,
    #comparision-table-container.cols-6 .grid-row {
        grid-template-columns: 130px repeat(5, 110px);
        min-width: max-content;
    }

    #comparision-table-container.cols-6 .versich-column-highlight {
        display: none;
    }
}

@media (max-width: 800px) {
    #comparision-table-container .versich-column-highlight {
        width: calc((100% - 28px) * 4 / 7);
        left: calc((100% - 7px) * 3 / 7);
    }

    #comparision-table-container .grid-header,
    #comparision-table-container .grid-row {
        grid-template-columns: repeat(7, 1fr);
    }

    #comparision-table-container .cell.other {
        grid-column: 1/4;
    }

    #comparision-table-container .cell.versich {
        grid-column: 4/8;
    }

    #comparision-table-container .cell-content>img {
        width: 16px;
        height: 16px;
    }

    #comparision-table-container.cols-4 .cell.other,
    #comparision-table-container.cols-4 .cell.versich,
    #comparision-table-container.cols-6 .cell.other,
    #comparision-table-container.cols-6 .cell.versich {
        grid-column: unset;
    }

    #comparision-table-container.cols-4 .versich-column-highlight {
        width: calc((100% - 28px) / 4);
        left: calc((100% - 28px) / 4 + 14px);
    }
}

@media (min-width: 641px) {

    #comparision-table-container .versich-column-highlight,
    #comparision-table-container.cols-4 .versich-column-highlight,
    #comparision-table-container.cols-6 .versich-column-highlight {
        box-shadow: 0 0 10px 5px var(--bleu-de-france-a20);
    }

    #comparision-table-container .cell {
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.475rem;
    }

    #comparision-table-container .cell:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    #comparision-table-container .cell:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
}

@media (max-width: 640px) {
    #comparision-table-container.wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #comparision-table-container .versich-column-highlight {
        width: calc(100% * 4 / 7);
        left: calc(100% * 3 / 7);
        top: -14px;
    }

    #comparision-table-container .cell-content {
        width: 100%;
    }

    #comparision-table-container.cols-4 .versich-column-highlight,
    #comparision-table-container.cols-6 .versich-column-highlight {
        display: none;
    }

    #comparision-table-container.cols-4 .grid-contents,
    #comparision-table-container.cols-6 .grid-contents {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    #comparision-table-container.cols-4 .grid-header,
    #comparision-table-container.cols-4 .grid-row {
        grid-template-columns: 130px repeat(3, minmax(125px, calc(26vw - 12px)));
        min-width: max-content;
        display: grid;
        align-items: stretch;
    }

    #comparision-table-container.cols-6 .grid-header,
    #comparision-table-container.cols-6 .grid-row {
        grid-template-columns: 130px repeat(5, minmax(110px, calc(22vw - 12px)));
        min-width: max-content;
        display: grid;
        align-items: stretch;
    }

    #comparision-table-container.cols-4 .cell:first-child,
    #comparision-table-container.cols-6 .cell:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #comparision-table-container.cols-4 .grid-row:nth-of-type(2n-1)>.cell:first-child,
    #comparision-table-container.cols-6 .grid-row:nth-of-type(2n-1)>.cell:first-child {
        background-color: #f3f6f9;
    }

    #comparision-table-container.cols-4 .grid-header .cell.other:first-child,
    #comparision-table-container.cols-6 .grid-header .cell.other:first-child {
        background-color: var(--white);
        margin: 0;
        padding: 1em;
    }

    #comparision-table-container.cols-4 .cell.versich,
    #comparision-table-container.cols-6 .cell.versich {
        border-left: 1px solid var(--bleu-de-france-a20);
        border-right: 1px solid var(--bleu-de-france-a20);
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
    }

    #comparision-table-container.cols-4 .grid-header>.cell,
    #comparision-table-container.cols-6 .grid-header>.cell {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #comparision-table-container.cols-4 .grid-header>h3.cell.versich,
    #comparision-table-container.cols-6 .grid-header>h3.cell.versich {
        margin-block-start: 0;
        margin-block-end: 0;
        margin: 0;
    }

    #comparision-table-container.cols-4 .grid-header,
    #comparision-table-container.cols-6 .grid-header {
        align-items: stretch;
    }

    #comparision-table-container.cols-4 .grid-header>.cell.versich,
    #comparision-table-container.cols-6 .grid-header>.cell.versich {
        border-top: 1px solid var(--bleu-de-france-a20);
        font-weight: 700;
        color: var(--bleu-de-france);
    }

    #comparision-table-container.cols-4 .grid-row:last-child>.cell.versich,
    #comparision-table-container.cols-6 .grid-row:last-child>.cell.versich {
        border-bottom: 1px solid var(--bleu-de-france-a20);
    }
}

@media (min-width: 501px) and (max-width: 640px) {
    #comparision-table-container .grid-header>.cell {
        font-size: 1.1rem;
    }

    #comparision-table-container .grid-contents {
        padding: 0;
    }
}

@media (max-width: 500px) {
    #comparision-table-container .cell {
        padding: 8px 10px 8px 8px;
    }

    #comparision-table-container .grid-header>.cell {
        font-size: 0.9rem;
    }

    #comparision-table-container .cell-content>img {
        width: 12px;
        height: 12px;
    }
}