@import url("../general/main.css");
@import url("../general/compare_main.css");
@import url("../general/compare_mobile.css");

@keyframes ht-spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ht-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
.ht-richtext-list {
    list-style-position: outside;
}

.ht-richtext-list--unordered {
    list-style-type: disc;
}

.ht-richtext-list--ordered {
    list-style-type: decimal;
}

.ht-break-words {
    overflow-wrap: anywhere;
}

.ht-valign-top {
    vertical-align: top;
}

.heise-content .ho-content-wrapper .ho-text a {
    color: var(--brand);
}

.heise-content .ho-content-wrapper .ho-text a:hover {
    text-decoration: underline;
}

.heise-content .ho-content-wrapper .ho-text a[rel~="sponsored"]::after {
    content: "🛒";
    display: inline-block;
    margin-left: 0.24em;
    font-size: 0.95em;
    line-height: 1;
}

.ht-embedding-box iframe {
    max-width: 100%;
    height: auto;
}

.ht-internal-link-box {
    margin: 2rem 0;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-surface) 100%);
    box-shadow: var(--ht-shadow-card);
    overflow: hidden;
}

.ht-internal-link-box__link {
    display: grid;
    gap: 0;
    color: var(--ht-color-text);
    text-decoration: none;
    border-bottom: 0 !important;
}

.ht-internal-link-box__link:hover,
.ht-internal-link-box__link:focus {
    color: var(--ht-color-text);
    text-decoration: none;
    border-bottom-color: transparent;
}

.ht-internal-link-box__media {
    position: relative;
    overflow: hidden;
    background: var(--ht-color-brand-surface);
    border-bottom: 1px solid var(--ht-color-brand-border);
}

.ht-internal-link-box__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ht-internal-link-box__body {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1rem 1.1rem;
}

.ht-internal-link-box__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
}

.ht-internal-link-box__eyebrow,
.ht-internal-link-box__date {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--ht-color-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.ht-internal-link-box__eyebrow {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ht-internal-link-box__title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: clamp(1.1rem, 1vw + 0.95rem, 1.45rem);
    line-height: 1.2;
    font-weight: 800;
}

.ht-internal-link-box__excerpt {
    color: var(--ht-color-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

.ht-internal-link-box__excerpt p {
    margin: 0;
}

.ht-internal-link-box__excerpt p + p {
    margin-top: 0.5rem;
}

.ht-internal-link-box--advertorial {
    border-color: var(--ht-color-border-soft);
}

.ht-internal-link-box--advertorial .ht-internal-link-box__eyebrow {
    color: var(--ht-color-brand-dark);
}

.ht-internal-link-box--outdated {
    border-color: var(--ht-color-warning-border);
    background: linear-gradient(180deg, var(--ht-color-warning-bg) 0%, var(--ht-color-surface) 100%);
}

.ht-internal-link-box--outdated .ht-internal-link-box__eyebrow,
.ht-internal-link-box--outdated .ht-internal-link-box__date {
    color: var(--ht-color-warning-text);
}

@media (min-width: 768px) {
    .ht-internal-link-box:not(.ht-internal-link-box--without-image) .ht-internal-link-box__link {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    }

    .ht-internal-link-box:not(.ht-internal-link-box--without-image) .ht-internal-link-box__media {
        height: 100%;
        border-right: 1px solid var(--ht-color-brand-border);
        border-bottom: 0;
    }

    .ht-internal-link-box:not(.ht-internal-link-box--without-image) .ht-internal-link-box__image {
        height: 100%;
        min-height: 100%;
        aspect-ratio: auto;
    }

    .ht-internal-link-box__body {
        padding: 1.1rem 1.2rem 1.2rem;
    }
}

.ht-breadcrumb {
    padding: 1rem 1.5rem 0.75rem;
}

.ht-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
    line-height: 1.35;
}

.ht-breadcrumb .a-breadcrumb__crumb {
    min-width: 0;
    margin-right: .45rem;
}

.ht-breadcrumb .a-breadcrumb__link {
    color: var(--ht-color-text-muted);
    text-decoration: none;
}

.ht-breadcrumb .a-breadcrumb__link:hover,
.ht-breadcrumb .a-breadcrumb__link:focus {
    color: var(--ht-color-brand);
    text-decoration: none;
}

.ht-breadcrumb .a-breadcrumb__text {
    display: inline-block;
    min-width: 0;
}

.ht-breadcrumb-back {
    display: none;
}

.ht-breadcrumb-current {
    display: none;
}

.ht-breadcrumb-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    color: var(--ht-color-brand-dark);
}

.ht-breadcrumb-back-link svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.ht-breadcrumb-back-link--home {
    gap: 0;
}

.ht-breadcrumb-back-link--home .a-breadcrumb__text {
    display: none;
}

.ht-breadcrumb-back-link .a-breadcrumb__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html {
    --ht-color-brand: var(--brand, #0056A4);
    --ht-color-brand-light: var(--brand-light, #0068C7);
    --ht-color-brand-dark: var(--brand-dark, #00407A);
    --ht-color-brand-surface: #eef5fb;
    --ht-color-brand-surface-soft: #f8fbfd;
    --ht-color-brand-border: #c3d8eb;
    --ht-color-text: var(--brand-alternative-dark, #323232);
    --ht-color-text-muted: #646464;
    --ht-color-text-soft: #767676;
    --ht-color-surface: #ffffff;
    --ht-color-surface-alt: var(--brand-alternative-light, #f2f2f2);
    --ht-color-surface-subtle: #f7f7f7;
    --ht-color-border: #c7c7c7;
    --ht-color-border-soft: #d9d9d9;
    --ht-color-border-strong: #ababab;
    --ht-color-info-bg: #f7f7f7;
    --ht-color-info-border: #d9d9d9;
    --ht-color-info-text: var(--ht-color-text);
    --ht-color-info-icon: #646464;
    --ht-color-success-bg: var(--ht-color-brand-surface);
    --ht-color-success-border: var(--ht-color-brand-border);
    --ht-color-success-text: var(--ht-color-brand-dark);
    --ht-color-success-icon: var(--ht-color-brand);
    --ht-color-warning-bg: #fff4de;
    --ht-color-warning-border: #eccb8c;
    --ht-color-warning-text: #8a6117;
    --ht-color-warning-icon: #d59b24;
    --ht-color-danger-bg: #fbeaea;
    --ht-color-danger-border: #e4bcbc;
    --ht-color-danger-text: #9a3a3a;
    --ht-color-danger-icon: #bf4a4a;
    --ht-color-procon-pro-bg: #eef8f0;
    --ht-color-procon-pro-border: #b8d9bf;
    --ht-color-procon-pro-text: #1f6a33;
    --ht-color-procon-pro-icon: #2d8a45;
    --ht-shadow-card: 0 18px 40px -30px rgba(50, 50, 50, 0.24);
    --ht-shadow-card-featured: 0 24px 48px -30px rgba(50, 50, 50, 0.28);
    --ht-shadow-floating: 0 18px 38px rgba(50, 50, 50, 0.18);
    --ht-shadow-modal: 0 16px 32px rgba(50, 50, 50, 0.16);
    --ht-overlay: rgba(50, 50, 50, 0.55);
    --ht-cms-spacing: clamp(1rem, 0.9rem + 0.35vw, 1.3rem);
    --ht-cms-radius: 0.95rem;
    --ht-cms-title-spacing: 0.16em;
    --ht-cms-table-min-width: 36rem;
}

.ht-cms-box,
.ht-cms-quote,
.ht-cms-pro-con,
.ht-cms-table-wrap {
    margin: clamp(1.75rem, 1.45rem + 0.9vw, 2.4rem) 0;
}

.ht-cms-box {
    --ht-cms-accent: var(--ht-color-brand);
    position: relative;
    padding: var(--ht-cms-spacing);
    border: 1px solid var(--ht-color-border-soft);
    border-top: 4px solid var(--ht-cms-accent);
    border-radius: var(--ht-cms-radius);
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-surface-subtle) 100%);
    box-shadow: var(--ht-shadow-card);
}

.ht-cms-box__header {
    margin-bottom: 0.95rem;
}

.ht-cms-box__title,
.ht-cms-pro-con__title {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 100%;
    color: var(--ht-cms-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: var(--ht-cms-title-spacing);
    line-height: 1.2;
    text-transform: uppercase;
}

.ht-cms-box__title::before,
.ht-cms-pro-con__title::before {
    content: "";
    flex: 0 0 auto;
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.ht-cms-box__body,
.ht-cms-richtext,
.ht-cms-list,
.ht-cms-list__item,
.ht-cms-faq__answer,
.ht-cms-pro-con__item,
.ht-cms-table th,
.ht-cms-table td {
    font-size: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
    line-height: 1.65;
}

.ht-cms-richtext > :first-child,
.ht-cms-faq__answer > :first-child,
.ht-cms-table th > :first-child,
.ht-cms-table td > :first-child {
    margin-top: 0;
}

.ht-cms-richtext > :last-child,
.ht-cms-faq__answer > :last-child,
.ht-cms-table th > :last-child,
.ht-cms-table td > :last-child {
    margin-bottom: 0;
}

.ht-cms-box a,
.ht-cms-quote a,
.ht-cms-pro-con a,
.ht-cms-table a {
    color: var(--ht-color-brand-dark);
}

.ht-cms-box--toc {
    --ht-cms-accent: var(--ht-color-text-muted);
    box-shadow: none;
}

.ht-cms-toc__list {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-cms-toc__list--nested {
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--ht-color-brand-border);
}

.ht-cms-toc__item {
    position: relative;
    padding-left: 1rem;
}

.ht-cms-toc__item::before {
    content: "";
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 0.45rem;
    height: 1px;
    background: var(--ht-color-brand-light);
}

.ht-cms-toc__link {
    color: var(--ht-color-text);
    text-decoration: none;
    border-bottom: 0 !important;
}

.ht-cms-toc__link:hover,
.ht-cms-toc__link:focus {
    color: var(--ht-color-brand);
    text-decoration: none;
}

.ht-cms-box--trivia {
    --ht-cms-accent: var(--ht-color-brand-light);
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-brand-surface-soft) 100%);
}

.ht-cms-box--universal {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ht-cms-accent) 8%, #ffffff) 0%, var(--ht-color-surface) 100%);
}

.ht-cms-box--faq {
    --ht-cms-accent: var(--ht-color-brand-dark);
}

.ht-cms-box--reference {
    --ht-cms-accent: var(--ht-color-text);
}

.ht-cms-list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-cms-list__item {
    position: relative;
    padding-left: 1.3rem;
}

.ht-cms-list__item::before {
    content: "";
    position: absolute;
    top: 0.82em;
    left: 0;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--ht-cms-accent);
    transform: translateY(-50%);
}

.ht-cms-quote {
    position: relative;
    padding: var(--ht-cms-spacing);
    border: 1px solid var(--ht-color-border-soft);
    border-top: 4px solid var(--ht-color-brand);
    border-radius: var(--ht-cms-radius);
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-surface-subtle) 100%);
    box-shadow: var(--ht-shadow-card);
}

.ht-cms-quote::before {
    content: "\201E";
    position: absolute;
    top: 0.55rem;
    left: var(--ht-cms-spacing);
    color: var(--ht-color-brand);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 0;
    opacity: 0.2;
}

