tags inside */
.vc-summary__build {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--wp--preset--spacing--xs, 8px);
margin-top: 4px;
font-weight: 700;
}
.vc-summary__level-price {
font-variant-numeric: tabular-nums;
}
/* — theme handles typography */
.vc-summary__build-help {
margin: 4px 0 0;
color: var(--vc-summary-muted);
}
.vc-summary__total {
/* Inline padding comes from the dark footer box; only vertical here. */
padding: var(--wp--preset--spacing--sm, 16px) 0;
color: var(--wp--preset--color--white, #ffffff);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--sm, 16px);
}
.vc-summary__total span {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.7);
font-weight: 700;
}
.vc-summary__total strong {
font-size: var(--wp--preset--font-size--h-4, 1.25rem);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.vc-summary__cta {
background: var(--vc-accent);
color: var(--vc-summary-total-fg);
font: inherit;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 600;
letter-spacing: 0;
border: 0;
border-radius: 0;
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--md, 24px);
cursor: pointer;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs, 8px);
transition: background-color var(--vc-transition);
}
.vc-summary__cta:hover {
background: var(--vc-accent-hover);
}
/* display:flex above would otherwise defeat the hidden attribute. */
.vc-summary__cta[hidden] {
display: none;
}
.vc-summary__cta--send {
font-size: var(--wp--preset--font-size--body, 1rem);
}
/* Hidden on all steps for now (testing). */
.vc-summary__cta:not(.vc-summary__cta--send) {
display: none;
}
.vc-summary__share {
background: transparent;
color: var(--vc-fg);
font: inherit;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 600;
border: 0;
border-top: 1px solid var(--vc-summary-row-border);
border-bottom: 1px solid var(--vc-summary-row-border);
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--md, 24px);
cursor: pointer;
width: 100%;
text-align: center;
transition: background-color var(--vc-transition-fast), color var(--vc-transition-fast);
}
.vc-summary__share:hover:not([disabled]) {
background: var(--vc-summary-bg);
color: var(--vc-accent);
}
.vc-summary__share[disabled] {
opacity: 0.6;
cursor: progress;
}
.vc-lead-form__actions {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs, 8px);
align-items: center;
margin-top: var(--wp--preset--spacing--md, 24px);
}
.vc-summary__handle {
display: none;
}
.vc-summary__groups {
list-style: none;
margin: 0;
padding: var(--wp--preset--spacing--xs, 8px) 0;
}
.vc-summary__groups:empty {
display: none;
}
.vc-summary__group {
border-top: 1px solid var(--vc-summary-row-border);
padding: 4px 0;
}
.vc-summary__group:first-child {
border-top: 0;
}
.vc-summary__group-head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--md, 24px) 4px;
}
.vc-summary__group-name {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vc-fg);
}
.vc-summary__group-count {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.05em;
color: var(--vc-summary-muted);
text-transform: uppercase;
}
.vc-summary__items {
list-style: none;
margin: 0;
padding: 0 0 var(--wp--preset--spacing--xs, 8px);
}
.vc-summary__items:empty {
display: none;
}
.vc-summary__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--wp--preset--spacing--lg, 40px) var(--wp--preset--spacing--md, 24px);
color: var(--vc-summary-muted);
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-summary__empty[hidden] {
display: none;
}
.vc-summary__empty-icon {
width: 40px;
height: 40px;
color: var(--vc-border-strong);
margin-bottom: var(--wp--preset--spacing--xs, 8px);
}
.vc-summary__empty-title {
margin: 0;
font-weight: 700;
color: var(--vc-summary-fg);
letter-spacing: 0.02em;
}
.vc-summary__empty-text {
margin: 0;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
max-width: 28ch;
line-height: 1.4;
}
.vc-summary__item {
position: relative;
display: grid;
grid-template-columns: 48px 1fr auto;
grid-template-rows: auto auto;
column-gap: var(--wp--preset--spacing--sm, 16px);
row-gap: 2px;
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--md, 24px);
}
.vc-summary__thumb {
grid-row: 1 / span 2;
align-self: center;
}
.vc-summary__item-detail {
grid-row: 1 / span 2;
align-self: center;
}
.vc-summary__item-price {
grid-column: 3;
grid-row: 1;
align-self: end;
}
.vc-summary__item-remove {
grid-column: 3;
grid-row: 2;
justify-self: end;
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
color: var(--vc-summary-muted);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease;
}
.vc-summary__item:hover .vc-summary__item-remove,
.vc-summary__item:focus-within .vc-summary__item-remove {
opacity: 1;
}
.vc-summary__item-remove:hover,
.vc-summary__item-remove:focus-visible {
color: var(--vc-error, #ee0000);
}
@media (hover: none) {
.vc-summary__item-remove {
opacity: 1;
}
}
.vc-summary__item[data-source="required"] .vc-summary__item-remove {
display: none;
}
.vc-summary__thumb {
width: 48px;
height: 48px;
padding: 0;
background-color: var(--vc-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
display: block;
cursor: zoom-in;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.vc-summary__thumb:hover,
.vc-summary__thumb:focus-visible {
border-color: var(--wp--preset--color--original-blue, #0071ce);
box-shadow: 0 0 0 2px rgba(0, 113, 206, 0.25);
outline: none;
}
.vc-summary__thumb:not([style*="background-image"]) {
background-image: var(--vc-hero-gradient);
}
.vc-summary__item-detail {
min-width: 0;
}
/*
— theme handles typography */
.vc-summary__item-name {
margin: 0;
font-weight: 600;
}
.vc-summary__item-meta {
margin: 2px 0 0;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
color: var(--vc-summary-muted);
}
/* Line-level montering: time + cost share of the item price above. */
.vc-summary__item-montering {
margin: 2px 0 0;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
color: var(--vc-summary-muted);
font-variant-numeric: tabular-nums;
}
.vc-summary__item-montering[hidden] {
display: none;
}
/* — keep tokenized typography */
.vc-summary__item-price {
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Presentation modes */
.vc-presentation--inline {
/* default — already styled */
}
.vc-presentation--fullviewport {
max-width: none;
margin: 0;
padding: 0;
width: 100vw;
min-height: 100vh;
}
/* Admin bar height — 32px desktop, 46px mobile (matches WP core). */
:root { --vc-adminbar: 0px; }
body.admin-bar { --vc-adminbar: 32px; }
@media (max-width: 782px) {
body.admin-bar { --vc-adminbar: 46px; }
}
/* Lightbox mode: section is hidden in flow until promoted. */
.vc-configurator.vc-app.vc-presentation--lightbox:not(.is-lightbox-open) {
display: none;
}
/* Promoted overlay: any section that gets .is-lightbox-open becomes a fixed
* viewport overlay. Specificity (.vc-configurator.vc-app.is-lightbox-open) beats
* the base .vc-app shell rules so this works regardless of the underlying mode. */
.vc-configurator.vc-app.is-lightbox-open {
position: fixed;
left: 0;
right: 0;
top: var(--vc-adminbar);
bottom: 0;
width: 100vw;
height: calc(100vh - var(--vc-adminbar));
height: calc(100dvh - var(--vc-adminbar));
max-width: none;
margin: 0;
padding: 0;
z-index: 9999;
background: var(--vc-bg);
overflow: hidden;
overscroll-behavior: contain;
display: flex;
}
/* Inline-mode placeholder: reserves the section's height when it gets promoted
* to fixed-overlay, so the page doesn't reflow under the customer. */
.vc-inline-placeholder {
height: 100vh;
height: calc(100vh - var(--vc-adminbar, 0px));
height: calc(100dvh - var(--vc-adminbar, 0px));
}
.vc-inline-placeholder[hidden] {
display: none;
}
.vc-lightbox-close[hidden] {
display: none;
}
/* When the lightbox is open, lock the underlying page scroll */
body.vc-lightbox-open {
overflow: hidden;
}
.vc-lightbox-close {
position: fixed;
top: calc(var(--wp--preset--spacing--sm, 16px) + var(--vc-adminbar));
right: var(--wp--preset--spacing--sm, 16px);
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: var(--vc-card-bg);
color: var(--vc-fg);
font-size: var(--wp--preset--font-size--h-4, 1.25rem);
line-height: 1;
cursor: pointer;
box-shadow: var(--vc-shadow-card);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.vc-lightbox-close:hover {
background: var(--vc-summary-bg);
}
/* Trigger button (class="vc-open" anywhere also works) */
.vc-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--lg, 40px);
background: var(--vc-accent);
color: var(--vc-summary-total-fg);
border: 0;
border-radius: var(--vc-radius);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background-color var(--vc-transition);
}
.vc-trigger:hover {
background: var(--vc-accent-hover);
color: var(--vc-summary-total-fg);
}
/* Preset gallery */
.vc-presets {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--wp--preset--spacing--sm, 16px);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Gallery layout: the steps column is narrow, so auto-fit gives one huge
full-width preset per row — out of scale with the compact product cards.
Two tiles per row (one on mobile) keeps the startpakke identity at half
the size. */
.vc-layout--gallery .vc-presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--xs, 8px);
}
@media (max-width: 599px) {
.vc-layout--gallery .vc-presets {
grid-template-columns: 1fr;
}
}
.vc-preset-card {
margin: 0;
}
.vc-preset-card__btn {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
background: var(--vc-card-bg);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
overflow: hidden;
transition: border-color var(--vc-transition-fast);
}
.vc-preset-card__btn:hover {
border-color: var(--vc-accent);
}
.vc-preset-card.is-applied .vc-preset-card__btn {
border-color: var(--vc-accent);
}
/* The tile mirrors the 2-col product card exactly: 1:1 image on top, then
name, price (delta), description — same font sizes and placement. */
.vc-preset-card__img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: var(--vc-summary-bg);
}
.vc-preset-card__img--empty {
background: linear-gradient(135deg, var(--wp--preset--color--dark-grey, #565657) 0%, var(--wp--preset--color--black, #101012) 80%);
display: flex;
align-items: center;
justify-content: center;
}
.vc-preset-card__icon-large {
font-size: 3rem;
color: rgba(255, 255, 255, 0.85);
}
.vc-preset-card__body {
padding: var(--wp--preset--spacing--sm, 16px);
display: flex;
flex-direction: column;
gap: 2px;
}
.vc-preset-card__icon {
margin-right: var(--wp--preset--spacing--xs, 8px);
}
/* , but rendered like .vc-option__name — inherited size, semibold. */
.vc-preset-card__name {
margin: 0;
order: 1;
font-size: 1em;
font-weight: 600;
line-height: inherit;
}
/* Like .vc-option__excerpt. */
.vc-preset-card__desc {
margin: 4px 0 0;
order: 3;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
line-height: 1.4;
color: var(--vc-fg-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Price row directly under the name, like the product card's price. */
.vc-preset-card__meta {
display: flex;
align-items: baseline;
gap: var(--wp--preset--spacing--xs, 8px);
order: 2;
margin-top: 2px;
color: var(--vc-fg-muted);
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
}
.vc-preset-card__delta {
color: var(--vc-accent);
font-weight: 700;
font-size: var(--wp--preset--font-size--body, 1rem);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vc-preset-card--scratch .vc-preset-card__btn {
background: var(--vc-summary-bg);
}
.vc-preset-card--scratch .vc-preset-card__img {
min-height: 80px;
}
/* Apply preset modal */
.vc-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 200ms ease, visibility 200ms;
}
.vc-modal[hidden] {
display: flex !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.vc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.vc-modal__panel {
position: relative;
background: var(--vc-card-bg);
border-radius: var(--vc-radius);
max-width: 480px;
width: calc(100% - 48px);
padding: var(--wp--preset--spacing--lg, 40px);
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow: var(--vc-shadow-popover);
transform: scale(1) translateY(0);
transition: transform var(--vc-transition-slow);
}
.vc-modal[hidden] .vc-modal__panel {
transform: scale(0.96) translateY(8px);
}
.vc-modal__panel--wide {
max-width: 960px;
}
/* Gallery lightbox variant: full-screen dark backdrop, no card chrome — mirrors
the WP core / WC PhotoSwipe lightbox. The panel becomes a transparent
full-viewport flex column (stage center, thumbs bottom). */
.vc-modal--gallery .vc-modal__backdrop {
background: rgba(0, 0, 0, 0.92);
}
.vc-modal--gallery .vc-modal__panel {
background: transparent;
box-shadow: none;
border-radius: 0;
max-width: none;
width: 100%;
max-height: 100vh;
height: 100vh;
padding: clamp(16px, 4vh, 48px) clamp(12px, 4vw, 64px);
overflow: visible;
display: flex;
flex-direction: column;
}
.vc-modal--gallery .vc-modal__close {
background: rgba(255, 255, 255, 0.12);
color: #fff;
top: clamp(12px, 3vh, 28px);
right: clamp(12px, 3vw, 28px);
font-size: 1.5rem;
}
.vc-modal--gallery .vc-modal__close:hover {
background: rgba(255, 255, 255, 0.28);
}
.vc-modal__close {
position: absolute;
top: var(--wp--preset--spacing--sm, 16px);
right: var(--wp--preset--spacing--sm, 16px);
width: 44px;
height: 44px;
border-radius: 50%;
border: 0;
background: var(--vc-summary-bg);
color: var(--vc-fg);
cursor: pointer;
font-size: var(--wp--preset--font-size--h-4, 1.25rem);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background-color var(--vc-transition-fast);
}
.vc-modal__close:hover {
background: var(--vc-border);
}
/* Quickview */
.vc-quickview {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
gap: var(--wp--preset--spacing--lg, 40px);
padding-right: var(--wp--preset--spacing--md, 24px);
}
.vc-quickview__media {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-quickview__main {
position: relative;
aspect-ratio: 1 / 1;
background: var(--vc-summary-bg);
border-radius: var(--vc-radius);
overflow: hidden;
}
.vc-quickview__main:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
.vc-quickview__track {
display: flex;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.vc-quickview__track::-webkit-scrollbar {
display: none;
}
.vc-quickview__slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
scroll-snap-align: start;
}
.vc-quickview__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.92);
color: var(--vc-fg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: var(--vc-shadow-subtle);
transition: background-color var(--vc-transition-fast), transform var(--vc-transition-fast);
}
.vc-quickview__nav[hidden] {
display: none;
}
.vc-quickview__nav:hover {
background: var(--vc-card-bg);
}
.vc-quickview__nav:active {
transform: translateY(-50%) scale(0.96);
}
.vc-quickview__nav:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
.vc-quickview__nav--prev { left: var(--wp--preset--spacing--xs, 8px); }
.vc-quickview__nav--next { right: var(--wp--preset--spacing--xs, 8px); }
.vc-quickview__nav svg {
width: 20px;
height: 20px;
}
/* Pagination dots — mobile only */
.vc-quickview__dots {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--wp--preset--spacing--xs, 8px);
justify-content: center;
}
.vc-quickview__dots[hidden] {
display: none;
}
.vc-quickview__dot-item {
margin: 0;
}
.vc-quickview__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--vc-border-strong);
cursor: pointer;
transition: background-color var(--vc-transition-fast), transform var(--vc-transition-fast);
}
.vc-quickview__dot-item.is-active .vc-quickview__dot {
background: var(--vc-accent);
transform: scale(1.3);
}
.vc-quickview__dot:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
/* Mobile thumb/dot swap moved to end of file so it wins the cascade
* over the base .vc-quickview__thumbs { display: flex } rule below. */
.vc-quickview__thumbs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--wp--preset--spacing--xs, 8px);
flex-wrap: wrap;
}
.vc-quickview__thumb-item {
margin: 0;
}
.vc-quickview__thumb-btn {
width: 64px;
height: 64px;
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
background: var(--vc-summary-bg);
cursor: pointer;
padding: 0;
overflow: hidden;
transition: border-color var(--vc-transition-fast), transform var(--vc-transition-fast);
}
.vc-quickview__thumb-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vc-quickview__thumb-btn:hover {
border-color: var(--vc-accent);
}
.vc-quickview__thumb-btn:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
.vc-quickview__thumb-item.is-active .vc-quickview__thumb-btn {
border-color: var(--vc-accent);
}
.vc-quickview__detail {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm, 16px);
min-width: 0;
}
/*
— kicker label needs small uppercase treatment theme doesn't auto-apply */
.vc-quickview__group {
margin: 0;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vc-fg-muted);
font-weight: 600;
}
/*
— theme handles typography */
.vc-quickview__title {
margin: 0;
}
.vc-quickview__meta {
display: flex;
gap: var(--wp--preset--spacing--sm, 16px);
align-items: center;
flex-wrap: wrap;
margin: 0;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-fg-muted);
}
.vc-quickview__stock {
font-weight: 600;
}
.vc-quickview__stock.is-instock {
color: var(--vc-success);
}
.vc-quickview__compatibility {
margin: 0;
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
background: var(--vc-accent-soft);
color: var(--vc-accent);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
border-left: 3px solid var(--vc-accent);
border-radius: var(--vc-radius);
}
.vc-quickview__description {
margin: 0;
color: var(--vc-fg);
line-height: 1.5;
}
/* Product Bundle contents ("Pakken inneholder") */
.vc-quickview__bundle-title {
margin: 0 0 6px;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--vc-fg);
}
.vc-quickview__bundle-list {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
}
.vc-quickview__bundle-item {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--vc-border);
}
.vc-quickview__bundle-item:last-child {
border-bottom: 0;
}
.vc-quickview__bundle-qty {
color: var(--vc-muted, #565657);
white-space: nowrap;
}
.vc-quickview__specs {
display: grid;
grid-template-columns: minmax(120px, max-content) 1fr;
gap: 0;
margin: 0;
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
overflow: hidden;
}
.vc-quickview__specs[hidden] {
display: none;
}
.vc-quickview__specs dt,
.vc-quickview__specs dd {
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
border-top: 1px solid var(--vc-border);
}
.vc-quickview__specs dt:nth-of-type(1),
.vc-quickview__specs dt:nth-of-type(1) + dd {
border-top: 0;
}
.vc-quickview__specs dt {
font-weight: 600;
color: var(--vc-fg-muted);
background: var(--vc-summary-bg);
}
.vc-quickview__specs dd {
margin: 0;
color: var(--vc-fg);
}
.vc-quickview__footer {
margin-top: auto;
padding-top: var(--wp--preset--spacing--md, 24px);
border-top: 1px solid var(--vc-border);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--sm, 16px);
flex-wrap: wrap;
}
.vc-quickview__action-wrap {
margin-left: auto;
}
.vc-quickview__pdp-link {
margin-top: var(--wp--preset--spacing--xs, 8px);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-fg-muted);
text-decoration: underline;
text-underline-offset: 3px;
align-self: flex-start;
transition: color var(--vc-transition-fast);
}
.vc-quickview__pdp-link[hidden] {
display: none;
}
.vc-quickview__pdp-link:hover {
color: var(--vc-accent);
}
.vc-quickview__price-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.vc-quickview__price-label {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vc-fg-muted);
font-weight: 600;
}
/* — needs tokenized size since theme doesn't auto-style inline strong */
.vc-quickview__price {
font-size: var(--wp--preset--font-size--h-3, 1.75rem);
color: var(--vc-accent);
font-variant-numeric: tabular-nums;
}
.vc-quickview__action {
min-width: 200px;
}
.vc-quickview__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--sm, 16px);
padding: var(--wp--preset--spacing--xl, 64px) var(--wp--preset--spacing--md, 24px);
min-height: 320px;
text-align: center;
color: var(--vc-fg-muted);
}
.vc-quickview__loading[hidden] {
display: none;
}
.vc-quickview__loading p {
margin: 0;
}
.vc-quickview__spinner {
width: 32px;
height: 32px;
color: var(--vc-accent);
}
@media (max-width: 768px) {
.vc-quickview {
grid-template-columns: 1fr;
padding-right: 0;
}
}
/* — theme handles typography */
.vc-modal__title {
margin: 0;
font-size: var(--wp--preset--font-size--h-3, 1.5rem);
}
/* Apply-preset confirmation modal */
.vc-apply-dialog__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--xs, 8px);
margin-bottom: var(--wp--preset--spacing--md, 24px);
}
.vc-apply-dialog__media {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--vc-radius);
overflow: hidden;
background: var(--vc-summary-bg);
margin-bottom: var(--wp--preset--spacing--xs, 8px);
}
.vc-apply-dialog__media[hidden] {
display: none;
}
.vc-apply-dialog__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vc-apply-dialog__icon {
font-size: 2.5rem;
line-height: 1;
}
.vc-apply-dialog__icon[hidden],
.vc-apply-dialog__icon:empty {
display: none;
}
.vc-apply-dialog__eyebrow {
margin: 0;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vc-fg-muted);
font-weight: 700;
}
.vc-modal__body {
margin: 0 0 var(--wp--preset--spacing--sm, 16px);
color: var(--vc-fg-muted);
}
/* Conflict-choice modal: the two product CARDS are the buttons — tapping a
card keeps/chooses that product. No separate action row. */
.vc-modal--conflict .vc-modal__panel {
max-width: 560px;
outline: none; /* receives programmatic focus on open (tabindex=-1) */
}
.vc-modal--conflict .vc-modal__title {
margin: 0 0 var(--wp--preset--spacing--xs, 8px);
padding-right: 52px;
}
.vc-conflict__rule-message[hidden] {
display: none;
}
/* Cascade-remove confirm dialog: list of dependents that go along. */
.vc-cascade__list {
list-style: none;
margin: var(--wp--preset--spacing--sm, 16px) 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-cascade__item {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--xs, 8px);
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
background: var(--vc-card-bg);
}
.vc-cascade__img {
width: 44px;
height: 44px;
object-fit: cover;
border-radius: calc(var(--vc-radius) - 4px);
}
.vc-cascade__img[hidden] {
display: none;
}
.vc-cascade__name {
font-weight: 600;
min-width: 0;
}
/* Price column in the auto-add info dialog (shares the cascade list). */
.vc-cascade__price {
margin-left: auto;
white-space: nowrap;
color: var(--vc-muted, #565657);
}
/* Level-switch dialog (product requires another Ombygging). */
.vc-level-dialog__product {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--xs, 8px);
margin: var(--wp--preset--spacing--sm, 16px) 0;
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
background: var(--vc-card-bg);
}
.vc-level-dialog__img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: calc(var(--vc-radius) - 4px);
}
.vc-level-dialog__img[hidden] {
display: none;
}
.vc-level-dialog__name {
font-weight: 600;
min-width: 0;
}
.vc-level-dialog__actions {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs, 8px);
justify-content: flex-end;
}
.vc-conflict__products {
display: flex;
align-items: stretch;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-conflict__list {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--wp--preset--spacing--xs, 8px);
list-style: none;
margin: 0;
padding: 0;
min-width: 0;
}
.vc-conflict__cell {
display: flex;
flex: 1 1 auto;
}
/* Both cards render in the same NEUTRAL state — an accent background here
would read as "already selected". The action word at the bottom ("Behold" /
"Velg") is what tells them apart. */
.vc-conflict__card {
appearance: none;
font: inherit;
color: inherit;
flex: 1 1 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
padding: var(--wp--preset--spacing--sm, 16px);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
background: var(--vc-card-bg);
min-width: 0;
cursor: pointer;
transition: border-color var(--vc-transition-fast), box-shadow var(--vc-transition-fast), transform var(--vc-transition-fast);
}
.vc-conflict__card:hover {
border-color: var(--vc-accent);
box-shadow: var(--vc-shadow-card);
transform: translateY(-1px);
}
.vc-conflict__card:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
/* Action word pinned centered at the card bottom. */
.vc-conflict__action {
margin-top: auto;
padding-top: var(--wp--preset--spacing--xs, 8px);
color: var(--vc-accent);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 700;
}
.vc-conflict__img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--vc-radius);
background: var(--vc-summary-bg);
}
.vc-conflict__img[hidden] {
display: none;
}
.vc-conflict__name {
font-weight: 600;
overflow-wrap: anywhere;
}
.vc-conflict__price {
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-fg-muted);
}
@media (max-width: 599px) {
.vc-conflict__products {
flex-direction: column;
align-items: stretch;
}
.vc-conflict__card {
flex-direction: row;
flex-wrap: wrap;
text-align: left;
align-items: center;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-conflict__img {
width: 56px;
height: 56px;
flex: 0 0 auto;
}
.vc-conflict__name {
flex: 1 1 auto;
}
/* The action word wraps to its own centered line under the row. */
.vc-conflict__action {
flex: 1 1 100%;
margin-top: 0;
padding-top: 4px;
text-align: center;
}
}
.vc-modal__warning {
margin: 0 0 var(--wp--preset--spacing--md, 24px);
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
background: var(--vc-warning-soft);
border-left: 4px solid var(--vc-warning);
border-radius: var(--vc-radius);
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-fg-muted);
}
.vc-modal__actions {
display: flex;
justify-content: flex-end;
gap: var(--wp--preset--spacing--xs, 8px);
}
/* Summary preset block */
.vc-summary__preset {
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--md, 24px);
border-bottom: 1px solid var(--vc-summary-row-border);
}
.vc-summary__preset-row {
display: flex;
gap: var(--wp--preset--spacing--xs, 8px);
align-items: center;
flex-wrap: wrap;
}
.vc-summary__preset-label {
color: var(--vc-summary-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
font-weight: 600;
}
.vc-summary__preset-name {
font-weight: 700;
color: var(--vc-summary-fg);
flex: 1;
}
.vc-summary__preset-deviations {
color: var(--vc-source-preset);
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
font-weight: 600;
background: rgba(245, 158, 11, 0.12);
padding: 2px 8px;
border-radius: var(--vc-radius);
}
.vc-summary__preset-actions {
display: flex;
gap: var(--wp--preset--spacing--sm, 16px);
margin-top: 6px;
}
.vc-summary__preset-action {
background: transparent;
border: 0;
color: var(--vc-summary-muted);
font: inherit;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 0;
transition: color var(--vc-transition-fast);
}
.vc-summary__preset-action:hover {
color: var(--vc-accent);
}
/* Mobile: slide-up sheet */
@media (max-width: 1023px) {
.vc-app__layout {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--md, 24px);
}
/* Only the sidebar summary becomes a mobile slide-up sheet. The bar / below
variants keep their own flow (sticky bar / in-page block). */
.vc-summary:not(.vc-summary--bar):not(.vc-summary--below) {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
max-height: 70vh;
z-index: 50;
transform: translateY(calc(100% - 64px));
transition: transform var(--vc-transition-slow);
}
.vc-app.has-summary-open .vc-summary:not(.vc-summary--bar):not(.vc-summary--below) {
transform: translateY(0);
}
.vc-summary__handle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--md, 24px);
background: var(--vc-summary-total-bg);
color: var(--vc-summary-total-fg);
border: 0;
border-top: 1px solid var(--vc-summary-row-border);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.vc-summary__handle-label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-summary-muted);
}
.vc-summary__handle-total {
font-size: var(--wp--preset--font-size--body, 1rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.vc-app__main {
padding-bottom: 80px;
}
/* Match the extra mobile bottom padding so the cover image still fills. */
.vc-step--summary .vc-step__bg {
bottom: -80px;
}
}
/* Quickview gallery: dots on mobile, thumbs on desktop. Placed at end of file
* to win cascade over the base .vc-quickview__thumbs rule. */
@media (max-width: 768px) {
.vc-quickview__thumbs { display: none; }
.vc-quickview__dots { display: flex; }
.vc-quickview__nav { width: 36px; height: 36px; }
}
/* Equipment card density at narrow viewports. */
@media (max-width: 480px) {
.vc-option {
--vc-option-media: 90px;
}
.vc-option__content {
padding: var(--wp--preset--spacing--xs, 8px) var(--wp--preset--spacing--sm, 16px);
}
}
/* =================================================================
* Mobile carousel for builds + presets.
* The .vc-carousel wrapper holds the track + dots. On desktop the
* track keeps its native grid layout (no carousel behaviour). On
* viewports <= 768px the .vc-carousel--mobile variant switches the
* track to a horizontal scroll-snap row with peek of the next card.
* ================================================================= */
.vc-carousel {
position: relative;
}
.vc-carousel__dots {
display: none;
list-style: none;
margin: var(--wp--preset--spacing--sm, 16px) 0 0;
padding: 0;
gap: var(--wp--preset--spacing--xs, 8px);
justify-content: center;
}
.vc-carousel__dots[hidden] {
display: none;
}
.vc-carousel__dot-item {
margin: 0;
}
.vc-carousel__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--vc-border-strong);
cursor: pointer;
transition: background-color var(--vc-transition-fast), transform var(--vc-transition-fast);
}
.vc-carousel__dot-item.is-active .vc-carousel__dot {
background: var(--vc-accent);
transform: scale(1.3);
}
.vc-carousel__dot:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
@media (max-width: 768px) {
.vc-carousel--mobile {
margin-left: calc(-1 * var(--wp--preset--spacing--md, 24px));
margin-right: calc(-1 * var(--wp--preset--spacing--md, 24px));
}
.vc-carousel--mobile .vc-levels,
.vc-carousel--mobile .vc-presets {
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--sm, 16px);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
grid-template-columns: none;
padding: 0 var(--wp--preset--spacing--md, 24px);
scroll-padding-left: var(--wp--preset--spacing--md, 24px);
}
.vc-carousel--mobile .vc-levels::-webkit-scrollbar,
.vc-carousel--mobile .vc-presets::-webkit-scrollbar {
display: none;
}
.vc-carousel--mobile .vc-level,
.vc-carousel--mobile .vc-preset-card {
flex: 0 0 auto;
width: clamp(220px, 78vw, 320px);
scroll-snap-align: start;
}
/* Cap feature list inside mobile carousel cards so a build with many
* features doesn't push the whole row past the sticky step nav. */
.vc-carousel--mobile .vc-level__features {
max-height: 6em;
overflow: hidden;
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.vc-carousel--mobile .vc-carousel__dots {
display: flex;
}
}
/* =================================================================
* Reduced-motion baseline. Per gutenberg-block-design §3: every
* transition/animation collapses to ~0ms when the user prefers
* reduce. Per-effect refinements may still opt in via no-preference
* media queries above.
* ================================================================= */
@media (prefers-reduced-motion: reduce) {
.vc-configurator *,
.vc-configurator *::before,
.vc-configurator *::after,
.vc-modal,
.vc-modal *,
.vc-notice {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
.vc-spinner {
animation: none !important;
opacity: 0.6;
}
}
/* =================================================================
* UX optimisation (I12e) — touch targets ≥ 44px on mobile,
* iOS-zoom prevention on inputs, focus-visible coverage.
* ================================================================= */
/* Pagination dot: expand hit area to 32×32 around the 8px visual. */
.vc-carousel__dot {
position: relative;
}
.vc-carousel__dot::after,
.vc-quickview__dot::after {
content: '';
position: absolute;
inset: -12px;
}
/* Step nav buttons: ensure ≥ 44px tap height even on theme buttons. */
.vc-step__nav .wp-element-button {
min-height: 44px;
}
/* Progress nav button: tap area ≥ 44px tall on mobile. */
@media (max-width: 768px) {
.vc-progress__btn {
min-height: 44px;
}
}
/* iOS Safari zooms on input focus when font-size < 16px. Keep desktop
* body-sm scale but bump inputs to 16px on small viewports. */
@media (max-width: 768px) {
.vc-field input[type="text"],
.vc-field input[type="email"],
.vc-field input[type="tel"],
.vc-field textarea {
font-size: 16px;
}
}
/* Step nav hint: explains why 'Neste' is disabled. */
.vc-step__nav-hint {
flex-basis: 100%;
margin: var(--wp--preset--spacing--xs, 8px) 0 0;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
color: var(--vc-fg-muted);
text-align: center;
min-height: 1em;
}
.vc-step__nav-hint[hidden] {
display: none;
}
/* Notice dismiss button. Notice becomes flex so text + × align. */
.vc-notice {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--sm, 16px);
}
.vc-notice__dismiss {
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: 1.25rem;
line-height: 1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.7;
transition: opacity var(--vc-transition-fast);
}
.vc-notice__dismiss:hover,
.vc-notice__dismiss:focus-visible {
opacity: 1;
}
.vc-notice__dismiss:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* =============================================================================
* Build step — "character select" coverflow (Phase C)
* Main column: model-image carousel (centered = selected) + name pills +
* short info. Right column: the selected build's spec (bullets + rich
* description). Stacks on mobile so the spec is always visible (no sheet).
* =========================================================================== */
/* Mobile-first: stack carousel → pills → info → spec, all visible. */
.vc-buildstep {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md, 24px);
}
.vc-buildstep__main {
min-width: 0;
}
/* Visually hidden but kept for screen readers + as the step's focus target and
radiogroup label (the visible "Velg ombygging" heading is intentionally
dropped on this step). */
.vc-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Carousel viewport wrapper. container-type lets slide width + edge padding be
sized in cqw (1% of this element's width) — stable regardless of the track's
own padding, so edge slides center without the circular %/flex-basis trap and
without JS. (Same approach as the ch/carousel block.) */
.vc-buildselect {
position: relative;
container-type: inline-size;
}
/* The track is the actual scroll-snap container passed to lib/carousel.js. */
.vc-buildselect__track {
--vc-slide-w: clamp(220px, 72cqw, 440px);
display: flex;
gap: var(--wp--preset--spacing--md, 24px);
list-style: none;
margin: 0;
padding: 0;
/* Edge padding so the first/last slide can scroll to center. */
padding-inline: max(0px, calc((100cqw - var(--vc-slide-w)) / 2));
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.vc-buildselect__track::-webkit-scrollbar {
display: none;
}
.vc-buildselect__slide {
position: relative;
flex: 0 0 var(--vc-slide-w);
scroll-snap-align: center;
cursor: pointer;
transform-origin: center center;
will-change: transform, opacity;
/* Scale/opacity are set per-frame by the scroll-driven scaler in the store
(continuous coverflow). These are the pre-JS fallback values. */
opacity: 0.4;
transform: scale(0.74);
}
.vc-buildselect__slide.is-active {
cursor: default;
}
.vc-buildselect__img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
background: var(--wp--preset--color--white, #fff);
border-radius: var(--vc-radius);
}
.vc-buildselect__img--empty {
background: var(--vc-hero-gradient);
}
/* "Valgt" badge on the centered car. */
/* Choose button — sits between the price and the "Vis informasjon" toggle.
Core block-button styling: "Velg" = outline, "Valgt" = primary fill (toggled
via is-style-outline). Centered; a small entrance fade on first paint. */
.vc-buildselect__choose {
display: block;
width: fit-content;
margin: var(--wp--preset--spacing--sm, 16px) auto 0;
animation: vc-choose-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes vc-choose-in {
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.vc-buildselect__choose {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.vc-buildselect__slide {
transition: none;
}
}
/* Title row beneath the slides: ‹ prev Build name next › */
.vc-buildselect__nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--sm, 16px);
margin-top: var(--wp--preset--spacing--sm, 16px);
}
.vc-buildselect__nav .vc-buildselect__title {
margin: 0;
min-width: 6ch;
text-align: center;
}
.vc-buildselect__arrow {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
font-size: 28px;
line-height: 1;
color: var(--wp--preset--color--black, #101012);
background: transparent;
border: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 120ms ease;
}
.vc-buildselect__arrow:hover,
.vc-buildselect__arrow:focus-visible {
opacity: 1;
outline: none;
}
/* Name pills — the accessible radiogroup that drives the carousel. */
/* Names styled as titles: the selected one is large (like the build title),
the others smaller and muted. Arrows flank the group in .vc-buildselect__nav. */
.vc-buildselect__names {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--wp--preset--spacing--sm, 16px);
margin: 0;
}
.vc-buildselect__name {
font: inherit;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
line-height: 1.1;
font-weight: 700;
font-size: clamp(1.5rem, 2.8vw, 2rem);
letter-spacing: -0.01em;
color: var(--wp--preset--color--black, #101012);
opacity: 0.3;
transition: opacity 150ms ease;
}
.vc-buildselect__name:hover:not(.is-active),
.vc-buildselect__name:focus-visible:not(.is-active) {
opacity: 0.6;
outline: none;
}
.vc-buildselect__name.is-active {
opacity: 1;
cursor: default;
}
/* Short info under the carousel. */
.vc-buildselect__info {
text-align: center;
margin-top: var(--wp--preset--spacing--sm, 16px);
}
.vc-buildselect__title {
margin: 0 0 4px;
}
.vc-buildselect__price {
margin: 0;
font-size: var(--wp--preset--font-size--body-lg, 1.125rem);
}
.vc-buildselect__price-prefix {
color: var(--vc-summary-muted, #565657);
margin-right: 4px;
}
.vc-buildselect__excerpt {
margin: 8px auto 0;
max-width: 46ch;
color: var(--vc-summary-muted, #565657);
}
/* Right column: spec sheet for the selected build. Hidden until the customer
toggles "Vis informasjon"; the content already follows the active slide. */
.vc-buildstep__spec {
min-width: 0;
display: none;
}
.vc-buildstep.has-spec .vc-buildstep__spec {
display: block;
}
/* "Vis informasjon" toggle, centered under the price. */
.vc-buildselect__info-toggle {
display: block;
width: fit-content;
margin: var(--wp--preset--spacing--xs, 8px) auto 0;
background: transparent;
border: 0;
padding: 4px 8px;
font: inherit;
font-weight: 600;
color: var(--wp--preset--color--original-blue, #0071ce);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.vc-buildselect__info-toggle:hover,
.vc-buildselect__info-toggle:focus-visible {
color: var(--wp--preset--color--medium-blue, #004e8c);
outline: none;
}
.vc-buildspec__heading {
margin: 0 0 var(--wp--preset--spacing--xs, 8px);
}
.vc-buildspec__features {
margin: 0 0 var(--wp--preset--spacing--md, 24px);
padding-left: 1.1em;
}
.vc-buildspec__features li {
margin-bottom: 4px;
}
.vc-buildspec__desc > :first-child {
margin-top: 0;
}
/* Hide the global running-summary sidebar on the build step (nothing to
summarise yet — the build's own spec takes the right column instead) and
collapse its grid track so the main area spans the full width. display:none
alone leaves the 360px column reserved. */
/* These build-step rules full-bleed the standard layout's coverflow. The gallery
layout has no coverflow (a compact selector sits in the right column instead),
so its media|steps grid must stay intact on the level step — scope them out. */
.vc-app.is-build-step:not(.vc-layout--gallery) .vc-summary:not(.vc-summary--bar):not(.vc-summary--below) {
display: none;
}
.vc-app.is-build-step:not(.vc-layout--gallery) .vc-app__layout {
grid-template-columns: 1fr;
}
/* Full-bleed the carousel: drop the main padding on the build step. The step
nav's negative inline margins assumed that padding, so neutralize them. */
.vc-app.is-build-step:not(.vc-layout--gallery) .vc-app__main {
padding: 0;
}
.vc-app.is-build-step:not(.vc-layout--gallery) .vc-step__nav {
margin-inline: 0;
}
@media (max-width: 900px) {
.vc-buildselect__names {
gap: var(--wp--preset--spacing--xs, 8px);
}
/* Clear the sticky step nav so the last spec bullet isn't hidden under it. */
.vc-buildstep {
padding-bottom: 72px;
}
}
/* Desktop: claim the full width freed by the hidden summary. The coverflow
spans the whole row; the spec is a right-side overlay whose gradient fades
to transparent on the left, so vehicles slide in from behind the text. */
@media (min-width: 901px) {
.vc-summary__total {
min-height: 80px;
}
/* No tall total bar on the summary step. */
.vc-app.is-summary-step .vc-summary__total {
min-height: 0;
}
/* Center the build content vertically so the freed space isn't a single
gap above the sticky footer. Nav keeps its margin-top:auto (stays put). */
.vc-step--build {
justify-content: center;
}
/* Always a 2-track grid so the column width can animate. Closed = 0px track
+ no gap; "Vis informasjon" grows it to 360px. The cqw-sized coverflow
re-fits the changing main width, re-centered each frame by a
ResizeObserver in the store. */
.vc-buildstep {
position: relative;
flex: 1 1 auto; /* fill the step height so the divider runs full-height */
min-height: 420px;
display: grid;
grid-template-columns: minmax(0, 1fr) 0px;
grid-template-rows: 1fr; /* row fills the container → spec stretches top-to-bottom */
column-gap: 0;
align-items: center;
transition: grid-template-columns 200ms ease;
}
.vc-buildstep.has-spec {
grid-template-columns: minmax(0, 1fr) 360px;
}
.vc-buildselect__track {
--vc-slide-w: clamp(360px, 50cqw, 760px);
}
.vc-buildselect__img {
aspect-ratio: 16 / 9;
}
/* Spec stays in the DOM on desktop (for the animation); the 0px column +
overflow clip hides it when closed, opacity fades the content in. */
.vc-buildstep__spec {
display: block;
opacity: 0;
overflow: hidden;
align-self: stretch;
border-left: 1px solid var(--wp--preset--color--light-grey, #e5e5e5);
padding-left: var(--wp--preset--spacing--md, 24px);
transition: opacity 160ms ease;
}
.vc-buildstep.has-spec .vc-buildstep__spec {
opacity: 1;
max-height: 100%;
overflow-y: auto;
}
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
.vc-buildstep,
.vc-buildstep__spec {
transition: none;
}
}
/* =============================================================================
* Summary hub — action buttons over the cover; form + gallery open in modals.
* =========================================================================== */
.vc-summary-hub {
text-align: center;
}
.vc-summary-hub__eyebrow {
margin: 0 0 4px;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vc-summary-muted, #565657);
}
.vc-summary-hub__title {
margin: 0 0 4px;
}
/* Programmatic focus target on step arrival — no visible box on the heading. */
.vc-summary-hub__title:focus {
outline: none;
}
.vc-summary-hub__total {
margin: 0 0 var(--wp--preset--spacing--md, 24px);
font-size: var(--wp--preset--font-size--h4, 1.5rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.vc-summary-hub__actions {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-summary-hub__actions .wp-block-button,
.vc-summary-hub__actions .wp-block-button__link {
width: 100%;
}
/* Lead form modal: a touch wider so the 2-col field grid breathes. */
.vc-modal--lead .vc-modal__panel {
max-width: 560px;
}
/* "Din ombygging" gallery grid. First item (the build) spans full width. */
.vc-gallery__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--wp--preset--spacing--sm, 16px);
}
.vc-gallery__item {
margin: 0;
}
.vc-gallery__item:first-child {
grid-column: 1 / -1;
}
.vc-gallery__img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
background: var(--wp--preset--color--white, #fff);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
}
.vc-gallery__item:first-child .vc-gallery__img {
aspect-ratio: 16 / 9;
}
.vc-gallery__label {
display: block;
margin-top: 6px;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
text-align: center;
color: var(--vc-summary-muted, #565657);
}
/* =============================================================================
* Summary sidebar action row (summary step) + "Din ombygging" gallery lightbox
* =========================================================================== */
.vc-summary__actions {
display: flex;
border-top: 1px solid var(--vc-summary-row-border);
}
/* display:flex above would otherwise defeat the hidden attribute. */
.vc-summary__actions[hidden] {
display: none;
}
.vc-summary__action {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: var(--wp--preset--spacing--sm, 16px) 6px;
background: transparent;
border: 0;
border-right: 1px solid var(--vc-summary-row-border);
font: inherit;
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
color: var(--vc-fg);
cursor: pointer;
transition: background-color var(--vc-transition-fast), color var(--vc-transition-fast);
}
.vc-summary__action:last-child {
border-right: 0;
}
.vc-summary__action:hover:not([disabled]),
.vc-summary__action:focus-visible:not([disabled]) {
background: var(--vc-summary-bg);
color: var(--vc-accent);
outline: none;
}
.vc-summary__action[disabled] {
opacity: 0.6;
cursor: progress;
}
.vc-summary__action-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
/* Send-forespørsel CTA shares the primary .vc-summary__cta styling. */
/* Gallery lightbox: big image + product-name caption + thumbnail strip. */
/* Full-screen lightbox gallery (inside .vc-modal--gallery): big centered image,
edge prev/next chevrons, thumbnail strip pinned at the bottom. */
.vc-gallery {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: clamp(12px, 2.5vh, 24px);
}
.vc-gallery__stage {
position: relative;
display: flex;
flex: 1 1 auto;
min-height: 0;
align-items: center;
justify-content: center;
}
.vc-gallery__main {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--vc-radius);
filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5));
}
.vc-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
line-height: 1;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border: 0;
border-radius: var(--vc-radius);
cursor: pointer;
transition: background-color var(--vc-transition-fast);
}
.vc-gallery__nav:hover,
.vc-gallery__nav:focus-visible {
background: rgba(255, 255, 255, 0.28);
outline: none;
}
.vc-gallery__nav--prev {
left: clamp(4px, 2vw, 24px);
}
.vc-gallery__nav--next {
right: clamp(4px, 2vw, 24px);
}
.vc-gallery__caption {
margin: 0;
text-align: center;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.vc-gallery__thumbs {
display: flex;
flex-wrap: nowrap;
gap: 8px;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 4px 0;
overflow-x: auto;
scrollbar-width: thin;
}
.vc-gallery__thumb-item {
margin: 0;
flex: 0 0 auto;
}
.vc-gallery__thumb {
padding: 0;
width: 64px;
height: 48px;
border: 2px solid transparent;
border-radius: var(--vc-radius);
overflow: hidden;
cursor: pointer;
background: rgba(255, 255, 255, 0.08);
opacity: 0.55;
transition: opacity var(--vc-transition-fast), border-color var(--vc-transition-fast);
}
.vc-gallery__thumb:hover,
.vc-gallery__thumb:focus-visible {
opacity: 1;
outline: none;
}
.vc-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vc-gallery__thumb.is-active {
border-color: #fff;
opacity: 1;
}
/* ============================================================================
Accordion step style (.vc-steps--accordion)
The wizard shows one full-height step at a time; the accordion stacks every
step and reveals content per panel. Steps therefore size to their content
(override the wizard's flex-fill) and the main column flows naturally.
========================================================================== */
.vc-steps--accordion .vc-app__main {
display: block;
padding-top: var(--wp--preset--spacing--md, 24px);
}
.vc-steps--accordion .vc-step {
display: block;
flex: 0 0 auto;
min-height: 0;
}
.vc-accordion__item {
border-bottom: 1px solid var(--vc-border);
}
/* Breathing room after the final group so it reads as the end of the selection
list before the page scrolls on to the summary below; no divider on the end. */
.vc-accordion__item:last-child {
margin-bottom: 200px;
border-bottom: none;
}
/* On mobile the extra tail space isn't needed. */
@media (max-width: 768px) {
.vc-accordion__item:last-child {
margin-bottom: 0;
}
}
/* Header toggle: label left, live status + chevron right. */
.vc-accordion__head {
/* Sticky section header: stays in view while its panel scrolls. Each header
lives in its own .vc-accordion__item, so consecutive ones hand off (the
next pushes the previous out) — classic sticky list-section behaviour.
top:0 = the scroll-container top; the topbar layout overrides it below. */
position: sticky;
top: 0;
z-index: 4;
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm, 16px);
width: 100%;
margin: 0;
padding: var(--wp--preset--spacing--sm, 16px) 2px;
background: var(--vc-bg, #fff);
border: 0;
/* Divider between the head and its panel content. Reserved (transparent)
so the head height is the same open/closed — sticky hand-off and the
"Gå til neste" scroll math must not shift by 1px on toggle. Coloured
only while the panel is open; the divider BETWEEN items is owned by
.vc-accordion__item, so a closed head must not draw a second line
flush on top of it. */
border-bottom: 1px solid transparent;
cursor: pointer;
text-align: left;
color: var(--vc-fg);
font: inherit;
}
.vc-accordion__item.is-open > .vc-accordion__head {
border-bottom-color: var(--vc-border);
}
/* In the topbar-scroll layout the page scrolls, so headers stick below the
sticky top bar (and the fixed site header it already clears). */
.vc-summarystyle--topbar-scroll .vc-accordion__head {
/* 68px is a hair under the top bar's real height so the header tucks flush
beneath it (the bar's higher z-index hides the 1–2px overlap) — at exactly
the bar height a sub-pixel strip of scrolling content leaks through above. */
top: calc(var(--vc-sticky-top, 0px) + 68px);
transition: top var(--vc-transition);
}
@media (prefers-reduced-motion: reduce) {
.vc-summarystyle--topbar-scroll .vc-accordion__head { transition: none; }
}
.vc-accordion__head-label {
flex: 1 1 auto;
font-weight: 600;
font-size: var(--wp--preset--font-size--medium, 1.05rem);
}
.vc-accordion__head-status {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--vc-accent);
font-size: 0.9em;
font-weight: 500;
}
.vc-accordion__head-status[hidden] {
display: none;
}
.vc-accordion__chevron {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--vc-fg-muted);
transition: transform 0.25s ease;
}
.vc-accordion__item.is-open > .vc-accordion__head .vc-accordion__chevron {
transform: rotate(180deg);
}
/* Panel: opens/closes INSTANTLY — no height animation, by design. Any panel
transition here fights the "Gå til neste" anchor jump (the layout keeps
moving while/after the scroll positions the next section) and produced a
whole series of scroll glitches; see goToNextStep. Only the chevron
rotates. The grid 0fr/1fr technique is kept purely as the collapse
mechanism (no JS measuring). */
.vc-accordion__panel {
display: grid;
grid-template-rows: 0fr;
}
.vc-accordion__item.is-open > .vc-accordion__panel {
grid-template-rows: 1fr;
}
.vc-accordion__panel-inner {
min-height: 0;
overflow: hidden;
/* Hide collapsed content from the a11y tree and tab order (the grid 0fr
clip is visual-only). */
visibility: hidden;
/* ...and from rendering: a zero-height, visibility:hidden panel still
counts as "near the viewport", so every loading="lazy" option image in
every collapsed step was fetched on first load. Skipped content is not. */
content-visibility: hidden;
}
.vc-accordion__item.is-open > .vc-accordion__panel > .vc-accordion__panel-inner {
visibility: visible;
content-visibility: visible;
padding-bottom: var(--wp--preset--spacing--md, 24px);
}
@media (prefers-reduced-motion: reduce) {
.vc-accordion__chevron {
transition: none;
}
}
/* Accordion tools: the "Åpne alle / Lukk alle" toggle above the first panel */
.vc-accordion__tools {
display: flex;
justify-content: flex-end;
padding: 0 0 var(--wp--preset--spacing--xs, 8px);
}
.vc-accordion__toggle-all {
border: 0;
background: none;
padding: 4px 0;
cursor: pointer;
font-size: var(--wp--preset--font-size--body-sm, 0.875rem);
font-weight: 600;
color: var(--vc-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.vc-accordion__toggle-all:hover {
color: var(--vc-accent-hover);
}
/* "Gå til neste" at the bottom of each accordion panel */
.vc-accordion__next {
display: flex;
justify-content: flex-end;
margin-top: var(--wp--preset--spacing--md, 24px);
}
/* Keep an opened panel's header clear of the sticky topbar when we scroll it
into view from "Gå til neste". */
.vc-accordion__item {
scroll-margin-top: calc(var(--vc-sticky-top, 0px) + 72px);
}
/* The "Gå til neste" jump computes its scroll position for the post-collapse
layout and applies it in one shot. The browser's scroll anchoring would
then "helpfully" re-adjust scrollY when the panel reflow lands, moving the
viewport off the computed position — exclude the whole app from anchor
selection so it can't. */
.vc-configurator.vc-app,
.vc-configurator.vc-app * {
overflow-anchor: none;
}
/* ============================================================================
summaryStyle axis — alternative placements for the running summary.
sidebar (default) keeps the 360px aside. The three below REPLACE it, so the
layout collapses to a single column and the price/actions live elsewhere.
========================================================================== */
.vc-summarystyle--bar-bottom .vc-app__layout,
.vc-summarystyle--topbar-scroll .vc-app__layout {
grid-template-columns: 1fr;
}
/* --- bar-bottom: compact sticky bar under the configurator --------------- */
.vc-summary--bar {
position: sticky;
bottom: 0;
z-index: 20;
height: auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md, 24px);
padding: var(--wp--preset--spacing--sm, 16px) var(--wp--preset--spacing--md, 24px);
background: var(--vc-card-bg);
border-left: 0;
border-top: 1px solid var(--vc-border);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}
.vc-summary__bar-total {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.vc-summary__bar-total-label {
font-size: 0.8em;
color: var(--vc-fg-muted);
}
.vc-summary__bar-total-value {
font-size: var(--wp--preset--font-size--medium, 1.1rem);
font-weight: 700;
}
.vc-summary__bar-actions {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--xs, 8px);
}
.vc-summary__bar-send {
margin: 0;
}
/* --- topbar-scroll: sticky price bar on top + full summary below --------- */
.vc-topbar {
position: sticky;
/* Stick below any fixed site header. The theme sets --vc-sticky-top to its
header height (falls back to 0 for a plain page). */
top: var(--vc-sticky-top, 0px);
z-index: 20;
/* Full-bleed bar (the alignfull block already spans the viewport); the inner
content is constrained to the wide width below. */
padding-block: var(--wp--preset--spacing--sm, 16px);
background: var(--vc-card-bg);
border-bottom: 1px solid var(--vc-border);
}
.vc-topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px var(--wp--preset--spacing--md, 24px);
width: min(var(--wp--style--global--wide-size, 1600px), calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem)));
margin-inline: auto;
}
.vc-topbar__model {
display: flex;
align-items: baseline;
gap: var(--wp--preset--spacing--xs, 8px);
min-width: 0;
/* Grow to fill, pushing price + button to the right on one row. */
flex: 1 1 auto;
}
.vc-topbar__model-car {
font-size: var(--wp--preset--font-size--medium, 1.1rem);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vc-topbar__total {
display: flex;
align-items: baseline;
gap: var(--wp--preset--spacing--xs, 8px);
flex: 0 0 auto;
}
.vc-topbar__total-value {
font-size: var(--wp--preset--font-size--medium, 1.1rem);
font-weight: 700;
}
.vc-topbar__reset {
flex: 0 0 auto;
padding: 8px 6px;
background: none;
border: 0;
color: var(--vc-fg-muted);
font: inherit;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.vc-topbar__reset:hover {
color: var(--vc-accent);
text-decoration: none;
}
.vc-topbar__btn {
flex: 0 0 auto;
padding: 8px 18px;
border: 1px solid var(--vc-accent);
border-radius: var(--vc-radius);
background: var(--vc-accent);
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
/* Small screens: model + price stack in the first column (price directly under
the model name); the button sits in a second column spanning both rows. */
@media (max-width: 600px) {
.vc-topbar__inner {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-areas:
"model model button"
"total reset button";
column-gap: var(--wp--preset--spacing--sm, 16px);
row-gap: 2px;
}
.vc-topbar__model {
grid-area: model;
}
.vc-topbar__total {
grid-area: total;
}
.vc-topbar__reset {
grid-area: reset;
align-self: center;
padding: 0;
}
/* Normal weight so the stacked price reads clearly apart from the bold
model name above it. */
.vc-topbar__total-value {
font-weight: 400;
}
.vc-topbar__btn {
grid-area: button;
align-self: center;
}
}
.vc-topbar__btn:hover {
background: var(--vc-accent-hover);
border-color: var(--vc-accent-hover);
}
/* The full summary lives below the configurator as a normal block (not a
fixed-height sidebar): reset the aside layout + let it grow with content. */
.vc-summary--below {
height: auto;
border-left: 0;
border-top: 1px solid var(--vc-border);
padding-block: var(--wp--preset--spacing--lg, 40px);
padding-inline: var(--wp--style--root--padding-right, 1.5rem);
}
.vc-summary--below .vc-summary__scroll {
overflow-y: visible;
}
/* Two columns: the configuration + product list on the left, the totals +
actions on the right. The right column sticks so it stays in view while a long
list is scrolled. Constrained to the theme's wide width with the theme's root
padding so it aligns with the rest of the page content (alignwide). */
.vc-summary--below .vc-summary__content {
display: grid;
/* Right column mirrors the steps column in the configurator above
(.vc-layout--gallery .vc-app__layout) so the two sections line up. */
grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
gap: var(--wp--preset--spacing--lg, 40px);
align-items: start;
max-width: var(--wp--style--global--wide-size, 1600px);
margin-inline: auto;
width: 100%;
}
/* The left-column rows carry inline padding meant for the narrow sidebar; drop
it here so the head, group headings and line items sit flush at the alignwide
edge (vertical padding kept). */
.vc-summary--below .vc-summary__head,
.vc-summary--below .vc-summary__preset,
.vc-summary--below .vc-summary__group-head,
.vc-summary--below .vc-summary__item,
.vc-summary--below .vc-summary__empty {
padding-inline: 0;
}
.vc-summary--below .vc-summary__reset {
right: 0;
}
.vc-summary--below .vc-summary__footer {
position: sticky;
/* Below the site header (the top bar has scrolled away by now); ease the
offset as the header auto-hides, like the bar/pane. */
top: calc(var(--vc-sticky-top, 0px) + var(--wp--preset--spacing--md, 24px));
align-self: start;
border-top: 0;
border-radius: var(--vc-radius, 12px);
overflow: hidden;
transition: top var(--vc-transition);
}
@media (max-width: 899px) {
.vc-summary--below .vc-summary__content {
grid-template-columns: 1fr;
}
.vc-summary--below .vc-summary__footer {
position: static;
}
}
@media (prefers-reduced-motion: reduce) {
.vc-summary--below .vc-summary__footer { transition: none; }
}
/* topbar-scroll is a page-flow pattern (sticky price bar, scroll past the
configurator to the summary below). The steps column + summary stack at
natural height rather than the steps scrolling internally. */
.vc-summarystyle--topbar-scroll .vc-app__layout {
flex: 0 0 auto;
/* Constrain to the theme's wide width, centered (alignwide) — the full-bleed
alignfull block spans the viewport; this brings the content back in line
with the rest of the page (and the summary below). */
width: min(var(--wp--style--global--wide-size, 1600px), calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem)));
max-width: 100%;
margin-inline: auto;
}
.vc-summarystyle--topbar-scroll .vc-app__main {
overflow: visible;
}
/* Inline / fullviewport (in normal page flow): grow with content so the page
itself scrolls down to the summary. */
.vc-configurator.vc-app.vc-summarystyle--topbar-scroll:not(.is-lightbox-open) {
height: auto;
min-height: 0;
}
/* Lightbox overlay keeps its fixed viewport box, but scrolls internally — the
topbar stays pinned at the top, the summary sits at the bottom of the scroll. */
.vc-configurator.vc-app.vc-summarystyle--topbar-scroll.is-lightbox-open {
overflow-y: auto;
overflow-x: hidden;
}
/* ============================================================================
Gallery layout (.vc-layout--gallery)
Left = a media pane (selected build's image + selected-product thumb strip),
right = the steps column with compact vertical selectors. The wide coverflow
is swapped for vc-levels-compact (see $variant='compact').
========================================================================== */
.vc-layout--gallery .vc-app__layout {
grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
gap: var(--wp--preset--spacing--lg, 40px);
align-items: start;
}
/* Steps column flush to the alignwide edges — the grid gap (above) is the only
separation from the media pane. */
.vc-layout--gallery .vc-app__main {
padding-inline: 0;
}
/* With the sidebar summary still on, make room for a third column. */
.vc-layout--gallery.vc-summarystyle--sidebar .vc-app__layout {
grid-template-columns: minmax(0, 1fr) minmax(360px, 480px) 320px;
}
.vc-gallery-pane {
position: sticky;
/* 68px tucks the pane flush under the top bar (its real height ~70px) — see
the accordion-head note; aligns the pane top with the sticky headers. */
top: calc(var(--vc-sticky-top, 0px) + 68px);
align-self: start;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm, 16px);
/* No inline padding — the media sits flush at the alignwide edge; the grid
gap handles the separation from the steps column. */
padding-block: var(--wp--preset--spacing--md, 24px);
/* Fit within the viewport below the sticky header + top bar (it sticks at
--vc-sticky-top + 68px), so the image and thumbnail strip both stay on
screen. The stage shrinks to make room — see below. */
max-height: calc(100dvh - var(--vc-sticky-top, 0px) - 68px - var(--wp--preset--spacing--md, 24px));
/* --vc-sticky-top flips as the site header auto-hides on scroll; ease the
resulting offset + height change instead of snapping. */
transition: top var(--vc-transition), max-height var(--vc-transition);
}
.vc-gallery-pane__stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
/* Natural size is 16:10; shrink (never grow) when the pane is height-capped
so the caption + thumbs below it are never pushed off screen. */
flex: 0 1 auto;
min-height: 0;
border-radius: var(--vc-radius);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.vc-gallery-pane__main {
width: 100%;
height: 100%;
object-fit: contain;
}
.vc-gallery-pane__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-size: 24px;
line-height: 1;
cursor: pointer;
color: var(--vc-fg);
}
.vc-gallery-pane__nav[hidden] { display: none; }
.vc-gallery-pane__nav--prev { left: 12px; }
.vc-gallery-pane__nav--next { right: 12px; }
.vc-gallery-pane__caption {
margin: 0;
text-align: center;
color: var(--vc-fg-muted);
font-size: 0.9em;
min-height: 1.2em;
}
.vc-gallery-pane__thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs, 8px);
list-style: none;
margin: 0;
padding: 0;
}
.vc-gallery-pane__thumbs[hidden] { display: none; }
.vc-gallery-pane__thumb-item { margin: 0; }
.vc-gallery-pane__thumb {
width: 64px;
height: 48px;
padding: 0;
border: 2px solid transparent;
border-radius: var(--vc-radius);
overflow: hidden;
background: var(--vc-summary-bg, #fafafa);
cursor: pointer;
}
.vc-gallery-pane__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vc-gallery-pane__thumb.is-active {
border-color: var(--vc-accent);
}
/* Compact vertical level selector (replaces the coverflow in the narrow col). */
.vc-levels-compact {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs, 8px);
}
/* Build cards reuse the product card (.vc-option) chrome verbatim. Only the
image fit differs — the side-profile truck is contained, not cropped — and the
full-card hit overlay sits above the (non-interactive) media. */
.vc-option--level .vc-option__media {
z-index: auto;
}
.vc-option--level .vc-option__image {
object-fit: contain;
}
/* Mobile: stack the media pane above the steps. */
@media (max-width: 899px) {
.vc-layout--gallery .vc-app__layout,
.vc-layout--gallery.vc-summarystyle--sidebar .vc-app__layout {
grid-template-columns: 1fr;
}
.vc-gallery-pane {
position: static;
padding-block: var(--wp--preset--spacing--md, 24px);
/* Stacked above the steps and not sticky — no viewport cap needed. */
max-height: none;
}
}
/* Compact step indicator — gallery + wizard right column (replaces the wide
full-width progress stepper, which doesn't fit the narrow column). */
.vc-progress-mini {
margin-bottom: var(--wp--preset--spacing--md, 24px);
}
.vc-progress-mini__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--wp--preset--spacing--xs, 8px);
margin-bottom: var(--wp--preset--spacing--xs, 8px);
}
.vc-progress-mini__position {
flex: 0 0 auto;
margin-left: auto;
font-size: 0.8em;
font-weight: 600;
color: var(--vc-accent);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.vc-progress-mini__label {
font-size: var(--wp--preset--font-size--medium, 1.1rem);
font-weight: 700;
color: var(--vc-fg);
}
.vc-progress-mini__bar {
height: 4px;
border-radius: var(--vc-radius);
background: var(--vc-border);
overflow: hidden;
}
.vc-progress-mini__fill {
display: block;
height: 100%;
width: 0;
background: var(--vc-accent);
border-radius: var(--vc-radius);
transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.vc-progress-mini__fill { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
.vc-gallery-pane { transition: none; }
}
/* Gallery layout already shows the build + product images in the media pane, so
the "Galleri" lightbox action (and its modal) are redundant there. */
.vc-layout--gallery .vc-summary__action--gallery {
display: none;
}
/* =============================================================================
* Price-breakdown popover (montering split). Subtle info icon next to a total;
* a small panel reveals build base / equipment / installation. Hidden whole
* (via the `hidden` attr from data-wp-bind) when nothing carries install cost.
* ========================================================================== */
.vc-breakdown {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
/* data-wp-bind--hidden sets the `hidden` attr; the display rule above would
otherwise win over the UA [hidden] rule and keep the icon always visible. */
.vc-breakdown[hidden] {
display: none;
}
/* Neutralise the uppercase label styling that .vc-summary__total span applies,
so the wrapping value span keeps the big price + icon on one line. */
.vc-summary__total .vc-summary__total-value {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: inherit;
letter-spacing: normal;
text-transform: none;
color: inherit;
font-weight: inherit;
}
.vc-breakdown__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: currentColor;
opacity: 0.55;
cursor: pointer;
transition: opacity 0.15s ease;
}
.vc-breakdown__toggle:hover,
.vc-breakdown__toggle:focus-visible,
.vc-breakdown__toggle[aria-expanded="true"] {
opacity: 1;
}
.vc-breakdown__panel {
position: absolute;
inset-block-start: calc(100% + 10px);
inset-inline-end: 0;
z-index: 60;
display: flex;
flex-direction: column;
gap: 6px;
width: max-content;
min-width: 220px;
max-width: min(20rem, 80vw);
padding: 12px 14px;
border-radius: var(--wp--preset--spacing--xs, 8px);
background: var(--wp--preset--color--white, #ffffff);
color: var(--wp--preset--color--black, #101012);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
text-align: left;
cursor: default;
/* Hidden by default; revealed on hover, keyboard focus, or click (.is-open
set via the IA store). Uses opacity/visibility so it can animate and so
hover works — never the `hidden` attribute (which display:none can't
override on hover). */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(4px);
transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
/* Total popovers (summary/topbar) reveal on hover/focus too; the card popover
lives inside an overflow:hidden card, so it reveals on click only (.is-open)
and the open card flips to overflow:visible. */
.vc-breakdown--summary:hover .vc-breakdown__panel,
.vc-breakdown--summary:focus-within .vc-breakdown__panel,
.vc-breakdown--topbar:hover .vc-breakdown__panel,
.vc-breakdown--topbar:focus-within .vc-breakdown__panel,
.vc-breakdown__panel.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Card-level montering display. */
.vc-option__pricing {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.vc-option__price-line {
display: inline-flex;
align-items: center;
gap: 5px;
}
.vc-option__montering-note {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
color: var(--vc-fg-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Card popover icon must sit above the full-card hit overlay so a click opens
the breakdown instead of selecting the product. z-index 3 (above the
"Mer informasjon" link's own z-index 2) so the dropped panel — confined to
this stacking context — paints over the link instead of behind it. */
.vc-breakdown--card {
position: relative;
z-index: 3;
}
.vc-breakdown--card .vc-breakdown__toggle {
width: 20px;
height: 20px;
color: var(--vc-fg-muted);
}
/* The open card escapes its own overflow:hidden so the panel can show. */
.vc-option.has-breakdown-open {
overflow: visible;
z-index: 5;
}
@media (max-width: 600px) {
.vc-option__pricing {
order: 3;
align-items: flex-start;
margin-top: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.vc-breakdown__panel {
transition: none;
transform: none;
}
}
/* The summary total sits on a dark surface and colours every descendant span
(`.vc-summary__total span`, specificity 0,1,1) white — which bleeds into the
panel and made it white-on-white. Re-scope the panel's own typography under
`.vc-breakdown__panel` so it always wins, on every surface the panel renders. */
.vc-breakdown__panel .vc-breakdown__heading {
color: var(--wp--preset--color--dark-grey, #565657);
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.vc-breakdown__panel .vc-breakdown__row,
.vc-breakdown__panel .vc-breakdown__row span {
color: var(--wp--preset--color--black, #101012);
font-size: var(--wp--preset--font-size--body-s, 0.875rem);
text-transform: none;
letter-spacing: normal;
}
/* Caret pointing up at the toggle. */
.vc-breakdown__panel::before {
content: "";
position: absolute;
inset-block-end: 100%;
inset-inline-end: 6px;
border: 7px solid transparent;
border-block-end-color: var(--wp--preset--color--white, #ffffff);
}
.vc-breakdown__heading {
font-size: var(--wp--preset--font-size--body-xs, 0.75rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wp--preset--color--dark-grey, #565657);
margin-bottom: 2px;
}
.vc-breakdown__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: var(--wp--preset--font-size--body-s, 0.875rem);
font-weight: 500;
line-height: 1.3;
text-transform: none;
letter-spacing: normal;
color: var(--wp--preset--color--black, #101012);
}
.vc-breakdown__row > span:last-child {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.vc-breakdown__row--total {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--wp--preset--color--light-grey, #e5e5e5);
font-weight: 800;
}