/* generated by scripts/css-min.php from ../category-explainer.css — edit the source, never this file */
.vonnik-xh-on .hero-section .vonnik-xh .page-title { margin: 0; color: var(--vonnik-on-action); } .vonnik-xh__q { margin: 0 0 var(--vonnik-space-2); color: var(--vonnik-on-action); font-size: var(--vonnik-text-xl); text-transform: none; } .vonnik-xh__box { display: grid; gap: var(--vonnik-space-4); } @media (min-width: 1000px) { .vonnik-xh__in > * { max-width: 50%; } } .vonnik-xh__group { display: grid; gap: var(--vonnik-space-2); } .vonnik-xh__legend { display: flex; align-items: center; gap: var(--vonnik-space-3); margin: 0; color: var(--vonnik-ink); font-weight: var(--vonnik-weight-black); } .vonnik-xh__opts { display: grid; gap: var(--vonnik-space-2); } @media (min-width: 690px) { .vonnik-xh__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vonnik-xh__opt { --vonnik-card-pad: var(--vonnik-space-3); display: flex; align-items: center; gap: var(--vonnik-space-2); min-height: var(--vonnik-control-tap); color: var(--vonnik-ink); font: inherit; font-weight: var(--vonnik-weight-bold); text-align: left; } .vonnik-xh__check { flex: 0 0 auto; color: var(--vonnik-border-control); } .vonnik-xh__tick { opacity: 0; } .vonnik-xh__opt.is-active .vonnik-xh__check { color: var(--vonnik-green); } .vonnik-xh__opt.is-active .vonnik-xh__tick { opacity: 1; } .vonnik-xh__advice:empty { display: none; } .vonnik-xh__advice { display: grid; gap: var(--vonnik-space-2); justify-items: start; color: var(--vonnik-ink); } .vonnik-xh__advice .vonnik-divider { justify-self: stretch; margin: 0 0 var(--vonnik-space-2); } .vonnik-xh__why { margin: 0; font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); } .vonnik-xh__roof { margin: 0 0 var(--vonnik-space-2); color: var(--vonnik-ink-soft); } @media (max-width: 689.98px) { .vonnik-xh__advice .button { justify-self: stretch; } } .vonnik-cmp { margin: 0 0 var(--vonnik-section); scroll-margin-top: var(--vonnik-space-10); } .vonnik-cmp[open] .vonnik-cmp__body { padding-bottom: var(--vonnik-space-5); } .vonnik-cmp__excl { display: block; white-space: nowrap; color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); } .vonnik-cmp__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vonnik-space-3); } @media (min-width: 690px) { .vonnik-cmp__body { gap: var(--vonnik-space-6); } } .vonnik-cmp__side { display: grid; gap: var(--vonnik-space-3); align-content: start; min-width: 0; } .vonnik-cmp__picks { grid-column: 1 / -1; display: grid; gap: var(--vonnik-space-3); } @media (min-width: 690px) { .vonnik-cmp__picks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vonnik-space-6); } } .vonnik-cmp__pick { margin: 0; } .vonnik-cmp__pick select { width: 100%; } .vonnik-cmp__slider { position: relative; overflow: hidden; } .vonnik-cmp__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vonnik-cmp__track::-webkit-scrollbar { display: none; } .vonnik-cmp__slide { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; } .vonnik-cmp__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--vonnik-xh-pos, center); } .vonnik-cmp__img.is-contain { object-fit: contain; } .vonnik-cmp__slider .vonnik-cmp__arrow.button { position: absolute; top: 50%; translate: 0 -50%; } .vonnik-cmp__slider .vonnik-cmp__arrow.button::before { content: none; } .vonnik-cmp__arrow--l { left: var(--vonnik-space-2); } .vonnik-cmp__arrow--r { right: var(--vonnik-space-2); } @media (max-width: 689.98px) { .vonnik-cmp__slider .vonnik-cmp__arrow.button { display: none; } } .vonnik-cmp__dots { position: absolute; bottom: var(--vonnik-space-2); left: 0; right: 0; display: flex; justify-content: center; gap: var(--vonnik-space-1); } .vonnik-cmp__dots .vonnik-disc { --vonnik-disc-size: var(--vonnik-space-2); background-color: var(--vonnik-border-control); } .vonnik-cmp__dots .vonnik-disc.is-on { background-color: var(--vonnik-navy); } .vonnik-cmp__name { margin: 0; font-size: var(--vonnik-text-xl); line-height: var(--vonnik-line-tight); text-transform: none; } .vonnik-cmp__for { margin: 0; color: var(--vonnik-ink-soft); } .vonnik-cmp__rows { grid-column: 1 / -1; display: grid; margin-top: var(--vonnik-space-3); } .vonnik-cmp__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vonnik-space-2) var(--vonnik-space-3); } .vonnik-cmp__rule { margin-block: var(--vonnik-space-3); } @media (min-width: 690px) { .vonnik-cmp__row { column-gap: var(--vonnik-space-6); } } .vonnik-cmp__k { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--vonnik-space-2); color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-text); } .vonnik-cmp__k svg { color: var(--vonnik-blue); } .vonnik-cmp__k em { font-style: normal; font-weight: var(--vonnik-weight-regular); text-transform: none; } .vonnik-cmp__same { margin-left: auto; font-weight: var(--vonnik-weight-regular); text-transform: none; } .vonnik-cmp__val { display: grid; gap: var(--vonnik-space-1); align-content: start; color: var(--vonnik-ink); } .vonnik-cmp__val small { display: block; color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); } .vonnik-cmp__val svg { vertical-align: middle; } .vonnik-cmp__val .vonnik-chip { justify-self: start; } .vonnik-cmp__val.is-win > span { font-weight: var(--vonnik-weight-black); } .vonnik-cmp__row.is-same .vonnik-cmp__val { color: var(--vonnik-ink-soft); } .vonnik-cmp__bar { position: relative; display: block; height: var(--vonnik-space-1); background-color: var(--vonnik-border); overflow: hidden; } .vonnik-cmp__bar i { position: absolute; top: 0; bottom: 0; left: var(--vonnik-cmp-x, 0); width: var(--vonnik-cmp-w, 0); background-color: var(--vonnik-blue); } .vonnik-cmp__bar i.is-range { background-color: var(--vonnik-blue-soft); } .vonnik-cmp__val.is-win .vonnik-cmp__bar i:first-child { background-color: var(--vonnik-navy); } .vonnik-cmp__buy { display: grid; gap: var(--vonnik-space-2); align-content: start; margin-top: var(--vonnik-space-4); } @media (max-width: 689.98px) { .vonnik-cmp__buy { grid-column: 1 / -1; margin-top: var(--vonnik-space-2); } .vonnik-cmp__buy .button { justify-self: stretch; } } .vonnik-cmp__buy .button { justify-self: start; } @media (max-width: 689.98px) { .vonnik-cmp__buy .button { justify-self: stretch; } } .vonnik-cmp__diff { color: var(--vonnik-ink-soft); font-size: var(--vonnik-text-s); }