.ht-cms-quote__body {
    margin: 0;
    padding-top: 1.55rem;
}

.ht-cms-quote__text {
    margin: 0;
    font-size: clamp(1.04rem, 1rem + 0.18vw, 1.16rem);
    line-height: 1.65;
    font-weight: 600;
}

.ht-cms-quote__caption {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ht-color-border-soft);
    color: var(--ht-color-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.ht-cms-faq__item + .ht-cms-faq__item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ht-color-border-soft);
}

.ht-cms-faq__question {
    font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.22rem);
    font-weight: 800;
    line-height: 1.45;
}

.ht-cms-faq__answer {
    margin-top: 0.55rem;
}

.ht-cms-pro-con {
    display: grid;
    gap: 1rem;
}

.ht-cms-pro-con__panel {
    padding: var(--ht-cms-spacing);
    border: 1px solid var(--ht-color-border-soft);
    border-top: 4px solid transparent;
    border-radius: var(--ht-cms-radius);
    box-shadow: var(--ht-shadow-card);
}

.ht-cms-pro-con__panel--pro {
    border-top-color: var(--ht-color-procon-pro-icon);
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-procon-pro-bg) 100%);
}

.ht-cms-pro-con__panel--pro .ht-cms-pro-con__title {
    color: var(--ht-color-procon-pro-text);
}

.ht-cms-pro-con__panel--con {
    border-top-color: var(--ht-color-danger-icon);
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-danger-bg) 100%);
}

.ht-cms-pro-con__panel--con .ht-cms-pro-con__title {
    color: var(--ht-color-danger-text);
}

.ht-cms-pro-con__list {
    display: grid;
    gap: 0.8rem;
    margin: 0.95rem 0 0;
    padding: 0;
    list-style: none;
}

.ht-cms-pro-con__item {
    position: relative;
    padding-left: 1.35rem;
}

.ht-cms-pro-con__item::before {
    position: absolute;
    top: 0.05rem;
    left: 0;
    font-size: 1.05em;
    font-weight: 800;
    line-height: 1.4;
}

.ht-cms-pro-con__panel--pro .ht-cms-pro-con__item::before {
    content: "+";
    color: var(--ht-color-procon-pro-icon);
}

.ht-cms-pro-con__panel--con .ht-cms-pro-con__item::before {
    content: "\2212";
    color: var(--ht-color-danger-icon);
}

.ht-cms-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: var(--ht-cms-radius);
    background: var(--ht-color-surface);
    box-shadow: var(--ht-shadow-card);
}

.ht-cms-table {
    width: 100%;
    min-width: var(--ht-cms-table-min-width);
    border-collapse: separate;
    border-spacing: 0;
}

.ht-cms-table thead th {
    color: var(--ht-color-brand-dark);
    background: var(--ht-color-brand-surface);
    font-weight: 800;
}

.ht-cms-table th,
.ht-cms-table td {
    min-width: 9rem;
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--ht-color-border-soft);
}

.ht-cms-table th + th,
.ht-cms-table td + td {
    border-left: 1px solid var(--ht-color-border-soft);
}

.ht-cms-table tbody tr:nth-child(2n) td {
    background: var(--ht-color-surface-subtle);
}

.ht-cms-table tbody tr:last-child td {
    border-bottom: 0;
}

@media (min-width: 768px) {
    .ht-cms-box,
    .ht-cms-pro-con__panel {
        padding: 1.3rem 1.45rem 1.45rem;
    }

    .ht-cms-pro-con {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.ht-tooltip {
    position: absolute;
    z-index: 1200;
    max-width: min(20rem, calc(100vw - 1.5rem));
    padding: 0.7rem 0.82rem;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-brand-surface-soft) 100%);
    box-shadow: var(--ht-shadow-floating);
    color: var(--ht-color-text);
    font-size: 0.8rem;
    line-height: 1.4;
    pointer-events: auto;
}
.ht-tooltip p:last-child,
.ht-tooltip ul:last-child,
.ht-tooltip ol:last-child {
    margin-bottom: 0;
}

.ht-sub-nav-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    position: relative;
    z-index: 5;
}

.ht-sub-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.ht-sub-nav-toggle:hover {
    text-decoration: none;
}

.ht-sub-nav-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease-in-out;
}

.ht-sub-nav-toggle-icon .bi {
    margin-right: 0;
}

.ht-sub-nav-item.is-open .ht-sub-nav-toggle-icon {
    transform: rotate(180deg);
}

.ht-sub-nav-children {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    top: var(--ht-sub-nav-top, 0);
    left: var(--ht-sub-nav-left, 50%);
    z-index: 120;
    width: max-content;
    max-width: var(--ht-sub-nav-max-width, calc(100vw - 1.5rem));
    max-height: var(--ht-sub-nav-max-height, calc(100vh - 1.5rem));
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.75rem;
    background: var(--ht-color-surface);
    box-shadow: var(--ht-shadow-floating);
    transform: translateX(-50%);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ht-sub-nav-children[hidden] {
    display: none;
}

.ht-sub-nav-child-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--ht-color-text);
    font-size: 0.95rem;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.ht-sub-nav-child-link:hover,
.ht-sub-nav-child-link:focus {
    color: var(--ht-color-brand);
    background: var(--ht-color-brand-surface-soft);
    text-decoration: none;
}

.ht-sub-nav-child-link:focus-visible {
    outline: 2px solid var(--ht-color-brand);
    outline-offset: 2px;
}

.font-weight-bold {
    font-weight: 700 !important;
}
.subtitle {}
.subtitle--s {
    font-size: 1.2rem;
    font-weight: normal;
}
.not-allowed {
    cursor: not-allowed!important;
}
.pointer {
    cursor: pointer;
}
.help {
    cursor: help;
}
.cursor-default {
    cursor: default !important;
}

@media(min-width: 440px) and (max-width: 575px) {
    .d-xs-inline {
        display: inline!important;
    }
    .d-xs-none {
        display: none!important;;
    }
}
@media (min-width: 1024px) {
    .d-xl-block {
        display: block!important;
    }
}

@media (max-width: 767px) {
    .ht-breadcrumb {
        padding: 0.85rem 0.5rem 0.35rem;
    }

    .ht-breadcrumb-list {
        flex-wrap: nowrap;
        gap: 0;
    }

    .ht-breadcrumb-full {
        display: none !important;
    }

    .ht-breadcrumb-back {
        display: flex;
        min-width: 0;
        max-width: 48%;
    }

    .ht-breadcrumb-current {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
        max-width: 52%;
        font-weight: 700;
        color: var(--ht-color-text);
    }

    .ht-breadcrumb-current .a-breadcrumb__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.filter-left {
    display: block;
    max-width: 100%;
    height: 100%;
    background-color: var(--ht-color-surface);
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 5px;
}
.filter-title {
    padding: .75em;
    background: var(--ht-color-surface-alt);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
}

.filter-block {
    display: block;
}
.filter-none {
    display: none;
}
.filter-mobile {
    display: none;
}

.filter-content {
    font-size: 16px;
    max-width: 360px;
    margin: 0 auto;
}

.filter-content p {
    font-weight: 500;
    margin-bottom: .3em;
}

.filter-content label span {
    font-size: inherit;
}

.filter-content .filter {
    cursor: pointer;
    display: flex;
}

.filter-content .filter svg {
    color: var(--ht-color-brand-dark);
}

.filter-content .filter span {
    color: #111;
}

.ht-network-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ht-network-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    padding: .75rem .5rem;
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: .5rem;
    filter: grayscale(1);
    transition: all .12s ease-in-out;
}

.ht-network-input:checked + .ht-network-option,
.ht-network-option:hover {
    filter: grayscale(0);
}

.ht-network-input:checked + .ht-network-option {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px rgba(0, 92, 169, .12);
    background: var(--ht-color-brand-surface);
}

.filter-left label > span.thin-label {
    display: none;
}

@media (min-width: 576px) {
    .filter-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .filter-mobile,
    .filter-tablet {
        display: none;
    }

    .filter-sm-block {
        display: block;
    }
    .filter-sm-none {
        display: none;
    }
}

@media (min-width: 768px) {
    .filter-mobile {
        display: block;
    }
    .filter-tablet {
        display: none;
    }

    .filter-md-block {
        display: block;
    }
    .filter-md-none {
        display: none;
    }
}

@media (min-width: 768px) {
    .filter-left {
        max-width: 240px;
    }
    .filter-left label span.thin-label {
        display: block;
    }
    .filter-mobile,
    .filter-tablet {
        display: block;
    }
    .filter-lg-block {
        display: block;
    }
    .filter-lg-none {
        display: none;
    }
    .filter-title {
        text-align: left;
    }
}
@media (min-width: 1024px) {
    .filter-title {
        padding: 1rem;
    }

    .filter-xl-block {
        display: block;
    }
    .filter-xl-none {
        display: none;
    }
}

.ht-results-shell {
    width: 100%;
    min-width: 0;
}

.ht-filter-panel {
    --ht-filter-sticky-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 1.25rem;
    background: var(--ht-color-surface);
    box-shadow: var(--ht-shadow-card);
}

.ht-filter-panel .filter-title,
.ht-filter-panel .filter-content {
    max-width: none;
}

.ht-filter-panel.filter-left .filter-title,
.ht-filter-header {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid var(--ht-color-brand-border);
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    color: var(--ht-color-text);
    text-align: left;
}

.ht-filter-header-main,
.ht-filter-body,
.ht-filter-section {
    display: grid;
    gap: 0.75rem;
}

.ht-filter-header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.ht-filter-heading,
.ht-filter-section-title {
    margin: 0;
    line-height: 1.15;
}

.ht-filter-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ht-color-text);
}

.ht-filter-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ht-color-text);
}

.ht-filter-ranking-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    padding: 0.5rem 0.85rem;
    appearance: none;
    background: transparent;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 999px;
    color: var(--ht-color-text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ht-filter-ranking-link:hover {
    color: var(--ht-color-text);
    background: var(--ht-color-surface-subtle);
    border-color: var(--ht-color-border);
    transform: translateY(-1px);
}

.ht-filter-ranking-link:focus-visible {
    outline: 2px solid var(--ht-color-brand);
    outline-offset: 2px;
}

.ht-filter-content {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    font-size: 1rem;
}

.ht-filter-body {
    gap: 0.9rem;
}

.ht-filter-section {
    gap: 0.75rem;
}

.ht-filter-section--advanced {
    display: none;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ht-color-border-soft);
}

.ht-filter-primary-grid,
.ht-filter-advanced-grid,
.ht-filter-option-grid {
    display: grid;
    gap: 0.7rem;
}

.ht-filter-field {
    min-width: 0;
}

.ht-filter-network-field,
.ht-smartphone-field {
    display: grid;
    gap: 0.45rem;
    margin-top: 0;
}

.ht-filter-panel .ht-filter-select {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.75rem 2.4rem 0.75rem 0.9rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--ht-color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5L8 10L12 6.5' stroke='%23636C76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 0.9rem center;
    background-repeat: no-repeat;
    background-size: 0.95rem 0.95rem;
    color: var(--ht-color-text);
    font-size: 0.92rem;
    line-height: 1.3;
}

