/* Adapted faithfully from Shopify product-information.liquid */ #PRProductMain { position: relative; overflow-x: clip; overflow-y: visible; padding: var(--pr-padding-top) 0 var(--pr-padding-bottom); background: var(--pr-bg); color: var(--pr-text); } #PRProductMain, #PRProductMain * { box-sizing: border-box; } #PRProductMain [hidden] { display: none !important; } #PRProductMain .pr-product-main__container { position: relative; z-index: 2; width: min( calc(100% - 40px), var(--pr-width) ); margin-inline: auto; } #PRProductMain .pr-product-main__ambient { position: absolute; border-radius: 50%; pointer-events: none; } #PRProductMain .pr-product-main__ambient--one { top: -260px; right: -180px; width: 600px; height: 600px; background: radial-gradient( circle, rgba(145, 173, 154, 0.17), transparent 70% ); } #PRProductMain .pr-product-main__ambient--two { bottom: -260px; left: -220px; width: 560px; height: 560px; background: radial-gradient( circle, rgba(145, 173, 154, 0.1), transparent 72% ); } #PRProductMain .pr-product-main__breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 27px; color: var(--pr-muted); font-size: 10px; } #PRProductMain .pr-product-main__breadcrumbs a { color: inherit; text-decoration: none; } #PRProductMain .pr-product-main__hero { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(430px, 0.93fr); align-items: start; gap: 44px; } #PRProductMain .pr-product-main__media-column, #PRProductMain .pr-product-main__details-column { min-width: 0; } @media screen and (min-width: 990px) { #PRProductMain { overflow-x: clip; overflow-y: visible; } #PRProductMain .pr-product-main__media-column { position: sticky; top: 96px; align-self: start; z-index: 2; } #PRProductMain .pr-product-main__details-card { position: relative; top: auto; } } @media screen and (max-width: 989px) { #PRProductMain { overflow-x: clip; overflow-y: hidden; } #PRProductMain .pr-product-main__media-column { position: static; top: auto; } } #PRProductMain .pr-product-main__media-shell { position: relative; overflow: hidden; border: 1px solid var(--pr-border); border-radius: calc( var(--pr-card-radius) + 2px ); background: var(--pr-surface); box-shadow: 0 18px 58px rgba(20, 32, 26, 0.08); } #PRProductMain .pr-product-main__media-stage { position: relative; overflow: hidden; border-radius: var(--pr-image-radius); background: var(--pr-soft); } #PRProductMain .pr-product-main__media-image, #PRProductMain .pr-product-main__media-video, #PRProductMain .pr-product-main__placeholder, #PRProductMain model-viewer { display: block; width: 100%; min-height: 560px; max-height: 760px; object-fit: cover; } #PRProductMain .pr-product-main__media-badges { position: absolute; z-index: 5; top: 26px; right: 26px; left: 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; } #PRProductMain .pr-product-main__media-badges-left { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } #PRProductMain .pr-product-main__badge, #PRProductMain .pr-product-main__discount { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 7px 11px; border-radius: 999px; font-size: 8px; font-weight: 850; letter-spacing: 0.07em; line-height: 1; text-transform: uppercase; box-shadow: 0 7px 20px rgba(20, 32, 26, 0.12); } #PRProductMain .pr-product-main__badge { background: var(--pr-accent); color: var(--pr-accent-text); } #PRProductMain .pr-product-main__badge--bestseller { gap: 5px; } #PRProductMain .pr-product-main__badge--bestseller svg { flex: 0 0 auto; width: 10px; height: 10px; } #PRProductMain .pr-product-main__badge--light { border: 1px solid rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.88); color: var(--pr-text); backdrop-filter: blur(10px); } #PRProductMain .pr-product-main__discount { margin-left: auto; background: var(--pr-sale); color: #ffffff; } #PRProductMain .pr-product-main__thumbnails { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom:10px; } #PRProductMain .pr-product-main__thumbnail { flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; padding: 0px; border: 1px solid var(--pr-border); border-radius: 12px; background: var(--pr-surface); cursor: pointer; } #PRProductMain .pr-product-main__thumbnail.is-active { border-color: var(--pr-accent); box-shadow: 0 0 0 2px rgba(145, 173, 154, 0.18); } #PRProductMain .pr-product-main__thumbnail img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; } #PRProductMain .pr-product-main__media-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--pr-muted); font-size: 10px; font-weight: 650; } #PRProductMain .pr-product-main__media-note svg { color: var(--pr-accent); } /* #PRProductMain .pr-product-main__details-card { position: sticky; top: 24px; padding: 30px; border: 1px solid var(--pr-border); border-radius: var(--pr-card-radius); background: var(--pr-surface); box-shadow: 0 18px 58px rgba(20, 32, 26, 0.07); } */ #PRProductMain .pr-product-main__eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--pr-accent); font-size: 10.5px; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } #PRProductMain .pr-product-main__eyebrow > span { width: 24px; height: 2px; border-radius: 999px; background: var(--pr-accent); } #PRProductMain .pr-product-main__title { margin: 0; color: var(--pr-text); font-family: var(--font-heading--family, inherit); font-size: clamp(38px, 4.4vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -0.06em; } #PRProductMain .pr-product-main__ebook-subtitle { max-width: 720px; margin: 16px 0 0; color: var(--pr-text); font-size: clamp( 15px, 1.15vw, 18px ); font-weight: 650; line-height: 1.52; letter-spacing: -0.015em; } #PRProductMain .pr-product-main__value-proposition { position: relative; margin-top: 16px; padding-left: 15px; color: var(--pr-muted); font-size: clamp( 13px, 0.95vw, 15px ); font-weight: 500; line-height: 1.65; } #PRProductMain .pr-product-main__value-proposition::before { position: absolute; top: 4px; bottom: 4px; left: 0; width: 3px; border-radius: 99px; background: linear-gradient( 180deg, var(--pr-accent), rgba(145, 173, 154, 0.2) ); content: ""; } #PRProductMain .pr-product-main__benefits { display: grid; gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; } #PRProductMain .pr-product-main__benefits li { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; gap: 10px; } #PRProductMain .pr-product-main__benefit-check { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 0; border-radius: 50%; background: var(--pr-accent); color: #fff; box-shadow: 0 5px 12px rgba(20, 32, 26, 0.1); } #PRProductMain .pr-product-main__benefit-check svg { display: block; } #PRProductMain .pr-product-main__benefit-text { color: var(--pr-text); font-size: 15px; font-weight: 500; line-height: 1.55; } #PRProductMain .pr-product-main__micro-trust { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 20px; padding: 13px 0; border-top: 1px solid var(--pr-border); border-bottom: 1px solid var(--pr-border); color: var(--pr-muted); font-size: 10px; font-weight: 700; } #PRProductMain .pr-product-main__micro-trust span { display: inline-flex; align-items: center; gap: 6px; } #PRProductMain .pr-product-main__micro-trust svg { flex: 0 0 auto; color: var(--pr-accent); } #PRProductMain .pr-product-main__price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 23px; } #PRProductMain .pr-product-main__price-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; } #PRProductMain .pr-product-main__price { color: var(--pr-text); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing:-1.2px; } #PRProductMain .pr-product-main__compare-price { color: var(--pr-muted); font-size: 15px; } #PRProductMain .pr-product-main__saving { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 11px; border: 1px solid rgba(165, 83, 69, 0.2); border-radius: 999px; background: rgba(165, 83, 69, 0.1); color: var(--pr-sale); font-size: 10px; font-weight: 850; white-space: nowrap; } #PRProductMain .pr-product-main__offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 18px; padding: 28px 14px 14px 16px; overflow: hidden; border: 1px solid rgba(198, 133, 120, 0.22); border-radius: 18px; background: linear-gradient( 135deg, rgba(255, 247, 245, 0.92), rgba(255, 255, 255, 0.96) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 28px rgba(33, 41, 36, 0.055); } #PRProductMain .pr-product-main__offer::before { position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient( circle, rgba(198, 133, 120, 0.08), transparent 68% ); content: ""; pointer-events: none; } #PRProductMain .pr-product-main__offer::after { position: absolute; top: -55px; right: 65px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient( circle, rgba(185, 89, 73, 0.09) 0%, rgba(185, 89, 73, 0.035) 42%, rgba(185, 89, 73, 0) 72% ); content: ""; pointer-events: none; } #PRProductMain .pr-product-main__offer-copy { position: relative; z-index: 1; min-width: 0; } #PRProductMain .pr-product-main__offer-kicker { position: absolute; z-index: 3; top: -32px; left: 0px; display: inline-flex; align-items: center; gap: 7px; min-height: 24px; margin: 0; padding: 6px 11px 6px; border: 1px solid rgba(185, 89, 73, 0.18); border-top: 0; border-radius: 0 0 18px 18px; background-color: #ffffff; color: var(--pr-sale); box-shadow: 0 7px 16px rgba(31, 42, 36, 0.03); font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; white-space: nowrap; } #PRProductMain .pr-product-main__offer-kicker > span { position: relative; z-index: 1; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background-color: var(--pr-sale); box-shadow: 0 0 5px rgba(185, 89, 73, 0.28); } #PRProductMain .pr-product-main__offer-kicker > span::before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient( circle, rgba(185, 89, 73, 0.28) 0%, rgba(185, 89, 73, 0.16) 34%, rgba(185, 89, 73, 0.06) 58%, rgba(185, 89, 73, 0) 76% ); content: ""; pointer-events: none; transform: translate(-50%, -50%); } #PRProductMain .pr-product-main__offer-kicker > span::after { position: absolute; z-index: -2; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient( circle, rgba(185, 89, 73, 0.42) 0%, rgba(185, 89, 73, 0.24) 28%, rgba(185, 89, 73, 0.1) 50%, rgba(185, 89, 73, 0.025) 68%, rgba(185, 89, 73, 0) 80% ); content: ""; pointer-events: none; transform: translate(-50%, -50%) scale(0.55); animation: prOfferPulse 2.35s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes prOfferPulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } 14% { opacity: 0.9; } 70% { opacity: 0.18; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); } } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__offer-kicker > span::after { animation: none; opacity: 0; } } #PRProductMain .pr-product-main__offer-heading { display: block; color: var(--pr-text); font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } #PRProductMain .pr-product-main__offer-text { margin: 4px 0 0; color: var(--pr-muted); font-size: 12.5px; line-height: 1.45; } #PRProductMain .pr-product-main__offer-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 13px; border: 1.5px dashed rgba(198, 133, 120, 0.36); border-radius: 15px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92) ); color: var(--pr-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 6px 16px rgba(33, 41, 36, 0.055); cursor: pointer; font: inherit; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease; } #PRProductMain .pr-product-main__offer-button:hover { border-color: rgba(198, 133, 120, 0.6); background: linear-gradient( 180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.96) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 22px rgba(33, 41, 36, 0.075); transform: translateY(-1px); } #PRProductMain .pr-product-main__offer-button:active { transform: translateY(0); } #PRProductMain .pr-product-main__offer-button:focus-visible { outline: 2px solid rgba(198, 133, 120, 0.34); outline-offset: 3px; } #PRProductMain .pr-product-main__offer-button-label { color: var(--pr-muted); font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; } #PRProductMain .pr-product-main__offer-code { color: var(--pr-sale); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; } #PRProductMain .pr-product-main__offer-copy-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; border-radius: 9px; background: rgba(198, 133, 120, 0.1); color: var(--pr-sale); transition: background 180ms ease, color 180ms ease, transform 180ms ease; } #PRProductMain .pr-product-main__offer-button:hover .pr-product-main__offer-copy-icon { background: rgba(198, 133, 120, 0.14); } #PRProductMain .pr-product-main__offer-button.is-copied { border-color: rgba(79, 129, 95, 0.32); background: linear-gradient( 180deg, rgba(244, 251, 246, 0.98), rgba(237, 247, 240, 0.98) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 22px rgba(52, 93, 65, 0.08); } #PRProductMain .pr-product-main__offer-button.is-copied .pr-product-main__offer-button-label { color: #4e7d5b; } #PRProductMain .pr-product-main__offer-button.is-copied .pr-product-main__offer-code { color: #356747; } #PRProductMain .pr-product-main__offer-button.is-copied .pr-product-main__offer-copy-icon { background: rgba(79, 129, 95, 0.14); color: #356747; transform: scale(1.03); } #PRProductMain .pr-product-main__visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; margin: -1px !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } #PRProductMain .pr-product-main__visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; margin: -1px !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } #PRProductMain .pr-product-main__form { margin-top: 18px; } #PRProductMain .pr-product-main__variant-picker { margin-bottom: 20px; } #PRProductMain .pr-product-main__variant-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; } #PRProductMain .pr-product-main__variant-label { color: var(--pr-text); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; } #PRProductMain .pr-product-main__variant-helper { color: var(--pr-muted); font-size: 9px; font-weight: 800; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; } #PRProductMain .pr-product-main__variant-cards { display: grid; gap: 10px; } #PRProductMain .pr-product-main__variant-card { position: relative; display: grid; grid-template-columns: 22px 45px minmax(0, 1fr) auto; align-items: center; gap: 13px; width: 100%; min-height: 88px; padding: 15px 16px; overflow: visible; border: 1px solid var(--pr-border); border-radius: 17px; background: var(--pr-surface); color: var(--pr-text); box-shadow: 0 6px 18px rgba(20, 32, 26, 0.035); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; } #PRProductMain .pr-product-main__variant-card:hover { border-color: rgba(145, 173, 154, 0.58); box-shadow: 0 11px 26px rgba(20, 32, 26, 0.065); transform: translateY(-1px); } #PRProductMain .pr-product-main__variant-card.is-selected { border-color:var(--pr-accent); background: linear-gradient( 135deg, rgba(145, 173, 154, 0.135), rgba(255, 255, 255, 0.98) ); box-shadow: 0 0 0 1px rgba(145, 173, 154, 0.12), 0 13px 30px rgba(20, 32, 26, 0.075); } /* Bundle selected: same styling as regular selected card, but in gold */ #PRProductMain .pr-product-main__variant-card--bundle.is-selected { border-color: #e1b46e; background: linear-gradient( 135deg, rgba(225, 180, 110, 0.10), rgba(255, 255, 255, 0.98) ); box-shadow: 0 0 0 1px rgba(225, 180, 110, 0.12), 0 13px 30px rgba(20, 32, 26, 0.075); } #PRProductMain .pr-product-main__variant-card--bundle.is-selected .pr-product-main__variant-radio > span { background: var(--pr-text); transform: scale(1); } #PRProductMain .pr-product-main__variant-card--bundle { align-items: start; margin-top: 4px; padding-top: 24px; padding-bottom: 54px; } #PRProductMain .pr-product-main__variant-card--bundle .pr-product-main__variant-pricing { align-self: start; padding-top: 2px; } #PRProductMain .pr-product-main__variant-card--bundle .pr-product-main__variant-radio { align-self: start; margin-top: 15px; } #PRProductMain .pr-product-main__bundle-upgrade { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 40px; padding: 9px 14px; border-top: 1px solid rgba(145, 173, 154, 0.24); border-radius: 0 0 16px 16px; background: #e1b46e; color: var(--pr-text); font-size: 12.5px; font-weight: 650; line-height: 1.35; text-align: center; } #PRProductMain .pr-product-main__bundle-upgrade-icon { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--pr-accent); color: var(--pr-accent-text); } #PRProductMain .pr-product-main__bundle-upgrade-icon svg { display: block; } #PRProductMain .pr-product-main__bundle-upgrade strong { font-weight: 900; white-space: nowrap; } #PRProductMain .pr-product-main__variant-popular-badge { position: absolute; z-index: 4; top: 5px; left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 18px; padding: 3px 12px; border-radius: 0 0 99px 99px; background: #e1b46e; color: var(--pr-text); box-shadow: 0 7px 18px rgba(20, 32, 26, 0.1); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -55%); } #PRProductMain .pr-product-main__variant-popular-badge svg { flex: 0 0 auto; } #PRProductMain .pr-product-main__variant-radio-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } #PRProductMain .pr-product-main__variant-radio { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid rgba(91, 105, 96, 0.36); border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 3px #ffffff; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } #PRProductMain .pr-product-main__variant-radio > span { width: 8px; height: 8px; border-radius: 50%; background: transparent; transform: scale(0.4); transition: background 180ms ease, transform 180ms ease; } #PRProductMain .pr-product-main__variant-card.is-selected .pr-product-main__variant-radio { border-color: var(--pr-accent); background: var(--pr-accent); box-shadow: 0 0 0 4px rgba(145, 173, 154, 0.14); } #PRProductMain .pr-product-main__variant-card--bundle.is-selected .pr-product-main__variant-radio { border-color: #e1b46e; background: #e1b46e; box-shadow: 0 0 0 4px rgba(225, 180, 110, 0.16); } #PRProductMain .pr-product-main__variant-card.is-selected .pr-product-main__variant-radio > span { background: var(--pr-accent-text); transform: scale(1); } #PRProductMain .pr-product-main__variant-image { display: block; width: 45px; height: 50px; overflow: hidden; border: 1px solid rgba(218, 224, 219, 0.9); border-radius: 10px; background: var(--pr-soft); box-shadow: 0 5px 14px rgba(20, 32, 26, 0.06); } #PRProductMain .pr-product-main__variant-image img, #PRProductMain .pr-product-main__variant-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } #PRProductMain .pr-product-main__variant-content { display: grid; min-width: 0; gap: 5px; } #PRProductMain .pr-product-main__variant-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; padding-right: 2px; } #PRProductMain .pr-product-main__variant-title { min-width: 0; color: var(--pr-text); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.016em; overflow-wrap: anywhere; } #PRProductMain .pr-product-main__variant-description { color: var(--pr-muted); font-size: 13px; line-height: 1.42; } #PRProductMain .pr-product-main__variant-bundle-intro { display: block; margin-top: 4px; color: var(--pr-muted); font-size: 13px; font-weight: 600; line-height: 1.35; } #PRProductMain .pr-product-main__variant-bundle-list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; } #PRProductMain .pr-product-main__variant-bundle-list li { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 7px; color: var(--pr-muted); font-size: 14px; line-height: 1.42; } #PRProductMain .pr-product-main__variant-bundle-check { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: rgb(225 180 110 / 65%); color: #fff; } #PRProductMain .pr-product-main__variant-bundle-check svg { display: block; } #PRProductMain .pr-product-main__variant-saving { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 4px 10px; overflow: hidden; border-radius: 999px; background:var(--pr-text); color: #fff; box-shadow: 0 4px 11px rgba(185, 89, 73, 0.06); font-size: 8.5px; font-weight: 700; letter-spacing: 0.045em; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: translateY(-1px); } #PRProductMain .pr-product-main__variant-saving::before { width: 5px; height: 5px; flex: 0 0 auto; margin-right: 5px; border-radius: 50%; background: var(--pr-accent); box-shadow: 0 0 0 3px rgba(73, 185, 110, 0.09); content: ""; } #PRProductMain .pr-product-main__variant-unavailable { color: var(--pr-sale); font-size: 8px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; } #PRProductMain .pr-product-main__variant-pricing { display: grid; justify-items: end; gap: 5px; min-width: 72px; } #PRProductMain .pr-product-main__variant-pricing strong { color: var(--pr-text); font-size: 22px; font-weight: 750; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; } #PRProductMain .pr-product-main__variant-pricing s { color: var(--pr-muted); font-size: 12.5px; line-height: 1; white-space: nowrap; } #PRProductMain .pr-product-main__variant-card.is-unavailable { opacity: 0.52; cursor: not-allowed; filter: grayscale(0.25); } #PRProductMain .pr-product-main__variant-card.is-unavailable:hover { border-color: var(--pr-border); box-shadow: 0 6px 18px rgba(20, 32, 26, 0.035); transform: none; } #PRProductMain .pr-product-main__variant-native-select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; margin: -1px !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } #PRProductMain .pr-product-main__add-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 56px; padding: 13px 20px; border: 0; border-radius: 14px; background: var(--pr-text); color: #f7f7f3; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; } #PRProductMain .pr-product-main__add-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 32, 26, 0.15); } #PRProductMain .pr-product-main__add-button:disabled { opacity: 0.45; cursor: not-allowed; } #PRProductMain .pr-product-main__add-button.is-loading { cursor: wait; opacity: 0.78; pointer-events: none; } #PRProductMain .pr-product-main__add-button.is-loading svg { animation: prAddButtonSpin 0.8s linear infinite; } @keyframes prAddButtonSpin { to { transform: rotate(360deg); } } /* Main Add to Cart — reuse existing premium shimmer */ #PRProductMain .pr-product-main__add-button { position: relative; isolation: isolate; overflow: visible; } #PRProductMain .pr-product-main__add-button > span:not(.pr-product-main__mobile-quick-add-shimmer), #PRProductMain .pr-product-main__add-button > svg { position: relative; z-index: 5; } /* Subtle glossy surface */ #PRProductMain .pr-product-main__add-button:not(:disabled)::before { position: absolute; inset: 1px; z-index: 1; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 36%, rgba(255, 255, 255, 0) 74% ); content: ""; pointer-events: none; opacity: 0.72; } /* Stop the shimmer while unavailable or loading */ #PRProductMain .pr-product-main__add-button:disabled .pr-product-main__mobile-quick-add-shimmer, #PRProductMain .pr-product-main__add-button.is-loading .pr-product-main__mobile-quick-add-shimmer { display: none; } #PRProductMain .pr-product-main__add-button:disabled, #PRProductMain .pr-product-main__add-button.is-loading { animation: none; } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__add-button, #PRProductMain .pr-product-main__add-button .pr-product-main__mobile-quick-add-shimmer { animation: none; } } #PRProductMain .pr-product-main__dynamic-checkout { margin-top: 10px; } #PRProductMain .pr-product-main__checkout-note { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 11px; color: var(--pr-muted); font-size: 10px; line-height: 1.4; text-align: center; } #PRProductMain .pr-product-main__checkout-note svg { flex: 0 0 auto; color: var(--pr-accent); } /* PREMIUM CONFIDENCE PANEL */ #PRProductMain .pr-product-main__assurances { position: relative; isolation: isolate; margin-top: 21px; overflow: hidden; border: 1px solid rgba(23, 35, 30, 0.1); border-radius: 20px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 247, 0.5) 52%, rgba(243, 247, 244, 0.5) 100% ); box-shadow: 0 16px 38px rgba(20, 32, 26, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.92); } #PRProductMain .pr-product-main__assurances::before { position: absolute; z-index: -1; top: -120px; right: -95px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient( circle, rgba(145, 173, 154, 0.11) 0%, rgba(145, 173, 154, 0.045) 45%, rgba(145, 173, 154, 0) 72% ); content: ""; pointer-events: none; } #PRProductMain .pr-product-main__assurances::after { position: absolute; z-index: -1; bottom: -105px; left: -85px; width: 200px; height: 200px; border: 1px solid rgba(145, 173, 154, 0.1); border-radius: 50%; box-shadow: 0 0 0 38px rgba(145, 173, 154, 0.025); content: ""; pointer-events: none; } #PRProductMain .pr-product-main__assurances-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px 12px; border-bottom: 1px solid rgba(23, 35, 30, 0.07); } #PRProductMain .pr-product-main__assurances-kicker { color: var(--pr-muted); font-size: 8.5px; font-weight: 850; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } #PRProductMain .pr-product-main__assurances-status { display: inline-flex; align-items: center; gap: 6px; color: var(--pr-muted); font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; } #PRProductMain .pr-product-main__assurances-status > span { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--pr-accent); box-shadow: 0 0 0 4px rgba(145, 173, 154, 0.12); } #PRProductMain .pr-product-main__assurances-list { position: relative; z-index: 2; display: grid; } #PRProductMain .pr-product-main__assurance { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 14px 16px; transition: background 180ms ease, transform 180ms ease; } #PRProductMain .pr-product-main__assurance + .pr-product-main__assurance { border-top: 1px solid rgba(23, 35, 30, 0.065); } #PRProductMain .pr-product-main__assurance::before { position: absolute; top: 15px; bottom: 15px; left: 0; width: 2px; border-radius: 0 999px 999px 0; background: transparent; content: ""; transition: background 180ms ease, width 180ms ease; } #PRProductMain .pr-product-main__assurance-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(145, 173, 154, 0.25); border-radius: 50%; background: rgba(145, 173, 154, 0.12); color: var(--pr-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; } #PRProductMain .pr-product-main__assurance-icon svg { display: block; } #PRProductMain .pr-product-main__assurance-copy { min-width: 0; } #PRProductMain .pr-product-main__assurance-copy strong { display: block; color: var(--pr-text); font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; } #PRProductMain .pr-product-main__assurance-copy p { margin: 5px 0 0; color: var(--pr-muted); font-size: 11.5px; font-weight: 500; line-height: 1.45; } #PRProductMain .pr-product-main__assurance-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 6px 9px; border: 1px solid rgba(23, 35, 30, 0.075); border-radius: 999px; background: rgba(255, 255, 255, 0.68); color: var(--pr-muted); font-size: 8px; font-weight: 850; letter-spacing: 0.07em; line-height: 1; text-transform: uppercase; white-space: nowrap; } #PRProductMain .pr-product-main__assurance--guarantee { background: linear-gradient( 90deg, rgba(145, 173, 154, 0.045), rgba(145, 173, 154, 0.015) 58%, rgba(255, 255, 255, 0) 100% ); } #PRProductMain .pr-product-main__assurance--guarantee::before { width: 3px; background: var(--pr-accent); } #PRProductMain .pr-product-main__assurance--guarantee .pr-product-main__assurance-icon { border-color: rgba(145, 173, 154, 0.4); background: var(--pr-accent); color: var(--pr-accent-text); box-shadow: 0 7px 18px rgba(20, 32, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); } #PRProductMain .pr-product-main__assurance-tag--guarantee { border-color: rgba(145, 173, 154, 0.25); background: rgba(145, 173, 154, 0.13); color: var(--pr-text); } @media (hover: hover) { #PRProductMain .pr-product-main__assurance:hover { background: rgba(255, 255, 255, 0.58); } #PRProductMain .pr-product-main__assurance:hover::before { width: 3px; background: rgba(145, 173, 154, 0.72); } #PRProductMain .pr-product-main__assurance:hover .pr-product-main__assurance-icon { border-color: rgba(145, 173, 154, 0.42); background: rgba(145, 173, 154, 0.18); transform: translateY(-1px); } #PRProductMain .pr-product-main__assurance--guarantee:hover .pr-product-main__assurance-icon { background: var(--pr-accent); } } #PRProductMain .pr-product-main__assurances-header { display: flex; } @media screen and (max-width: 749px) { #PRProductMain .pr-product-main__assurances { margin-top: 18px; border-radius: 18px; } #PRProductMain .pr-product-main__assurances-header { padding: 12px 13px 11px; } #PRProductMain .pr-product-main__assurances-status { font-size: 8px; } #PRProductMain .pr-product-main__assurance { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; min-height: 64px; padding: 14px 14px; } #PRProductMain .pr-product-main__assurance-icon { width: 36px; height: 36px; } #PRProductMain .pr-product-main__assurance-icon svg { width: 18px; height: 18px; } #PRProductMain .pr-product-main__assurance-copy strong { font-size: 13px; } #PRProductMain .pr-product-main__assurance-copy p { margin-top: 5px; font-size: 11px; line-height: 1.4; } #PRProductMain .pr-product-main__assurance-tag { min-height: 22px; padding: 5px 7px; font-size: 7px; } #PRProductMain .pr-product-main__assurances-header { display: none; } } @media screen and (max-width: 420px) { #PRProductMain .pr-product-main__assurances-status { display: none; } #PRProductMain .pr-product-main__assurance { grid-template-columns: 36px minmax(0, 1fr); padding-right: 12px; } #PRProductMain .pr-product-main__assurance-tag { display: none; } } #PRProductMain .pr-product-main__section-kicker { display: block; margin-bottom: 5px; color: var(--pr-accent); font-size: 8px; font-weight: 850; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; } #PRProductMain .pr-product-main__compatibility { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 18px 0; border-top: 1px solid var(--pr-border); border-bottom: 1px solid var(--pr-border); } #PRProductMain .pr-product-main__compatibility-copy { min-width: 0; } #PRProductMain .pr-product-main__compatibility-copy strong { display: block; color: var(--pr-text); font-size: 14px; line-height: 1.35; } #PRProductMain .pr-product-main__device-list { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } #PRProductMain .pr-product-main__device-list span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 10px; border: 1px solid var(--pr-border); border-radius: 11px; background: var(--pr-soft); color: var(--pr-text); font-size: 11px; font-weight: 750; } #PRProductMain .pr-product-main__device-list svg { color: var(--pr-accent); } #PRProductMain .pr-product-main__ebook-details { margin-top: 23px; } #PRProductMain .pr-product-main__details-heading strong { display: block; color: var(--pr-text); font-family: var(--font-heading--family, inherit); font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; } #PRProductMain .pr-product-main__details-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 0; margin: 16px 0 0; overflow: hidden; border: 1px solid var(--pr-border); border-radius: 15px; background: var(--pr-soft); } #PRProductMain .pr-product-main__details-grid > div { min-width: 0; padding: 14px; border-right: 1px solid var(--pr-border); border-bottom: 1px solid var(--pr-border); } #PRProductMain .pr-product-main__details-grid > div:nth-child(3n) { border-right: 0; } #PRProductMain .pr-product-main__details-grid > div:nth-last-child(-n + 3) { border-bottom: 0; } #PRProductMain .pr-product-main__details-grid dt { margin: 0 0 5px; color: var(--pr-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; } #PRProductMain .pr-product-main__details-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--pr-text); font-size: 13px; font-weight: 750; line-height: 1.35; } #PRProductMain .pr-product-main__sticky { position: fixed; z-index: 60; right: 18px; bottom: 18px; left: 18px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(22px) scale(0.985); transition: opacity 220ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms; will-change: opacity, transform; } #PRProductMain .pr-product-main__sticky.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 220ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } #PRProductMain .pr-product-main__sticky-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #PRProductMain .pr-product-main__sticky-cart-icon { flex: 0 0 auto; width: 16px; height: 16px; transition: transform 180ms ease; } #PRProductMain .pr-product-main__sticky-form button:hover .pr-product-main__sticky-cart-icon { transform: translateX(1px); } /* Sticky CTA: premium dark aurora + diffused left-to-right shimmer */ #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button] { position: relative; isolation: isolate; overflow: visible; background: radial-gradient( circle at 16% 24%, rgba(169, 193, 175, 0.42), rgba(169, 193, 175, 0.18) 24%, rgba(169, 193, 175, 0.04) 42%, rgba(169, 193, 175, 0) 62% ), radial-gradient( circle at 86% 72%, rgba(247, 247, 243, 0.22), rgba(247, 247, 243, 0.08) 28%, rgba(247, 247, 243, 0) 58% ), radial-gradient( circle at 52% 110%, rgba(111, 145, 124, 0.26), rgba(111, 145, 124, 0.08) 34%, rgba(111, 145, 124, 0) 66% ), linear-gradient( 135deg, #14231d 0%, #20362d 42%, #17281f 68%, #111d18 100% ); background-size: 190% 190%, 175% 175%, 150% 150%, 100% 100%; background-position: 0% 34%, 100% 68%, 50% 100%, center; color: #f7f7f3; box-shadow: 0 12px 28px rgba(20, 32, 26, 0.10), 0 0 0 1px rgba(169, 193, 175, 0.12), 0 0 18px rgba(169, 193, 175, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -13px 23px rgba(0, 0, 0, 0.17); animation: prStickyCtaAuroraSoft 7.2s ease-in-out infinite; } #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button] > span:not(.pr-product-main__sticky-shimmer), #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button] > svg { position: relative; z-index: 5; } /* Soft glossy layer on button surface */ #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button]:not(:disabled)::before { position: absolute; inset: 0px; z-index: 1; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 36%, rgba(255, 255, 255, 0) 74% ); content: ""; pointer-events: none; opacity: 0.72; } /* Diffused shimmer layer, same logic as the reference shimmer span */ #PRProductMain .pr-product-main__sticky-shimmer { position: absolute; inset: -38px; z-index: 4; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.62) 42%, #000 50%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 0.18) 70%, transparent 82%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.62) 42%, #000 50%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 0.18) 70%, transparent 82%, transparent 100% ); -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-position: 180% center; mask-position: 180% center; animation: prStickyCtaDiffuseShimmer 3.6s ease-in-out infinite; } /* External glow, revealed by the moving mask */ #PRProductMain .pr-product-main__sticky-shimmer::before { position: absolute; inset: 38px; border-radius: inherit; content: ""; pointer-events: none; box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.96), 0 0 8px 4px rgba(247, 247, 243, 0.72), 0 0 16px 7px rgba(217, 232, 221, 0.48), 0 0 28px 10px rgba(169, 193, 175, 0.28); } /* Inner edge glow, also revealed by the moving mask */ #PRProductMain .pr-product-main__sticky-shimmer::after { position: absolute; inset: 38px; border-radius: inherit; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.96), inset 0 0 4px 1px rgba(247, 247, 243, 0.78), inset 0 0 10px 2px rgba(217, 232, 221, 0.5); } @keyframes prStickyCtaDiffuseShimmer { 0% { -webkit-mask-position: 180% center; mask-position: 180% center; opacity: 0.35; } 12% { opacity: 0.72; } 36% { opacity: 1; } 58% { opacity: 0.9; } 82% { opacity: 0.62; } 100% { -webkit-mask-position: -80% center; mask-position: -80% center; opacity: 0.35; } } @keyframes prStickyCtaAuroraSoft { 0%, 100% { background-position: 0% 34%, 100% 68%, 50% 100%, center; filter: saturate(1.02) brightness(1.01); } 25% { background-position: 38% 22%, 84% 78%, 42% 92%, center; filter: saturate(1.07) brightness(1.045); } 50% { background-position: 74% 18%, 24% 86%, 54% 84%, center; filter: saturate(1.12) brightness(1.075); } 75% { background-position: 42% 44%, 62% 58%, 58% 96%, center; filter: saturate(1.06) brightness(1.04); } } #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button]:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(20, 32, 26, 0.36), 0 0 0 1px rgba(217, 232, 221, 0.58), 0 0 26px rgba(169, 193, 175, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -13px 23px rgba(0, 0, 0, 0.17); filter: brightness(1.055); } #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button]:disabled, #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button].is-loading { animation: none; } #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button]:disabled .pr-product-main__sticky-shimmer, #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button].is-loading .pr-product-main__sticky-shimmer { display: none; } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__sticky-form button[data-pr-sticky-add-button], #PRProductMain .pr-product-main__sticky-shimmer { animation: none; } } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__sticky { transform: none; transition: none; } } #PRProductMain .pr-product-main__sticky-inner { display: flex; align-items: center; gap: 13px; width: min( 100%, 700px ); margin-left: auto; padding: 11px; border: 1px solid rgba(220, 225, 220, 0.88); border-radius: 17px; background: rgba(255, 255, 255, 0.93); box-shadow: 0 18px 55px rgba(20, 32, 26, 0.18); backdrop-filter: blur(18px) saturate(150%); } #PRProductMain .pr-product-main__sticky-image { flex: 0 0 auto; width: 50px; height: 50px; overflow: hidden; border-radius: 11px; } #PRProductMain .pr-product-main__sticky-image img { display: block; width: 100%; height: 100%; object-fit: cover; } #PRProductMain .pr-product-main__sticky-info { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; gap: 8px; } #PRProductMain .pr-product-main__sticky-info > strong { display: block; overflow: hidden; margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } #PRProductMain .pr-product-main__sticky-info > span { display: inline-flex; align-items: baseline; width: fit-content; margin: 0; color: var(--pr-muted); font-size: 11.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; } #PRProductMain .pr-product-main__sticky-info .woocommerce-Price-amount, #PRProductMain .pr-product-main__sticky-info .woocommerce-Price-currencySymbol, #PRProductMain .pr-product-main__sticky-info bdi { display: inline; margin: 0; line-height: inherit; white-space: nowrap; } #PRProductMain .pr-product-main__sticky-form button { min-width: 150px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--pr-accent); color: var(--pr-accent-text); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; } #PRProductMain .pr-product-main__reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } #PRProductMain.is-visible .pr-product-main__reveal { opacity: 1; transform: translateY(0); } #PRProductMain .pr-product-main__details-column { transition-delay: 90ms; } /* Keep the custom CTA visually stable during AJAX and prevent theme disabled styles. */ #PRProductMain .pr-product-main__add-button, #PRProductMain .pr-product-main__add-button:disabled, #PRProductMain .pr-product-main__add-button.is-loading { background: var(--pr-text) !important; color: #f7f7f3 !important; } #PRProductMain .pr-product-main__add-button.is-loading { opacity: 0.78; } /* WooCommerce must not inject a secondary View cart link into this custom form. */ #PRProductMain .added_to_cart.wc-forward { display: none !important; } /* Keep sticky prices, including the currency symbol, on one line. */ #PRProductMain [data-pr-sticky-price], #PRProductMain [data-pr-sticky-price] .woocommerce-Price-amount, #PRProductMain [data-pr-sticky-price] bdi { display: inline-flex !important; align-items: baseline; white-space: nowrap; } @media screen and (max-width: 1099px) { #PRProductMain .pr-product-main__hero { grid-template-columns: minmax(0, 1fr) minmax(370px, 0.88fr); gap: 28px; } #PRProductMain .pr-product-main__details-card { /*padding: 25px;*/ } #PRProductMain .pr-product-main__media-image, #PRProductMain .pr-product-main__media-video, #PRProductMain .pr-product-main__placeholder, #PRProductMain model-viewer { min-height: 480px; } } @media screen and (max-width: 899px) { #PRProductMain .pr-product-main__hero { grid-template-columns: 1fr; gap:15px; } #PRProductMain .pr-product-main__details-card { position: static; } } @media screen and (max-width: 749px) { #PRProductMain .pr-product-main__breadcrumbs { display: none; } #PRProductMain { padding: 20px 0 55px; } #PRProductMain .pr-product-main__container { width: calc(100% - 25px); } #PRProductMain .pr-product-main__breadcrumbs { margin-bottom: 18px; } #PRProductMain .pr-product-main__media-shell { border-radius: 19px; } #PRProductMain .pr-product-main__media-video, #PRProductMain .pr-product-main__placeholder, #PRProductMain model-viewer { min-height: 390px; max-height: 620px; } #PRProductMain .pr-product-main__media-image { width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; } #PRProductMain .pr-product-main__media-badges { top: 18px; right: 18px; left: 18px; } #PRProductMain .pr-product-main__thumbnails { display: none; } #PRProductMain .pr-product-main__details-card { padding-top: 30px; border-radius: 20px; } #PRProductMain .pr-product-main__title { font-size: clamp( 32px, 10vw, 38px ); } #PRProductMain .pr-product-main__price-row { align-items: flex-start; flex-wrap: wrap; } #PRProductMain .pr-product-main__compatibility { align-items: flex-start; flex-direction: column; } #PRProductMain .pr-product-main__device-list { justify-content: flex-start; } #PRProductMain .pr-product-main__details-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } #PRProductMain .pr-product-main__details-grid > div, #PRProductMain .pr-product-main__details-grid > div:nth-child(3n), #PRProductMain .pr-product-main__details-grid > div:nth-last-child(-n + 3) { border-right: 1px solid var(--pr-border); border-bottom: 1px solid var(--pr-border); } #PRProductMain .pr-product-main__details-grid > div:nth-child(2n) { border-right: 0; } #PRProductMain .pr-product-main__details-grid > div:nth-last-child(-n + 2) { border-bottom: 0; } #PRProductMain .pr-product-main__description h1, #PRProductMain .pr-product-main__description h2 { font-size: 19px; } #PRProductMain .pr-product-main__description h3 { font-size: 15px; } #PRProductMain .pr-product-main__sticky { right: 0; bottom: 0; left: 0; } #PRProductMain .pr-product-main__sticky-inner { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; } #PRProductMain .pr-product-main__sticky-image { display: none; } #PRProductMain .pr-product-main__sticky-form button { min-width: 126px; } #PRProductMain .pr-product-main__offer { grid-template-columns: 1fr; gap: 12px; padding: 32px 14px 14px 16px; } #PRProductMain .pr-product-main__offer-heading { font-size: 14px; } #PRProductMain .pr-product-main__offer-text { font-size: 11.5px; } #PRProductMain .pr-product-main__offer-button { width: 100%; min-height: 46px; justify-content: flex-start; padding: 8px 10px 8px 12px; } #PRProductMain .pr-product-main__offer-code { font-size: 14px; } #PRProductMain .pr-product-main__offer-copy-icon { margin-left: auto; } #PRProductMain .pr-product-main__variant-card { grid-template-columns: 20px 45px minmax(0, 1fr) auto; gap: 10px; min-height: 86px; padding: 14px 12px; } #PRProductMain .pr-product-main__variant-card--bundle { margin-top: 2px; padding-top: 24px; padding-bottom: 54px; } #PRProductMain .pr-product-main__variant-bundle-list { gap: 6px; } #PRProductMain .pr-product-main__variant-bundle-list li { font-size: 13.5px; gap: 6px; } #PRProductMain .pr-product-main__variant-bundle-check { width: 15px; height: 15px; } #PRProductMain .pr-product-main__variant-image { width: 45px; height: 50px; } #PRProductMain .pr-product-main__variant-title { font-size: 14.5px; } #PRProductMain .pr-product-main__variant-description { font-size: 12.5px; } #PRProductMain .pr-product-main__variant-pricing { min-width: 60px; } #PRProductMain .pr-product-main__variant-pricing strong { font-size: 20px; } #PRProductMain .pr-product-main__variant-pricing s { font-size: 10px; } #PRProductMain .pr-product-main__variant-saving { min-height: 17px; padding: 4px 8px; font-size: 8px; } #PRProductMain .pr-product-main__variant-popular-badge { font-size: 8px; } #PRProductMain .pr-product-main__ebook-subtitle { margin-top: 13px; font-size: 16px; } #PRProductMain .pr-product-main__value-proposition { margin-top: 16px; padding-left: 12px; font-size: 16px; } #PRProductMain .pr-product-main__benefits { gap: 10px; margin-top: 18px; } #PRProductMain .pr-product-main__benefit-text { font-size: 15px; } } @media screen and (max-width: 440px) { #PRProductMain .pr-product-main__details-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } #PRProductMain .pr-product-main__details-grid > div, #PRProductMain .pr-product-main__details-grid > div:nth-child(2n), #PRProductMain .pr-product-main__details-grid > div:nth-last-child(-n + 2) { border-right: 1px solid var(--pr-border); border-bottom: 1px solid var(--pr-border); } #PRProductMain .pr-product-main__details-grid > div:nth-child(2n) { border-right: 0; } #PRProductMain .pr-product-main__details-grid > div:nth-last-child(-n + 2) { border-bottom: 0; } #PRProductMain .pr-product-main__details-grid > div { padding: 12px 10px; } #PRProductMain .pr-product-main__details-grid dt { font-size: 9px; } #PRProductMain .pr-product-main__details-grid dd { font-size: 13px; } #PRProductMain .pr-product-main__device-list { width: 100%; } #PRProductMain .pr-product-main__device-list span { flex: 1 1 auto; justify-content: center; } #PRProductMain .pr-product-main__variant-card { grid-template-columns: 18px 42px minmax(0, 1fr) auto; gap: 8px; padding: 14px 10px; } #PRProductMain .pr-product-main__variant-card--bundle { margin-top: 2px; padding-top: 24px; padding-bottom: 54px; } #PRProductMain .pr-product-main__variant-image { width: 42px; height: 48px; } #PRProductMain .pr-product-main__variant-pricing { min-width: 55px; } #PRProductMain .pr-product-main__variant-pricing strong { font-size: 19px; } #PRProductMain .pr-product-main__variant-title { font-size: 16px; } #PRProductMain .pr-product-main__variant-title-row { gap: 9px; } #PRProductMain .pr-product-main__variant-saving { min-height: 17px; padding: 4px 7px; } } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__reveal { opacity: 1; transform: none; transition: none; } #PRProductMain .pr-product-main__urgency-icon > span { animation: none; } } #PRProductMain .pr-product-main__mobile-quick-add { display: none; } @media screen and (max-width: 749px) { #PRProductMain .pr-product-main__mobile-quick-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 52px; margin-top: 13px; padding: 13px 18px; border: 1px solid var(--pr-accent); border-radius: 14px; background: var(--pr-accent); color: var(--pr-accent-text); box-shadow: 0 10px 24px rgba(20, 32, 26, 0.12); font: inherit; font-size: 13px; font-weight: 850; line-height: 1.2; letter-spacing: -0.01em; cursor: pointer; transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease; } #PRProductMain .pr-product-main__mobile-quick-add:active { transform: scale(0.985); } #PRProductMain .pr-product-main__mobile-quick-add:focus-visible { outline: 2px solid var(--pr-text); outline-offset: 3px; } #PRProductMain .pr-product-main__mobile-quick-add:disabled:not(.is-loading) { opacity: 0.5; cursor: not-allowed; } #PRProductMain .pr-product-main__mobile-quick-add-separator { opacity: 0.65; } } #PRProductMain .pr-product-main__mobile-quick-add.is-loading { opacity: 1; cursor: wait; background: linear-gradient( 135deg, #aeb9b2 0%, #9fabA4 48%, #a9b4ad 100% ); color: #ffffff; box-shadow: 0 8px 20px rgba(20, 32, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.22); animation: none; transform: none; } #PRProductMain .pr-product-main__mobile-quick-add.is-loading .pr-product-main__mobile-quick-add-shimmer { display: none; } #PRProductMain .pr-product-main__mobile-quick-add.is-loading::after { width: 15px; height: 15px; margin-left: 4px; border: 2px solid rgba(255, 255, 255, 0.42); border-top-color: #ffffff; border-radius: 50%; content: ""; animation: prMobileQuickAddSpinner 700ms linear infinite; } @keyframes prMobileQuickAddSpinner { to { transform: rotate(360deg); } } /* Same premium aurora + shimmer effect for mobile quick add CTA */ #PRProductMain .pr-product-main__mobile-quick-add { position: relative; isolation: isolate; overflow: visible; background: radial-gradient( circle at 16% 24%, rgba(169, 193, 175, 0.42), rgba(169, 193, 175, 0.18) 24%, rgba(169, 193, 175, 0.04) 42%, rgba(169, 193, 175, 0) 62% ), radial-gradient( circle at 86% 72%, rgba(247, 247, 243, 0.22), rgba(247, 247, 243, 0.08) 28%, rgba(247, 247, 243, 0) 58% ), radial-gradient( circle at 52% 110%, rgba(111, 145, 124, 0.26), rgba(111, 145, 124, 0.08) 34%, rgba(111, 145, 124, 0) 66% ), linear-gradient( 135deg, #14231d 0%, #20362d 42%, #17281f 68%, #111d18 100% ); background-size: 190% 190%, 175% 175%, 150% 150%, 100% 100%; background-position: 0% 34%, 100% 68%, 50% 100%, center; color: #f7f7f3; border: none; box-shadow: 0 10px 24px rgba(20, 32, 26, 0.14), 0 0 0 1px rgba(169, 193, 175, 0.24), 0 0 14px rgba(169, 193, 175, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -13px 23px rgba(0, 0, 0, 0.17); animation: prStickyCtaAuroraSoft 7.2s ease-in-out infinite; } #PRProductMain .pr-product-main__mobile-quick-add > span:not(.pr-product-main__mobile-quick-add-shimmer) { position: relative; z-index: 5; } #PRProductMain .pr-product-main__mobile-quick-add:not(:disabled)::before { position: absolute; inset: 1px; z-index: 1; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 36%, rgba(255, 255, 255, 0) 74% ); content: ""; pointer-events: none; opacity: 0.72; } #PRProductMain .pr-product-main__mobile-quick-add-shimmer { position: absolute; inset: -38px; z-index: 4; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.62) 42%, #000 50%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 0.18) 70%, transparent 82%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.62) 42%, #000 50%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 0.18) 70%, transparent 82%, transparent 100% ); -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-position: 180% center; mask-position: 180% center; animation: prStickyCtaDiffuseShimmer 3.6s ease-in-out infinite; } #PRProductMain .pr-product-main__mobile-quick-add-shimmer::before { position: absolute; inset: 38px; border-radius: inherit; content: ""; pointer-events: none; box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.96), 0 0 8px 4px rgba(247, 247, 243, 0.72), 0 0 16px 7px rgba(217, 232, 221, 0.48), 0 0 28px 10px rgba(169, 193, 175, 0.28); } #PRProductMain .pr-product-main__mobile-quick-add-shimmer::after { position: absolute; inset: 38px; border-radius: inherit; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.96), inset 0 0 4px 1px rgba(247, 247, 243, 0.78), inset 0 0 10px 2px rgba(217, 232, 221, 0.5); } #PRProductMain .pr-product-main__mobile-quick-add:disabled { animation: none; } #PRProductMain .pr-product-main__mobile-quick-add:disabled .pr-product-main__mobile-quick-add-shimmer { display: none; } @media (prefers-reduced-motion: reduce) { #PRProductMain .pr-product-main__mobile-quick-add, #PRProductMain .pr-product-main__mobile-quick-add-shimmer { animation: none; } }