.dk-aboDetailIntro {
    max-width: 980px;
    margin: 0 auto 18px;
}

.dk-aboDetailIntro.dk-compare {
    padding-top: 26px;
}

.dk-aboDetailIntro__inner {
    max-width: 760px;
    margin: 0 auto;
}

.dk-aboDetailIntro__inner h1 {
    margin-bottom: 8px;
}

.dk-aboDetailIntro__meta {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

.dk-aboDetailPage {
    margin: 0 0 32px;
}

.dk-aboDetailPage__inner {
    max-width: 760px;
    margin: 0 auto;
}

.dk-aboDetailPage .dk-abo,
.dk-abo--detailPage {
    width: 100%;
}

.dk-aboDetailPage .dk-abo__top {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
    align-items: start;
}

.dk-abo__titlePage {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.2;
}

.dk-aboDetailPage .dk-abo__subtitle,
.dk-abo__subtitle {
    margin: 6px 0 0;
    color: #59636e;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.dk-aboDetailPage .dk-abo__price {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.dk-abo--detailPage .dk-abo__details {
    display: block;
    margin-top: 14px;
    border-top: 1px solid #ececec;
    padding-top: 16px;
}

.dk-aboDetailPage .dk-cardDetails {
    display: block !important;
}

.dk-aboDetailSection {
    max-width: 760px;
    margin: 26px auto 0;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.dk-aboDetailSection h2,
.dk-aboDetailSection h3 {
    margin-top: 0;
}

.dk-aboDetailSection .ui-datatable,
.dk-aboDetailSection table {
    width: 100%;
}

.dk-aboDetailSection td {
    padding: 8px 0;
}

.dk-aboDetailPage .ui-accordion .ui-accordion-header-link,
.dk-aboDetailPage .ui-accordion .ui-accordion-header a {
    background: #fff !important;
}

@media (max-width: 768px) {
    .dk-aboDetailIntro.dk-compare {
        padding-top: 18px;
    }

    .dk-aboDetailSection {
        padding: 16px;
        border-radius: 14px;
    }
}

@media (max-width: 700px) {
    .dk-aboDetailPage .dk-abo__top {
        grid-template-columns: 90px 1fr auto;
        grid-template-areas:
            "logo title price"
            "logo sub   price"
            "logo badge price";
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
    }

    .dk-aboDetailPage .dk-abo__logo {
        grid-area: logo;
    }

    .dk-aboDetailPage .dk-abo__provider {
        grid-area: title;
        min-width: 0 !important;
    }

    .dk-aboDetailPage .dk-abo__price {
        grid-area: price;
    }


}

.dk-aboDetailSection.dk-results-tableView {
    max-width: 760px;
    margin: 24px auto 0;
}

.dk-aboDetailRelated {
    max-width: 760px;
    margin: 26px auto 0;
}

.dk-aboDetailRelated .dk-abo {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
    padding: 22px 26px;
    margin-top: 18px;
}

.dk-aboDetailRelated .dk-abo:first-of-type {
    margin-top: 14px;
}

.dk-aboDetailRelated .dk-abo__top {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto 220px;
    gap: 18px;
    align-items: center;
}

.dk-aboDetailRelated .dk-abo__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}

.dk-aboDetailRelated .dk-abo__logoImg {
    max-width: 72px;
    max-height: 72px;
    width: auto;
    height: auto;
}

.dk-aboDetailRelated .dk-abo__provider {
    min-width: 0;
}

.dk-aboDetailRelated .dk-abo__title {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.dk-aboDetailRelated .dk-abo__subtitle {
    font-size: 17px;
    line-height: 1.25;
    color: #666;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.dk-aboDetailRelated .dk-abo__price {
    text-align: right;
    white-space: nowrap;
    justify-self: end;
}

.dk-aboDetailRelated .dk-abo__new {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #34a312;
}

.dk-aboDetailRelated .dk-abo__per {
    font-size: 14px;
    color: #777;
    margin-top: 4px;
}

.dk-aboDetailRelated .dk-abo__tabebuttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dk-relatedBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    transition: all .18s ease;
}

.dk-relatedBtn--outline {
    color: #34a312;
    border: 3px solid #34a312;
    background: #fff;
}

.dk-relatedBtn--outline:hover {
    background: #f6fbf2;
}

.dk-aboDetailRelated .dk-abo__bottom {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
}

.dk-aboDetailRelated .dk-abo__meta {
    color: #777;
    font-size: 15px;
}

@media (max-width: 700px) {
    .dk-aboDetailRelated .dk-abo__top {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "logo title"
            "logo price"
            "logo actions";
        gap: 10px 14px;
        align-items: start;
    }

    .dk-aboDetailRelated .dk-abo__logo {
        grid-area: logo;
    }

    .dk-aboDetailRelated .dk-abo__provider {
        grid-area: title;
        min-width: 0;
    }

    .dk-aboDetailRelated .dk-abo__price {
        grid-area: price;
        text-align: left;
        justify-self: start;
        white-space: normal;
    }

    .dk-aboDetailRelated .dk-abo__tabebuttons {
        grid-area: actions;
        justify-content: flex-start;
        margin-top: 4px;
    }

    .dk-aboDetailRelated .dk-abo__new {
        font-size: 30px;
        line-height: 1;
    }

    .dk-aboDetailRelated .dk-abo__per {
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    .dk-aboDetailRelated .dk-abo {
        padding: 18px 16px;
        margin-top: 14px;
    }

    .dk-aboDetailRelated .dk-abo__top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "price"
            "actions";
        gap: 10px;
    }

    .dk-aboDetailRelated .dk-abo__logo {
        display: none;
    }

    .dk-aboDetailRelated .dk-abo__provider {
        grid-area: title;
    }

    .dk-aboDetailRelated .dk-abo__price {
        grid-area: price;
        text-align: left;
        justify-self: start;
    }

    .dk-aboDetailRelated .dk-abo__tabebuttons {
        grid-area: actions;
        justify-content: flex-start;
    }

    .dk-aboDetailRelated .dk-abo__title {
        font-size: 18px;
    }

    .dk-aboDetailRelated .dk-abo__subtitle {
        font-size: 15px;
        line-height: 1.3;
    }

    .dk-aboDetailRelated .dk-abo__new {
        font-size: 26px;
    }

    .dk-relatedBtn {
        min-width: 122px;
        min-height: 40px;
        padding: 0 18px;
        font-size: 15px;
    }
}