.ht-filter-panel .ht-filter-select:focus {
    border-color: var(--ht-color-brand);
    box-shadow: 0 0 0 0.2rem rgba(0, 92, 169, 0.14);
}

.ht-filter-panel .ht-filter-field-label {
    display: grid;
    gap: 0.12rem;
    margin-bottom: 0.45rem;
}

.ht-filter-panel .ht-filter-label-row {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.ht-filter-panel .ht-filter-label-copy {
    font-size: 0.92rem;
    line-height: 1.2;
}

.ht-filter-panel .ht-filter-label-meta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.ht-filter-inline-label {
    display: grid;
    gap: 0.12rem;
}

.ht-filter-inline-label-row {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.ht-filter-inline-label-copy {
    font-size: 0.92rem;
    line-height: 1.2;
}

.ht-filter-inline-label-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: auto;
}

.ht-filter-panel .ht-filter-label-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
}

.ht-filter-panel .ht-filter-monthly-hint {
    color: var(--ht-color-text-soft);
    font-size: 0.72rem;
    line-height: 1.1;
}

.ht-filter-panel .ht-filter-select-wrap {
    margin-top: 0;
}

.ht-filter-panel .ht-filter-network-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ht-filter-icon {
    flex: 0 0 auto;
}

.ht-filter-panel .ht-filter-label-tooltip .bi,
.ht-filter-panel .ht-filter-checkbox-tooltip .bi,
.ht-filter-panel .ht-filter-inline-label-tooltip .bi {
    margin-left: 0;
}

.ht-network-option-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.ht-network-option-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.ht-network-option {
    min-height: 3.35rem;
    padding: 0.65rem 0.45rem;
    border-color: var(--ht-color-border-soft);
    border-radius: 0.85rem;
    background: var(--ht-color-surface);
    cursor: pointer;
    filter: grayscale(1);
}

.ht-network-option img {
    max-height: 1.9rem;
    width: auto;
}

.ht-network-input:checked + .ht-network-option {
    border-color: var(--ht-color-brand);
    box-shadow: 0 0 0 0.22rem rgba(0, 92, 169, 0.12);
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-filter-option .checkbox-wrapper {
    min-height: 0;
}

.ht-filter-checkbox-wrap {
    min-height: 0;
    margin-top: 1rem;
}

.ht-filter-panel .ht-filter-checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.7rem;
}

.ht-filter-panel .custom-checkbox-label {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.85rem;
    background: var(--ht-color-surface);
}

.ht-filter-panel .ht-filter-checkbox-copy {
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--ht-color-text);
}

.ht-filter-panel .custom-checkbox-label div.checkbox-helper {
    min-width: 1.45rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    background-position: center;
    background-size: 0.95rem 0.95rem;
}

.ht-filter-panel .custom-checkbox:checked + label {
    border-color: var(--ht-color-brand-border);
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-filter-panel .custom-checkbox:checked + label div.checkbox-helper {
    border-color: var(--ht-color-brand);
    background-color: var(--ht-color-brand-surface);
}

.ht-filter-panel .ht-filter-checkbox-meta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.ht-filter-panel .ht-filter-checkbox-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
}

.ht-smartphone-select {
    display: grid;
    gap: 0.9rem;
}

.ht-smartphone-label {
    margin-bottom: 0;
}

.ht-smartphone-summary {
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    overflow: hidden;
    min-height: 4.85rem;
}

.ht-smartphone-trigger {
    min-height: 4.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.85rem;
    background: var(--ht-color-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ht-smartphone-trigger:hover {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-surface-alt);
}

.ht-smartphone-trigger-inner {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 3.15rem;
}

.ht-smartphone-trigger-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
}

.ht-smartphone-trigger-icon {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--ht-color-text-soft);
}

.ht-smartphone-trigger-copy {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.ht-smartphone-trigger-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: left;
}

.ht-smartphone-picker {
    display: grid;
}

.ht-smartphone-picker-button {
    width: 100%;
}

.ht-smartphone-selected-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.85rem;
    padding: 0.8rem 0.95rem;
}

.ht-smartphone-selected-check {
    display: flex;
    align-items: center;
}

.ht-smartphone-selected-copy {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.ht-smartphone-selected-brand,
.ht-smartphone-selected-model {
    padding: 0;
}

.ht-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.ht-filter-panel .ht-filter-expand {
    justify-content: space-between;
    flex: 1 1 13rem;
}

.ht-filter-panel .ht-filter-expand .bi {
    transition: transform 0.15s ease;
}

.ht-filter-panel[data-filter-expanded="true"] .ht-filter-section--advanced {
    display: grid;
}

.ht-filter-panel .info-icon .bi {
    color: var(--ht-color-text-muted);
}

.ht-filter-panel .smartphone,
.ht-filter-panel #sel-smartphones {
    border-radius: 1rem;
}

.ht-filter-panel #sel-smartphones {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    box-shadow: none;
}

.ht-filter-panel #show-smartphone-list-btn {
    width: 100%;
}

