.wpb-body { background-color: #fff!important; } body.single-product { @media (min-width: 1400px) { .container.container--medium { --wpb-width: 1172px; } } } .blaze-slider { .blaze-nav-container { display: flex; align-items: center; button { cursor: pointer; border: 1px solid var(--clr-border); background-color: #fff; width: 3.2rem; height: 2.8rem; border-radius: 3rem; display: inline-grid; place-items: center; i { font-size: 1.2rem; } &:hover { background-color: var(--clr-blue); border-color: var(--clr-blue); i { color: #ffffff; } } } } &.static { .blaze-nav-container .blaze-prev, .blaze-nav-container .blaze-next, .blaze-pagination { display: none; } } &.blaze-slider--reviews { --slides-to-show: 1.2!important; --slide-gap: 8px; } &.blaze-slider--upsells { --slides-to-show: 1.3!important; --slide-gap: 8px; } &.blaze-slider--cross-sells { --slides-to-show: 1.3!important; --slide-gap: 8px; } @media (min-width: 768px) { &.blaze-slider--reviews { --slides-to-show: 2!important; } &.blaze-slider--upsells { --slides-to-show: 3!important; } &.blaze-slider--cross-sells { --slides-to-show: 3!important; } } } .wpb-header.wpb-header--single-product { .wpb-header__breadcrumb { border-bottom: 1px solid var(--clr-border); padding: 1rem 0; } .wpb-header__body .container { display: grid; grid-template-columns: minmax(0,1fr); } .blaze-slider { position: relative; .blaze-track { display: flex; img { border-radius: .6rem; } } .blaze-pagination { display: none; flex-direction: column; z-index: 1; gap: .5rem; background-color: #fff; button { background-color: #fff; cursor: pointer; border: 1px solid var(--clr-border); border-radius: 1rem; min-height: 4.6rem; overflow: clip; &.active { outline: 2px solid var(--clr-border); outline-offset: -2px; } } } .blaze-nav-container button { position: absolute; top: 50%; height: 3.2rem; transform: translateY(-50%); transition-property: background-color, border-color; transition-duration: var(--ts-15); transition-timing-function: ease; &:hover { background-color: var(--clr-blue); border-color: var(--clr-blue); i { color: #ffffff; } } &.blaze-prev { left: 0; } &.blaze-next { right: 0; } } .blaze-cta { margin-top: 1rem; text-decoration: none; display: flex; align-items: center; column-gap: 1.2rem; border-bottom: 1px solid var(--clr-border); border-top: 1px solid var(--clr-border); margin-inline: -1.6rem; padding: 1.3rem 1.6rem; .blaze-cta__image { display: grid; place-items: center; min-width: 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: .2rem solid var(--clr-blue); img { background: #EFF0F2; width: 2.7rem; height: 2.7rem; border-radius: 50%; } } .blaze-cta__text { color: var(--clr-headings); font-size: 1.4rem; line-height: 1; strong { display: block; width: 100%; } span { font-size: 1.2rem; line-height: 1; margin-top: .4rem; display: block; } } .btn { color: var(--clr-blue); margin-left: auto; .btn__text { display: none; } .wpb-icon-wrapper { border-color: var(--clr-blue); i { color: var(--clr-blue); } } &:hover { color: var(--clr-blue); } } } &.static .blaze-track { grid-column: span 2; } .blaze-badges { position: absolute; top: 1.4rem; right: 1.4rem; .blaze-badge { width: 2.6rem; height: 2.6rem; i { --width: 1.4rem; --height: 1.5rem; } &.prd-voedselgeschikt { background-color: var(--clr-success); } } } } } .wpb-color-variations { cursor: pointer; display: flex; align-items: center; column-gap: .8rem; padding: 2rem; .wpb-color-variations__text { line-height: 1; strong { color: var(--clr-headings); display: block; width: 100%; font-size: 1.2rem; } span { color: var(--clr-headings); display: block; width: 100%; font-size: 1.1rem; } } .wpb-icon-wrapper i { opacity: .5; } } .wpb-product-summary { --mt: 1em; padding: 2rem 0; > * + * { margin-top: var(--mt); } h1.entry-title { font-size: clamp(2rem, 5vw, 2.4rem); margin-top: 1.8rem; } .wpb-product-summary__labels { display: flex; column-gap: .6rem; .btn { color: var(--clr-text); font-size: 1.4rem; margin-left: auto; .checked { display: none; } i { font-size: 1.6rem; color: var(--clr-text); &.fa-solid { display: none; } } &.selected { .unchecked { display: none; } .checked { display: block; } i.fa-regular { display: none; } i.fa-solid { display: block; } } &:hover span { color: var(--clr-text); } } } .wpb-product-quote { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding-bottom: 2rem; h5 {font-size: 1.3rem;} p {font-size: 1.2rem; line-height: 1; margin-top: .3rem;} } &.wpb-product-summary--secondary { padding-bottom: 0; } } .prd-voedselgeschikt { width: 2.2rem; height: 2.2rem; border-radius: .4rem; display: grid; place-items: center; background-color: var(--clr-green); .wpb-icon.wpb-icon--voedselgeschiktheid { --width: 1.4rem; --height: 1.4rem; } } .prd-attributes { display: grid; align-items: center; column-gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); .prd-attribute { background-color: var(--clr-light); line-height: 1.2; border-radius: .6rem; padding: .6rem 1.2rem .6rem 1.2rem; display: flex; align-items: center; column-gap: .8rem; .prd-attribute__icon svg { width: 1.2rem; } .prd-attribute__info { line-height: 1; small { display: block; width: 100%; font-size: 1.2rem; line-height: 1.2; } span { font-size: 1.3rem; font-weight: 600; line-height: 1.2; } } } .view-more { justify-content: center; border: 1px solid var(--clr-border); border-radius: .4rem; display: none; align-items: center; column-gap: .3rem; padding: 0; width: 3.2rem; height: 3.2rem; } } .wpb-product-price { --mt: 1.4em; display: flex; align-items: center; column-gap: 2rem; span.price { color: var(--clr-headings); line-height: 1; display: flex; flex-direction: column; gap: .3rem; border-right: 1px solid var(--clr-border); padding-right: 2rem; small, small * { color: var(--clr-headings); font-size: 1.1rem; font-weight: 400; } strong { white-space: nowrap; font-size: 2rem; display: flex; align-items: center; column-gap: .5rem; &.is-sale { color: var(--clr-red); small.is-original { text-decoration: line-through; } } } &.is-placeholder { display: flex; flex-direction: column; row-gap: .3rem; .large-price-placeholder { width: 10rem; height: 2.2rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; } .small-price-placeholder { width: 8rem; height: 1.4rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; } } } } .prd-stock-info { .prd-delivery, .prd-stock-info__days { line-height: 1; display: flex; align-items: center; column-gap: .5rem; color: var(--clr); font-size: 1.2rem; font-weight: 600; } .prd-stock-info__days { font-weight: 400; margin-top: .25rem; i { --color: var(--clr); --width: 1rem; --height: 1rem; min-width: 1rem; } } .prd-delivery__indicator { display: flex; width: 4.4rem; column-gap: .1rem; span { width: 100%; height: .4rem; border-radius: 1.4rem; background-color: var(--clr); } } &.--green { --clr: var(--clr-green); } &.--orange { --clr: var(--clr-orange); .prd-delivery__indicator span:nth-of-type(3) { background-color: #DDDFE3; } } &.--low { --clr: var(--clr-green); .prd-delivery__indicator span:nth-of-type(3) { background-color: #DDDFE3; } } &.--red { --clr: var(--clr-red); .prd-delivery__indicator { span:nth-of-type(2), span:nth-of-type(3) { background-color: #DDDFE3; } } } } .wpb-product-form { --mt: 2rem; margin-bottom: 2rem; form { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; .wpb-quantity { background-color: var(--clr-light); border: none; border-radius: .8rem; input { width: 3.9rem; } .wpb-quantity-btn { width: 2.9rem; i { color: var(--clr-text); opacity: .5; } &.minus { padding-right: 0; } &.plus { padding-left: 0; } } } .single_add_to_cart_button { font-size: 1.5rem; --border-radius: .8rem; justify-content: center; i { --width: 2rem; --height: 2rem; --color: #fff; } &.added {--bg-color: var(--clr-green);} } } .btn.btn--order { column-gap: 1rem; width: 100%; margin-top: 1rem; justify-content: center; } &.sold-out { pointer-events: none; .single_add_to_cart_button { --color: var(--clr-text); --bg-color: var(--clr-border); --border: 1px solid var(--clr-border); i { --color: var(--clr-text); } } } } /* Cards */ .wpb-card.wpb-card--summary-cta { --mt: 0; border-radius: 0; margin-inline: calc(var(--wpb-padding) * -1); border-top: 1px solid var(--clr-border); background: transparent; h2, h3 { font-size: 1.6rem; } p { font-size: 1.3rem; line-height: 1.2; margin-top: 1rem; } .wpb-card__body { position: relative; padding: 2.4rem 1.8rem; display: grid; grid-template-columns: 1fr 17rem; figure { position: absolute; grid-column: 2; top: 0; right: 1.8rem; bottom: 0; img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } } .btn { margin-top: 1.2rem; } } } .wpb-card.wpb-card--bedrukking-cta { background-color: #F4F5F6; p { line-height: 1.2; margin-top: .5em; } .wpb-card__body { position: relative; padding: 2.4rem 1.8rem; display: grid; grid-template-columns: 1fr; h3 { font-size: 1.6rem; display: flex; align-items: center; column-gap: .65rem; &::before { content: ''; display: block; width: 1.5rem; height: 1.6rem; background: url('/app/themes/transoplast-core/public/img/favicon-grey.svg') no-repeat center/contain; } } figure { position: absolute; grid-column: 2; top: -2rem; right: 1.8rem; bottom: 0; display: none; img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; } } .btn { color: var(--clr-blue); margin-top: 1.2rem; &:hover .wpb-icon-wrapper { background-color: var(--clr-headings); i { color: #fff; } } } } } .wpb-block--cross-sells { h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 2.4rem; } .prd-cross-sells { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; } } .wpb-card.wpb-card--cross-sell { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 1.6rem; padding: 1.2rem 1.6rem; border: 1px solid var(--clr-border); border-radius: .8rem; color: var(--clr-headings); transition: border-color var(--ts-15) ease; img { width: 6.4rem; height: 4.8rem; object-fit: contain; } .wpb-card__title { display: flex; flex-direction: column; align-items: flex-start; row-gap: .4rem; .badge { font-size: 1.1rem; } strong { font-size: 1.5rem; font-weight: 600; line-height: 1.3; } } .wpb-card__dimension { display: none; font-size: 1.4rem; line-height: 1.2; small { white-space: nowrap; display: flex; align-items: center; column-gap: .4rem; font-size: 1.1rem; color: var(--clr-text-grey); opacity: .8; } i { font-size: .9rem; } } &:hover { border-color: var(--clr-blue); } @media (min-width: 992px) { grid-template-columns: 6.4rem minmax(0, 1fr) 15rem 15rem auto; .wpb-card__dimension { display: block; } } } .wpb-card.wpb-card--upsell { position: relative; display: grid; grid-template-columns: 1fr 2fr; align-items: center; border: 1px solid var(--clr-border); border-radius: .6rem; .wpb-card__header { grid-row: span 2; padding: 1rem; padding-bottom: .2rem; img { border-radius: .6rem; } } .wpb-card__body { padding: 1rem; } h3 { font-size: 1.3rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} .prd-sku { font-size: 1.1rem; padding: .1rem .3rem!important; position: absolute; top: 1rem; left: 1rem; } .prd-delivery { margin-bottom: .5rem; } .price { line-height: 1; strong { display: block; width: 100%; font-size: 1.4rem; small { display: none; } } small, small * { font-size: 1.2rem; } &.is-placeholder { display: flex; flex-direction: column; row-gap: .3rem; .large-price-placeholder { width: 6rem; height: 1.8rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; } .small-price-placeholder { width: 8rem; height: 1.2rem; border-radius: .3rem; background-color: var(--clr-border); display: inline-block; } } } .wpb-card__footer { padding: 0 1rem 1rem 1rem; display: flex; align-items: center; justify-content: space-between; grid-column: span 2; .wpb-icon-wrapper { border-color: var(--clr-blue); i { background-color: var(--clr-blue); } } .added_to_cart { display: none; } } } .wpb-trusted-shops { --mt: 0; text-decoration: none; display: flex; margin-inline: calc(var(--wpb-padding) * -1); column-gap: 1.2rem; align-items: center; background-color: #fcefc4; color: #000; padding: 1.1rem var(--wpb-padding); * { color: #000; } .wpb-icon.wpb-icon--trusted-shops { --color: #000; --width: 1.6rem; --height: 1.6rem; } i { font-size: 1.2rem; margin-left: auto; } .wpb-trusted-shops__score { display: flex; align-items: center; column-gap: .5rem; min-height: 2.2rem; border-right: 1px solid #000; padding-right: 1.2rem; span { font-size: 1.2rem; font-weight: 500; line-height: 1; strong { font-size: 1.4rem; font-weight: 700; } } } .wpb-trusted-shops__text {line-height: 1; i { background: linear-gradient(to right, var(--clr-dark) 90%, rgba(var(--clr-dark-rgb), .2) 90%); } span { display: block; width: 100%; font-size: 1.1rem; line-height: 1.2; } } } .wpb-single-product { padding-block: 2.4rem; .container { --gap: 2.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); } h2 { font-size: clamp(1.6rem, 2vw, 2rem); display: block; margin-bottom: 1.6rem; } .wpb-nav-tabs { position: sticky; top: 0; background-color: #fff; z-index: 400; margin-bottom: 2.4rem; .wpb-nav-tabs__body { display: flex; justify-content: start; flex-wrap: nowrap; overflow-x: auto; box-shadow: inset 0 -2px 0 var(--clr-border); &::-webkit-scrollbar { display: none; } } .wpb-nav-tabs__btn { display: flex; align-items: center; min-height: 4.7rem; padding: .5rem 2rem; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow 250ms ease; &.is-active { box-shadow: inset 0 -2px 0 var(--clr-primary); &:has(+ .is-active) { box-shadow: inset 0 -2px 0 transparent; } } } } @media (min-width: 768px) { padding-block: 3.2rem; } @media (min-width: 992px) { padding-block: 4.8rem; .container { --gap: 4rem; } .wpb-nav-tabs { margin-bottom: 4rem; } } @media (min-width: 1200px) { .container { --gap: 8rem; } } } .prd-characteristics { ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; margin: 0; padding: 0; list-style: none; li { font-weight: 500; position: relative; padding-left: 3.2rem; font-size: clamp(1.4rem, 2vw, 1.5rem); line-height: 1.6; color: var(--clr-headings); &::before { content: '+'; color: var(--clr-text-grey); position: absolute; top: .2rem; left: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--clr-light); color: var(--clr-text); font-size: 1.4rem; font-weight: 600; line-height: 1; } } } .prd-characteristics__list { transition: max-height .3s ease-in-out; > * + * { margin-top: .5em; } &[data-collapsed="true"] { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); } } .prd-characteristics__toggle { text-decoration: none; display: inline-flex; margin-top: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: 1.4rem; font-weight: 600; color: var(--clr-red); span { display: inline-flex; align-items: center; column-gap: .6rem; } .closed { display: none; } &[data-collapsed="false"] { .open { display: none; } .closed { display: inline-flex; } } } } /*** ---------- Introductie met quote ---------- ***/ .prd-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; .prd-intro__quote { margin: 0; blockquote { margin: 0; padding: 0; border: 0; } p { padding-left: .4em; text-indent: -.4em; font-size: clamp(1.6rem, 2vw, 1.9rem); line-height: 1.6; color: var(--clr-headings); &::before { content: '\201C'; } &::after { content: '\201D'; } } } .prd-intro__author { --image-size: 4.4rem; --mask-image: url('/app/themes/transoplast-core/public/masks/mask-polygon.svg'); display: flex; align-items: center; column-gap: 1.2rem; margin-top: 2rem; padding-left: .7rem; img { object-fit: cover; background-color: #F1F1F1; width: var(--image-size); height: var(--image-size); overflow: hidden; display: inline-block; flex-shrink: 0; mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; } strong { display: block; font-size: 1.4rem; font-weight: 600; color: var(--clr-headings); } small { display: block; font-size: 1.2rem; color: var(--clr-text-grey); } } @media (min-width: 992px) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6.4rem; } } .wpb-product-description { border-bottom: 1px solid var(--clr-border); padding-bottom: var(--gap); *:not(h2,h3) { color: rgba(var(--clr-headings-rgb), .8); } .buttons { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.2rem; } } .wpb-product-reviews { position: relative; .blaze-track { padding-bottom: .1rem; } .blaze-nav-container { position: absolute; bottom: calc(100% + 1.2rem); right: 0; button { width: 2.8rem; height: 2.5rem; i { font-size: 1rem; } &.blaze-prev { border-top-right-radius: 0; border-bottom-right-radius: 0; } &.blaze-next { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } } } } .wpb-product-related { position: relative; .blaze-track { padding-bottom: .1rem; } .blaze-nav-container { position: absolute; bottom: calc(100% + 1.2rem); right: 0; button { width: 2.8rem; height: 2.5rem; i { font-size: 1rem; } &.blaze-prev { border-top-right-radius: 0; border-bottom-right-radius: 0; } &.blaze-next { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } } } } .wpb-product-related--cross-sell { padding-top: var(--gap); } /*** ---------- Over dit product ---------- ***/ .wpb-block--product-about { .prd-about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; padding: 1.6rem; border-radius: 1.6rem; background-color: var(--clr-light); } .prd-about__main { h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 1.6rem; } .wpb-text { color: rgba(var(--clr-headings-rgb), .8); } .wpb-text + .prd-downloads { margin-top: 3.2rem; } } .prd-about__label { font-size: 1.3rem; font-weight: 500; color: var(--clr-text); margin-bottom: 1.2rem; } .prd-downloads ul, .prd-properties { margin: 0; padding: 0; list-style: none; } .prd-downloads li + li .prd-download { border-top: 1px solid var(--clr-border); } .prd-download { display: flex; align-items: center; column-gap: 1.2rem; padding: 1.2rem 0; text-decoration: none; color: var(--clr-headings); > i { display: grid; place-items: center; min-width: 3.2rem; height: 3.2rem; border-radius: .6rem; background-color: #fff; color: var(--clr-red); font-size: 1.5rem; } .prd-download__text { line-height: 1.2; strong { display: block; font-size: 1.4rem; font-weight: 600; } small { display: block; font-size: 1.2rem; color: var(--clr-text); } } .prd-download__action { margin-left: auto; display: flex; align-items: center; column-gap: .6rem; white-space: nowrap; font-size: 1.3rem; font-weight: 600; color: var(--clr-red); } } .prd-properties { display: grid; gap: .8rem; } .prd-property { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); border-radius: .6rem; overflow: clip; background-color: #fff; .prd-property__icon { display: grid; place-items: center; background-color: var(--clr-success); } .prd-property__text { padding: 1.2rem 1.6rem; line-height: 1.2; strong { display: block; font-size: 1.6rem; font-weight: 600; color: var(--clr-headings); } small { display: block; margin-top: .4rem; font-size: 1.2rem; opacity: .8; } } &.prd-property--esd .prd-property__icon { background-color: #F7DE00; .wpb-icon { --color: var(--clr-headings); } } } @media (min-width: 992px) { .prd-about { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6.4rem; padding: 3.2rem; } } @media (min-width: 1200px) { .prd-about { padding: 3.2rem; } } @media (min-width: 1400px) { .prd-about { padding-inline: calc((100% - 1140px) / 2); padding-block: 8rem; } } } /*** ---------- Maatwerk CTA ---------- ***/ .wpb-block--customize-cta { .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; align-items: center; } .wpb-image { margin: 0; img { display: block; width: 100%; height: auto; } } .wpb-block__content .btn { margin-top: 2.4rem; } @media (min-width: 768px) { .container:has(> .wpb-image) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; } } } @media (max-width: 575.98px) { .prd-characteristics { margin-inline: calc(var(--wpb-padding) * -1); border-bottom: 1px solid var(--clr-border); padding: 0 1.8rem var(--gap) 1.8rem; } .wpb-product-description { margin-inline: calc(var(--wpb-padding) * -1); padding-inline: 1.8rem; } .wpb-product-related { margin-inline: calc(var(--wpb-padding) * -1); padding-inline: 1.8rem; overflow: clip; } .wpb-product-related .blaze-track-container { overflow: visible; } .wpb-product-summary .wpb-product-quote .btn--link > span:first-child { display: none; } } @media (min-width: 576px) { .wpb-header.wpb-header--single-product { .blaze-slider { border: none; .blaze-track-container { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; row-gap: 1rem; } .blaze-track-wrapper { border: 1px solid var(--clr-border); overflow: hidden; border-radius: 1rem; } .blaze-pagination { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .blaze-nav-container { grid-row: 1 / 2; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; pointer-events: none; display: flex; justify-content: space-between; padding-inline: 2rem; button { width: 2.4rem; height: 2.4rem; position: static; transform: none; pointer-events: all; } } } } .wpb-product-form { margin-bottom: 2.4rem; } .wpb-card.wpb-card--summary-cta { margin-inline: 0; border: 1px solid var(--clr-border); border-radius: 1rem; } .wpb-card.wpb-card--bedrukking-cta .wpb-card__body { grid-template-columns: 1fr 17rem; } .wpb-card.wpb-card--bedrukking-cta .wpb-card__body figure {display: block;} .wpb-trusted-shops { margin: 0; border-radius: 0 0 .8rem .8rem; padding: 1.1rem 2.4rem;} .blaze-slider.blaze-slider--upsells { --slides-to-show: 2!important; } .blaze-slider.blaze-slider--cross-sells { --slides-to-show: 2!important; } .prd-attributes { grid-template-columns: 2fr 2fr auto; } .prd-attributes .view-more { display: flex; } } @media (min-width: 768px) { .prd-characteristics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.8rem; } } @media (min-width: 992px) { .wpb-header.wpb-header--single-product { .wpb-header__breadcrumb { border: none; padding: 1.6rem 0; } .wpb-header__body .container { column-gap: 3.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-items: start; } .blaze-slider { order: -1; grid-row: span 2; } } .wpb-product-summary { --p: 2rem; } .wpb-product-summary--primary { padding: 0; } /* .wpb-product-summary--secondary { padding: 0 var(--p); } */ /* .wpb-card.wpb-card--summary-cta { margin-inline: calc(var(--p) * -1); } */ .wpb-trusted-shops { margin-inline: calc((var(--p) + .1rem) * -1); margin-bottom: -.1rem; } .wpb-card.wpb-card--bedrukking-cta .wpb-card__body { padding: 2.8rem 3.2rem; column-gap: 4.8rem; } .wpb-card.wpb-card--bedrukking-cta .wpb-card__body figure { width: 19rem; } .blaze-slider.blaze-slider--cross-sells { --slides-to-show: 4!important; } .wpb-product-summary .wpb-product-quote {margin-inline: calc(var(--p) * -1); padding: 1rem 2rem; border-top: 1px solid var(--clr-border);} .wpb-product-summary .wpb-product-quote:hover { background-color: rgba(var(--clr-blue-rgb), .09); } } @media (min-width: 1200px) { .wpb-header.wpb-header--single-product { .wpb-header__body .container { column-gap: 4.8rem; grid-template-columns: 60rem 1fr; } } .wpb-product-summary { --p: 2.4rem; } .wpb-card.wpb-card--bedrukking-cta .wpb-card__body { column-gap: 6.4rem; } } @media (min-width: 1400px) { .wpb-header.wpb-header--single-product .container { --wpb-width: 1172px; } } /*** ---------- Product meta tabel ---------- ***/ .prd-meta h2 { display: flex; align-items: center; column-gap: .7rem; } .prd-meta .btn[data-collapsed="false"] .open, .prd-meta .btn[data-collapsed="true"] .closed { display: none; } .prd-meta .btn[data-collapsed="false"] .closed { display: block; } .prd-meta .btn[data-collapsed] { font-size: 1.4rem; --color: var(--clr-blue); } .prd-meta .btn[data-collapsed="false"] .wpb-icon-wrapper--outline i { transform: rotate(-180deg); } .prd-meta .prd-meta-items { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--clr-border); border-radius: .5rem; margin: 0; } .prd-meta .prd-meta-items tbody { display: grid; grid-template-columns: minmax(0, 1fr); } .prd-meta .prd-meta-items .prd-meta-item { display: flex; justify-content: space-between; border-bottom: 1px solid var(--clr-border); padding: 1.2rem 0; margin-bottom: -.1rem; } .prd-meta .prd-meta-items .prd-meta-item :is(th, td) { color: var(--clr-headings); font-size: 1.3rem; padding: 0; border: none; } .prd-meta .prd-meta-items .prd-meta-item td > span { display: inline-flex; align-items: center; text-align: right; column-gap: .6rem; font-size: 1.3rem; } .prd-meta .prd-meta-items .prd-meta-item .prd-meta-item__color { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg-clr); } .prd-meta .wpb-copy {display: none; align-items: center; column-gap: .4rem; margin-top: .8rem; font-size: 1.3rem; font-weight: 500; --color: var(--clr-headings); cursor: pointer; opacity: .75;} .prd-meta .wpb-copy:hover {opacity: 1;} .prd-meta .wpb-copy .wpb-icon {--color: var(--clr-headings); --width: 1.1rem; --height: 1.1rem; opacity: .75; } .prd-meta .wpb-copy.is-copied { color: var(--clr-green); } .prd-meta .wpb-copy.is-copied .wpb-icon { --color: var(--clr-green); } @media (max-width: 575.98px) { .prd-meta .prd-meta-items { border-radius: 0; padding: 0 1.6rem; margin-inline: calc(var(--wpb-padding) * -1); width: calc(100% + (var(--wpb-padding) * 2)); } } @media (min-width: 576px) { .prd-meta .btn[data-collapsed] { margin-top: 2rem; } .prd-meta .prd-meta-items { border: 1px solid var(--clr-border); padding-inline: 2rem; } .prd-meta .prd-meta-items .prd-meta-item :is(th, td) { font-size: 1.4rem; } .prd-meta .prd-meta-items .prd-meta-item td > span { font-size: 1.4rem; } } @media (min-width: 768px) { .prd-meta .btn[data-collapsed] { display: none; } .prd-meta .wpb-copy {display: flex;} .prd-meta .prd-meta-items { max-height: 100%!important; } .prd-meta .prd-meta-items tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } } @media (min-width: 992px) { .prd-meta .prd-meta-items tbody { column-gap: 3.2rem; } } /*** ---------- Belangrijke specificaties ---------- ***/ .prd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; } .prd-spec { display: flex; align-items: flex-start; column-gap: 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--clr-border); border-radius: .8rem; color: var(--clr-headings); font-size: 1.4rem; line-height: 1.3; > i { margin-top: .5rem; font-size: 1.3rem; color: var(--clr-text-grey); opacity: .8; } small { display: block; font-size: 1.1rem; color: var(--clr-text-grey); opacity: .8; } } .prd-specs__all { margin-top: 1.6rem; text-decoration: none; summary { display: inline-flex; cursor: pointer; list-style: none; font-size: 1.4rem; font-weight: 600; color: var(--clr-red); &::-webkit-details-marker { display: none; } span { display: inline-flex; align-items: center; column-gap: .6rem; } .closed { display: none; } } &[open] summary { .open { display: none; } .closed { display: inline-flex; } } .prd-meta-items { margin-top: 1.6rem; } } @media (min-width: 992px) { .prd-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /*** ---------- Wux Bulk Pricing ---------- ***/ .wpb-bp-rules { display: flex; flex-direction: column; } .wpb-bp-rules .wpb-bp-rules__header { order: -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;} .wpb-bp-rules .wpb-bp-rules__header .max-discount { font-size: 1.2rem; display: flex; align-items: center; column-gap: .4rem;} .wpb-bp-rules .wpb-bp-rules__header .max-discount i { --color: var(--clr-text); --width: 1rem; --height: 1rem; } .wpb-bp-rules .wpb-bp-rules__header .request-quote { font-size: 1.2rem; color: var(--clr-blue); font-weight: 600; text-decoration: none; white-space: nowrap;} .wpb-bp-rules .wpb-bp-rules__header .request-quote .wpb-icon-wrapper--outline {border-color: var(--clr-blue); --w: 1.4rem; --h: 1.4rem;} .wpb-bp-rules .wpb-bp-rules__header .request-quote .wpb-icon-wrapper--outline .wpb-icon {--color: var(--clr-blue); --width: .9rem; --height: .9rem;} .wpb-bp-rules .wpb-bp-rules__body { display: flex; gap: .6rem; overflow-x: auto; margin-inline: calc(var(--wpb-padding) * -1); scroll-padding: 1.6rem; padding-inline: 1.6rem; scroll-snap-type: x mandatory; } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule { scroll-snap-align: start; user-select: none; background-color: #F4F5F6; border-radius: .5rem; padding: .6rem 1rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule:hover { background-color: #e8eaed; } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule:active { transform: scale(0.98); } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule small { font-size: 1.2rem; white-space: nowrap; } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule .prd-price { font-size: 1.4rem; align-items: baseline; column-gap: .4rem; margin-top: .1rem; white-space: nowrap; } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule .prd-price small { font-size: 1.1rem; font-weight: 600; color: var(--clr-red); } .wpb-bp-rules .wpb-bp-rules__body .wpb-bp-rule.no-stock {opacity: .65; filter: saturate(0); pointer-events: none;} .wpb-bp-rules.is-placeholder .header-placeholder { width: 22rem; height: 1.8rem; border-radius: .4rem; background-color: var(--clr-border); } .wpb-bp-rules.is-placeholder .rules { display: flex; gap: .6rem; overflow-x: auto; margin-inline: calc(var(--wpb-padding) * -1); scroll-padding: 1.6rem; padding-inline: 1.6rem; margin-top: 1rem; } .wpb-bp-rules.is-placeholder .rules .rule-placeholder { min-width: 11.5rem; height: 4.5rem; border-radius: .5rem; background-color: var(--clr-border); } @media (min-width: 576px) { .wpb-bp-rules.is-placeholder .rules, .wpb-bp-rules .wpb-bp-rules__body { margin-inline: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /*** ---------- Add to cart modal ---------- ***/ .modal.modal--has-products { padding: 1.6rem; } .modal.modal--has-products .woocommerce-up-sells { padding: 2rem; } .modal.modal--has-products .woocommerce-up-sells li.product { display: grid; grid-template-columns: 8rem 1fr; align-items: center; background-color: transparent; padding-top: 1.8rem; padding-bottom: 1.8rem; } .modal.modal--has-products .woocommerce-up-sells li.product:first-child {padding-top: 0;} .modal.modal--has-products .woocommerce-up-sells li.product .product__header { --aspect-ratio: 80%; align-self: start; } .modal.modal--has-products .woocommerce-up-sells li.product img { border-radius: .6rem; border: 1px solid rgba(var(--clr-dark-rgb), .16);} .modal.modal--has-products .woocommerce-up-sells li.product .prd-title { font-size: 1.4rem; margin-top: 0; } .modal.modal--has-products .woocommerce-up-sells li.product + li.product { border-top: 1px solid rgba(var(--clr-dark-rgb), .2); } .modal.modal--has-products .woocommerce-up-sells li.product .product__body { padding: 0 0 0 1.2rem; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: center; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body a {text-decoration: none;} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .variations_form, .modal.modal--has-products .woocommerce-up-sells li.product .btn.btn--block, .modal.modal--has-products .woocommerce-up-sells li.product .product__body > .add_to_cart_button, .modal.modal--has-products .woocommerce-up-sells li.product .product__body .button { width: 100%; grid-column: span 1; grid-column-start: 2; grid-row-start: 1; grid-row-end: 3; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .single_add_to_cart_button, .modal.modal--has-products .woocommerce-up-sells li.product .product__body .ajax_add_to_cart { --font-size: 1.3rem; min-height: 3.5rem; height: fit-content; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .ajax_add_to_cart .wpb-icon { --width: 1.5rem; --height: 1.5rem; } .modal.modal--has-products .woocommerce-up-sells li.product .no-mobile { display: none; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price {margin-top: 8px; display: inline-block; line-height: 1;} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price strong {display: block; font-size: 1.4rem; line-height: 1; color: var(--clr-headings); } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price strong.is-sale {color: var(--clr-red);} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price strong.is-sale .is-original {text-decoration: line-through; font-size: 1.2rem; color: var(--clr-text);} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price > small {font-size: 1.2rem!important; line-height: 1; color: var(--clr-text); } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price > small * {font-size: 1.2rem!important; line-height: 1; color: var(--clr-text); } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .variation-radios label { background-color: var(--clr-dark); } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .variation-radios label span { font-size: 1.2rem; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .variation-radios [type="radio"]:checked + label { background-color: #fff; } .modal.modal--has-products .woocommerce-up-sells li.product .woocommerce-variation-add-to-cart { display: flex; margin-top: 1rem; } .modal.modal--has-products .woocommerce-up-sells li.product .wpb-table { overflow: inherit; } .modal.modal--has-products .woocommerce-up-sells li.product .wpb-icon--bag-shopping-regular { --width: 1.2rem; --height: 1.2rem; } .modal.modal--has-products .woocommerce-up-sells .price { justify-content: start; align-items: start; } .modal.modal--has-products .woocommerce-up-sells .price del * { font-size: 1.4rem; } .modal.modal--has-products .woocommerce-up-sells li.product .badge.badge--discount { top: 2.4rem; } .modal.modal--has-products .woocommerce-up-sells li.product .added_to_cart.wc-forward { display: none!important; } .modal.modal--has-products .woocommerce-up-sells li.product:last-child {padding-bottom: 0;} .modal.modal--has-products .woocommerce-up-sells li.product .product__body > .add_to_cart_button { margin-top: 12px; } .btn__text { color: inherit; font: inherit; display: flex; align-items: center; column-gap: .8rem; } .btn__text--added { display: none; } .added { .btn__text--default { display: none; } .btn__text--added { display: flex; } } .modal.modal--has-products .woocommerce-up-sells > h3 {margin-bottom: 1.6rem;} .modal.modal--has-products .modal-dialog .modal-dialog__body { padding: 0; } .modal.modal--has-products .modal-dialog .modal-dialog__footer {padding: 1.4rem 2.4rem; justify-content: center;} .modal.modal--has-products .modal-dialog .modal-dialog__footer .btn .wpb-icon {--color: var(--clr-headings)} .modal.modal--has-products .modal-dialog .modal-dialog__footer .btn small {color: var(--clr-headings)} .modal.modal--product-variations .modal-dialog .modal-dialog__header { column-gap: 2rem; padding: 2rem; align-items: flex-start; flex-wrap: nowrap; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; flex-direction: column; justify-content: flex-start; font-family: inherit; background-color: var(--clr-light);} .modal.modal--product-variations .modal-dialog .modal-dialog__header .modal-title { font-size: 2rem; margin: 0; line-height: 1; } .modal.modal--product-variations .modal-dialog .modal-dialog__header .modal-title span { font-size: 1.6rem; line-height: 1.1; color: var(--clr-headings); font-weight: 700; display: block; } .modal.modal--product-variations .modal-dialog .modal-dialog__header .modal-title small { font-size: 1.4rem; } .modal.modal--product-variations .modal-dialog .modal-dialog__header .modal-title small span { all: inherit; } .modal.modal--product-variations .modal-dialog .modal-dialog__header .btn-group {display: none;} .modal.modal--wux-add-to-cart { .modal-dialog { figure { position: relative; .wpb-icon-wrapper { border: none; width: 1.9rem; height: 1.9rem;justify-content: center; align-items: center; display: flex; border-radius: 50%; background-color: var(--clr-green); position: absolute; top: 0; right: 0; transform: translate(50%, -50%); i { color: #ffffff; } } img { width: 4.8rem; height: 4.8rem; border-radius: .4rem; } } .modal-dialog__header { column-gap: 2rem; padding: 2rem; align-items: flex-start; flex-wrap: nowrap; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; flex-direction: column; justify-content: flex-start; font-family: inherit; background-color: var(--clr-light); .modal-title { font-size: 2rem; line-height: 1; margin: 0; margin-right: auto!important; margin-top: 10px; span { font-size: 1.6rem; line-height: 1.1; color: var(--clr-headings); font-weight: 700; display: block; } small { font-size: 1.4rem; span { all: inherit; } } } p { margin: 0; font-size: 1.6rem; line-height: 1.6rem; } .btn-group { width: 100%; margin-top: 1rem; .btn { width: 100%; white-space: nowrap; justify-content: center; } } } .woocommerce-no-up-sells-notice { padding: 2rem; text-align: center; } } } @media (min-width: 576px) { .modal.modal--has-products .modal-dialog { max-width: 504px; } .modal.modal--wux-add-to-cart .modal-dialog .modal-dialog__header .btn-group { width: auto; margin-top: 0; } } @media (min-width: 768px) { .modal.modal--has-products .modal-dialog { max-width: 684px; } .modal.modal--has-products .woocommerce-up-sells { padding: 2.8rem 2.4rem; } .modal.modal--has-products .woocommerce-up-sells li.product {grid-template-columns: 10rem 1fr;} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .single_add_to_cart_button, .modal.modal--has-products .woocommerce-up-sells li.product .product__body .ajax_add_to_cart { --font-size: 1.4rem; min-height: 4.2rem;} .modal.modal--has-products .woocommerce-up-sells li.product .product__body .ajax_add_to_cart .wpb-icon { --width: 1.8rem; --height: 1.8rem; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .prd-title { font-size: 1.5rem; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .price strong { font-size: 1.5rem; } .modal.modal--has-products .modal-dialog .modal-dialog__footer {padding: 2rem 2.4rem;} .modal.modal--product-variations .modal-dialog .modal-dialog__header { padding: 1.4rem 2.4rem; align-items: center; flex-direction: row; justify-content: space-between; } .modal.modal--product-variations .modal-dialog .modal-dialog__header .btn-group {display: block;} .modal.modal--wux-add-to-cart { .modal-dialog .modal-dialog__header { padding: 1.4rem 2.4rem; align-items: center; flex-direction: row; .modal-title {margin-top: 0;} } } } @media (min-width: 992px) { .modal.modal--has-products .woocommerce-up-sells li.product .badge.badge--discount { --p: .2rem .6rem .5rem .6rem; --font-size: 1.3rem; min-height: 2.3rem; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body .variation-radios label { padding: 0 0 .1rem 0; } .modal.modal--has-products .woocommerce-up-sells li.product .product__body {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);} .modal.modal--has-products .woocommerce-up-sells li.product .product__body > .add_to_cart_button {margin-top: 0;} .modal.modal--wux-add-to-cart .modal-dialog .modal-dialog__header { flex-direction: row; justify-content: space-between; } } .add-success, .saved-success { position: fixed; top: 12.4rem; right: 3.2rem; background-color: var(--clr-green); z-index: 9999; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: inline-grid; place-items: center; transform: scale(0); animation: scale .5s cubic-bezier(0,0,.5,1.5) forwards, transform .5s forwards; animation-delay: 0s, 1.6s; i { color: #ffffff; } &::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; animation: pulse 1s forwards; animation-delay: .6s; } } .sticky-summary { position: sticky; bottom: 0; transform: translateY(100%); padding-block: 1rem; background-color: #fff; z-index: 200; border-top: .1rem solid var(--clr-border); transition: transform var(--ts-15) ease; } .sticky-summary.is-visible { transform: translateY(0); } .sticky-summary .container { display: flex; column-gap: 2rem; align-items: center;} .sticky-summary .sticky-summary__text {display: none; flex-direction: column;} .sticky-summary .sticky-summary__text .product-title { color: var(--clr-headings); font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.6rem); display: -webkit-box; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sticky-summary .sticky-summary__text .product-info { display: flex; align-items: center; column-gap: .8rem; margin-top: .4rem;} .sticky-summary .sticky-summary__text .product-sku { display: inline-block; color: var(--clr-text); font-size: 1.2rem; font-weight: 500; background-color: var(--clr-light); border-radius: 0.3rem; padding: 0 0.25rem;} .sticky-summary .sticky-summary__text .delivery-time { display: inline-flex; font-size: 1.2rem; font-weight: 500; align-items: center; color: var(--clr-green); } .sticky-summary .sticky-summary__text .delivery-time i { --color: var(--clr-green); --width: 1.2rem; --height: 1.2rem; margin-right: .4rem; } .sticky-summary .wpb-product-price { display: none; } .sticky-summary .wpb-product-price span.price { border: none; padding: 0; text-align: right; align-items: flex-end; } .sticky-summary .wpb-product-price span.price strong {font-size: 1.8rem;} .sticky-summary .wpb-product-price span.price strong small { display: none; } .sticky-summary .wpb-product-price span.price > small { white-space: nowrap; } .sticky-summary .wpb-product-form { flex-grow: 1; white-space: nowrap; margin-bottom: 0; } @media (min-width: 576px) { .sticky-summary .wpb-product-price { display: block; } } @media (min-width: 992px) { .sticky-summary .sticky-summary__text { display: flex; flex-grow: 1; } } @media (min-width: 1400px) { .sticky-summary .container { --wpb-width: 1172px; } } @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(100%); } } @keyframes transform { 0% { transform: scale(100%) translateY(0px); opacity: 1; } 100% { transform: scale(100%) translateY(-10rem); opacity: 0; } } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--clr-green-rgb), 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 1.5rem rgba(var(--clr-green-rgb), 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--clr-green-rgb), 0); } }