/* :root and @keyframes MUST stay outside body.template--pv-quiz-viking below: CSS nesting prefixes unprefixed nested selectors with the parent selector, and "body.template--pv-quiz-viking :root" can never match (:root is the element, never a descendant of ) - that silently broke every --pvqv-* token (and the fade-in keyframes are not a valid nested rule either), which is why step 15's dark theme/colors were falling back to browser defaults. */ :root { --pvqv-primary: #b0510e; --pvqv-cta-bg: #B0510E; --pvqv-bg: var(--pv-black, #111111); --pvqv-surface: #1c1a19; --pvqv-white: var(--pv-white, #ffffff); --pvqv-gray: var(--pv-gray, #d9d9d9); --pvqv-font-heading: var(--pv-font-heading, 'PP Mori', system-ui, sans-serif); --pvqv-font-body: var(--pv-font-body, 'PP Mori', system-ui, sans-serif); --pvqv-container-max: 560px; } @keyframes pvqv-fade-in { from { opacity: 0; } to { opacity: 1; } } html:has(.pv-quiz-viking), body:has(.pv-quiz-viking) { background-color: var(--pvqv-bg); } body.template--pv-quiz-viking{ /** * PV Quiz Viking - Base styles * Independent from croev-quiz-v1.css by design. */ #shopify-section-footer { display: none !important; } .nch__bar-left.nch__bar-slot { display: none; } .nch__bar-right.nch__bar-slot { display: none; } .nch__bar-inner{ padding-block: 30px; } .nch__logo img { width: 73px; } @media (min-width: 741px) { .nch__bar-center.nch__bar-slot { display: none; } .nch__bar-left.nch__bar-slot { display: block; } .nch__bar-inner { justify-content: center; grid-template-columns: auto; } } [id*="__q13_"] { display: none; } .pv-quiz-viking { background-color: var(--pvqv-bg); color: var(--pvqv-white); font-family: var(--pvqv-font-body); } .pv-quiz-viking:has(.pv-quiz-viking__step.is-active) { min-height: auto; } .pv-quiz-viking__steps { max-width: var(--pvqv-container-max); margin: 0 auto; padding: 24px 15px 40px; position: relative; } @media (min-width: 748px) { .pv-quiz-viking__steps { padding: 24px 15px 100px; } } .pv-quiz-viking__steps:not(:has(.pv-quiz-viking__step.is-active)) { display: none; } .pv-quiz-viking__step { display: none; } .pv-quiz-viking__step.is-active { display: block; animation: pvqv-fade-in 0.2s ease-out; max-width: 840px; } .pv-quiz-viking__step--intro.is-active { display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; } .pv-quiz-viking-intro__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .pv-quiz-viking-intro__eyebrow { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #cf6515; margin: 0; line-height: 130%; } @media (max-width: 748px) { .pv-quiz-viking-intro__eyebrow { font-size: 12px !important; } } @media (max-width: 767px) { .pv-quiz-viking-intro__review-photo img { object-position: center top; } } .pv-quiz-viking-intro__heading { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 40px; line-height: 1.3; color: var(--pvqv-white); text-transform: capitalize; margin: 0; } .pv-quiz-viking-intro__heading span { display: block; } .pv-quiz-viking-intro__subheading { font-family: var(--pvqv-font-body); font-size: 20px; line-height: 1.3; color: var(--pvqv-white); max-width: 560px; margin: 0; } .pv-quiz-viking-intro__stats { display: flex; align-items: center; justify-content: center; gap: 30px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 24px 20px; min-width: 560px; } .pv-quiz-viking-intro__stat { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 245px; } .pv-quiz-viking-intro__stat-number { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 50px; color: var(--pv-terra, var(--pvqv-primary)); margin: 0; } .pv-quiz-viking-intro__stat-label { font-family: var(--pvqv-font-body); font-size: 12px; text-transform: uppercase; color: var(--pvqv-white); margin: 0; } .pv-quiz-viking-intro__cta { width: 100%; } .pv-quiz-viking__step[data-step="1"] .pv-quiz-viking-intro__cta, .pv-quiz-viking__step[data-step="13"] .pv-quiz-viking__btn--primary, .pv-quiz-viking__step[data-step="15"] .pv-quiz-viking__btn--primary { height: 76px !important; } @media (max-width: 748px) { .pv-quiz-viking__step[data-step="1"] .pv-quiz-viking-intro__cta { max-height: 65px; } } .pv-quiz-viking__step[data-step="9"] .pv-quiz-viking__options, .pv-quiz-viking__step[data-step="3"] .pv-quiz-viking__options{ margin-bottom: 10px; @media (max-width: 480px) { margin-bottom: 20px; } } .pv-quiz-viking-intro__reviews { display: flex; flex-direction: column; gap: 10px; width: 100%; } .pv-quiz-viking-intro__review-card { background: rgba(247, 238, 231, 0.1); border-radius: 0 0 10px 10px; padding: 35px; text-align: left; display: flex; flex-direction: column; gap: 20px; border: 1px solid rgba(255,255,255,.2); } .pv-quiz-viking-intro__review-stars { display: flex; gap: 4px; color: var(--pv-terra, var(--pvqv-primary)); } .pv-quiz-viking-intro__review-stars svg { width: 30px; height: 30px; } .pv-quiz-viking-intro__review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .pv-quiz-viking-intro__review-name { color: #FFF; font-family: "PP Mori"; font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; } .pv-quiz-viking-intro__review-badge { border: 1px solid var(--pv-terra, var(--pvqv-primary)); border-radius: 20px; padding: 8px; line-height: 8px; font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 14px; text-transform: uppercase; color: var(--pv-terra, var(--pvqv-primary)); white-space: nowrap; flex-shrink: 0; } .pv-quiz-viking-intro__review-text { font-family: var(--pvqv-font-body); font-size: 20px; line-height: 1.3; color: var(--pvqv-white); margin: 0; } .pv-quiz-viking-intro__review-row { width: 100%; } .pv-quiz-viking-intro__review-photo { display: block; width: 100%; border-radius: 10px 10px 0 0; overflow: hidden; } .pv-quiz-viking-intro__review-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .pv-quiz-viking__option-grid-label{ font-size: 21px; } .pv-product__stars { color: white; } .pv-product__stars svg { width: 15px; height: 15px; } /* --- Offer step sticky buy bar --- Base look/layout lives in pv-product-section.css (display:none there). This page turns it on and reveals it once the shopper scrolls past the real buy button (see initStickyBuyBar in pv-quiz-viking.js). */ .pv-product__sticky-bar { display: none; } .pv-product__sticky-buy-btn{ line-height: 100%; min-height: fit-content; padding-block: 8px; line-height: 20px !important; } .pv-product__sticky-bar.is-visible { display: flex; border-radius: 10px 10px 0px 0px; padding-top: 10px; padding-bottom: 8px; } .pv-product__sticky-bar.is-visible .pv-product__sticky-bar-inner { gap: 12px; } @media (min-width: 748px) { .pv-product__sticky-bar.is-visible [data-pv-sticky-btn] { padding-block: 12px !important; line-height: 24px !important; } .pv-product__sticky-bar.is-visible { display: flex; border-radius: 10px 10px 0px 0px; padding-block: 14px !important; } } .pv-faq__answer-content h6{ color: #FFF; font-size: 18px; font-weight: 600; line-height: 130%; /* 23.4px */ } .pv-product__reviews-text{ padding-top: 0px; } .pv-quiz-viking-upsell__card{ padding: 0px !important; } .pv-product__reviews-text{ font-size: 14.795px; } @media (max-width: 480px) { .pv-quiz-viking-upsell__card { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; min-height: auto !important; border-radius: 16px; overflow: hidden; } .pv-quiz-viking-upsell__image { width: 100% !important; max-height: 268.5px !important; height: auto; border-radius: 0 !important; object-fit: contain; } .pv-quiz-viking-upsell__details { max-width: none !important; width: 100%; padding: 12px; background: var(--pvqv-surface); } .pv-quiz-viking-upsell__description { font-size: 16px !important; font-weight: 400 !important; line-height: 25.6px !important; /* 160% */ margin: 0 0 10px ; } .pv-quiz-viking-upsell__price-row { gap: 10px !important; } .pv-quiz-viking-upsell__compare { font-size: 15px !important; font-weight: 600 !important; text-decoration-line: line-through !important; font-size: 15px !important; } .pv-quiz-viking-upsell__price { font-size: 22px !important; font-weight: 600 !important; font-size: 22px !important; } .pv-quiz-viking-upsell__save-badge { padding: 6px 12px !important; font-size: 12px !important; line-height: normal !important; } .pv-product-shell .pv-quiz-offer-header__dynamic-subtitle{ font-size: 18px !important; font-style: normal; font-weight: 600; line-height: 130%; /* 26px */ } .pv-quiz-viking__continue-btn, .pv-quiz-viking__btn--primary{ padding: 18.281px 0px !important; max-height: 65px !important; } .pv-quiz-offer-addon{ padding: 12px; max-height: 141px; } .pv-quiz-offer-addon__copy{ padding: 0px; gap: auto; } .pv-quiz-offer-addon__row, .pv-quiz-offer-addon__image { max-height: 117px; } .pv-product__reviews-text{ font-size: 14px; } .pv-product__sticky-bar.is-visible { min-height: 87px; border-radius: 8px 8px 0 0; border-top: 0.5px solid #FFF; background: rgba(0, 0, 0, 0.70); padding-bottom: 8px; backdrop-filter: blur(2px); } .pv-product__testimonials{ min-height: 199px; } .pv-quiz-viking__counter{ margin-bottom: 20px !important; } .pv-product-shell .pv-quiz-offer-header__paragraph{ font-size: 16px !important; } .pv-quiz-viking__subheadline{ font-size: 16px !important; line-height: 130% !important; } .pv-quiz-viking__option-grid-label{ font-size: 16px; } .pv-quiz-viking__skip-link{ font-size: 16px !important; } .pv-quiz-viking__step--intro.is-active{ gap: 20px; } .pv-quiz-viking-intro__review-stars{ max-height: 18.4px; } .pv-quiz-viking-intro__review-stars svg{ max-width: 18.4px; } .pv-quiz-viking-intro__subheading, .pv-quiz-viking-intro__review-name, .pv-quiz-viking__summary-label, .pv-quiz-viking__summary-value { font-size: 16px !important; } .pv-quiz-viking__summary-title { font-size: 18px !important; } .pv-quiz-viking__steps { padding-top: 40px; } .pv-quiz-viking-intro__heading { font-size: 30px; } .pv-quiz-viking-intro__review-text{ font-size: 20px; } .pv-quiz-viking-intro__stats { flex-direction: row; align-items: flex-start; justify-content: flex-start; align-self: stretch; gap: 20px; min-width: 0; padding: 0; background: transparent; border: none; } .pv-quiz-viking-intro__stat { flex-direction: column; flex: 1 0 0; width: auto; max-width: none; height: 97px; padding: 12px 10px; justify-content: center; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: rgba(0, 0, 0, 0.2); } .pv-quiz-viking-intro__stat-number { font-size: 25px; } .pv-quiz-viking-intro__review-card { border-radius: 0px 0px 10px 10px; gap: 10px; padding: 20px; } } .pv-product__sticky-bar.is-visible { border-radius: 8px 8px 0 0; border-top: 0.5px solid #FFF; background: rgba(0, 0, 0, 0.70); padding-bottom: 8px; backdrop-filter: blur(2px); } @media (min-width: 768px) { .pv-quiz-viking__steps { max-width: 880px; } .pv-quiz-viking-intro__cta { display: flex; width: 100%; min-width: 840px; max-width: 840px; padding: 20px 60px; justify-content: center; align-items: center; gap: 10.969px; align-self: stretch; border-radius: 5px; background: #b0510e; color: var(--pvqv-white, #fff); text-align: center; font-family: var(--pv-font-cta, 'Westmount', var(--pvqv-font-heading)); font-size: 30px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -2.4px; text-transform: uppercase; } .pv-quiz-viking-intro__reviews { width: 100%; min-width: 840px; max-width: 840px; display: flex; flex-direction: column; gap: 10px; } .pv-quiz-viking-intro__review-row { display: flex; align-items: stretch; gap: 3px; } .pv-quiz-viking-intro__review-row--1 { height: 270.7356px; } .pv-quiz-viking-intro__review-row--2 { height: 306px; } .pv-quiz-viking-intro__review-row--3 { height: 327px; } .pv-quiz-viking-intro__review-card { width: 473px; flex-shrink: 0; border-radius: 10px; order: 1; } .pv-quiz-viking-intro__review-photo { display: block; flex: 1 0 0; min-width: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: none; order: 2; } .pv-quiz-viking-intro__review-photo img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; border: 0; outline: 0; box-shadow: none; } } /* --- Progress bar + block label --- */ .pv-quiz-viking__progress-wrap { margin: 0 0 16px; } @media (max-width: 480px) { .pv-quiz-viking__progress-wrap { margin: 0 0 16px; } } .pv-quiz-viking__progress-row { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; } @media (max-width: 480px) { .pv-quiz-viking__progress-row { margin: 0 0 16px; } } .pv-quiz-viking__progress-label { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #cf6515; text-align: center; margin: 0; } .pv-quiz-viking__progress { flex: 1 0 0; align-self: stretch; height: 12px; background: rgba(230, 220, 204, 0.12); border-radius: 999px; overflow: hidden; } .pv-quiz-viking__progress-bar { height: 100%; border-radius: 999px; background: var(--pv-terra, var(--pvqv-primary)); transition: width 0.3s ease; } @media (max-width: 480px) { .pv-quiz-viking__progress { height: 9px; } } /* --- Nav / back link --- */ .pv-quiz-viking__back-link { flex-shrink: 0; background: none; border: none; padding: 0; font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-weight: 400; font-size: 20px; line-height: 12px; letter-spacing: 0; color: #8C8175; text-align: center; text-transform: uppercase; cursor: pointer; white-space: nowrap; } @media (max-width: 480px) { .pv-quiz-viking__back-link { font-size: 12px; line-height: 9px; } } /* --- Question copy --- */ .pv-quiz-viking__headline { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pvqv-gray); margin: 0 0 8px; } .pv-quiz-viking__question { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 30px; line-height: 1.3; color: #fff; text-align: center; text-transform: capitalize; margin: 0 0 48px; } @media (max-width: 480px) { .pv-quiz-viking__question { font-size: 20px; line-height: 1.3; margin: 20px auto; /* max-width: 90%; */ } } .pv-quiz-viking__step:has(.pv-quiz-viking__subheadline) .pv-quiz-viking__question { margin-bottom: 16px; } .pv-quiz-viking__subheadline { color: #fff; text-align: center; margin: 0 0 48px; font-size: 20px; } @media (max-width: 480px) { .pv-quiz-viking__subheadline { margin: 0 0 20px; } } .pv-quiz-viking__counter { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: #8c8175; margin: 0 0 48px; } .pv-quiz-viking__continue-btn { display: block; width: 100%; } .pv-quiz-viking__continue-btn[hidden] { display: none; } /* --- Answer options --- */ .pv-quiz-viking__options { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; } .pv-quiz-viking__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(9px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 24px 36px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.22); color: var(--pvqv-white); font-family: var(--pvqv-font-body); font-size: 16px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, padding 0.1s ease; } .pv-quiz-viking__option:hover { border-color: rgba(255, 255, 255, 0.4); } .pv-quiz-viking__option.is-selected { border: 2px solid var(--pv-terra, var(--pvqv-primary)); background: linear-gradient(137deg, rgba(0, 0, 0, 0.18) 0%, rgb(106, 46, 3) 100%), linear-gradient(90deg, rgba(5, 5, 5, 0.2) 0%, rgba(5, 5, 5, 0.2) 100%); } .pv-quiz-viking__option-icon img { display: block; width: 40px; height: 40px; object-fit: contain; } .pv-quiz-viking__option-label { flex: 1; font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 21px; text-transform: uppercase; } .pv-quiz-viking__option-label p, .pv-quiz-viking__option-grid-label p { margin: 0; } .pv-quiz-viking__option-label p + p, .pv-quiz-viking__option-grid-label p + p { margin-top: 0.2em; } .pv-quiz-viking__option-indicator { position: relative; width: 22px; height: 22px; flex-shrink: 0; } .pv-quiz-viking__option-indicator-icon { position: absolute; top: 0; left: 0; display: block; } .pv-quiz-viking__option-indicator-icon--selected { display: none; } .pv-quiz-viking__option.is-selected .pv-quiz-viking__option-indicator-icon--unselected { display: none; } .pv-quiz-viking__option.is-selected .pv-quiz-viking__option-indicator-icon--selected { display: block; } @media (max-width: 480px) { .pv-quiz-viking__option { min-height: 61px; gap: 20px; border-width: 2px; padding: 12px 20px; } .pv-quiz-viking__option.is-selected { padding: 12px 20px; } .pv-quiz-viking__option-label { flex: 1 0 0; font-family: var(--pv-font-cta, 'Westmount', var(--pvqv-font-heading)); font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0; text-transform: uppercase; } } .pv-quiz-viking__options--grid { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: stretch; gap: 14.737px; } .pv-quiz-viking__option--grid { position: relative; flex: 0 0 calc((100% - 2 * 14.737px) / 3); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 29.051px; padding: 17.431px 29.051px; background: #151413; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14.526px; box-shadow: 0 14.526px 43.577px 0 rgba(0, 0, 0, 0.12); backdrop-filter: blur(13.073px); } .pv-quiz-viking__option--grid:hover { border-color: rgba(255, 255, 255, 0.5); } .pv-quiz-viking__option--grid.is-selected { border: 2.905px solid var(--pv-terra, var(--pvqv-primary)); padding: calc(17.431px - 1.905px) calc(29.051px - 1.905px); background: linear-gradient(137deg, rgba(0, 0, 0, 0.18) 0%, rgb(106, 46, 3) 100%), linear-gradient(90deg, rgba(5, 5, 5, 0.2) 0%, rgba(5, 5, 5, 0.2) 100%); } .pv-quiz-viking__option-grid-icon { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 0; } .pv-quiz-viking__option-grid-icon img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .pv-quiz-viking__option-grid-label { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); line-height: 1.2; letter-spacing: 0.3px; text-transform: uppercase; text-align: center; color: var(--pvqv-white); font-weight: 400; } .pv-quiz-viking__option-grid-check { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; display: none; } .pv-quiz-viking__option--grid.is-selected .pv-quiz-viking__option-grid-check { display: block; } @media (max-width: 480px) { .pv-quiz-viking__options--grid { gap: 10px; } .pv-quiz-viking__option--grid { gap: 5px; flex: 0 0 calc((100% - 10px) / 2); padding: 12px 20px; border-radius: 10px; backdrop-filter: blur(9px); min-height: 150px; } .pv-quiz-viking__option--grid.is-selected { border-width: 2px; padding: 11px 19px; } .pv-quiz-viking__option-grid-check { top: -8px; right: -8px; width: 22px; height: 22px; } .pv-quiz-viking__option-grid-icon { min-height: 60px; } } [data-question-id="q1"] .pv-quiz-viking__question { max-width: 400px; margin-inline: auto; } /* --- Buttons + links --- */ .pv-quiz-viking__btn--primary { display: block; width: 100%; background: var(--pvqv-cta-bg); color: var(--pvqv-white); border: none; border-radius: 5px; padding: 20px 24px; font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-weight: 400; font-size: 24px; letter-spacing: -1.92px; text-transform: uppercase; text-align: center; cursor: pointer; line-height: normal; } @media (min-width: 748px) { .pv-quiz-viking__btn--primary { font-size: 30px; padding: 20px 60px; letter-spacing: -2.4px; } } .pv-quiz-viking__btn--primary:disabled { opacity: 0.4; cursor: not-allowed; } .pv-quiz-viking__skip-link { display: block; width: 100%; background: none; border: none; color: var(--pvqv-white); text-decoration: underline; text-align: center; margin-top: 28px; padding: 8px 0; font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-weight: 800; font-size: 20px; text-transform: uppercase; cursor: pointer; } @media (min-width: 748px) { .pv-quiz-viking__skip-link { margin-top: 42px; } } .pv-quiz-viking-results__row { display: flex; align-items: stretch; gap: 3px; margin: 0 0 24px; } @media (min-width: 748px) { .pv-quiz-viking-results__row { margin: 0 0 48px; } } .pv-quiz-viking-results__review { flex: 1 0 0; margin: 0; } .pv-quiz-viking-results__review-duration { font-family: var(--pvqv-font-body); font-style: italic; font-size: 16px; color: var(--pvqv-white); margin: 0; } .pv-quiz-viking-results__photos { flex: 1 0 0; display: flex; gap: 1px; background: rgba(230, 220, 204, 0.1); } .pv-quiz-viking-results__photos img { flex: 1 0 0; width: 100%; height: 100%; min-width: 0; object-fit: cover; } @media (max-width: 480px) { .pv-quiz-viking-results__row { gap: 0px; background: #2A2521; flex-direction: column; } .pv-quiz-viking-results__photos { order: -1; aspect-ratio: 2 / 1; } } .pv-quiz-viking__summary-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(9px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.22); padding: 24px 36px; display: flex; flex-direction: column; margin: 0 0 24px; } @media (min-width: 748px) { .pv-quiz-viking__summary-card { margin: 0 0 48px; } } .pv-quiz-viking__summary-title { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 30px; text-transform: uppercase; color: #cf6515; margin: 0 0 10px; } .pv-quiz-viking__summary-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 0; } .pv-quiz-viking__summary-row:first-child { padding-top: 0; } .pv-quiz-viking__summary-row:last-child { padding-bottom: 0; } .pv-quiz-viking__summary-label { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 20px; color: var(--pvqv-white); } .pv-quiz-viking__summary-value { font-family: var(--pvqv-font-body); font-size: 20px; color: #e6dccc; text-align: right; } .pv-quiz-viking__step--loading .pv-quiz-viking__question { text-align: center; margin: 24px 0 40px; } @media (max-width: 480px) { .pv-quiz-viking__step--loading .pv-quiz-viking__question { margin: 24px auto; } } .pv-quiz-viking__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .pv-quiz-viking__checklist-item { display: flex; align-items: center; gap: 14px; color: var(--pvqv-gray); transition: color 0.2s ease; } .pv-quiz-viking__checklist-check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; transition: background-color 0.2s ease; } .pv-quiz-viking__checklist-check img { display: block; width: 12px; height: 12px; } .pv-quiz-viking__checklist-text { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; } .pv-quiz-viking__checklist-item.is-complete { color: var(--pvqv-white); } .pv-quiz-viking__checklist-item.is-complete .pv-quiz-viking__checklist-check { background: var(--pv-terra, var(--pvqv-primary)); } @media (max-width: 480px) { .pv-quiz-viking__checklist { gap: 20px; } } .pv-quiz-viking__step--order-summary .pv-quiz-viking__back-link { display: block; width: 100%; text-align: center; margin: 0 0 24px; } .pv-quiz-viking__step--order-summary .pv-quiz-viking__question { text-align: left; margin: 0 0 16px; } .pv-quiz-viking__order-card, .pv-quiz-viking__bullets-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(9px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.22); padding: 13px; margin: 0 0 16px; } .pv-quiz-viking__order-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* The class's own `display: flex` is an author style and otherwise beats the browser's default `[hidden] { display: none }` rule - toggling the hidden attribute alone would leave the row visible. */ .pv-quiz-viking__order-row[hidden] { display: none; } .pv-quiz-viking__order-row + .pv-quiz-viking__order-row { margin-top: 13px; } .pv-quiz-viking__order-divider { border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 13px 0; } .pv-quiz-viking__order-quantity { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 20px; margin: 0 0 6px; line-height: 25px; } .pv-quiz-viking__order-card{ background: transparent; } .pv-quiz-viking__order-product { font-family: var(--pvqv-font-body); font-size: 14px; margin: 0; } .pv-quiz-viking__order-badge { flex-shrink: 0; background: var(--pv-blue, #6390c2); color: var(--pvqv-white); font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 12px; text-transform: uppercase; padding: 8px; line-height: 8px; border-radius: 20px; min-width: 109px; } @media (max-width: 740px) { .pv-quiz-viking__bullets-heading { font-size: 16px !important; } .pv-quiz-viking__bullets li { font-size: 12px !important; } } .pv-quiz-viking__order-price-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 15px; text-transform: uppercase; padding: 6px 0; } .pv-quiz-viking__order-price-row[hidden] { display: none; } .pv-quiz-viking__order-price-row--original span:last-child { text-decoration: line-through; opacity: 0.55; text-transform: none; } .pv-quiz-viking__order-price-row--discount { color: var(--pv-blue, #6390c2); } .pv-quiz-viking__order-price-row--discount span:last-child { text-transform: none; } .pv-quiz-viking__order-price-row--total { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 4px; padding-top: 13px; } .pv-quiz-viking__order-price-row--total span:last-child { font-size: 22px; text-transform: none; } .pv-quiz-viking__bullets-heading { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: #cf6515; margin: 0 0 10px; } .pv-quiz-viking__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pv-quiz-viking__bullets li { display: flex; align-items: flex-start; gap: 8px; font-family: var(--pvqv-font-body); font-size: 16px; line-height: 1.4; } .pv-quiz-viking__bullets li img { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; } .pv-quiz-viking-upsell__eyebrow { font-family: var(--pv-font-cta, var(--pvqv-font-heading)); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #cf6515; margin: 0 0 20px; } .pv-quiz-viking-upsell__heading { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 28px; text-align: center; color: var(--pvqv-white); margin: 0 0 10px; } .pv-quiz-viking-upsell__card { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 16px; margin: 0 0 20px; min-height: 223px; } .pv-quiz-viking-upsell__image { flex-shrink: 0; width: 298px; max-height: 223px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; object-fit: cover; } .pv-quiz-viking-upsell__details { max-width: 516px; flex: 1; } .pv-quiz-viking-upsell__description { color: var(--pvqv-white); margin: 0 0 10px; font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; /* 26px */ } .pv-quiz-viking-upsell__price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .pv-quiz-viking-upsell__compare { font-size: 22.5px; font-style: normal; font-weight: 600; line-height: normal; text-decoration-line: line-through; text-decoration: line-through; color: var(--pvqv-gray); } .pv-quiz-viking-upsell__price { font-size: 33px; font-style: normal; font-weight: 600; line-height: normal; font-weight: 700; color: var(--pvqv-white); } .pv-quiz-viking-upsell__save-badge { display: flex; padding: 12px; flex-direction: column; align-items: flex-start; background: var(--pv-blue, #6390c2); border-radius: 999px; color: #FFF; font-family: Westmount; font-size: 18px; font-style: normal; font-weight: 400; line-height: 12px; /* 66.667% */ text-transform: uppercase; } .pv-quiz-viking-upsell__cta { display: block; width: 100%; margin: 0 0 16px; } .pv-quiz-viking__cart-error { color: #e05252; font-size: 14px; text-align: center; margin: 12px 0 0; } .pv-quiz-viking__step--checkout-redirect.is-active { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(840px, calc(100vw - 40px)); text-align: center; padding: 0; align-self: center; max-width: 100%; } @media (min-width: 748px) { .pv-quiz-viking__step--checkout-redirect.is-active { margin-top: 56px !important; } } .pv-quiz-viking__step--checkout-redirect .pv-quiz-viking__question { margin: 0; } .pv-quiz-viking__checkout-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(92, 122, 63, 0.18); border: 1px solid rgba(92, 122, 63, 0.5); flex-shrink: 0; } .pv-quiz-viking__checkout-icon img { display: block; width: 28px; height: 28px; } .pv-quiz-viking__checkout-recap { font-family: var(--pvqv-font-heading); font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--pvqv-white); margin: 0; } .pv-quiz-viking__step[data-step="17"] .pv-quiz-viking__btn--primary { background: var(--pvqv-white); color: #111; line-height: 1; } @media (min-width: 748px) { .pv-quiz-viking__step[data-step="17"] .pv-quiz-viking__btn--primary { font-size: 24px; padding: 18px 60px; letter-spacing: -1.92px; line-height: 1.25; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 740px) { .pv-shell__inner.pv-quiz-review-photos { padding: 0 !important; } } .pv-product-shell .pv-quiz-offer-header__dynamic-subtitle { font-size: 20px; margin-bottom: 16px; } .pv-product-shell .pv-quiz-offer-header__paragraph { font-size: 18px; } } .pv-scroll-ba__header .pv-sba-heading { font-weight: 400; } .body.template--pv-quiz-viking .pv-quiz-viking__step[data-step="1"] .pv-quiz-viking-intro__cta { border: none; } @media (min-width: 748px) { .pv-quiz-viking__step[data-step="16"] { margin-top: 56px; } } .pv-quiz-viking__step[data-step="16"] .pv-quiz-viking-upsell__eyebrow { margin-bottom: 20px; line-height: 1.2; } [data-action="upsell-decline"] { padding-top: 4px !important; color: #8C8175 !important; font-weight: 400 !important; letter-spacing: 0.28px !important; font-size: 14px !important; } @media (max-width: 748px) { .pv-long-blocks__block .pv-lb-image-text p { line-height: 26px; } body.template--pv-quiz-viking .pv-quiz-viking__progress-label { font-size: 12px !important; } } .pv-product__sticky-buy-btn { min-height: fit-content !important; } .pv-shell.pv-newsletter { padding-bottom: 120px; } .nch__logo-link { pointer-events: none !important; }