.ht-results-loading {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

.ht-results-loading-spinner {
    width: 3rem;
    height: 3rem;
}

.ht-results-more {
    display: flex;
    justify-content: center;
}

.ht-results-more-button {
    min-width: 12rem;
}

.ht-results-message {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.85rem;
}

.ht-results-message--info {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-results-message--error {
    border-color: var(--ht-color-danger-border);
    background: var(--ht-color-danger-bg);
    color: var(--ht-color-danger-text);
}

.ht-results-message-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.ht-results-message-icon {
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.ht-results-message-title {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
}

.ht-results-message-action {
    justify-self: start;
}

.ht-results-notice {
    margin: 1.25rem 0;
    padding: 1.5rem;
    text-align: center;
}

.ht-results-notice-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1.1;
    font-weight: 800;
}

.ht-results-notice-icon {
    flex: 0 0 auto;
}

.ht-results-notice-subtitle {
    margin-top: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .ht-filter-panel .ht-filter-primary-chip-grid--bundle {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ht-filter-panel .ht-filter-primary-chip-grid--simonly {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ht-filter-advanced-grid,
    .ht-filter-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ht-filter-option-grid {
        align-items: stretch;
    }
}

@media (max-width: 639px) {
    .ht-filter-panel .ht-filter-heading {
        font-size: 1.3rem;
    }

    .ht-filter-ranking-link {
        justify-content: center;
    }
}

.product-offer-network {
    width: 18px;
    height: 18px;
}
.product-offer-network_tef {
    width: auto;
    max-width: 70px!important;
    height: 10px;
}
.products-container {
    width: 100%;
}

.card {
    min-width: 100%;
    max-width: 100%;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 5px;
    background-color: var(--ht-color-surface-alt);
    overflow: unset;
}

.product-offer-head {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 6px;
    padding: 1rem;
    width: 100%;
    height: 100%;
    background: white;
}

@media (max-width: 767px) {
    .product-offer-head {
        flex-flow: row;
    }
}

.pp-box {
    position: absolute;
    width: 110px;
    padding: 5px 0;
    background: #dc231c;
    color: #fff;
    font-weight: 700;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    z-index: 2;
}

.pp-text {
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    display: block;
}
.pp-box.offer-label {
    padding: 3px 0;
    background: var(--ht-color-brand-dark);
}
.pp-legal {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 0 3px;
    font-size: 10px;
    color: #707070;
    z-index: 1;
    background: #f9f9f9;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
@media (min-width: 576px) {
    .pp-box {
        width: 125px;
    }
    .pp-text {
        font-size: 12px;
        line-height: 16px;
    }
    .pp-border-fade {
        top: 25px;
    }
}
.provider-img {
    width: 100%;
    max-width: 120px !important;;
    height: auto;
}

.product-offer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-offer-content .price p,
.product-offer-content h6.card-title,
.product-offer-content .h6.card-title,
.product-offer-content .price p {
    font-weight: 600;
    color: #111;
}

.product-offer-content h6,
.product-offer-content .h6 {
    color: #111;
    font-size: 16px;
}
@media (min-width: 420px) {
    .product-offer-content h6,
    .product-offer-content .h6 {
        font-size: 18px;
    }
}
.product-offer-content p {
    /*font-size: 1em;*/
    margin-bottom: 0;
}

.product-offer-content h5,
.product-offer-content .h5 {
    font-size: 1.5em;
    margin-top: 0;
}

.product-offer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blurred {
    filter: blur(2px);
    opacity: .75;
}

.tab-pane {
    padding: 1rem 0;
}
.thin-label {
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #111;
}
.bold-label {
    font-weight: 500;
}
.white-space-nowrap {
    white-space: nowrap;
}

/*.info-icon {*/
/*    display: inline-flex !important;*/
/*    box-shadow: none;*/
/*    padding: 0;*/
/*    background-color: transparent;*/
/*    border: 0;*/
/*}*/

/*.info-icon:hover {*/
/*    background-color: transparent;*/
/*    box-shadow: none;*/
/*}*/
.bi {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentcolor;
}
.icon-rotate-180 {
    transform: rotate(180deg);
}

@media (min-width: 576px) {
    .bi-mobile-highlight {
        margin-top: 6px;
        flex: 0 0 20px;
    }
}
@media (min-width: 768px) {
    .bi-mobile-highlight {
        margin-top: 10px;
        flex: 0 0 22px;
    }
}
@media (min-width: 992px) {
    .offer-info {
        font-size: 1.3rem;
    }
    .bi-mobile-highlight {
        margin-top: 12px;
        flex: 0 0 22px;
    }
}
@media (min-width: 1024px) {
    .bi-mobile-highlight {
        margin-top: 14px;
        height: 24px;
        width: 24px;
    }
}
.info-icon .bi {
    color: #979797;
    margin-left: .5em   ;
}
.ht-filter-select {
    font-size: 1.6rem;
    padding: 1rem;
}

.custom-text {
    color: #111;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 48px;
    width: 100%;
    font-size: 1.1rem;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.custom-text:disabled {
    color: #6c757d;
    background-color: #e9ecef;
    opacity: .7;
}
.custom-text:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
@media (min-width: 992px) {
    .custom-text {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
input[type="number"].custom-text::-webkit-outer-spin-button,
input[type="number"].custom-text::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.checkbox-wrapper {
    min-height: 38px;
}

.custom-checkbox-label,
.custom-radio-label {
    font-size: initial;
}

.custom-checkbox[type=checkbox]:checked, .custom-checkbox[type=checkbox]:not(:checked) {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.custom-checkbox[disabled]:checked + label div.checkbox-helper {
    background-image: url("data:image/svg+xml,%3Csvg width='1.4em' height='1.4em' viewBox='0 0 16 16' class='bi bi-check2' fill='024050' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-color: #bbbbbb;
}

.custom-checkbox[disabled]:checked + label div {
    cursor: default;
}
.custom-checkbox[disabled] + label div.checkbox-helper {
    background-color: #f9f9f9;
}
.custom-checkbox:checked + label div.checkbox-helper {
    background-image: url("data:image/svg+xml,%3Csvg width='1.4em' height='1.4em' viewBox='0 0 16 16' class='bi bi-check2' fill='024050' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.custom-checkbox-label div.checkbox-helper {
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    background-color: white;
    min-width: 38px;
    height: 38px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position-x: 7px;
    background-position-y: 7px;
}
.checkbox-wrapper label,
.radio-wrapper label,
.ht-filter-select:not(:disabled) {
    cursor: pointer;
}

label span.info-icon {
    cursor: help!important;
}
.offer-button-list-border {
    height: 1px;
    background-color: var(--ht-color-border);
}
.offer-button-list-headline {
    font-size: 12px!important;
    color: var(--ht-color-text-soft) !important;
}
.offer-button-list-headline:hover svg {
    color: var(--brand) !important;
}
/* * * SMARTPHONES * * */
.smartphone-brand {
    line-height: 1.25rem;
    font-size: 13px;
    font-weight: 600;
}
.smartphone-brand-wrapper img.smartphone-brand-logo,
img.smartphone-brand-logo {
    max-width: 100px;
    width: auto;
    filter: grayscale(100%);
    margin: 0 auto;
}
.smartphone-brand-wrapper.active img.smartphone-brand-logo,
.smartphone-brand-wrapper:hover img.smartphone-brand-logo,
img.smartphone-brand-logo:hover {
    filter: grayscale(0%);
}

.ht-smartphone-modal-header {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    color: var(--ht-color-text);
    border-bottom: 1px solid var(--ht-color-brand-border);
}

.ht-smartphone-modal-title {
    color: var(--ht-color-text);
    font-size: clamp(1.15rem, 1.2vw + 0.95rem, 1.45rem);
    line-height: 1.15;
    font-weight: 800;
}

.ht-smartphone-modal-header .ht-modal-close-white {
    color: var(--ht-color-text);
}

#smartphone-list {
    z-index: 1505;
}

.ht-smartphone-modal-body {
    display: grid;
    gap: 1rem;
}

.ht-smartphone-brand-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.ht-smartphone-brand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.75rem;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    transition: all 0.15s ease;
}

.smartphone-brand-wrapper.active.ht-smartphone-brand-button,
.ht-smartphone-brand-button:hover {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
}

.ht-smartphone-brand-button .smartphone-brand-all,
.ht-smartphone-brand-button .smartphone-brand-others {
    font-size: 0.9rem;
    line-height: 1.1;
    font-weight: 700;
}

.ht-smartphone-brand-button .smartphone-brand-logo {
    max-width: 76px;
    max-height: 20px;
    width: auto;
}

.smartphone,
.sel-smartphone-chip {
    background-color: var(--ht-color-surface-subtle);
    border-radius: 0.9rem;
    cursor: pointer;
}
.smartphone:hover {
    background-color: var(--ht-color-brand-surface-soft) !important;
    opacity: 1;
}
.smartphone-wrapper.active .smartphone,
.smartphone.active {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    border-color: var(--ht-color-brand-border);
}
.smartphone-model {
    font-size: 16px;
    font-weight: 600;
}
.smartphone-image-wrapper {
    text-align: center;
    /*height: 6.4rem;*/
    overflow: visible;
}
.smartphone-image-wrapper svg {
    margin-top: 0;
    width: 4.9rem;
    height: 4.9rem;
}

.ht-smartphone-option {
    flex: 1 1 100%;
    margin-bottom: 0.75rem;
}

.ht-smartphone-card {
    position: relative;
    height: 100%;
    padding: 0.95rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 1rem;
    background: var(--ht-color-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ht-smartphone-card-inner {
    position: relative;
    display: grid;
    gap: 0.6rem;
    height: 100%;
    padding-top: 0.15rem;
    padding-bottom: 0.2rem;
}

.ht-smartphone-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6.4rem;
    padding: 0.7rem 0.9rem 0.2rem;
}

.ht-smartphone-card-copy {
    display: grid;
    gap: 0.25rem;
    text-align: center;
}

.ht-smartphone-card-brand,
.ht-smartphone-card-model {
    padding: 0;
    margin-top: 0;
}

.ht-smartphone-energy-label-image {
    display: block;
    margin-left: auto;
}

img.smartphone-image {
    margin-top: 0;
    width: 6.4rem;
    height: 6.4rem;
    object-fit: contain;
    filter: grayscale(75%);
}
.smartphone-wrapper .smartphone-selection,
.sel-smartphone .smartphone-selection {
    top: 0;
    right: 0;
    box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #d3d3d3;
    -moz-box-shadow: 1px 1px 3px #d3d3d3;
    border-radius: 999px;
    background-color: #fff;
    width: 2rem;
    height: 2rem;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}
.smartphone-wrapper.active .smartphone-selection,
.sel-smartphone.active .smartphone-selection {
    background-image: url("data:image/svg+xml,%3Csvg width='1.4em' height='1.4em' viewBox='0 0 16 16' class='bi bi-check2' fill='2B64A4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-size: 0.95rem 0.95rem;
}
.smartphone-wrapper .smartphone-energy-label {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.smartphone-presale-badge {
    position: absolute;
    top: -0.95rem;
    left: -0.95rem;
    z-index: 2;
}

.smartphone-presale-text {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.28rem 0.7rem 0.26rem 0.72rem;
    border-top-left-radius: 0.95rem;
    border-bottom-right-radius: 0.8rem;
    background: var(--ht-color-brand);
    color: var(--brand-text);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
}
#sel-smartphones {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    box-shadow: none;
    border-radius: 1rem;
    cursor: pointer;
    overflow: hidden;
}
.sel-smartphone:not(.active) {
    background-color: #fff;
}
.sel-smartphone:not(.sel-smartphone:last-child) {
    border-bottom: 1px solid rgba(0,102,153,.1);
}

.ht-smartphone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--ht-color-brand);
    color: var(--brand-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}

.ht-smartphone-chip--all {
    background: var(--ht-color-surface-alt);
    color: var(--ht-color-text);
}

#sel-smartphone-all.hidden {
    display: none !important;
}

.ht-smartphone-chip-label {
    display: block;
}

.ht-smartphone-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: inherit;
}

.ht-smartphone-modal-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1rem;
    margin-bottom: 0;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-smartphone-modal-selection-label {
    font-size: 0.95rem;
}

.ht-smartphone-modal-section {
    margin-bottom: 0;
}

.ht-smartphone-modal-section-title {
    color: var(--ht-color-text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
}

.ht-smartphone-modal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0;
}

.ht-smartphone-modal-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--ht-color-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, var(--ht-color-surface) 100%);
}

.ht-smartphone-modal-footer-inner {
    padding: 0.75rem;
}

.ht-smartphone-submit {
    width: 100%;
}

@media (min-width: 560px) {
    .ht-smartphone-option {
        flex: 1 1 calc(50% - 0.75rem);
    }
}

@media (min-width: 560px) {
    .ht-smartphone-brand-buttons {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 840px) {
    .ht-smartphone-option {
        flex: 1 1 calc(33.333% - 0.75rem);
    }
}

@media (min-width: 1024px) {
    .ht-smartphone-brand-buttons {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .ht-smartphone-brand-button {
        min-height: 2.85rem;
        padding: 0.65rem 0.8rem;
    }

    .ht-smartphone-brand-button .smartphone-brand-logo {
        max-width: 92px;
        max-height: 24px;
    }
}
.product-offer-smartphone-image-wrapper {
    text-align: center;
    height: 40px;
    width: 40px;
    overflow: hidden;
}
.product-offer-smartphone-image {
    width: 40px;
    height: 40px;
    opacity: .8;
}
@media(min-width: 576px) {
    .product-offer-smartphone-image-wrapper {
        height: 44px;
    }
    .product-offer-smartphone-image {
        margin-top: 10px;
        width: 50px;
        height: 50px;
    }
}

.textLink {
    color: inherit;
    border-color: rgba(0, 92, 169, 0.35);
}

.textLink:hover {
    color: var(--brand);
    border-color: rgba(0, 73, 135, 0.35);
}

.filter-title {
    background: var(--brand-button);
}

.ht-comparison-layout {
    margin-bottom: 1.5rem;
}

.ht-filter-panel-shell {
    margin-bottom: 1rem;
}

.ht-filter-panel .ht-filter-header {
    background: var(--ht-color-surface);
}

.ht-filter-panel {
    overflow: visible;
    width: 100%;
    max-width: none;
}

.ht-filter-panel .ht-filter-mobile-summary {
    display: none;
}

.ht-filter-panel .ht-filter-mobile-summary.hidden,
.ht-filter-panel .ht-filter-expand-count.hidden {
    display: none !important;
}

.ht-filter-panel .ht-filter-mobile-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ht-filter-panel .ht-filter-primary-mobile {
    display: grid;
    gap: 0.7rem;
}

.ht-filter-panel .ht-filter-primary-desktop {
    display: none;
}

.ht-filter-panel .ht-filter-primary-drawer-host {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ht-color-border-soft);
}

.ht-filter-panel .ht-filter-primary-chip-grid {
    display: grid;
    gap: 0.65rem;
}

.ht-filter-panel .ht-filter-primary-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ht-filter-panel .ht-filter-primary-chip:hover {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface-soft);
}

.ht-filter-panel .ht-filter-primary-chip-copy {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.ht-filter-panel .ht-filter-primary-chip-label {
    color: var(--ht-color-text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ht-filter-panel .ht-filter-primary-chip-value {
    display: block;
    color: var(--ht-color-text);
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 700;
    white-space: normal;
}

.ht-filter-panel .ht-filter-primary-chip-icon {
    color: var(--ht-color-brand);
}

.ht-filter-panel .ht-filter-field--focus {
    scroll-margin-top: 1rem;
}

.ht-filter-panel .ht-filter-field--focus .ht-filter-select,
.ht-filter-panel .ht-filter-field--focus .custom-checkbox-label,
.ht-filter-panel .ht-filter-field--focus .smartphone,
.ht-filter-panel .ht-filter-field--focus .ht-smartphone-summary {
    border-color: var(--ht-color-brand-border);
    box-shadow: 0 0 0 0.2rem rgba(0, 92, 169, 0.12);
}

.ht-filter-panel .ht-filter-drawer-actions {
    display: grid;
    gap: 0.6rem;
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    margin: 1rem -1rem -1rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ht-color-border-soft);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

.ht-filter-panel .ht-filter-reset-mobile,
.ht-filter-panel .ht-filter-apply {
    width: 100%;
}

.ht-filter-panel .ht-filter-apply:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ht-filter-panel .ht-filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 999px;
    background: var(--ht-color-brand-surface-soft);
    color: var(--ht-color-brand-dark);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.ht-filter-panel .ht-filter-expand-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    font-weight: 700;
}

.ht-filter-panel .ht-filter-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(50, 50, 50, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.ht-filter-panel .ht-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1rem -1rem 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--ht-color-brand-border);
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-filter-panel .ht-filter-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 999px;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
}

.ht-filter-panel .ht-filter-reset-desktop {
    display: none;
}

.ht-filter-panel .ht-filter-section--advanced {
    display: grid;
}

@media (max-width: 1023px) {
    .ht-filter-panel .ht-filter-primary-mobile {
        display: grid;
    }

    .ht-filter-panel .ht-filter-primary-desktop {
        display: none;
    }

    .ht-filter-panel .ht-filter-primary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ht-filter-panel .ht-filter-mobile-summary:not(.hidden) {
        display: block;
    }

    .ht-filter-panel .ht-filter-section--advanced {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1400;
        width: min(25.5rem, 100vw);
        padding: 1rem;
        margin-top: 0;
        border-top: 0;
        border-left: 1px solid var(--ht-color-brand-border);
        background: var(--ht-color-surface);
        box-shadow: var(--ht-shadow-floating);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.22s ease;
    }

    .ht-filter-panel[data-filter-expanded="true"] .ht-filter-section--advanced {
        transform: translateX(0);
    }

    .ht-filter-panel[data-filter-expanded="true"] .ht-filter-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .ht-filter-panel .ht-filter-drawer-backdrop {
        z-index: 1390;
    }

    body.ht-filter-drawer-open {
        overflow: hidden;
    }
}

@media (max-width: 1023px) {
    .ht-filter-panel .ht-filter-header {
        gap: 0.65rem;
        padding: 0.85rem 0.95rem 0.8rem;
    }

    .ht-filter-panel .ht-filter-heading {
        font-size: 1.2rem;
    }

    .ht-filter-panel .ht-filter-ranking-link {
        padding: 0.4rem 0.7rem;
        font-size: 0.82rem;
    }

    .ht-filter-panel .ht-filter-content {
        padding: 0.8rem 0.95rem 0.95rem;
    }

    .ht-filter-panel .ht-filter-body,
    .ht-filter-panel .ht-filter-section,
    .ht-filter-panel .ht-filter-primary-grid,
    .ht-filter-panel .ht-filter-advanced-grid,
    .ht-filter-panel .ht-filter-option-grid {
        gap: 0.6rem;
    }

    .ht-filter-panel .ht-filter-actions {
        gap: 0.55rem;
    }

    .ht-filter-panel .ht-filter-select {
        min-height: 2.95rem;
        padding: 0.65rem 2.2rem 0.65rem 0.8rem;
        background-position: right 0.8rem center;
        font-size: 0.88rem;
    }

    .ht-filter-panel .custom-checkbox-label {
        padding: 0.65rem 0.8rem;
    }

    .ht-filter-panel .custom-checkbox-label div.checkbox-helper {
        min-width: 1.35rem;
        width: 1.35rem;
        height: 1.35rem;
    }

    .ht-filter-panel .ht-filter-checkbox-copy {
        font-size: 0.88rem;
    }

    .ht-filter-panel .ht-filter-label-copy,
    .ht-filter-inline-label-copy {
        font-size: 0.88rem;
    }

    .ht-filter-panel .ht-filter-expand {
        min-height: 2.95rem;
    }

    .ht-filter-panel .ht-filter-primary-chip {
        padding: 0.68rem 0.75rem;
    }

    .ht-filter-panel .ht-filter-primary-chip-label {
        font-size: 0.64rem;
    }

    .ht-filter-panel .ht-filter-primary-chip-value {
        font-size: 0.86rem;
    }

    .ht-filter-panel .ht-filter-drawer-actions {
        margin-top: 1.2rem;
    }

    .ht-filter-panel .ht-filter-section--advanced .ht-filter-primary-grid,
    .ht-filter-panel .ht-filter-section--advanced .ht-filter-advanced-grid,
    .ht-filter-panel .ht-filter-section--advanced .ht-filter-option-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ht-filter-panel .ht-filter-section--advanced .ht-filter-field,
    .ht-filter-panel .ht-filter-section--advanced .ht-filter-checkbox-wrap,
    .ht-filter-panel .ht-filter-section--advanced .ht-smartphone-select,
    .ht-filter-panel .ht-filter-section--advanced .ht-smartphone-picker {
        min-width: 0;
        width: 100%;
    }

    .ht-filter-panel .ht-filter-section--advanced .ht-filter-expand,
    .ht-filter-panel .ht-filter-section--advanced .ht-btn,
    .ht-filter-panel .ht-filter-section--advanced .ht-filter-select,
    .ht-filter-panel .ht-filter-section--advanced .custom-checkbox-label {
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .ht-comparison-layout {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .ht-filter-panel-shell {
        margin-bottom: 0;
    }

    .ht-filter-panel {
        top: var(--ht-filter-sticky-top, 1rem);
        overflow: hidden;
        width: 19rem;
        max-width: 19rem;
        flex: 0 0 19rem;
    }

    .ht-filter-panel .ht-filter-expand,
    .ht-filter-panel .ht-filter-expand-count,
    .ht-filter-panel .ht-filter-primary-mobile,
    .ht-filter-panel .ht-filter-mobile-summary,
    .ht-filter-panel .ht-filter-drawer-backdrop,
    .ht-filter-panel .ht-filter-drawer-close,
    .ht-filter-panel .ht-filter-drawer-actions {
        display: none !important;
    }

    .ht-filter-panel .ht-filter-actions,
    .ht-filter-panel .ht-filter-drawer-head {
        display: none;
    }

    .ht-filter-panel .ht-filter-primary-desktop {
        display: block;
    }

    .ht-filter-panel .ht-filter-primary-drawer-host {
        display: none;
    }

    .ht-filter-panel .ht-filter-reset-desktop {
        display: block;
        width: 100%;
        margin-top: 0.85rem;
    }

    .ht-filter-panel .ht-filter-section--advanced {
        position: static;
        width: auto;
        padding: 0.95rem 0 0;
        margin-top: 0.2rem;
        border-top: 1px solid var(--ht-color-border-soft);
        border-left: 0;
        box-shadow: none;
        overflow: visible;
        transform: none;
    }

    .ht-filter-panel .ht-filter-advanced-grid,
    .ht-filter-panel .ht-filter-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ht-filter-panel .ht-filter-option-grid {
        gap: 0.45rem;
    }

    .ht-filter-panel .ht-filter-option .ht-filter-checkbox-wrap {
        margin-top: 0.55rem;
    }
}

@media (max-width: 639px) {
    .ht-filter-panel .ht-filter-section--advanced {
        width: min(27rem, 100vw);
    }

    .ht-filter-panel .ht-filter-header-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.55rem;
    }

    .ht-filter-panel .ht-filter-ranking-link {
        width: fit-content;
        justify-self: end;
        white-space: nowrap;
    }
}

.offer-button-list-headline,
.offer-button-list-border {
    color: var(--brand);
    border-color: var(--ht-color-border);
}

.pp-box,
.pp-border-fade {
    background-color: var(--brand-button);
}

.pp-text,
.pp-legal {
    color: #fff;
}

#comparison-container .card {
    background: var(--ht-color-surface);
}

.ht-offer-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 26px;
    background: var(--ht-color-surface);
    box-shadow: var(--ht-shadow-card);
}

.ht-offer-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--ht-color-brand-dark), var(--ht-color-brand));
    opacity: 0.12;
}

.ht-offer-card--featured {
    border-color: var(--ht-color-brand-border);
    box-shadow: var(--ht-shadow-card-featured);
}

.ht-offer-card--featured::before {
    height: 5px;
    opacity: 1;
}

.ht-offer-ribbon-wrap {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}

.ht-offer-ribbon {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 20px -16px rgba(50, 50, 50, 0.3);
}

.ht-offer-ribbon--featured {
    background: var(--brand-button);
    color: var(--brand-button-text);
}

.ht-offer-ribbon--label {
    border: 1px solid var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-offer-sponsored {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ht-color-text-soft);
}

.ht-offer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--ht-color-surface);
}

.ht-offer-primary {
    padding: 1rem 1rem 0.85rem;
    background: linear-gradient(180deg, var(--ht-color-surface) 0%, var(--ht-color-brand-surface-soft) 100%);
    border-bottom: 1px solid var(--ht-color-border-soft);
}

.ht-offer-primary--with-ribbon {
    padding-top: 3.8rem;
}

.ht-offer-header-row {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ht-offer-branding {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.ht-offer-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.ht-offer-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.ht-offer-price-spot {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border-radius: 1rem;
    background: var(--brand-button);
    color: var(--brand-button-text);
}

.ht-offer-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.ht-offer-metric {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 1rem;
    background: var(--ht-color-surface);
}

.ht-offer-side {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--ht-color-surface);
}

.ht-offer-provider-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.75rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 1rem;
    background: var(--ht-color-surface);
    box-shadow: none;
}

.ht-offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 30px;
    max-width: 100%;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 999px;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    font-size: 0.82rem;
    font-weight: 500;
}

.ht-offer-chip--network a,
.ht-offer-chip--network span {
    display: inline-flex;
    align-items: center;
}

.ht-offer-chip--muted {
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text-soft);
}

.ht-offer-chip--hint {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-offer-title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ht-offer-feature-output {
    color: var(--ht-color-text);
}

.ht-offer-feature-output > * + * {
    margin-top: 0.25rem;
}

.ht-offer-feature-label,
.ht-offer-price-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ht-offer-feature-label {
    color: var(--ht-color-text-soft);
}

.ht-offer-feature-note {
    margin-top: 0.35rem;
    color: var(--ht-color-text-soft);
    font-size: 0.82rem;
}

.ht-offer-price-kicker {
    color: rgba(255, 255, 255, 0.74);
}

.ht-offer-price-amount {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    margin-top: 0.15rem;
    color: var(--brand-button-text);
    font-size: 1.75rem;
    line-height: 0.95;
    font-weight: 800;
}

.ht-offer-price-amount span {
    padding-bottom: 0.2rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    line-height: 1.1;
}

.ht-offer-price-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.65rem;
    padding-top: 0;
    border-top: 0;
}

.ht-offer-price-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}

.ht-offer-price-row strong {
    color: var(--ht-color-text);
    font-weight: 700;
    white-space: normal;
    font-size: 0.95rem;
}

.ht-offer-price-row small {
    color: var(--ht-color-text-soft);
    font-size: 0.82em;
}

.ht-offer-bonus {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text) !important;
}

.ht-offer-affiliate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--ht-color-border);
    border-radius: 0.95rem;
    background: var(--ht-color-surface);
    color: var(--ht-color-text-soft);
    font-size: 0.82rem;
    line-height: 1.2;
}

.ht-offer-affiliate--muted {
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text-soft);
}

.ht-offer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.ht-offer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.15s ease;
    cursor: pointer;
}

.ht-offer-btn--primary {
    border-color: var(--ht-color-brand);
    background: var(--ht-color-brand);
    color: var(--brand-text);
    box-shadow: none;
}

.ht-offer-btn--primary:hover {
    background: var(--ht-color-brand-dark);
    border-color: var(--ht-color-brand-dark);
    color: var(--brand-text);
}

.ht-offer-btn--secondary {
    border-color: var(--ht-color-border);
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
}

.ht-offer-btn--secondary:hover {
    background: var(--ht-color-surface-subtle);
}

.ht-offer-btn--disabled {
    border-color: var(--ht-color-border-soft);
    background: var(--ht-color-surface-alt);
    color: var(--ht-color-text-soft);
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .ht-offer-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .ht-offer-primary {
        padding: 1rem 1.2rem;
        border-right: 1px solid var(--ht-color-border-soft);
        border-bottom: 0;
    }

    .ht-offer-primary--with-ribbon {
        padding-top: 4.1rem;
    }

    .ht-offer-header-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .ht-offer-price-spot {
        flex: 0 0 auto;
        min-width: 150px;
        align-items: flex-end;
        text-align: right;
    }

    .ht-offer-title {
        font-size: 1.18rem;
    }

    .ht-offer-side {
        padding: 1rem;
    }

    .ht-offer-price-breakdown,
    .ht-offer-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ht-offer-card {
    border-radius: 22px;
    box-shadow: var(--ht-shadow-card);
}

.ht-offer-card--placeholder::before {
    display: none;
}

.ht-placeholder {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(233, 238, 243, 0.95) 0%,
        rgba(247, 249, 251, 1) 45%,
        rgba(233, 238, 243, 0.95) 100%
    );
    background-size: 220% 100%;
    animation: ht-skeleton-shimmer 1.35s ease-in-out infinite;
}

.ht-placeholder-stack {
    display: grid;
    gap: 0.35rem;
    width: 100%;
}

.ht-placeholder-control {
    display: inline-flex;
    width: 100%;
    min-height: 2.35rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.8rem;
    background: linear-gradient(
        90deg,
        rgba(233, 238, 243, 0.95) 0%,
        rgba(247, 249, 251, 1) 45%,
        rgba(233, 238, 243, 0.95) 100%
    );
    background-size: 220% 100%;
    animation: ht-skeleton-shimmer 1.35s ease-in-out infinite;
}

.ht-placeholder-control--secondary {
    min-width: 6.6rem;
}

.ht-placeholder-control--primary {
    min-width: 100%;
}

.ht-placeholder--logo {
    width: 100%;
    height: 2.6rem;
    border-radius: 0.72rem;
}

.ht-placeholder--title {
    width: min(16rem, 82%);
    height: 1rem;
}

.ht-placeholder--subtitle {
    width: min(11rem, 62%);
    height: 0.8rem;
}

.ht-placeholder--chip-label {
    width: 3.2rem;
    height: 0.48rem;
}

.ht-placeholder--chip-value {
    width: 5.8rem;
    height: 0.86rem;
}

.ht-placeholder--chip-value-short {
    width: 4.1rem;
}

.ht-placeholder--muted-chip {
    width: 4.3rem;
    height: 0.74rem;
}

.ht-placeholder--stat-label {
    width: 3.5rem;
    height: 0.52rem;
}

.ht-placeholder--stat-label-wide {
    width: 6.1rem;
}

.ht-placeholder--stat-value {
    width: 5.6rem;
    height: 0.9rem;
}

.ht-placeholder--stat-sub {
    width: 4.4rem;
    height: 0.68rem;
}

.ht-placeholder--phone-line {
    width: 6.4rem;
    height: 0.84rem;
    margin-top: 0.12rem;
}

.ht-placeholder--phone-line-short {
    width: 5.1rem;
}

.ht-placeholder--price-label {
    width: 3.8rem;
    height: 0.52rem;
}

.ht-placeholder--price-value {
    width: 4.5rem;
    height: 0.84rem;
}

.ht-placeholder--price-value-short {
    width: 3.6rem;
}

.ht-placeholder--effective-label {
    width: 3.2rem;
    height: 0.5rem;
}

.ht-placeholder--effective-value {
    width: 4.8rem;
    height: 1.55rem;
}

.ht-offer-card::before {
    height: 3px;
    opacity: 0.18;
}

.ht-offer-card--featured::before {
    height: 20px;
    content: "Anzeige";
    color: var(--brand-text);
    padding-right: .875rem;
    opacity: 1;
    margin-top: 0px;
    text-align: right;
    font-size: .85rem;
}
.ht-offer-card--featured .ht-compare-card {
    padding-top: 15px;
}

.ht-compare-card {
    display: block;
    background: var(--ht-color-surface);
    --ht-compare-space-inline: 0.65rem;
    --ht-compare-space-block: 0.65rem;
    --ht-compare-space-block-bottom: 0.55rem;
    --ht-compare-space-stack: 0.32rem;
    --ht-compare-space-cluster: 0.28rem;
    --ht-compare-space-tight: 0.18rem;
    --ht-compare-space-box: 0.48rem;
}

.ht-compare-header {
    padding: var(--ht-compare-space-block) var(--ht-compare-space-inline) var(--ht-compare-space-block-bottom) var(--ht-compare-space-inline);
    border-bottom: 1px solid var(--ht-color-border-soft);
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-compare-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ht-compare-main {
    min-width: 0;
    padding: var(--ht-compare-space-inline) var(--ht-compare-space-inline) var(--ht-compare-space-stack) var(--ht-compare-space-inline);
    background: var(--ht-color-surface);
}

.ht-compare-side {
    padding: 0 var(--ht-compare-space-inline) var(--ht-compare-space-block);
    background: var(--ht-color-surface);
}

.ht-compare-header-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ht-compare-space-stack);
}

.ht-compare-brand {
    display: flex;
    align-items: center;
    gap: var(--ht-compare-space-stack);
    min-width: 0;
}

.ht-compare-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    min-width: 78px;
    max-width: 78px;
}

.ht-compare-heading {
    min-width: 0;
    flex: 1 1 auto;
}

.ht-compare-header-info {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.ht-compare-network-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0.2rem;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 999px;
    background: var(--ht-color-surface);
}

.ht-compare-network-badge .product-offer-network {
    width: 1.1rem;
    height: 1.1rem;
}

.ht-compare-network-badge .product-offer-network_tef {
    width: auto;
    max-width: 1.45rem !important;
    height: auto;
}

.ht-compare-brand-badges,
.ht-compare-notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-compare-space-cluster);
    padding-bottom: var(--ht-compare-space-stack);
}

.ht-compare-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ht-compare-space-stack);
}

.ht-compare-badge,
.ht-compare-chip,
.ht-compare-note {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 100%;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    font-size: 0.69rem;
    line-height: 1.2;
}

.ht-compare-badge {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ht-compare-badge--featured {
    background: var(--brand-button);
    color: var(--brand-button-text);
}

.ht-compare-badge--label {
    border: 1px solid var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-compare-badge--muted {
    border: 1px solid var(--ht-color-border-soft);
    background: var(--ht-color-surface);
    color: var(--ht-color-text-soft);
}

.ht-compare-chip {
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid var(--ht-color-border-soft);
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    font-weight: 500;
    border-radius: 0.72rem;
    padding: var(--ht-compare-space-box);
    min-height: 0;
    line-height: 1.15;
}

.ht-compare-chip-content {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.ht-compare-chip-label {
    color: var(--ht-color-text-soft);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.ht-compare-chip-value {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--ht-color-text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.15;
}

.ht-compare-chip--network .ht-compare-chip-value,
.ht-compare-chip--network .ht-compare-chip-value a,
.ht-compare-chip--network .ht-compare-chip-value span {
    display: inline-flex;
    align-items: center;
}

.ht-compare-chip--muted {
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text-soft);
    grid-column: 1 / -1;
}

.ht-compare-title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: clamp(0.8rem, 1.8vw + 0.47rem, 0.96rem);
    line-height: 1.1;
    font-weight: 800;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ht-compare-device {
    display: none;
    margin-top: 0.12rem;
    color: var(--ht-color-text-soft);
    font-size: 0.8rem;
    line-height: 1.25;
    font-weight: 600;
}

.ht-compare-chip--device-mobile {
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    grid-column: 1 / -1;
}

.ht-compare-chip--device-desktop {
    display: none;
}

.ht-compare-chip-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.ht-compare-chip-media .product-offer-smartphone-image {
    width: 2.8rem;
    height: 2.8rem;
    margin-top: 0;
    opacity: 1;
    object-fit: contain;
}

.ht-compare-chip-value--device {
    display: block;
    white-space: normal;
}

.ht-compare-volume {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ht-compare-space-cluster);
}

.ht-compare-volume-text {
    display: inline-block;
}

.ht-compare-tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0.08rem 0.36rem;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 999px;
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.ht-compare-notes {
    flex-wrap: nowrap;
    gap: var(--ht-compare-space-cluster);
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ht-compare-notes::-webkit-scrollbar {
    display: none;
}

.ht-compare-note {
    flex: 0 0 auto;
    gap: var(--ht-compare-space-cluster);
    min-width: 0;
    border: 1px solid var(--ht-color-info-border);
    background: var(--ht-color-info-bg);
    color: var(--ht-color-info-text);
    text-align: left;
    appearance: none;
}

.ht-compare-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
}

.ht-compare-note-svg {
    margin-right: 0;
    width: 10px;
    height: 10px;
}

.ht-compare-note-text {
    min-width: 0;
}

.ht-compare-note--success {
    border-color: var(--ht-color-success-border);
    background: var(--ht-color-success-bg);
    color: var(--ht-color-success-text);
}

.ht-compare-note--success .ht-compare-note-icon {
    background: var(--ht-color-success-icon);
}

.ht-compare-note--info {
    border-color: var(--ht-color-info-border);
    background: var(--ht-color-info-bg);
    color: var(--ht-color-info-text);
}

.ht-compare-note--info .ht-compare-note-icon {
    background: var(--ht-color-info-icon);
}

.ht-compare-note--warning {
    border-color: var(--ht-color-warning-border);
    background: var(--ht-color-warning-bg);
    color: var(--ht-color-warning-text);
}

.ht-compare-note--warning .ht-compare-note-icon {
    background: var(--ht-color-warning-icon);
}

.ht-compare-note--danger {
    border-color: var(--ht-color-danger-border);
    background: var(--ht-color-danger-bg);
    color: var(--ht-color-danger-text);
}

.ht-compare-note--danger .ht-compare-note-icon {
    background: var(--ht-color-danger-icon);
}

.ht-compare-note--more {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
    cursor: help;
}

.ht-compare-note-tooltip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-compare-note-tooltip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.ht-compare-note-tooltip-item + .ht-compare-note-tooltip-item {
    margin-top: 0.4rem;
}

.ht-compare-note-tooltip-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    padding: 0;
    border-radius: 999px;
    line-height: 1;
}

.ht-compare-note-tooltip-svg {
    width: 0.78rem;
    height: 0.78rem;
    margin-right: 0;
}

.ht-compare-note-tooltip-icon--success {
    background: var(--ht-color-success-bg);
    color: var(--ht-color-success-icon);
}

.ht-compare-note-tooltip-icon--info {
    background: var(--ht-color-info-bg);
    color: var(--ht-color-info-icon);
}

.ht-compare-note-tooltip-icon--warning {
    background: var(--ht-color-warning-bg);
    color: var(--ht-color-warning-text);
}

.ht-compare-note-tooltip-icon--danger {
    background: var(--ht-color-danger-bg);
    color: var(--ht-color-danger-text);
}

.ht-compare-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ht-compare-space-stack);
    margin-top: var(--ht-compare-space-stack);
}

.ht-compare-stat {
    min-width: 0;
    padding: var(--ht-compare-space-box);
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.72rem;
    background: var(--ht-color-surface);
}

.ht-compare-stat-label {
    color: var(--ht-color-text-soft);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ht-compare-stat-value {
    margin-top: var(--ht-compare-space-tight);
    color: var(--ht-color-text);
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ht-compare-stat-value > * + * {
    margin-top: 0.08rem;
}

.ht-compare-phone-line {
    display: block;
}

.ht-compare-stat--phone-sms .ht-compare-stat-value {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

.ht-compare-stat--phone-sms .ht-compare-phone-line + .ht-compare-phone-line {
    margin-top: 0.12rem;
}

.ht-compare-stat-sub {
    margin-top: var(--ht-compare-space-tight);
    color: var(--ht-color-text-soft);
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
}

.ht-compare-pricebox {
    color: var(--ht-color-text);
}

.ht-compare-pricebox-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ht-compare-space-stack);
    align-items: stretch;
}

.ht-compare-pricebox-effective {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: var(--ht-compare-space-box);
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.72rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    text-align: left;
}

.ht-compare-pricebox-label {
    color: var(--ht-color-text-soft);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ht-compare-pricebox-amount {
    display: flex;
    align-items: flex-end;
    gap: var(--ht-compare-space-tight);
    margin-top: 0;
    font-size: 1.58rem;
    line-height: 0.95;
    font-weight: 800;
    white-space: nowrap;
}

.ht-compare-pricebox-amount span {
    padding-bottom: 0.14rem;
    color: var(--ht-color-text-soft);
    font-size: 0.82rem;
}

.ht-compare-pricebox-facts {
    display: grid;
    gap: var(--ht-compare-space-tight);
    padding: var(--ht-compare-space-box);
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.72rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    color: var(--ht-color-text-soft);
    font-size: 0.7rem;
    line-height: 1.5;
}

.ht-compare-pricebox-fact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    padding: 0;
    position: relative;
    white-space: normal;
}

.ht-compare-pricebox-fact > * {
    position: relative;
    z-index: 1;
}

.ht-compare-pricebox-fact-label {
    color: var(--ht-color-text-soft);
}

.ht-compare-pricebox-fact strong {
    display: block;
    margin-top: 0;
    color: var(--ht-color-text);
    font-size: 0.84rem;
    line-height: 1.1;
    white-space: normal;
}

.ht-compare-pricebox-fact--bonus {
    color: var(--ht-color-text);
    font-weight: 700;
}

.ht-compare-pricebox-fact--bonus::before {
    content: "";
    position: absolute;
    inset: -0.12rem calc(var(--ht-compare-space-box) * -1);
    background: rgba(0, 86, 164, 0.08);
    z-index: 0;
    color: var(--ht-color-text);
}

.ht-compare-pricebox-fact--bonus .ht-compare-pricebox-fact-label {
    color: var(--ht-color-brand-dark);
}

.ht-compare-pricebox-fact--bonus strong {
    color: var(--ht-color-text);
}

.ht-compare-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ht-compare-space-cluster);
    margin-top: var(--ht-compare-space-inline);
}

.ht-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.44rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
}

.ht-compare-btn--primary {
    border-color: var(--ht-color-brand);
    background: var(--ht-color-brand);
    color: var(--brand-text);
    font-size: 0.85rem;
}

.ht-compare-btn--primary:hover {
    border-color: var(--ht-color-brand-dark);
    background: var(--ht-color-brand-dark);
    color: var(--brand-text);
}

.ht-compare-btn--secondary {
    border-color: var(--ht-color-border);
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
}

.ht-compare-btn--header {
    min-height: 28px;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
}

.ht-compare-btn--secondary:hover,
.ht-compare-btn--ghost:hover {
    background: var(--ht-color-surface-subtle);
}

.ht-compare-btn--ghost {
    border-color: var(--ht-color-border-soft);
    background: var(--ht-color-surface);
    color: var(--ht-color-text-soft);
}

.ht-compare-btn--disabled {
    border-color: var(--ht-color-border-soft);
    background: var(--ht-color-surface-alt);
    color: var(--ht-color-text-soft);
    cursor: not-allowed;
}

@media (min-width: 1024px) {
    .ht-compare-device {
        display: block;
    }

    .ht-compare-card {
        --ht-compare-space-inline: 0.88rem;
        --ht-compare-space-block: 0.78rem;
        --ht-compare-space-block-bottom: 0.6rem;
        --ht-compare-space-stack: 0.42rem;
        --ht-compare-space-cluster: 0.32rem;
        --ht-compare-space-tight: 0.2rem;
        --ht-compare-space-box: 0.52rem;
    }

    .ht-compare-body {
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .ht-compare-main {
        padding: var(--ht-compare-space-stack);
        border-right: 1px solid var(--ht-color-border-soft);
    }

    .ht-compare-side {
        display: flex;
        flex-direction: column;
        padding: var(--ht-compare-space-stack);
    }

    .ht-compare-pricebox {
        padding: var(--ht-compare-space-box);
        border: 1px solid var(--ht-color-border-soft);
        border-radius: 0.82rem;
        background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    }

    .ht-compare-pricebox-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .ht-compare-pricebox-effective {
        grid-template-columns: minmax(0, 1fr);
        justify-items: end;
        width: 72px;
        min-width: 72px;
        padding: 0;
        margin: 0 0 0 var(--ht-compare-space-stack);
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: right;
    }

    .ht-compare-pricebox-facts {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ht-compare-pricebox-fact {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 0.45rem;
    }

    .ht-compare-pricebox-fact strong {
        white-space: nowrap;
    }

    .ht-compare-pricebox-fact--bonus {
        padding: 0;
    }

    .ht-compare-header-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: flex-start;
        gap: var(--ht-compare-space-stack);
    }

    .ht-compare-brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .ht-compare-header-info {
        justify-items: end;
        align-content: start;
    }

    .ht-compare-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--ht-compare-space-cluster);
    }

    .ht-compare-notes {
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
    }

    .ht-compare-actions {
        margin-top: auto;
        padding-top: var(--ht-compare-space-stack);
    }
}

@media (min-width: 1024px) {
    .ht-compare-body {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .ht-compare-main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ht-compare-space-stack);
        align-items: stretch;
    }

    .ht-compare-notes {
        grid-column: 1 / -1;
    }

    .ht-compare-meta {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        align-content: stretch;
        height: 100%;
    }

    .ht-compare-meta > .ht-compare-chip:not(.ht-compare-chip--muted):not(.ht-compare-chip--device-desktop) {
        flex: 1 1 0;
        align-items: center;
    }

    .ht-compare-meta > .ht-compare-chip:not(.ht-compare-chip--muted):not(.ht-compare-chip--device-desktop) .ht-compare-chip-content {
        align-content: center;
        min-height: 100%;
    }

    .ht-compare-stats {
        grid-column: 2 / span 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }

    .ht-compare-header-main {
        align-items: center;
    }

    .ht-compare-header-info {
        align-self: center;
    }

    .ht-compare-card--bundle .ht-compare-device {
        display: none;
    }

    .ht-compare-card--bundle .ht-compare-meta {
        align-self: stretch;
        height: 100%;
    }

    .ht-compare-card--bundle .ht-compare-chip--desktop-bundle-fallback {
        display: none;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop {
        display: grid;
        grid-template-rows: auto auto;
        flex: 1 0;
        justify-items: left;
        align-content: center;
        gap: 0.45rem;
        text-align: center;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-media {
        min-height: 0;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .product-offer-smartphone-image {
        width: 3.35rem;
        height: 3.35rem;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-content {
        width: 100%;
        max-width: 100%;
        justify-items: left;
        gap: 0.12rem;
        text-align: center;
        margin-left: .4rem;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-label,
    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-value--device {
        display: block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-value--device {
        line-height: 1.2;
    }
}

@media (max-width: 1023.98px) {
    .ht-compare-chip--device-mobile {
        display: grid;
    }

    .ht-compare-chip--desktop-bundle-fallback,
    .ht-compare-chip--device-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {
    .ht-compare-body {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .ht-compare-main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ht-compare-space-stack);
        align-items: stretch;
    }

    .ht-compare-notes {
        grid-column: 1 / -1;
    }

    .ht-compare-meta {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        align-content: stretch;
        height: 100%;
    }

    .ht-compare-meta > .ht-compare-chip:not(.ht-compare-chip--muted):not(.ht-compare-chip--device-desktop) {
        flex: 1 1 0;
        align-items: center;
    }

    .ht-compare-meta > .ht-compare-chip:not(.ht-compare-chip--muted):not(.ht-compare-chip--device-desktop) .ht-compare-chip-content {
        align-content: center;
        min-height: 100%;
    }

    .ht-compare-card--bundle .ht-compare-device {
        display: none;
    }

    .ht-compare-card--bundle .ht-compare-meta {
        align-self: stretch;
        height: 100%;
    }

    .ht-compare-card--bundle .ht-compare-chip--desktop-bundle-fallback {
        display: none;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop {
        display: grid;
        grid-template-rows: auto auto;
        flex: 1 0;
        justify-items: left;
        align-content: center;
        gap: 0.45rem;
        text-align: center;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-media {
        min-height: 0;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .product-offer-smartphone-image {
        width: 3.35rem;
        height: 3.35rem;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-content {
        width: 100%;
        max-width: 100%;
        justify-items: left;
        gap: 0.12rem;
        text-align: center;
        margin-left: .4rem;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-label,
    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-value--device {
        display: block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ht-compare-card--bundle .ht-compare-chip--device-desktop .ht-compare-chip-value--device {
        line-height: 1.2;
    }

    .ht-compare-stats {
        grid-column: 2 / span 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }

    .ht-compare-header-main {
        align-items: center;
    }

    .ht-compare-header-info {
        align-self: center;
    }

    .ht-compare-title {
        font-size: 1rem;
        -webkit-line-clamp: 1;
    }
}

body.ht-modal-open {
    overflow: hidden;
}

.ht-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    padding: 1rem;
    background-color: var(--ht-overlay);
    justify-content: center;
    align-items: center;
}

.ht-modal.flex {
    display: flex;
}

.ht-modal-dialog {
    width: 100%;
    max-width: 620px;
    margin: auto;
}

.ht-modal-dialog-lg {
    max-width: 940px;
}

.ht-modal-dialog-xl {
    max-width: 1140px;
}

.ht-modal-dialog-centered {
    align-self: center;
}

.ht-modal-dialog-scrollable .ht-modal-content {
    max-height: calc(100vh - 2rem);
}

.ht-modal-dialog-scrollable .ht-modal-body {
    overflow-y: auto;
}

.ht-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--ht-color-surface);
    border: 1px solid var(--ht-color-border-soft);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: var(--ht-shadow-modal);
}

.ht-modal-header,
.ht-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 1rem;
}

.ht-modal-header {
    border-bottom: 1px solid var(--ht-color-border-soft);
    background-clip: padding-box;
}

.ht-modal-footer {
    border-top: 1px solid var(--ht-color-border-soft);
}

.ht-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    background: var(--ht-color-surface);
}

.ht-modal-title {
    margin: 0;
}

.ht-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: .375rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ht-color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ht-modal-close::before {
    content: "×";
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
}

.ht-modal-close:hover,
.ht-modal-close:focus {
    background: var(--ht-color-surface);
    border-color: var(--ht-color-brand-border);
    color: var(--ht-color-brand-dark);
}

.ht-modal-close-white {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.88);
    color: var(--ht-color-brand-dark);
}

.ht-ranking-modal-header {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-ranking-modal-title {
    color: var(--ht-color-text);
    font-size: clamp(1.15rem, 1.2vw + 0.95rem, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.ht-ranking-modal-copy {
    color: var(--ht-color-text);
}

.ht-ranking-modal-intro,
.ht-ranking-modal-paragraph {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ht-ranking-modal-group {
    display: grid;
    gap: 0.75rem;
}

.ht-ranking-modal-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--ht-color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ht-ranking-modal-list li {
    margin: 0;
    list-style-type: initial;
}

.ht-partner-modal-header {
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-partner-modal-title {
    color: var(--ht-color-text);
    font-size: clamp(1.15rem, 1.2vw + 0.95rem, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.ht-partner-info {
    display: grid;
    gap: 1rem;
    color: var(--ht-color-text);
}

.ht-partner-info-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: flex-start;
}

.ht-partner-info-alert-icon {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    color: var(--ht-color-brand-dark);
}

.ht-partner-info-alert-icon svg {
    width: 100%;
    height: 100%;
}

.ht-partner-info-alert-copy {
    font-size: 0.95rem;
    line-height: 1.6;
}

.ht-partner-info-section {
    display: grid;
    gap: 0.85rem;
}

.ht-partner-info-heading {
    margin: 0;
    color: var(--ht-color-text);
    font-size: clamp(1.05rem, 0.8vw + 0.95rem, 1.3rem);
    line-height: 1.2;
    font-weight: 800;
}

.ht-partner-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ht-partner-info-card {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface-alt);
}

.ht-partner-info-card-title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
}

.ht-partner-info-logo {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

.ht-partner-info-text {
    margin: 0;
    color: var(--ht-color-text);
    font-size: 0.94rem;
    font-style: normal;
    line-height: 1.6;
}

.ht-partner-info-link {
    color: var(--ht-color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ht-partner-info-link:hover {
    color: var(--ht-color-link-hover);
}

@media (max-width: 767.98px) {
    .ht-partner-info-grid {
        grid-template-columns: 1fr;
    }
}

.ht-details {
    display: grid;
    gap: 1rem;
    color: var(--ht-color-text);
}

.ht-details-header {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--ht-color-brand-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
}

.ht-details-header-main {
    display: grid;
    gap: 0.9rem;
}

.ht-details-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.ht-details-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
}

.ht-details-copy {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.ht-details-eyebrow {
    color: var(--ht-color-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.ht-details-title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: clamp(1rem, 1vw + 0.85rem, 1.25rem);
    line-height: 1.15;
    font-weight: 800;
}

.ht-details-actions {
    display: grid;
}

.ht-details-cta {
    width: 100%;
}

.ht-details-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.ht-details-chip {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.85rem;
    background: var(--ht-color-surface);
}

.ht-details-chip-label {
    color: var(--ht-color-text-soft);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.ht-details-chip-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--ht-color-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.ht-details-chip--network .ht-details-chip-value,
.ht-details-chip--network .ht-details-chip-value a,
.ht-details-chip--network .ht-details-chip-value span {
    display: inline-flex;
    align-items: center;
}

.ht-details-alert {
    padding: 0.95rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    text-align: left;
}

.ht-details-alert strong {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.ht-details-alert-copy {
    margin-top: 0.45rem;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ht-details-alert-icon {
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.ht-details-alert--success {
    border-color: var(--ht-color-success-border);
    background: var(--ht-color-success-bg);
    color: var(--ht-color-success-text);
}

.ht-details-alert--warning {
    border-color: var(--ht-color-warning-border);
    background: var(--ht-color-warning-bg);
    color: var(--ht-color-warning-text);
}

.ht-details-alert--danger {
    border-color: var(--ht-color-danger-border);
    background: var(--ht-color-danger-bg);
    color: var(--ht-color-danger-text);
}

.ht-details-tabs {
    display: grid;
    gap: 0.9rem;
}

.ht-details-tablist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0 0 0.9rem;
    border-bottom: 1px solid var(--ht-color-border-soft);
    list-style: none;
}

.ht-details-tabitem {
    margin: 0;
    min-width: 0;
}

.ht-details-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 999px;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ht-details-tab:hover {
    color: var(--ht-color-text);
    background: var(--ht-color-surface-subtle);
    border-color: var(--ht-color-border);
}

.ht-details-tab.active {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-details-panes {
    display: grid;
}

.ht-details-pane {
    padding: 0;
}

.ht-details-section {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 1rem;
    background: var(--ht-color-surface);
}

.ht-details-section-title {
    margin: 0;
    color: var(--ht-color-text);
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 800;
}

.ht-details-note {
    margin: .5rem 0 0 0;
    color: var(--ht-color-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ht-details-section-stack {
    display: grid;
    gap: 0.95rem;
}

.ht-details-group {
    display: grid;
    gap: 0;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface);
    overflow: hidden;
}

.ht-details-table-title {
    display: block;
    margin: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, var(--ht-color-brand-surface-soft) 0%, var(--ht-color-brand-surface) 100%);
    border-bottom: 1px solid var(--ht-color-brand-border);
    color: var(--ht-color-text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.15;
    text-transform: uppercase;
}

.ht-details-table-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 1rem;
}

.ht-details-table,
.ht-details .table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    table-layout: fixed;
}

.ht-details-table th,
.ht-details-table td,
.ht-details .table th,
.ht-details .table td {
    padding: 0.8rem 0;
    border-top: 1px solid var(--ht-color-border-soft);
    color: var(--ht-color-text);
    font-size: 0.94rem;
    line-height: 1.45;
    vertical-align: top;
}

.ht-details-table th {
    width: 48%;
}

.ht-details-table tbody tr:first-child th,
.ht-details-table tbody tr:first-child td,
.ht-details .table tbody tr:first-child th,
.ht-details .table tbody tr:first-child td {
    border-top: 0;
}

.ht-details-table th,
.ht-details .table th {
    color: var(--ht-color-text-soft);
    font-weight: 700;
    text-align: left;
}

.ht-details-row-label {
    display: inline-block;
    min-width: 0;
}

.ht-details-row-head {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.ht-details-row-meta {
    display: block;
    margin-top: 0.12rem;
    color: var(--ht-color-text-soft);
    font-size: 0.82rem;
    font-weight: 500;
}

.ht-details-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ht-color-brand);
    cursor: help;
    vertical-align: middle;
}

.ht-details-tooltip-icon {
    width: 1rem;
    height: 1rem;
}

.ht-details-price-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ht-details-price-old {
    color: var(--ht-color-text-soft);
}

.ht-details-row-total th,
.ht-details-row-total td {
    color: var(--ht-color-text);
    font-weight: 800;
}

.ht-details-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.58rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 999px;
    background: var(--ht-color-surface);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.ht-details-status--success {
    border-color: var(--ht-color-success-border);
    background: var(--ht-color-success-bg);
    color: var(--ht-color-success-text);
}

.ht-details-status--muted {
    border-color: var(--ht-color-border-soft);
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text-soft);
}

.ht-details-inline-note {
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface-subtle);
    color: var(--ht-color-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ht-details-inline-note--info {
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface);
    color: var(--ht-color-brand-dark);
}

.ht-details-inline-note--warning {
    border-color: var(--ht-color-warning-border);
    background: var(--ht-color-warning-bg);
    color: var(--ht-color-warning-text);
}

.ht-details-option-list,
.ht-details-doc-list {
    display: grid;
    gap: 0.65rem;
}

.ht-details-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface);
}

.ht-details-option-label {
    min-width: 0;
    color: var(--ht-color-text);
    font-size: 0.94rem;
    line-height: 1.4;
    font-weight: 600;
}

.ht-details-doc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.82rem 0.95rem;
    border: 1px solid var(--ht-color-border-soft);
    border-radius: 0.9rem;
    background: var(--ht-color-surface);
    color: var(--ht-color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ht-details-doc-link:hover {
    color: var(--ht-color-text);
    border-color: var(--ht-color-brand-border);
    background: var(--ht-color-brand-surface-soft);
}

.ht-details-doc-list form {
    margin: 0;
}

.ht-details-doc-list form .ht-details-doc-link {
    width: 100%;
}

.ht-details-doc-icon,
.ht-details-doc-chevron {
    color: var(--ht-color-brand);
}

.ht-details-doc-link > span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.ht-details .table .text-right,
.ht-details .table td:last-child {
    text-align: right;
}

.ht-details .table strong,
.ht-details .table b {
    color: var(--ht-color-text);
}

.ht-details a:not(.ht-btn):not(.ht-details-tab) {
    color: var(--ht-color-brand);
}

.ht-details a:not(.ht-btn):not(.ht-details-tab):hover {
    color: var(--ht-color-brand-dark);
}

@media (min-width: 768px) {
    .ht-details-header-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .ht-details-actions {
        justify-items: end;
    }

    .ht-details-cta {
        width: auto;
        min-width: 9rem;
    }

    .ht-details-tablist {
        grid-template-columns: repeat(var(--ht-details-tab-count), minmax(0, 1fr));
    }

    /*.ht-details-table-shell {*/
    /*    max-width: 52rem;*/
    /*}*/
}

@media (max-width: 639px) {
    .ht-details-tablist {
        padding-bottom: 0.75rem;
    }

    .ht-details-tab {
        padding-inline: 0.75rem;
    }

    .ht-details-table th {
        width: 50%;
    }

    .ht-details-table-shell {
        padding: 0 0.85rem;
    }

    .ht-details-option-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ht-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.35rem;
    padding: .55rem .95rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: all .12s ease-in-out;
}

.ht-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.ht-btn-lg {
    min-height: 2.8rem;
    padding: .7rem 1rem;
}

.ht-btn-primary {
    color: var(--brand-text);
    background: var(--ht-color-brand);
    border-color: var(--ht-color-brand);
}

.ht-btn-primary:hover {
    background: var(--ht-color-brand-dark);
    border-color: var(--ht-color-brand-dark);
}

.ht-btn-secondary {
    color: var(--brand-button-text);
    background: var(--brand-button);
    border-color: var(--brand-button);
}

.ht-btn-secondary:hover {
    background: var(--brand-button-hover);
    border-color: var(--brand-button-hover);
}

.ht-btn-muted {
    color: var(--ht-color-text-muted);
    background: var(--ht-color-surface);
    border-color: var(--ht-color-text-muted);
}

.ht-btn-muted:hover {
    background: var(--ht-color-surface-alt);
}

.ht-alert {
    padding: .875rem 1rem;
    border-radius: .5rem;
    border: 1px solid transparent;
}

.ht-alert-danger {
    color: var(--ht-color-danger-text);
    background-color: var(--ht-color-danger-bg);
    border-color: var(--ht-color-danger-border);
}

.ht-alert-info {
    color: var(--ht-color-brand-dark);
    background-color: var(--ht-color-brand-surface);
    border-color: var(--ht-color-brand-border);
}

.ht-spinner {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: .25rem solid var(--ht-color-brand);
    border-right-color: transparent;
    animation: ht-spinner .75s linear infinite;
}

.ht-loader-wrapper {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[data-ui-dropdown-menu].hidden {
    display: none;
}

[data-ui-dropdown-menu].block {
    display: block;
}

.filter-none.is-visible {
    display: block;
}