/** Shopify CDN: Minification failed Line 3046:20 Expected identifier but found "!" Line 3119:20 Expected identifier but found "!" Line 3122:20 Expected identifier but found "!" Line 6220:69 Unexpected "]" **/ /* ===================================================== BOTTOM BORDER ===================================================== */ @media screen and (min-width: 1201px) { ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; mix-blend-mode: normal !important; } } /* ===================================================== POSTERS INTRO — SIMPLE-PARITY HEADER + SESSION 2 The heading and collection box use the same 12/5-row grid as Simple. ===================================================== */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow { --ak-session-one-heading-height: calc(var(--ak-poster-edge-cell, calc(44px / 3)) * 12); --ak-session-one-collection-height: calc(var(--ak-poster-edge-cell, calc(44px / 3)) * 5); --ak-session-one-rail-width: 44px; --ak-session-one-optical-padding: 20px; } html body .ak-product-split.ak-flow .ak-session-one-heading { position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 50 !important; display: block !important; width: 100% !important; height: var(--ak-session-one-heading-height) !important; min-height: var(--ak-session-one-heading-height) !important; max-height: var(--ak-session-one-heading-height) !important; margin: 0 !important; overflow: hidden !important; border-bottom: 1px solid var(--ak-line) !important; background: var(--ak-wall) !important; box-sizing: border-box !important; opacity: 0 !important; transform: translate3d(0, -100%, 0) !important; transition: opacity 180ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1) !important; pointer-events: none !important; isolation: isolate !important; } html body .ak-product-split.ak-flow .ak-session-one-heading::after { content: none !important; display: none !important; } html body .ak-product-split.ak-flow.ak-flow-background .ak-session-one-heading { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__cell { display: flex !important; align-items: center !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding-block: 0 !important; overflow: visible !important; border: 0 !important; color: var(--ak-black) !important; background: transparent !important; font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: var( --ak-session-one-heading-font-size, calc(var(--ak-session-one-heading-height) * .7) ) !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1 !important; letter-spacing: 0 !important; font-kerning: normal !important; font-feature-settings: "kern" 1 !important; font-variant-ligatures: common-ligatures contextual !important; text-rendering: optimizeLegibility !important; text-transform: none !important; white-space: nowrap !important; box-sizing: border-box !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__cell > span { display: block !important; max-width: 100% !important; padding-block: 0 !important; overflow: visible !important; text-overflow: clip !important; opacity: 1 !important; transform: translate3d(0, 0, 0) !important; transition: none !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__title { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; justify-content: flex-start !important; padding-left: calc(var(--ak-session-one-rail-width) + var(--ak-session-one-optical-padding)) !important; padding-right: 0 !important; text-align: left !important; border-right: 0 !important; font-size: var( --ak-session-one-title-font-size, calc(var(--ak-session-one-heading-height) * .8) ) !important; letter-spacing: -.025em !important; overflow: visible !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__title > span { max-width: none !important; overflow: visible !important; white-space: nowrap !important; transform: translate3d(0, .025em, 0) !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__collection { position: absolute !important; right: var(--ak-session-one-rail-width) !important; bottom: 0 !important; z-index: 2 !important; width: max-content !important; min-width: 0 !important; max-width: calc(100% - (var(--ak-session-one-rail-width) * 2)) !important; height: calc(var(--ak-session-one-collection-height) - 1px) !important; justify-content: center !important; padding: 0 calc(var(--ak-session-one-collection-height) * .2) !important; overflow: hidden !important; border-top: 1px solid var(--ak-line) !important; border-left: 1px solid var(--ak-line) !important; background: var(--ak-wall) !important; font-size: var( --ak-session-one-collection-font-size, calc(var(--ak-session-one-collection-height) * .6) ) !important; text-align: center !important; box-sizing: content-box !important; color: inherit !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; } html body .ak-product-split.ak-flow .ak-session-one-heading__collection > span { flex: 0 0 auto !important; width: max-content !important; max-width: none !important; overflow: visible !important; white-space: nowrap !important; transform: translate3d(0, .04em, 0) !important; } html body .ak-product-split.ak-flow .ak-product-title { display: none !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] { height: var(--ak-session-one-heading-height) !important; min-height: var(--ak-session-one-heading-height) !important; max-height: var(--ak-session-one-heading-height) !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] > data-island, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .product-media-container { height: var(--ak-session-one-heading-height) !important; min-height: var(--ak-session-one-heading-height) !important; max-height: var(--ak-session-one-heading-height) !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .product-content-container, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-session-one-room-placement { display: none !important; } html body .ak-product-split[data-ak-posters-product="true"] ~ .ak-session-story { z-index: 10 !important; top: 80px; margin-top: -1px !important; opacity: 0; visibility: visible; transform: none; transition: opacity 520ms ease, top 720ms cubic-bezier(.16, 1, .3, 1); } html body .ak-product-split[data-ak-posters-product="true"] ~ .ak-session-story.is-intro-ready { top: 0; opacity: 1; transform: none; } html body .ak-product-split[data-ak-posters-product="true"] ~ .ak-session-story .ak-session-2 { border-top: 1px solid var(--ak-line) !important; } html body .ak-product-split.ak-flow .ak-flow-units { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 0 !important; } html body .ak-product-split.ak-flow .ak-flow-units button { display: grid !important; grid-template-columns: var(--ak-bottom-menu-height, 44px) minmax(0, 1fr) !important; align-items: stretch !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: var(--ak-wall) !important; } html body .ak-product-split.ak-flow .ak-flow-units button + button { border-left: 1px solid var(--ak-line) !important; } html body .ak-product-split.ak-flow .ak-flow-unit-indicator { position: relative !important; display: block !important; width: var(--ak-bottom-menu-height, 44px) !important; height: 100% !important; border-right: 1px solid var(--ak-line) !important; box-sizing: border-box !important; } html body .ak-product-split.ak-flow .ak-flow-unit-label { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; } html body .ak-product-split.ak-flow .ak-flow-units button[aria-pressed="true"] .ak-flow-unit-indicator::before, html body .ak-product-split.ak-flow .ak-flow-units button[aria-pressed="true"] .ak-flow-unit-indicator::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 42% !important; height: 1px !important; background: var(--ak-black) !important; transform: translate(-50%, -50%) rotate(45deg) !important; } html body .ak-product-split.ak-flow .ak-flow-units button[aria-pressed="true"] .ak-flow-unit-indicator::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } } @media screen and (max-width: 1200px) { .ak-session-one-heading { display: none !important; } } @media screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) { html body .ak-product-split.ak-flow .ak-session-one-heading, html body .ak-product-split.ak-flow .ak-session-one-heading__cell > span { opacity: 1 !important; transform: none !important; transition: none !important; } } @media screen and (min-width: 1201px) { .ak-product-split .ak-product-media-sources { display: none !important; } /* ===================================================== */ /* ============== INITIAL BOTTOM BORDER ================ */ /* ===================================================== */ .ak-product-bottom-line { position: absolute !important; bottom: 0 !important; width: 50% !important; height: 1px !important; background: var(--ak-line) !important; z-index: 10 !important; pointer-events: none !important; transform: scaleX(0); animation: none !important; will-change: transform; } .ak-product-bottom-line-left { left: 0 !important; transform-origin: left center; } .ak-product-bottom-line-right { right: 0 !important; transform-origin: right center; } /* ===================================================== */ /* ============== START BOTTOM BORDER ================== */ /* ===================================================== */ .ak-product-split.ak-poster-entry-start .ak-product-bottom-line-left { animation: akPosterBottomBorderDrawLeft var(--ak-intro-bottom-border-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) forwards !important; } .ak-product-split.ak-poster-entry-start .ak-product-bottom-line-right { animation: akPosterBottomBorderDrawRight var(--ak-intro-bottom-border-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) forwards !important; } @keyframes akPosterBottomBorderDrawLeft { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes akPosterBottomBorderDrawRight { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* Final mobile gallery geometry. Kept here as well so theme load order cannot override the intended compact collection layout. */ @media screen and (max-width: 1200px) { .ak-session-story.is-session-2-pinned .ak-session-2, .ak-session-story.is-session-5-pinned .ak-session-5 { position: fixed !important; top: calc(var(--ak-top-menu-height, 44px) + 15px) !important; } .ak-session-4 { padding: 0 !important; gap: 0 !important; } .ak-session-4 .ak-room-pair__panel { padding: 24px !important; margin: 0 !important; } .ak-session-4 .ak-room-pair__canvas { width: 100% !important; margin: 0 !important; } .ak-session-6 { padding: 0 24px calc(var(--ak-mobile-buybar-height, 128px) + var(--ak-mobile-bottom-nav-height, 44px) + 96px) !important; } .ak-session-6__title { min-height: 82px !important; padding: 16px 8px !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .ak-session-6__name { min-height: 68px !important; padding: 12px 14px !important; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: .08em !important; } .ak-session-6::after { display: block !important; height: calc(var(--ak-mobile-buybar-height, 128px) + var(--ak-mobile-bottom-nav-height, 44px) + 96px) !important; } } @media screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) { .ak-flow.ak-flow-ready .ak-desktop-option-trigger.is-ak-choice-cta { animation: none; background: var(--ak-cart2); } } /* All active prompts inherit one continuously running pulse clock. This prevents ADD TO CART and the option prompt from drifting out of phase. */ @property --ak-choice-pulse-opacity { syntax: ""; inherits: true; initial-value: 1; } @keyframes akChoiceSharedClock { 0%, 100% { --ak-choice-pulse-opacity: 1; } 50% { --ak-choice-pulse-opacity: 0; } } @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow { --ak-choice-pulse-size: 3px; animation: akChoiceSharedClock 1450ms linear infinite !important; } } @media screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) { html body .ak-product-split.ak-flow { animation: none !important; --ak-choice-pulse-opacity: 1; } } /* ===================================================== */ /* =============== ROOM CONFIGURATOR PREVIEW =========== */ /* ===================================================== */ .ak-room-preview { position: relative; width: 100%; margin: 0; overflow: hidden; background: #eeeae5; border-top: 0; border-bottom: 1px solid var(--ak-line); } .ak-room-preview__room { display: block; width: 100%; height: auto; } .ak-session-story { position: relative; width: 100%; opacity: 0; visibility: hidden; transition: opacity 480ms cubic-bezier(.22, 1, .36, 1); } .ak-session-story.is-intro-ready { opacity: 1; visibility: visible; } .ak-session-2-shell { position: relative; width: 100%; } .ak-session-2 { position: relative; z-index: 1; } .ak-session-2__size-note { position: absolute; top: 24px; left: 18px; z-index: 4; margin: 0; color: #111; font-size: 11px; font-weight: var(--ak-font-weight-strong); line-height: 1; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; } .ak-session-story.is-session-2-pinned .ak-session-2 { position: fixed; /* Tuck the section's own 1px top rule underneath the fixed menu. */ top: calc(var(--ak-top-menu-height, 44px) + 14px); right: auto; left: var(--ak-session-2-left, 0px); width: var(--ak-session-2-width, 100%); height: var(--ak-session-2-height, auto); z-index: 1; box-sizing: border-box; transform: translateZ(0); backface-visibility: hidden; } .ak-session-stack { position: relative; z-index: 2; background: var(--ak-wall); } .ak-room-preview__placement, .ak-session-artwork, .ak-room-pair__placement, [data-ak-room-display="card"] { --ak-room-art-scale: 1; --ak-room-frame-scale: 1; --ak-room-frame-rotation: 0deg; --ak-room-art-crop-scale: 1; --ak-room-frame-crop-scale: 1; pointer-events: none; } /* ROOM ASSET CALIBRATION These values only trim the transparent/grey area around the source files. They never change the physical size or position calculated from the 140 x 140 cm master. Each side can be adjusted independently. The optional crop scale is applied after the four-sided trim and is also independent of the physical room calculation. */ [data-ak-room-scene] { --ak-room-art-trim-top: 10.30%; --ak-room-art-trim-right: 21.3%; --ak-room-art-trim-bottom: 9.3%; --ak-room-art-trim-left: 21%; --ak-room-frame-trim-top: 10.30%; --ak-room-frame-trim-right: 21.3%; --ak-room-frame-trim-bottom: 9.3%; --ak-room-frame-trim-left: 21%; } [data-ak-room-scene][data-ak-room-format="portrait"] { --ak-room-art-trim-top: 11%; --ak-room-art-trim-right: 22.25%; --ak-room-art-trim-bottom: 11%; --ak-room-art-trim-left: 21.95%; --ak-room-art-crop-scale: 0.98; } [data-ak-room-scene][data-ak-room-format="square"] { --ak-room-art-trim-top: 21.20%; --ak-room-art-trim-right: 21.55%; /* HER HER HER */ --ak-room-art-trim-bottom: 21.60%; --ak-room-art-trim-left: 21.35%; --ak-room-art-crop-scale: 1; } [data-ak-room-scene][data-ak-room-format="landscape"] { --ak-room-art-trim-top: 27.28%; --ak-room-art-trim-right: 19.5%; --ak-room-art-trim-bottom: 28%; --ak-room-art-trim-left: 18.6%; --ak-room-art-crop-scale: 1.01; } [data-ak-room-scene][data-ak-room-frame-kind="wood"][data-ak-room-format="portrait"] { --ak-room-frame-trim-top: 10.30%; --ak-room-frame-trim-right: 21.35%; --ak-room-frame-trim-bottom: 9.43%; --ak-room-frame-trim-left: 20.97%; --ak-room-frame-crop-scale: 1; } [data-ak-room-scene][data-ak-room-frame-kind="wood"][data-ak-room-format="square"] { --ak-room-frame-trim-top: 21.10%; --ak-room-frame-trim-right: 21.4%; --ak-room-frame-trim-bottom: 21.20%; --ak-room-frame-trim-left: 21.2%; --ak-room-frame-crop-scale: 1; } [data-ak-room-scene][data-ak-room-frame-kind="wood"][data-ak-room-format="landscape"] { /* Disse fire værdier svarer til de sider, du ser på skærmen. */ --ak-room-frame-visual-trim-top: 21.10%; --ak-room-frame-visual-trim-right: 10.30%; --ak-room-frame-visual-trim-bottom: 21.35%; --ak-room-frame-visual-trim-left: 9.33%; /* Intern mapping til den stående PNG, som roteres 90 grader. */ --ak-room-frame-trim-top: var(--ak-room-frame-visual-trim-right); --ak-room-frame-trim-right: var(--ak-room-frame-visual-trim-bottom); --ak-room-frame-trim-bottom: var(--ak-room-frame-visual-trim-left); --ak-room-frame-trim-left: var(--ak-room-frame-visual-trim-top); --ak-room-frame-crop-scale: 1; } [data-ak-room-scene][data-ak-room-frame-kind="alu"][data-ak-room-format="portrait"] { --ak-room-frame-trim-top: 11.15%; --ak-room-frame-trim-right: 22%; --ak-room-frame-trim-bottom: 10%; --ak-room-frame-trim-left: 21.5%; --ak-room-frame-crop-scale: 1; } [data-ak-room-scene][data-ak-room-frame-kind="alu"][data-ak-room-format="square"] { --ak-room-frame-trim-top: 20.87%; --ak-room-frame-trim-right: 21.15%; /*HER HER HER */ --ak-room-frame-trim-bottom: 21.05%; --ak-room-frame-trim-left: 21.35%; --ak-room-frame-crop-scale: 1; } [data-ak-room-scene][data-ak-room-frame-kind="alu"][data-ak-room-format="landscape"] { /* Disse fire værdier svarer til de sider, du ser på skærmen. */ --ak-room-frame-visual-trim-top: 21.5%; --ak-room-frame-visual-trim-right: 11.15%; --ak-room-frame-visual-trim-bottom: 21.9%; --ak-room-frame-visual-trim-left: 10%; /* Intern mapping til den stående PNG, som roteres 90 grader. */ --ak-room-frame-trim-top: var(--ak-room-frame-visual-trim-right); --ak-room-frame-trim-right: var(--ak-room-frame-visual-trim-bottom); --ak-room-frame-trim-bottom: var(--ak-room-frame-visual-trim-left); --ak-room-frame-trim-left: var(--ak-room-frame-visual-trim-top); --ak-room-frame-crop-scale: 1; } .ak-room-preview__composition { position: absolute; inset: 0; } .ak-room-preview__placement { position: absolute; left: var(--ak-room-placement-left, 50%); top: var(--ak-room-placement-top, 18.7%); width: var(--ak-room-placement-width, 16.4%); height: var(--ak-room-placement-height, 16.4%); transform: none; } .ak-room-preview__crop { position: absolute; inset: 0; overflow: visible; container-type: size; filter: drop-shadow(4px 2px 7px rgba(0, 0, 0, .55)); /*tal: mod højre, ned, blødning*/ } /* Alu uden passepartout: skjul PNG-rammen helt. */ [data-ak-room-frame-kind="alu"][data-ak-room-has-passepartout="false"] .ak-room-preview__frame { visibility: hidden; } /* Alu med passepartout: behold passepartoutet, men skær PNG-rammen væk. */ [data-ak-room-frame-kind="alu"][data-ak-room-has-passepartout="true"] .ak-room-preview__frame { -webkit-clip-path: inset( calc(var(--ak-room-frame-trim-top) + 0.2%) calc(var(--ak-room-frame-trim-right) + 0.2%) calc(var(--ak-room-frame-trim-bottom) + 0.2%) calc(var(--ak-room-frame-trim-left) + 0.2%) ); clip-path: inset( calc(var(--ak-room-frame-trim-top) + 0.2%) calc(var(--ak-room-frame-trim-right) + 0.2%) calc(var(--ak-room-frame-trim-bottom) + 0.2%) calc(var(--ak-room-frame-trim-left) + 0.2%) ); } /* Fælles CSS-aluramme med og uden passepartout. */ [data-ak-room-frame-kind="alu"] .ak-room-preview__crop::after { content: ""; position: absolute; inset: 0; z-index: 3; box-sizing: border-box; border: clamp(1px, 1.05cqw, 5px) solid #121212; pointer-events: none; } /* Fælles sikkerhedskant til alu med passepartout i alle room-compositions. */ [data-ak-room-frame-kind="alu"][data-ak-room-has-passepartout="true"] .ak-room-preview__crop::after { box-shadow: inset 0 0 0 clamp(1px, .48cqw, 2px) #121212; } .ak-room-preview__art, .ak-room-preview__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform-origin: center; } .ak-room-preview__art { z-index: 1; transform: scale(var(--ak-room-art-scale)); } .ak-room-preview__frame { z-index: 2; transform: rotate(var(--ak-room-frame-rotation)) scale(var(--ak-room-frame-scale)); } [data-ak-room-scene][data-ak-room-frame-kind="wood"], [data-ak-room-scene][data-ak-room-frame-kind="alu"] { overflow: visible !important; } [data-ak-room-scene] .ak-room-preview__art, [data-ak-room-scene] .ak-room-preview__frame { position: absolute !important; display: block !important; transform-origin: center !important; pointer-events: none !important; inset: auto !important; object-fit: fill !important; max-width: none !important; max-height: none !important; } [data-ak-room-scene] .ak-room-preview__art { top: var(--ak-room-art-source-top, 50%) !important; left: var(--ak-room-art-source-left, 50%) !important; width: var(--ak-room-art-source-width, 100%) !important; height: var(--ak-room-art-source-height, 100%) !important; transform: translate(calc(-50% + 0.5px), -50%) scale(var(--ak-room-art-scale)) scale(var(--ak-room-art-crop-scale)) !important; -webkit-clip-path: inset( var(--ak-room-art-trim-top) var(--ak-room-art-trim-right) var(--ak-room-art-trim-bottom) var(--ak-room-art-trim-left) ); clip-path: inset( var(--ak-room-art-trim-top) var(--ak-room-art-trim-right) var(--ak-room-art-trim-bottom) var(--ak-room-art-trim-left) ); } [data-ak-room-scene] .ak-room-preview__frame { top: var(--ak-room-frame-source-top, 50%) !important; left: var(--ak-room-frame-source-left, 50%) !important; width: var(--ak-room-frame-source-width, 100%) !important; height: var(--ak-room-frame-source-height, 100%) !important; transform: translate(-50%, -50%) rotate(var(--ak-room-frame-rotation)) scale(var(--ak-room-frame-scale)) scale(var(--ak-room-frame-crop-scale)) !important; -webkit-clip-path: inset( var(--ak-room-frame-trim-top) var(--ak-room-frame-trim-right) var(--ak-room-frame-trim-bottom) var(--ak-room-frame-trim-left) ); clip-path: inset( var(--ak-room-frame-trim-top) var(--ak-room-frame-trim-right) var(--ak-room-frame-trim-bottom) var(--ak-room-frame-trim-left) ); } .ak-room-preview__frame:not([src]), .ak-room-preview__art:not([src]) { visibility: hidden; } .ak-session-3 { display: grid; place-items: center; padding: 140px 0; overflow: hidden; background: var(--ak-ses3); border-top: 1px solid var(--ak-line); border-bottom: 0; } .ak-session-general { padding: 140px; box-sizing: border-box; background: var(--ak-wall); border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); text-align: left; text-transform: uppercase; } .ak-session-general__title { margin: 0 0 48px; font-family: var(--ak-h1-font) !important; font-size: 24px !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-align: center; text-transform: capitalize !important; } .ak-session-general__text { width: 100%; margin: 0; font-size: clamp(18px, 2.1vw, 40px) !important; line-height: 1.17 !important; letter-spacing: 0 !important; text-transform: uppercase; white-space: normal; word-break: normal; overflow-wrap: normal; -webkit-hyphens: none; hyphens: none; text-align: justify; text-align-last: justify; } .ak-session-general__text, .ak-session-general__text p { white-space: normal; word-break: normal; overflow-wrap: normal; -webkit-hyphens: none; hyphens: none; text-align: justify !important; text-align-last: justify !important; } .ak-session-general__text > :first-child { margin-top: 0; } .ak-session-general__text > :last-child { margin-bottom: 0; } .ak-session-3__items { display: flex; align-items: center; justify-content: center; width: 100%; } .ak-session-artwork { position: relative; width: var(--ak-session-3-width, min(72vw, 1200px)); height: var(--ak-session-3-height, auto); max-width: none; aspect-ratio: 1 / 1; transform: none; transform-origin: center; } .ak-session-3 .ak-session-artwork { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 800ms cubic-bezier(.22, 1, .36, 1), transform 1000ms cubic-bezier(.22, 1, .36, 1); } .ak-session-3.is-visible .ak-session-artwork { opacity: 1; transform: translate3d(0, 0, 0); } .ak-session-5__placement { left: 50% !important; transform: translateX(calc(-50% - 15px)); } .ak-session-4 { position: sticky; top: calc(var(--ak-top-menu-height, 44px) + 15px); z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ak-wall); border-bottom: 1px solid var(--ak-line); overflow: hidden; } .ak-session-4::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 1px; background: var(--ak-line); transform: scaleY(1); transform-origin: center bottom; transition: none; pointer-events: none; } .ak-session-4.is-visible::after { transform: scaleY(1); } @media screen and (min-width: 1201px) { /* Keep the divider stationary while the two panels animate. Paint containment prevents the sticky compositor from carrying the rule into the following apartment. */ html body .ak-session-4 { contain: paint; isolation: isolate; border-bottom: 0; } html body .ak-session-4::after { content: ""; display: block; opacity: 1; transform: none; transition: none; animation: none; will-change: auto; } html body .ak-session-4 .ak-room-pair__panel { box-sizing: border-box; } html body .ak-session-4 .ak-room-pair__panel + .ak-room-pair__panel { border-left: 0; } } .ak-room-pair__panel { min-width: 0; padding: 70px; background: var(--ak-wall); } .ak-room-pair__canvas { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #eeeae5; } .ak-room-pair__room { display: block; width: 100%; height: 100%; object-fit: cover; } .ak-room-pair__placement { position: absolute; left: var(--ak-room-placement-left, 50%); top: var(--ak-room-placement-top, 18%); width: var(--ak-room-placement-width, 18%); height: var(--ak-room-placement-height, 18%); transform: none; } .ak-session-5-shell { position: relative; width: 100%; } .ak-session-5 { position: relative; z-index: 1; } @media screen and (min-width: 1201px) { .ak-session-5 { border-top: 1px solid var(--ak-line); box-sizing: border-box; } /* Reserve only the part of the sticky room that is actually visible between the fixed menus. The next title then peeks up immediately at the sticky hand-off instead of requiring an unexplained extra scroll. */ html body .ak-session-5-shell { --ak-session-5-next-peek: 58px; height: calc( 100dvh - var(--ak-top-menu-height, 44px) - var(--ak-frame, 15px) - (var(--ak-bottom-menu-height, 44px) * 2) - var(--ak-frame, 15px) - var(--ak-session-5-next-peek) ) !important; min-height: 0; } } .ak-session-story.is-session-5-pinned .ak-session-5 { position: fixed; top: calc(var(--ak-top-menu-height, 44px) + 15px); left: var(--ak-session-5-left, 0px); width: var(--ak-session-5-width, 100%); height: var(--ak-session-5-height, auto); z-index: 1; transform: translateZ(0); backface-visibility: hidden; } /* Safari must keep the same viewport-fixed geometry as Chrome, but promoting the complete bordered panel to its own 3D layer makes WebKit resample 1px rules and can shift the layer during momentum scrolling. Keep it on the normal fixed-position layer; the shared JS controller still owns its top. */ @media screen and (min-width: 1201px) { html.ak-is-safari .ak-session-story.is-session-2-pinned .ak-session-2, html.ak-is-safari .ak-session-story.is-session-5-pinned .ak-session-5 { transform: none !important; backface-visibility: visible !important; will-change: auto !important; } } .ak-session-6 { position: relative; z-index: 2; } .ak-session-6 { padding: 0 0 calc(var(--ak-bottom-menu-height, 44px) * 2 + 86px); background: var(--ak-wall); border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); container-type: inline-size; } .ak-session-6::after { content: ""; position: absolute; left: 50%; bottom: 0; z-index: 1; width: 1px; height: calc(var(--ak-bottom-menu-height, 44px) * 2 + 86px); background: var(--ak-line); pointer-events: none; } html body section.ak-session-6 .ak-session-6__title { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 9px 15px 6px 15px !important; box-sizing: border-box !important; font-family: Helvetica, Arial, sans-serif !important; font-weight: var(--ak-font-weight-regular) !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important; text-align: center !important; color: var(--ak-h1-color) !important; } .ak-session-6__title > .ak-title-fit { display: inline-block; white-space: inherit; } .ak-session-6__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--ak-wall); border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); } .ak-session-6__card { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; color: inherit; text-decoration: none; background: #0000; border-left: 1px solid var(--ak-line); } .ak-session-6__card[hidden] { display: none !important; } .ak-session-6__card.is-first { border-left: 0; } .ak-session-6__card.is-last { border-right: 0; } .ak-session-6__visual { display: grid; place-items: center; min-height: min(42vw, 590px); padding: 72px 28px; overflow: hidden; } /* Card dimensions only; artwork layers use the common room renderer. */ [data-ak-room-display="card"] { --ak-poster-short-side: min(16vw, 286px); position: relative; width: var(--ak-poster-short-side); height: auto; aspect-ratio: var(--ak-room-aspect-ratio, 1); } [data-ak-room-display="card"][data-ak-room-format="landscape"] { width: auto; height: var(--ak-poster-short-side); } .ak-session-6__name { display: grid; grid-template-columns: var(--ak-name-divider-left, minmax(0, 1fr)) minmax(0, 1fr); align-items: center; gap: 0; min-height: 114px; padding: 0; border-top: 1px solid var(--ak-line); background: var(--ak-wall); font-family: var(--ak-fatfont-font) !important; font-weight: var(--ak-font-weight-regular) !important; font-size: 11px !important; line-height: var(--ak-h1-line-height) !important; letter-spacing: .15em !important; text-transform: var(--ak-fatfont-transform) !important; color: var(--ak-h1-color) !important; text-align: center; } .ak-session-6__product-title, .ak-session-6__collection-title { display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; padding: 0 20px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ak-session-6__collection-title { border-left: 1px solid var(--ak-line); text-align: center; } .ak-session-6__product-title, .ak-session-6__collection-title, .ak-poster-related-image-frame { color: inherit; text-decoration: none; } .ak-poster-related-image-frame { display: grid; place-items: center; } [data-ak-scroll-reveal] { opacity: 0; transform: translate3d(0, 54px, 0); transition: opacity 900ms cubic-bezier(.22, 1, .36, 1), transform 1050ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--ak-reveal-delay, 0ms); will-change: opacity, transform; } [data-ak-scroll-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .ak-session-5__stage { position: relative; width: 100%; } .ak-session-4 .ak-room-pair__panel { opacity: 0; transform: translate3d(0, 86px, 0); transition: opacity 1050ms cubic-bezier(.22, 1, .36, 1), transform 1250ms cubic-bezier(.22, 1, .36, 1); } .ak-session-4.is-visible .ak-room-pair__panel:first-child { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0ms; } .ak-session-4.is-visible .ak-room-pair__panel:last-child { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { [data-ak-scroll-reveal], .ak-session-4 .ak-room-pair__panel, .ak-session-4::after { opacity: 1 !important; transform: none !important; transition: none !important; } } @media screen and (max-width: 1200px) { .ak-session-general { padding: 72px 24px; } .ak-session-general__title { margin-bottom: 32px; } } @media screen and (max-width: 1200px) { .ak-session-story { opacity: 1; visibility: visible; transition: none; } .ak-session-2-shell { height: auto !important; } .ak-session-2 { position: relative; top: auto; } .ak-session-3 { padding: 72px 24px; } .ak-session-artwork { width: min(72vw, 520px); max-width: 100%; } .ak-session-4 { position: relative; top: auto; grid-template-columns: 1fr; } .ak-session-story.is-session-5-pinned .ak-session-5 { top: var(--ak-top-menu-height, 44px); } .ak-room-pair__panel { padding: 48px 24px; } .ak-room-pair__panel + .ak-room-pair__panel { border-left: 0; border-top: 1px solid var(--ak-line); } .ak-session-4::after { display: none; } .ak-session-6 { padding: 0 24px calc(var(--ak-bottom-menu-height, 44px) * 2 + 48px); } .ak-session-6__grid { grid-template-columns: 1fr; } .ak-session-6__card, .ak-session-6__card.is-first { border-left: 0; border-top: 1px solid var(--ak-line); } .ak-session-6__card.is-first { border-top: 0; } .ak-session-6__visual { min-height: min(76vw, 440px); padding: 20px; } .ak-session-6__title { min-height: 120px; } .ak-session-6::after { height: calc(var(--ak-bottom-menu-height, 44px) * 2 + 48px); } } /* ===================================================== DESKTOP ONLY — BASE ===================================================== */ @media screen and (min-width: 1201px) { /* ===================================================== */ /* ===================== BASE =========================== */ /* ===================================================== */ .ak-product-split { /* =================================================== */ /* ============= PRODUCT INTRO TIMINGS ============== */ /* =================================================== */ --ak-intro-bottom-border-duration: 0.42s; --ak-intro-panel-duration: 0.48s; --ak-intro-rail-duration: 0.33s; --ak-intro-gallery-number-duration: 0.25s; --ak-intro-gallery-number-step: 60ms; --ak-intro-purchase-duration: 0.3s; --ak-intro-add-to-cart-duration: 0.35s; --ak-intro-bottom-hatch-delay: 0.08s; --ak-intro-bottom-hatch-duration: 0.36s; /* =================================================== */ /* ============== NON-INTRO UI TIMINGS ============== */ /* =================================================== */ --ak-time-frame-reveal: 0.5s; --ak-time-size-spinner: 0.13s; --ak-time-price-fade: 0.35s; /* =================================================== */ /* ================= EXISTING BASE ==================== */ /* =================================================== */ --ak-top-menu-height: 44px; --ak-bottom-menu-height: 44px; --ak-universal-frame: 29px; --ak-poster-left-width: 50%; --ak-poster-gallery-width: 52px; --ak-poster-edge-width: 44px; --ak-poster-edge-columns: 3; --ak-poster-edge-rows: 12; --ak-poster-edge-cell: calc( var(--ak-poster-edge-width) / var(--ak-poster-edge-columns) ); --ak-poster-fixed-block-height: calc( var(--ak-poster-edge-cell) * var(--ak-poster-edge-rows) ); --ak-product-height: calc( 100dvh - var(--ak-top-menu-height) - var(--ak-bottom-menu-height) - var(--ak-universal-frame) ); position: relative !important; width: 100% !important; height: var(--ak-product-height) !important; min-height: var(--ak-product-height) !important; max-height: var(--ak-product-height) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; box-sizing: border-box !important; } } /* ===================================================== POSTERS — DESKTOP ONLY ===================================================== */ @media screen and (min-width: 1201px) { /* ===================================================== */ /* ===================== LAYOUT ========================= */ /* ===================================================== */ .ak-product-split > data-island { position: relative !important; display: grid !important; grid-template-columns: var(--ak-poster-left-width) minmax( 0, 1fr ) !important; gap: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; overflow: hidden !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== */ /* ================= LEFT PANEL ========================= */ /* ===================================================== */ .ak-product-split .product-media-container { grid-column: 2 !important; grid-row: 1 !important; position: relative !important; z-index: 3 !important; top: auto !important; left: auto !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 7vh 2vw !important; align-self: stretch !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0000 !important; border-right: 0 !important; border-bottom: 0 !important; overflow: visible !important; box-sizing: border-box !important; transform: translateX(-100%); animation: none !important; will-change: transform; border-left: 1px solid var(--ak-line) !important; } .ak-product-split .ak-configurator-unit-toggle { font-weight: var(--ak-font-weight-regular) !important; } .ak-product-split .ak-configurator-unit-toggle .ak-unit-current { font-weight: var(--ak-font-weight-strong) !important; } .ak-product-split .ak-configurator-unit-toggle:hover, .ak-product-split .ak-configurator-unit-toggle:hover .ak-unit-current { font-weight: var(--ak-font-weight-strong) !important; } /* ===================================================== */ /* ================= RIGHT PANEL ======================== */ /* ===================================================== */ .ak-product-split .product-content-container { grid-column: 1 !important; grid-row: 1 !important; position: relative !important; z-index: 1 !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 4vw !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: var(--ak-wall) !important; box-sizing: border-box !important; } .ak-product-split .product-block-area { width: min( 430px, 100% ) !important; max-width: 470px !important; margin: 0 0 0 auto !important; padding: 0 !important; } /* ===================================================== */ /* ===================== FRAME PREVIEW ================== */ /* ===================================================== */ .product-frame-target { position: relative !important; overflow: hidden !important; } .product-frame-target .product-frame-art { position: relative !important; z-index: 1 !important; transform-origin: center center !important; will-change: transform; } .product-frame-target .product-frame-overlay { position: absolute !important; inset: 0 !important; z-index: 2 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; pointer-events: none !important; opacity: 0; will-change: opacity; } .ak-product-split .product-frame-target { opacity: 0; } .ak-product-split .product-frame-target.is-loaded { opacity: 1; transition: opacity var(--ak-time-frame-reveal) ease; } /* ===================================================== */ /* ===================== PRODUCT TEXT =================== */ /* ======================== H1 ========================== */ /* ===================================================== */ .ak-product-split .ak-product-title { position: absolute !important; top: 12vh !important; left: 25% !important; right: calc(var(--ak-poster-gallery-width) + 2vw) !important; bottom: auto !important; z-index: 6 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; font-family: var(--ak-h1-font) !important; font-size: var(--ak-h1-size) !important; font-weight: var(--ak-h1-weight) !important; line-height: var(--ak-h1-line-height) !important; letter-spacing: var(--ak-h1-spacing) !important; text-align: left !important; text-transform: var(--ak-h1-transform) !important; color: var(--ak-h1-color) !important; white-space: normal !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; box-sizing: border-box !important; transform: none; transition: none; } .ak-product-title-mobile { display: none !important; } .ak-product-title-desktop { display: contents !important; } /* ===================================================== */ /* ================ H1 CHILD ELEMENTS =================== */ /* ===================================================== */ .ak-product-split .ak-product-title * { font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } /* ===================================================== */ /* =================== H1 REVEAL ======================== */ /* ===================================================== */ /* ===================================================== */ /* ================ PRODUCT INFORMATION ================ */ /* ===================================================== */ .ak-product-split .ak-product-extra-content { position: absolute !important; top: 27vh !important; left: 12.5% !important; right: calc(50% + var(--ak-poster-gallery-width) + 2vw) !important; bottom: calc(var(--ak-bottom-menu-height) + 4vh) !important; z-index: 6 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; overflow: hidden !important; pointer-events: auto !important; box-sizing: border-box !important; } .ak-product-split .ak-product-information { width: 100% !important; max-width: none !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; box-sizing: border-box !important; opacity: 1 !important; transform: none; transition: none; } .ak-product-split .ak-product-information::-webkit-scrollbar { display: none; } /* ===================================================== */ /* ================= BREAD SKRIFTER ===================== */ /* ===================================================== */ .ak-product-split .ak-product-information *, .ak-product-split .ak-product-description, .ak-product-split .ak-product-description *, .ak-product-split .ak-product-information-fixed, .ak-product-split .ak-product-information-fixed p, .ak-product-split .ak-product-information-fixed p * { font-family: var(--ak-bread-font) !important; font-size: var(--ak-bread-size) !important; font-weight: var(--ak-bread-weight) !important; line-height: var(--ak-bread-line-height) !important; letter-spacing: var(--ak-bread-spacing) !important; text-align: var(--ak-bread-align) !important; text-transform: var(--ak-bread-transform) !important; color: var(--ak-bread-color) !important; box-sizing: border-box !important; } /* ===================================================== */ /* ================= H2 OVERSKRIFTER ==================== */ /* ===================================================== */ .ak-product-split .ak-product-information-title, .ak-product-split .ak-product-information-fixed-title { width: fit-content !important; margin: 0 0 1.2em 0 !important; padding: 0 !important; font-family: var(--ak-h2-font) !important; font-size: var(--ak-h2-size) !important; font-weight: var(--ak-h2-weight) !important; line-height: var(--ak-h2-line-height) !important; letter-spacing: var(--ak-h2-spacing) !important; text-align: var(--ak-h2-align) !important; text-transform: var(--ak-h2-transform) !important; color: var(--ak-h2-color) !important; } /* ===================================================== */ /* ================= PRODUCT DESCRIPTION =============== */ /* ===================================================== */ .ak-product-split .ak-product-description { width: 100% !important; margin: 0 0 1.75em 0 !important; padding: 0 !important; } .ak-product-split .ak-product-description > * { margin-left: 0 !important; margin-right: 0 !important; } .ak-product-split .ak-product-description > *:first-child { margin-top: 0 !important; } .ak-product-split .ak-product-description > *:last-child { margin-bottom: 0 !important; } /* ===================================================== */ /* ================= FIXED INFORMATION ================== */ /* ===================================================== */ .ak-product-split .ak-product-information-fixed { width: 100% !important; margin: 1.5em 0 0 0 !important; padding: 0 !important; font-style: normal !important; } .ak-product-split .ak-product-information-fixed p { margin: 0 0 1.25em 0 !important; padding: 0 !important; font-style: normal !important; } .ak-product-split .ak-product-information-fixed p:last-child { margin-bottom: 0 !important; } /* ===================================================== */ /* ===================== OPTIONS ======================== */ /* ===================================================== */ .ak-product-split .product-variant-picker-block { margin-bottom: 26px !important; } .ak-product-split .wcpa_row { margin-top: 42px !important; margin-bottom: 26px !important; } .ak-product-split .wcpa_row:first-of-type { margin-top: -10px !important; } .ak-product-split .wcpa_field_wrap { margin: 0 !important; padding: 0 !important; } .ak-product-split .wcpa_field_label, .ak-product-split [data-product-option] legend { margin: 0 0 22px 0 !important; padding: 0 !important; font-family: var(--ak-h2-font) !important; font-size: var(--ak-h2-size) !important; font-weight: var(--ak-h2-weight) !important; line-height: var(--ak-h2-line-height) !important; letter-spacing: var(--ak-h2-spacing) !important; text-align: var(--ak-h2-align) !important; text-transform: var(--ak-h2-transform) !important; color: var(--ak-h2-color) !important; } .ak-product-split .product-variant-picker-block [id*="option1"], .ak-product-split .wcpa_group_field { width: 100% !important; display: grid !important; grid-template-columns: repeat( 3, 1fr ) !important; column-gap: 32px !important; row-gap: 14px !important; align-items: start !important; } .ak-product-split input[name="options[Size]"] { position: absolute !important; opacity: 0 !important; } .ak-product-split .label-only-input, .ak-product-split .wcpa_radio { width: 100% !important; height: 18px !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .ak-product-split input[name="options[Size]"] + label, .ak-product-split .label-only-input label, .ak-product-split .wcpa_radio label { width: 100% !important; height: 18px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 16px auto !important; column-gap: 10px !important; align-items: center !important; border: none !important; background: transparent !important; font-family: var(--ak-button-font) !important; font-size: var(--ak-button-size) !important; font-weight: var(--ak-button-weight) !important; line-height: var(--ak-button-line-height) !important; letter-spacing: var(--ak-button-spacing) !important; text-align: left !important; text-transform: var(--ak-button-transform) !important; color: var(--ak-button-color) !important; white-space: nowrap !important; } .ak-product-split input[name="options[Size]"] + label span, .ak-product-split .label-only-input label span, .ak-product-split .wcpa_radio label span { position: relative !important; display: inline-block !important; width: fit-content !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; white-space: nowrap !important; color: inherit !important; } .ak-product-split input[name="options[Size]"] + label::before, .ak-product-split .label-only-input label::before, .ak-product-split .wcpa_radio_custom { content: "" !important; display: block !important; width: 13px !important; height: 13px !important; min-width: 13px !important; flex: 0 0 13px !important; margin: 0 !important; border: 1px solid var(--ak-line); border-radius: 50% !important; background: var(--ak-wall) !important; box-shadow: none !important; box-sizing: border-box !important; transform: none !important; } .ak-product-split input[name="options[Size]"]:checked + label::before, .ak-product-split .label-only-input input:checked + label::before, .ak-product-split .wcpa_radio input:checked + .wcpa_radio_custom { border: 4px solid var(--ak-h1); } .ak-product-split input[name="options[Size]"]:checked + label span, .ak-product-split .label-only-input input:checked + label span, .ak-product-split .wcpa_radio:has(input:checked) label span { font-weight: var(--ak-button-selected-weight) !important; color: var(--ak-button-color) !important; } .ak-product-split input[name="options[Size]"]:checked + label span::after, .ak-product-split .label-only-input input:checked + label span::after, .ak-product-split .wcpa_radio:has(input:checked) label span::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -4px !important; width: 100% !important; height: 1px !important; display: block !important; background: currentColor !important; } .ak-product-split .wcpa_radio_custom::after { content: none !important; display: none !important; } } /* ===================================================== POSTERS — DESKTOP ONLY ===================================================== */ @media screen and (min-width: 1201px) { /* ===================================================== */ /* ===================== HIDE PRICES ==================== */ /* ===================================================== */ .ak-product-split .wcpa_option_price, .ak-product-split .wcpa_radio label .wcpa_option_price, .ak-product-split .label-only-input label .wcpa_option_price, .ak-product-split .wcpa_field_bottom, .ak-product-split .wcpa_field_price, .ak-product-split .wcpa_field_error, .ak-product-split .wcpa_options_total, .ak-product-split .wcpa_product_total, .ak-product-split .wcpa_price_summary > div:not(.wcpa_total), .ak-product-split .wcpa_price_summary table tr:not(:last-child), .ak-product-split .wcpa_price_summary .wcpa_total_items, .ak-product-split .wcpa_price_summary .wcpa_options_price, .ak-product-split .wcpa_price_summary .wcpa_product_price, .ak-product-split .wcpa_total tr:has(.wcpa_options_price), .ak-product-split .wcpa_total tr:has(.wcpa_product_price), .ak-product-split .wcpa_total tr:has(.wcpa_options_total), .ak-product-split .wcpa_total tr:has(.wcpa_product_total) { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* ===================================================== */ /* ================= SLUT PRIS SKRIFT =================== */ /* ===================================================== */ .ak-product-split .wcpa_price_summary { display: flex !important; visibility: visible !important; overflow: visible !important; } .ak-product-split .wcpa_total { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; border: 0 !important; font-family: var(--ak-fatfont-font) !important; font-size: var(--ak-fatfont-size) !important; font-weight: var(--ak-fatfont-weight) !important; line-height: 1 !important; letter-spacing: var(--ak-fatfont-spacing) !important; text-align: left !important; text-transform: uppercase !important; color: var(--ak-fatfont-color) !important; transform: none !important; } .ak-product-split .wcpa_total > *:not(:first-child) { transition: opacity var(--ak-time-price-fade) ease !important; } .ak-product-split .wcpa_total *, .ak-product-split .wcpa_total::before { display: flex !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .ak-product-split .wcpa_total::before { content: "TOTAL"; font-family: var(--ak-fatfont-font) !important; font-size: var(--ak-fatfont-size) !important; font-weight: var(--ak-fatfont-weight) !important; line-height: 1 !important; letter-spacing: var(--ak-fatfont-spacing) !important; text-transform: uppercase !important; color: var(--ak-fatfont-color) !important; } .ak-product-split .wcpa_total > *:first-child { display: none !important; } .ak-product-split .ak-product-total-area { position: absolute !important; left: var(--ak-product-middle, 50%) !important; right: calc(100% - var(--ak-product-cart-left, 75%)) !important; bottom: 0 !important; z-index: 8 !important; width: auto !important; height: var(--ak-bottom-menu-height) !important; margin: 0 !important; padding: 0 22px !important; display: flex !important; flex-direction: column !important; border: 0 !important; box-sizing: border-box !important; justify-content: center !important; background: var(--ak-wall) !important; border-top: 1px solid var(--ak-line) !important; border-right: 0 !important; } .ak-product-split .wcpa_price_summary:not(.ak-product-total-area) { visibility: hidden !important; border-left: 1px solid var(--ak-line) !important; } .ak-product-split .product-block:has(.add-to-cart-container):not(.ak-product-add-to-cart-area) { visibility: hidden !important; } /* ===================================================== */ /* ===================== BUTTONS ======================== */ /* ===================================================== */ .ak-product-split .ak-product-add-to-cart-area { position: absolute !important; left: var(--ak-product-cart-left, 75%) !important; right: var(--ak-product-cart-right, 12.5%) !important; bottom: 0 !important; z-index: 9 !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .ak-product-split .ak-product-add-to-cart-area .add-to-cart-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .ak-product-split .ak-product-add-to-cart-area button[name="add"], .ak-product-split .ak-product-add-to-cart-area .add-to-cart { width: 100% !important; height: var(--ak-bottom-menu-height) !important; min-height: var(--ak-bottom-menu-height) !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-top: 1px solid var(--ak-line) !important; border-left: 1px solid var(--ak-line) !important; border-right: 1px solid var(--ak-line) !important; box-sizing: border-box !important; border-radius: 0 !important; background: var(--ak-cta-background, #333333) !important; color: var(--ak-cta-color, var(--ak-wall)) !important; font-family: var(--ak-fatfont-font) !important; font-size: var(--ak-fatfont-size) !important; letter-spacing: var(--ak-fatfont-spacing) !important; text-transform: uppercase !important; } .ak-product-split .ak-product-add-to-cart-area button[name="add"]:hover, .ak-product-split .ak-product-add-to-cart-area .add-to-cart:hover { background: var(--ak-cta-hover-background) !important; color: var(--ak-cta-hover-color) !important; } .ak-product-split .shopify-payment-button { display: none !important; } /* ===================================================== */ /* ===================== COLLAPSIBLE ==================== */ /* ===================================================== */ .ak-product-split .product-block--collapsible-tab { margin-top: 24px !important; } .ak-product-split .product-block--collapsible-tab, .ak-product-split .product-block--collapsible-tab * { font-size: 9px !important; letter-spacing: 0.10em !important; color: var(--ak-h1); !important; } .ak-product-split .product-block--collapsible-tab .h-6.w-6 { width: 10px !important; height: 10px !important; } .ak-product-split .product-block--collapsible-tab .h-6.w-6 svg.theme-icon { width: 10px !important; height: 10px !important; display: block !important; } .ak-product-split .product-block--collapsible-tab .h-6.w-6 svg.theme-icon path { stroke-width: 1.2px !important; } /* ===================================================== */ /* ===================== PASSEPARTOUT =================== */ /* ===================================================== */ .ak-product-split .passe-disabled-note { display: none !important; margin-top: 14px !important; font-size: 10.5px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1.25 !important; letter-spacing: 0.08em !important; } /* ===================================================== */ /* ===================== ICON COLOR ===================== */ /* ===================================================== */ .ak-product-split svg, .ak-product-split svg *, .ak-product-split path { stroke: var(--ak-h1); !important; color: var(--ak-h1); !important; } /* ===================================================== */ /* ===================== RIGHT EDGE RAIL ================ */ /* ===================================================== */ .ak-product-edge-rail { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; z-index: 4 !important; width: var(--ak-poster-edge-width) !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-rows: var(--ak-poster-fixed-block-height) minmax( 0, 1fr ) var(--ak-poster-fixed-block-height) !important; gap: 0 !important; overflow: hidden !important; visibility: hidden !important; background: var(--ak-wall) !important; border-left: 1px solid var(--ak-line) !important; box-sizing: border-box !important; transform: translateX(100%); transition: transform var(--ak-intro-rail-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) !important; will-change: transform; } /* ===================================================== */ /* ================ SHARED RAIL REVEAL ================= */ /* ===================================================== */ .product-side-gallery-nav.ak-gallery-rail-armed, .ak-product-edge-rail.ak-gallery-rail-armed, .ak-product-left-edge-rail.ak-gallery-rail-armed { visibility: visible !important; } .product-side-gallery-nav.ak-gallery-rail-visible, .ak-product-edge-rail.ak-gallery-rail-visible, .ak-product-left-edge-rail.ak-gallery-rail-visible { visibility: visible !important; transform: translateX(0); } } /* ===================================================== POSTERS — DESKTOP ONLY ===================================================== */ @media screen and (min-width: 1201px) { /* ===================================================== */ /* ================= RIGHT EDGE GRID ==================== */ /* ===================================================== */ .ak-product-edge-grid { position: relative !important; width: 100% !important; height: var(--ak-poster-fixed-block-height) !important; min-height: var(--ak-poster-fixed-block-height) !important; max-height: var(--ak-poster-fixed-block-height) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important; grid-template-rows: repeat( 12, minmax( 0, 1fr ) ) !important; gap: 0 !important; overflow: hidden !important; background: var(--ak-wall) !important; box-sizing: border-box !important; } .ak-product-edge-grid-cell { position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: var(--ak-wall) !important; border-right: 1px solid var(--ak-line) !important; border-bottom: 1px solid var(--ak-line) !important; box-sizing: border-box !important; } .ak-product-edge-grid-cell:nth-child(3n) { border-right: 0 !important; } .ak-product-edge-grid-cell:nth-child(n + 34) { border-bottom: 0 !important; } .ak-product-edge-grid-top { border-bottom: 1px solid var(--ak-line) !important; } .ak-product-edge-grid-bottom { border-top: 1px solid var(--ak-line) !important; } /* ===================================================== */ /* ================= FLEXIBLE HATCH ===================== */ /* ===================================================== */ .ak-product-edge-hatch { position: relative !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; pointer-events: none !important; box-sizing: border-box !important; } .ak-product-edge-hatch::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: transparent var(--ak-hatch-pattern) 0 0 / var(--ak-hatch-size, 9px 9px) repeat !important; image-rendering: crisp-edges !important; } } /* ===================================================== */ /* ================= LAPTOP HEIGHT FIX ================== */ /* ===================================================== */ @media screen and (max-height: 900px) { .ak-product-split .ak-product-description { margin-bottom: 18px !important; } .ak-product-split .wcpa_row { margin-top: 22px !important; margin-bottom: 18px !important; } .ak-product-split .product-block-area { transform: translateY(20px) scale(0.93); transform-origin: center center; } } /* ===================================================== */ /* ===================== MOBILE SAFETY ================== */ /* ===================================================== */ @media screen and (max-width: 1200px) { .product-side-gallery-nav, .ak-product-edge-rail, .ak-product-left-edge-rail { display: none !important; } } /* ===================================================== DESKTOP OPTION STACKS Shared native Shopify / WCPA controls remain in the form. ===================================================== */ @media screen and (min-width: 1201px) { .ak-product-split .ak-product-configurator-area { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none !important; } .ak-product-split .ak-desktop-options { position: absolute !important; left: var(--ak-product-options-left, 12.5%) !important; right: calc(100% - var(--ak-product-middle, 50%)) !important; bottom: 0 !important; z-index: 12 !important; height: var(--ak-bottom-menu-height) !important; display: grid !important; grid-template-columns: var(--ak-product-size-width, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-sizing: border-box; } .ak-desktop-option { position: relative; min-width: 0; } .ak-desktop-option-trigger, .ak-desktop-option-row { appearance: none; width: 100%; min-height: var(--ak-bottom-menu-height); margin: 0; padding: 10px 14px; box-sizing: border-box; border: 0; border-top: 1px solid var(--ak-line); border-left: 1px solid var(--ak-line); border-radius: 0; background: var(--ak-wall); color: var(--ak-fatfont-color); font-family: var(--ak-fatfont-font); font-size: var(--ak-fatfont-size); font-weight: var(--ak-font-weight-regular); letter-spacing: var(--ak-fatfont-spacing); line-height: var(--ak-button-line-height); text-transform: uppercase; cursor: pointer; } .ak-desktop-option-trigger { height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; } .ak-desktop-option-trigger[data-mount]:not([data-mount="none"])::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; box-sizing: border-box; border: 1px solid var(--ak-line); background: var(--ak-trigger-mount-swatch, var(--ak-wall)); } .ak-desktop-option-trigger[data-mount="white"] { --ak-trigger-mount-swatch: #fff; } .ak-desktop-option-trigger[data-mount="black"] { --ak-trigger-mount-swatch: var(--ak-black); } .ak-desktop-option-trigger[data-mount="beige"] { --ak-trigger-mount-swatch: #f3f0e5; } .ak-desktop-option-trigger[data-mount="creme"] { --ak-trigger-mount-swatch: #d2c3bb; } .ak-desktop-option-row { border-right: 1px solid var(--ak-line); display: block; text-align: left; opacity: 0; border-left: 1px solid var(--ak-line); clip-path: inset(100% 0 0); } .ak-desktop-option-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ak-desktop-option-row.is-selected { font-weight: var(--ak-font-weight-strong); text-decoration: underline; text-underline-offset: 4px; } .ak-desktop-option-row:disabled { color: #999; cursor: not-allowed; } .ak-desktop-option-trigger:focus-visible, .ak-desktop-option-row:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } .ak-desktop-option-stack { position: absolute; bottom: 100%; left: 0; width: calc(100% + 1px); pointer-events: none; } .ak-desktop-option.is-open .ak-desktop-option-stack { pointer-events: auto; } .ak-desktop-option-rows { max-height: calc(var(--ak-product-height) - var(--ak-bottom-menu-height)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .ak-desktop-option-loading { position: absolute; inset: 0; z-index: 2; display: none; background: color-mix(in srgb, var(--ak-wall) 78%, transparent); cursor: progress; } .ak-desktop-option.is-loading .ak-desktop-option-loading { display: block; } .ak-desktop-option[data-ak-configurator-section="size"] .ak-desktop-option-loading, .ak-desktop-option[data-ak-configurator-section="size"].is-loading .ak-desktop-option-loading { display: none !important; animation: none !important; } .ak-desktop-option-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; background: url("ak-brand-icon.svg") center / contain no-repeat; animation: akDesktopOptionSpinner var(--ak-time-size-spinner) linear infinite; } .ak-desktop-option-status { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 3; background: var(--ak-wall); font-size: var(--ak-fatfont-size); } .ak-desktop-option-status:empty { display: none; } .ak-desktop-option-row[data-mount="black"] { background: var(--ak-black); color: var(--ak-wall); } .ak-desktop-option-row[data-mount="beige"] { background: #f3f0e5; } .ak-desktop-option-row[data-mount="creme"] { background: #d2c3bb; } @keyframes akDesktopOptionSpinner { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ak-desktop-option-loading::after { animation-duration: 1s; } } } /* ===================================================== PRODUCT MEDIA LEFT RAIL DESKTOP ===================================================== */ @media screen and (min-width: 1201px) { /* ===================================================== LEFT 44PX RAIL ===================================================== */ .ak-product-left-edge-rail { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 7 !important; width: var(--ak-poster-edge-width) !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-rows: var(--ak-poster-fixed-block-height) minmax( 0, 1fr ) var(--ak-poster-fixed-block-height) !important; gap: 0 !important; overflow: hidden !important; visibility: hidden !important; background: var(--ak-wall) !important; border-right: 1px solid var(--ak-line) !important; box-sizing: border-box !important; pointer-events: none !important; transform: translate3d( -100%, 0, 0 ); transition: transform var(--ak-intro-rail-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) !important; will-change: transform; } .ak-product-left-edge-rail.ak-gallery-rail-armed { visibility: visible !important; } .ak-product-left-edge-rail.ak-gallery-rail-visible { visibility: visible !important; transform: translate3d( 0, 0, 0 ); } } /* ===================================================== */ /* ============== BOTTOM HATCH REVEAL ================== */ /* ===================================================== */ @media screen and (min-width: 1201px) { .ak-product-bottom-hatch { position: fixed !important; bottom: 0 !important; z-index: 50 !important; height: calc( var(--ak-bottom-menu-height) + 15px ) !important; overflow: hidden !important; background: var(--ak-wall) !important; pointer-events: none !important; opacity: 0; visibility: hidden; box-sizing: border-box !important; animation: none; } .ak-product-bottom-hatch-left { left: 13px !important; width: calc( var(--ak-poster-left-width) - 13px ) !important; border-left: 1px solid var(--ak-line) !important; border-right: 1px solid var(--ak-line) !important; transform: translateX(20%); } .ak-product-bottom-hatch-right { right: 13px !important; width: calc( 100vw - var(--ak-construction-line-two-x) - 13px ) !important; border-left: 1px solid var(--ak-line) !important; border-right: 1px solid var(--ak-line) !important; transform: translateX(-20%); } .ak-product-bottom-hatch::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: transparent var(--ak-hatch-pattern) 0 0 / var(--ak-hatch-size, 9px 9px) repeat !important; image-rendering: crisp-edges !important; } .ak-product-split.ak-poster-entry-start .ak-product-bottom-hatch-left { animation: akProductBottomHatchLeftIn var(--ak-intro-bottom-hatch-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) var(--ak-intro-bottom-hatch-delay) forwards; } .ak-product-split.ak-poster-entry-start .ak-product-bottom-hatch-right { animation: akProductBottomHatchRightIn var(--ak-intro-bottom-hatch-duration) cubic-bezier( 0.76, 0, 0.24, 1 ) var(--ak-intro-bottom-hatch-delay) forwards; } .ak-product-split.ak-product-is-in-cart .ak-product-add-to-cart-area button[name="add"], .ak-product-split.ak-product-is-in-cart .ak-product-add-to-cart-area .add-to-cart { background: var(--ak-cta-cart-background) !important; color: var(--ak-cta-cart-color) !important; } @keyframes akProductBottomHatchLeftIn { 0% { opacity: 1; visibility: visible; transform: translateX(20%); } 100% { opacity: 1; visibility: visible; transform: translateX(0); } } @keyframes akProductBottomHatchRightIn { 0% { opacity: 1; visibility: visible; transform: translateX(-20%); } 100% { opacity: 1; visibility: visible; transform: translateX(0); } } } /* ===================================================== PRODUCT FLOW — DESKTOP Geometry follows the unchanged bottom navigation. ===================================================== */ .ak-flow-gallery, .ak-flow-purchase, .ak-flow-from-price, .ak-flow-scroll-cue { display: none; } @media screen and (min-width: 1201px) { .ak-flow { --ak-flow-outer-inset: 15px; --ak-flow-top-fixed: calc(var(--ak-flow-outer-inset) + var(--ak-top-menu-height)); --ak-flow-purchase-bottom: calc(var(--ak-flow-outer-inset) + var(--ak-bottom-menu-height) - 1px); --ak-flow-frame-bottom: var(--ak-flow-purchase-bottom); --ak-flow-bottom-stack: calc(var(--ak-flow-purchase-bottom) + var(--ak-bottom-menu-height)); --ak-flow-product-bottom: calc(var(--ak-flow-bottom-stack) - 1px); --ak-flow-product-height: calc(100dvh - var(--ak-flow-top-fixed) - var(--ak-flow-product-bottom)); scroll-margin-top: var(--ak-flow-top-fixed); --ak-flow-title-height: calc(var(--ak-poster-fixed-block-height) - 1px); --ak-flow-info-bottom: calc(var(--ak-product-height) * .51); --ak-product-height: var(--ak-flow-product-height); height: var(--ak-flow-product-height) !important; min-height: var(--ak-flow-product-height) !important; max-height: var(--ak-flow-product-height) !important; background: var(--ak-wall) !important; } .ak-flow > data-island { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } .ak-flow::after { content: ""; position: fixed; left: var(--ak-flow-outer-inset); right: var(--ak-flow-outer-inset); bottom: 0; height: var(--ak-flow-bottom-stack); z-index: 1; background: var(--ak-wall); pointer-events: none; } .ak-flow .ak-product-bottom-line { position: fixed !important; bottom: var(--ak-flow-frame-bottom) !important; width: 50vw !important; z-index: 41 !important; } .ak-flow .ak-product-bottom-line-left { left: 0 !important; } .ak-flow .ak-product-bottom-line-right { right: 0 !important; } .ak-flow .ak-product-left-edge-rail, .ak-flow .ak-product-edge-rail { position: fixed !important; top: var(--ak-flow-top-fixed) !important; bottom: var(--ak-flow-frame-bottom) !important; height: auto !important; min-height: 0 !important; max-height: none !important; } .ak-flow .ak-product-left-edge-rail { left: var(--ak-flow-outer-inset) !important; right: auto !important; } .ak-flow .ak-product-edge-rail { left: auto !important; right: var(--ak-flow-outer-inset) !important; } .ak-flow .ak-product-bottom-hatch { position: fixed !important; height: var(--ak-flow-frame-bottom) !important; z-index: 50 !important; } .ak-flow.ak-poster-entry-start .ak-product-bottom-hatch-left, .ak-flow.ak-poster-entry-start .ak-product-bottom-hatch-right { animation: none !important; } .ak-flow.ak-flow-hatch .ak-product-bottom-hatch-left { animation: akProductBottomHatchLeftIn 1100ms cubic-bezier(.16, 1, .3, 1) forwards !important; } .ak-flow.ak-flow-hatch .ak-product-bottom-hatch-right { animation: akProductBottomHatchRightIn 1100ms cubic-bezier(.16, 1, .3, 1) forwards !important; } .ak-flow .product-media-container { background: transparent !important; border-left-color: transparent !important; transform: none !important; animation: none !important; } .ak-flow .product-media-container::before { content: ""; position: absolute; inset: 0; background: #0000; opacity: 0; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .ak-flow.ak-flow-background .product-media-container::before { opacity: 1; } /* Session 1 is a single full-width product stage. */ .ak-flow > data-island { grid-template-columns: minmax(0, 1fr) !important; } .ak-flow .product-media-container { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; border-left: 0 !important; background: var(--ak-wall) !important; } .ak-flow .product-content-container { position: absolute !important; inset: 0 !important; z-index: 12 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; clip-path: none !important; background: transparent !important; pointer-events: none !important; } .ak-flow .ak-product-title { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 70vw !important; max-width: 70vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ak-ses1) !important; -webkit-text-stroke: 0px var(--ak-menu) !important; paint-order: stroke fill !important; font-family: var(--ak-h1-font) !important; font-size: var(--ak-flow-hero-title-size, 120px) !important; font-weight: var(--ak-h1-weight) !important; line-height: 1 !important; letter-spacing: 0.01em !important; text-align: center !important; white-space: nowrap !important; opacity: 0 !important; transform: translate(-50%, calc(-50% + 42px)) !important; transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1), transform 1150ms cubic-bezier(.16, 1, .3, 1) !important; } .ak-flow.ak-flow-title .ak-product-title { opacity: 1 !important; transform: translate(-50%, -50%) !important; } .ak-flow .ak-product-title * { white-space: inherit !important; } .ak-flow .ak-product-extra-content { display: none !important; } .ak-flow-scroll-cue { position: absolute; left: 50%; bottom: 50px; z-index: 13; display: block; opacity: 0; transform: translate(-50%, 12px); color: var(--ak-black); font-family: var(--ak-fatfont-font, Arial, sans-serif); font-size: 12px; font-weight: var(--ak-font-weight-regular); line-height: 1; letter-spacing: .18em; white-space: nowrap; pointer-events: none; transition: opacity 500ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1); } .ak-flow.ak-flow-scroll-visible .ak-flow-scroll-cue { visibility: visible; opacity: 1; transform: translate(-50%, 0); animation: akFlowScrollCuePulse 2200ms ease-in-out 650ms infinite; } .ak-flow:not(.ak-flow-scroll-visible) .ak-flow-scroll-cue { visibility: hidden !important; opacity: 0 !important; animation: none !important; } @keyframes akFlowScrollCuePulse { 0%, 100% { opacity: .23; } 50% { opacity: 1; } } .ak-flow .ak-flow-purchase { display: grid; grid-template-columns: var(--ak-flow-leading) var(--ak-flow-options-width) var(--ak-flow-total-width) minmax(0, 1fr); position: fixed; left: var(--ak-flow-purchase-left); right: var(--ak-flow-purchase-right); bottom: var(--ak-flow-purchase-bottom); height: calc(var(--ak-bottom-menu-height) + 1px); z-index: 40; background: var(--ak-wall); transform: translateY(calc(100% + var(--ak-flow-purchase-bottom))); visibility: hidden; transition: transform 620ms cubic-bezier(.22,1,.36,1), visibility 0s 620ms; } .ak-flow.ak-flow-bar .ak-flow-purchase, .ak-flow.ak-flow-ready .ak-flow-purchase { visibility: visible; transform: translateY(0); transition-delay: 0s; } .ak-flow .ak-flow-purchase .ak-desktop-options, .ak-flow .ak-flow-purchase .ak-product-total-area, .ak-flow .ak-flow-purchase .ak-product-add-to-cart-area { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; min-width: 0; height: 100% !important; opacity: 1 !important; transform: none !important; transition: none !important; } .ak-flow .ak-flow-purchase .ak-desktop-options { grid-column: 2; grid-row: 1; grid-template-columns: var(--ak-flow-size-width) minmax(0,1fr) minmax(0,1fr) !important; } .ak-flow .ak-flow-purchase .ak-product-total-area { grid-column: 3; grid-row: 1; } .ak-flow .ak-flow-purchase .ak-product-add-to-cart-area { grid-column: 4; grid-row: 1; } .ak-flow .wcpa_total::before { content: "TOTAL"; } .ak-flow:not(.ak-flow-has-size) .ak-product-total-area .wcpa_price_outer { display: none !important; visibility: hidden !important; opacity: 0 !important; } .ak-flow:not(.ak-flow-has-size) .ak-flow-from-price { display: block !important; visibility: visible !important; opacity: 1 !important; } .ak-flow .ak-flow-from-price { display: block; position: absolute; top: 50%; right: 22px; transform: translateY(-50%); font-family: var(--ak-fatfont-font); font-size: var(--ak-fatfont-size); letter-spacing: var(--ak-fatfont-spacing); color: var(--ak-fatfont-color); } .ak-flow.ak-flow-has-size .ak-flow-from-price { display: none; } .ak-flow.ak-flow-has-size .ak-product-total-area .wcpa_price_outer { display: flex !important; visibility: visible !important; opacity: 1 !important; } .ak-flow:not(.ak-flow-has-size) .ak-product-add-to-cart-area button[name="add"], .ak-flow:not(.ak-flow-has-size) .ak-product-add-to-cart-area .add-to-cart { background: var(--ak-wall) !important; color: var(--ak-black) !important; } .ak-flow.ak-flow-has-size .ak-product-add-to-cart-area button[name="add"], .ak-flow.ak-flow-has-size .ak-product-add-to-cart-area .add-to-cart { background: var(--ak-cta-background) !important; color: var(--ak-cta-color) !important; } .ak-flow-gallery-trigger { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--ak-bottom-menu-height); padding: 0; border: 0; border-top: 1px solid var(--ak-line); border-left: 1px solid var(--ak-line); background: var(--ak-wall); color: var(--ak-fatfont-color); font-family: var(--ak-fatfont-font); font-size: var(--ak-fatfont-size); letter-spacing: var(--ak-fatfont-spacing); align-items: stretch; cursor: pointer; } .ak-flow-gallery-trigger > span { display: flex; align-items: center; justify-content: center; } .ak-flow-gallery-arrow { border-left: 1px solid var(--ak-line); } .ak-flow-gallery-arrow img { display: block; width: 18px; height: auto; transform: rotate(90deg); transition: transform 160ms ease; } .ak-flow-gallery-arrow.is-up img { transform: rotate(-90deg); } .ak-flow .ak-desktop-option-rows { max-height: calc(100dvh - var(--ak-flow-purchase-bottom) - 90px); } .ak-flow .ak-flow-units { display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: 0; } .ak-flow-units button { height: 100%; padding: 0; border: 0; background: var(--ak-wall); font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; } .ak-flow-units button + button { border-left: 1px solid var(--ak-line); } .ak-flow-units button[aria-pressed="true"] { font-weight: var(--ak-font-weight-strong); } @media (prefers-reduced-motion: reduce) { .ak-flow .ak-product-title, .ak-flow .ak-flow-purchase, .ak-flow .product-media-container::before, .ak-flow .ak-session-one-room-placement { transition-duration: 0s !important; } } } @media screen and (min-width: 1201px) { .ak-flow .ak-flow-gallery-trigger { border-left: 0 !important; } .ak-flow .ak-flow-purchase .ak-product-add-to-cart-area, .ak-flow .ak-flow-purchase .add-to-cart-container, .ak-flow .ak-flow-purchase button[name="add"], .ak-flow .ak-flow-purchase .add-to-cart { border-right: 0 !important; } } @media screen and (min-width: 1201px) { .ak-flow .ak-flow-purchase .ak-product-total-area { border-left: 1px solid var(--ak-line) !important; } html.ak-size-price-loading .ak-flow .ak-product-total-area .wcpa_price_outer { visibility: hidden !important; } .ak-flow .ak-product-total-area > .ak-size-frozen-price { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } } @media screen and (min-width: 1201px) { .ak-flow .ak-desktop-option-row { height: calc(var(--ak-flow-stack-height) / 8) !important; min-height: 0 !important; box-sizing: border-box; } .ak-flow { --ak-flow-stack-height: calc(var(--ak-product-height) - var(--ak-flow-info-bottom) - var(--ak-bottom-menu-height)); } .ak-flow [data-ak-configurator-section="size"] .ak-desktop-option-row:first-child { border-top: 1px solid var(--ak-line); } } @media screen and (min-width: 1201px) { .ak-flow { --ak-choice-marker-width: calc(var(--ak-flow-stack-height) / 8); } /* Selve valgrækken */ .ak-flow button.ak-desktop-option-row { position: relative; display: flex !important; align-items: center; justify-content: flex-start; gap: 0 !important; padding: 0 18px 0 calc(var(--ak-choice-marker-width) + 18px) !important; background: var(--ak-wall) !important; color: var(--ak-black) !important; font-weight: var(--ak-font-weight-regular) !important; text-decoration: none !important; } .ak-flow button.ak-desktop-option-row > span { background: transparent !important; color: inherit !important; font-weight: inherit !important; text-decoration: none !important; } /* Fjern det tidligere flueben */ .ak-flow button.ak-desktop-option-row > span:first-child::after { content: none !important; } /* Venstre markeringsfelt */ .ak-flow button.ak-desktop-option-row::before { content: "" !important; position: absolute; top: 0; bottom: 0; left: 0; width: var(--ak-choice-marker-width); height: auto; display: grid; place-items: center; box-sizing: border-box; border: 0; border-right: 1px solid var(--ak-line); background: transparent !important; font-family: Arial, sans-serif; font-size: 26px; font-weight: var(--ak-font-weight-regular); line-height: 1; letter-spacing: 0; pointer-events: none; } .ak-flow button.ak-desktop-option-row.is-selected { font-weight: var(--ak-font-weight-strong) !important; } .ak-flow button.ak-desktop-option-row.is-selected::before { content: "×" !important; } /* CM/INCHES står kun i enhedsrækken */ .ak-flow button[data-ak-configurator-group="size"] > span:last-child, .ak-flow button[data-ak-configurator-group="passepartout"] > span:last-child { display: none; } /* BLACK ALU / WHITE WOOD / BLACK WOOD samlet */ .ak-flow button[data-ak-configurator-group="frame"] > span:last-child:not(:empty) { margin-left: 0.4em; } .ak-flow button[data-ak-configurator-group="frame"][data-ak-configurator-value*="oak"] > span:last-child { display: none; } /* Farveprøve foran mount-navnet */ .ak-flow button[data-mount]:not([data-mount="none"]) > span:first-child { display: flex; align-items: center; gap: 12px; } .ak-flow button[data-mount]:not([data-mount="none"]) > span:first-child::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; box-sizing: border-box; border: 1px solid var(--ak-line); background: var(--ak-mount-swatch, var(--ak-wall)); } .ak-flow button[data-mount="white"] { --ak-mount-swatch: #fff; } .ak-flow button[data-mount="black"] { --ak-mount-swatch: var(--ak-black); } .ak-flow button[data-mount="beige"] { --ak-mount-swatch: #f3f0e5; } .ak-flow button[data-mount="creme"] { --ak-mount-swatch: #d2c3bb; } .ak-flow button.ak-desktop-option-row:disabled { color: #999 !important; cursor: not-allowed; } } @media screen and (min-width: 1201px) { .ak-flow button.ak-desktop-option-row.is-selected::before { content: "" !important; background: linear-gradient( 45deg, transparent calc(50% - 0.5px), var(--ak-black) calc(50% - 0.5px), var(--ak-black) calc(50% + 0.5px), transparent calc(50% + 0.5px) ) center / 11px 11px no-repeat, linear-gradient( -45deg, transparent calc(50% - 0.5px), var(--ak-black) calc(50% - 0.5px), var(--ak-black) calc(50% + 0.5px), transparent calc(50% + 0.5px) ) center / 11px 11px no-repeat !important; } } @media screen and (min-width: 1201px) { .ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area button[name="add"], .ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area .add-to-cart { background: var(--ak-black) !important; color: var(--ak-wall) !important; font-weight: var(--ak-font-weight-strong) !important; } .ak-flow .ak-flow-gallery-trigger { background: var(--ak-wall) !important; color: var(--ak-black) !important; } .ak-flow .ak-flow-gallery-trigger > span:first-child { background: var(--ak-wall); color: var(--ak-black); font-weight: var(--ak-font-weight-strong) !important; } .ak-flow .ak-flow-gallery-trigger .ak-flow-gallery-arrow { background: var(--ak-wall) !important; color: var(--ak-black) !important; } .ak-flow .ak-flow-gallery-trigger .ak-flow-gallery-arrow img { filter: none; } .ak-flow .ak-flow-gallery-trigger:hover > span:first-child { background: var(--ak-black); color: var(--ak-wall); } .ak-flow .ak-desktop-option-trigger:hover { animation: none !important; background: var(--ak-black) !important; color: var(--ak-wall) !important; } .ak-flow.ak-flow-ready .ak-desktop-option-trigger.is-ak-choice-cta { background: var(--ak-wall); color: var(--ak-black); animation: akChoiceLinePulse 1.45s ease-in-out infinite; } @keyframes akChoiceLinePulse { 0%, 100% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 1); } 50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0); } } .ak-flow .ak-flow-purchase .ak-product-add-to-cart-area button[name="add"], .ak-flow .ak-flow-purchase .ak-product-add-to-cart-area .add-to-cart { font-weight: var(--ak-font-weight-strong) !important; } .ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area button[name="add"]:hover, .ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area .add-to-cart:hover { background: var(--ak-wall) !important; color: var(--ak-black) !important; } } @media screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) { .ak-flow.ak-flow-ready .ak-desktop-option-trigger.is-ak-choice-cta { animation: none; background: var(--ak-wall); color: var(--ak-black); box-shadow: inset 0 -4px 0 var(--ak-black); } } @media screen and (max-width: 1200px) { .ak-product-split .ak-product-title { border-bottom: 0 !important; } .ak-product-split .product-media-container { border: 0 !important; border-top: 1px solid var(--ak-line) !important; border-bottom: 0 !important; transform: none !important; box-shadow: none !important; } .ak-product-split .product-media-container::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2147483644 !important; display: block !important; width: 100% !important; height: 1px !important; background: var(--ak-line) !important; pointer-events: none !important; } .ak-session-2-shell, .ak-session-5-shell { position: sticky !important; top: calc(var(--ak-top-menu-height, 44px) + 15px) !important; z-index: 1 !important; } .ak-session-story.is-session-2-pinned .ak-session-2, .ak-session-story.is-session-5-pinned .ak-session-5 { position: relative !important; top: auto !important; } .ak-session-4 { padding: 0 !important; gap: 0 !important; } .ak-session-4 .ak-room-pair__panel { padding: 24px !important; margin: 0 !important; } .ak-session-4 .ak-room-pair__canvas { width: 100% !important; margin: 0 !important; } .ak-session-6 { padding: 0 24px calc(var(--ak-mobile-buybar-height, 128px) + var(--ak-mobile-bottom-nav-height, 44px) + 96px) !important; } .ak-session-6__title { min-height: 82px !important; padding: 16px 8px !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .ak-session-6__name { min-height: 68px !important; padding: 12px 14px !important; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: .08em !important; } .ak-session-6::after { display: block !important; height: calc(var(--ak-mobile-buybar-height, 128px) + var(--ak-mobile-bottom-nav-height, 44px) + 96px) !important; } } @media screen and (max-width: 1200px) { html body .ak-product-split.ak-flow > span.ak-flow-from-price, html body .ak-product-split.ak-flow:not(.ak-flow-has-size) > span.ak-flow-from-price, html body .ak-product-split.ak-flow > span[hidden].ak-flow-from-price, html body .ak-size-frozen-price { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } @media screen and (min-width: 1201px) { .ak-product-split .ak-session-one-room-placement { position: absolute !important; top: 50% !important; left: 50% !important; z-index: 6 !important; width: auto !important; height: min(calc(100% - 14vh), 78%) !important; max-width: 92% !important; aspect-ratio: var(--ak-session-one-aspect-ratio) !important; transform: translate(-50%, -50%) !important; opacity: 0; visibility: hidden; transition: opacity 760ms cubic-bezier(.22, 1, .36, 1); pointer-events: none !important; } .ak-flow.ak-flow-art .product-media-container.ak-has-session-one-composition .ak-session-one-room-placement { opacity: 1; visibility: visible; } .ak-product-split .ak-session-one-room-placement .ak-room-preview__art, .ak-product-split .ak-session-one-room-placement .ak-room-preview__frame { position: absolute !important; inset: auto !important; display: block !important; max-width: none !important; max-height: none !important; object-fit: fill !important; transform-origin: center !important; pointer-events: none !important; } .ak-product-split .ak-session-one-room-placement .ak-room-preview__art { top: var(--ak-room-art-source-top, 50%) !important; left: var(--ak-room-art-source-left, 50%) !important; width: var(--ak-room-art-source-width, 100%) !important; height: var(--ak-room-art-source-height, 100%) !important; transform: translate(calc(-50% + 0.5px), -50%) scale(var(--ak-room-art-scale)) scale(var(--ak-room-art-crop-scale)) !important; } .ak-product-split .ak-session-one-room-placement .ak-room-preview__frame { top: var(--ak-room-frame-source-top, 50%) !important; left: var(--ak-room-frame-source-left, 50%) !important; width: var(--ak-room-frame-source-width, 100%) !important; height: var(--ak-room-frame-source-height, 100%) !important; transform: translate(-50%, -50%) rotate(var(--ak-room-frame-rotation)) scale(var(--ak-room-frame-scale)) scale(var(--ak-room-frame-crop-scale)) !important; } .ak-product-split .ak-session-one-room-placement .ak-room-preview__crop { filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .15)) !important; } .ak-flow.ak-session-1-visual-pinned .product-media-container { position: fixed !important; top: var(--ak-flow-top-fixed) !important; right: var(--ak-flow-outer-inset) !important; bottom: var(--ak-flow-product-bottom) !important; left: var(--ak-flow-outer-inset) !important; z-index: 1 !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; } .ak-flow.ak-session-1-visual-pinned .ak-product-title { position: fixed !important; top: calc( var(--ak-flow-top-fixed) + ( var(--ak-flow-product-height) / 2 ) ) !important; left: 50% !important; z-index: 2 !important; } .ak-flow.ak-session-1-visual-pinned .ak-flow-scroll-cue { position: fixed !important; right: auto !important; bottom: calc( var(--ak-flow-product-bottom) + 50px ) !important; left: 50% !important; z-index: 3 !important; } .ak-session-story { position: relative; z-index: 20; } .ak-session-2-shell, .ak-session-2 { background: var(--ak-wall); } } @media screen and (min-width: 1201px) { .ak-session-story { --ak-session-side-inset: 44px; width: calc( 100% - var(--ak-session-side-inset) - var(--ak-session-side-inset) ); margin-right: var(--ak-session-side-inset); margin-left: var(--ak-session-side-inset); box-sizing: border-box; z-index: 20; } .ak-flow .ak-product-left-edge-rail, .ak-flow .ak-product-edge-rail { z-index: 7 !important; } .ak-session-2-shell, .ak-session-5-shell, .ak-session-stack, .ak-session-3, .ak-session-4, .ak-session-6 { width: 100%; max-width: 100%; box-sizing: border-box; } } /* Session 1 premium scroll transition. */ @media screen and (min-width: 1201px) { .ak-flow.ak-flow-title .ak-product-title, .ak-flow.ak-session-1-visual-pinned .ak-product-title { transform: translate3d( -50%, calc(-50% - var(--ak-session-1-scroll-progress, 0) * 134px), 0 ) !important; will-change: transform; } .ak-product-split .ak-session-one-room-placement { transform: translate3d( -50%, calc(-50% - var(--ak-session-1-scroll-progress, 0) * 26px), 0 ) scale(calc(1 - var(--ak-session-1-scroll-progress, 0) * .06)) !important; transform-origin: center center !important; will-change: transform; } .ak-flow.ak-session-1-visual-pinned .ak-flow-scroll-cue { opacity: calc(1 - var(--ak-session-1-scroll-progress, 0)) !important; transform: translate3d(-50%, calc(12px - var(--ak-session-1-scroll-progress, 0) * 10px), 0) !important; } .ak-flow .product-media-container::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .022); opacity: var(--ak-session-1-scroll-progress, 0); pointer-events: none; } } .ak-mobile-builder-price { display: inline-block !important; opacity: 1 !important; visibility: visible !important; font-variant-numeric: tabular-nums; transition: none !important; } @media (min-width: 1201px) { html body .ak-product-split.ak-flow .ak-flow-from-price, html body .ak-product-split.ak-flow .ak-product-total-area > .ak-size-frozen-price { display: none !important; } html body .ak-product-split.ak-flow .ak-product-total-area .wcpa_price_outer, html body .ak-product-split.ak-flow .ak-product-total-area .wcpa_price_outer * { visibility: hidden !important; opacity: 0 !important; } } @media (min-width: 1201px) { html body .ak-flow:not(.ak-flow-has-size) .ak-flow-from-price { display: none !important; } html body .ak-flow:not(.ak-flow-has-size) .ak-product-total-area *:not(.ak-desktop-animated-price) { visibility: hidden !important; } html body .ak-flow:not(.ak-flow-has-size) .ak-product-total-area .wcpa_total::before { visibility: visible !important; } } @media (min-width: 1201px) { .ak-product-split .ak-session-one-room-placement { --ak-session-one-base-height: min(calc(100% - 14vh), 78%); --ak-session-one-height-scale: 0.95; height: calc(var(--ak-session-one-base-height) * var(--ak-session-one-height-scale)) !important; } .ak-product-split .ak-session-one-room-placement[data-ak-room-format="square"] { --ak-session-one-height-scale: calc(0.95 * 8 / 10); } .ak-product-split .ak-session-one-room-placement[data-ak-room-format="landscape"] { --ak-session-one-height-scale: calc(0.95 * 8 / 10 * 1.05); } } [data-ak-room-scene="session-2"]:is( [data-ak-room-frame-kind="wood"], [data-ak-room-frame-kind="alu"], [data-ak-room-has-passepartout="true"] ) .ak-room-preview__crop::before { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(57, 54, 54, 0.04); transform: scale(var(--ak-room-frame-scale, 1)); transform-origin: center; pointer-events: none; } :is( [data-ak-room-scene="session-4-wall-2"], [data-ak-room-scene="session-4-wall-3"] ):is( [data-ak-room-frame-kind="wood"], [data-ak-room-frame-kind="alu"], [data-ak-room-has-passepartout="true"] ) .ak-room-preview__crop::before { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(75, 37, 48, 0.09); transform: scale(var(--ak-room-frame-scale, 1)); transform-origin: center; pointer-events: none; } [data-ak-room-scene="session-4-wall-2"]:is( [data-ak-room-frame-kind="wood"], [data-ak-room-frame-kind="alu"], [data-ak-room-has-passepartout="true"] ) .ak-room-preview__crop::before { background-image: linear-gradient( 60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.12) 100% ) !important; } [data-ak-room-scene="session-4-wall-3"]:is( [data-ak-room-frame-kind="wood"], [data-ak-room-frame-kind="alu"], [data-ak-room-has-passepartout="true"] ) .ak-room-preview__crop::before { background-image: linear-gradient( 70deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.12) 100% ) !important; } [data-ak-room-frame-kind="alu"][data-ak-room-has-passepartout="false"] .ak-room-preview__composition { -webkit-clip-path: inset(1px); clip-path: inset(1px); } [data-ak-room-scene="session-2"] .ak-room-preview__crop { filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, 0.18)) drop-shadow(0 -5px 4px rgba(0, 0, 0, 0.18)) !important; } .ak-session-4 .ak-room-pair__panel { transform: translate3d(0, 50px, 0); transition: opacity 950ms cubic-bezier(.22, 1, .36, 1), transform 1150ms cubic-bezier(.22, 1, .36, 1); } .ak-session-4.is-visible .ak-room-pair__panel:last-child { transition-delay: 200ms; } .ak-session-3[data-ak-scroll-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } /* Shared session-one shadow, matching the existing desktop rule. */ .ak-product-split .ak-session-one-room-placement .ak-room-preview__crop, [data-ak-room-options="session-one"] .ak-room-preview__crop { filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .15)) !important; } [data-ak-room-scene="session-5"]:is( [data-ak-room-frame-kind="wood"], [data-ak-room-frame-kind="alu"], [data-ak-room-has-passepartout="true"] ) .ak-room-preview__crop::before { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(75, 37, 48, 0.09); background-image: linear-gradient( 70deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.12) 100% ); transform: scale(var(--ak-room-frame-scale, 1)); transform-origin: center; pointer-events: none; } /* Desktop format changes must not resize the surrounding document. */ @media screen and (min-width: 1201px) { html body .ak-product-split, html body .ak-session-story { overflow-anchor: none; } html body .ak-session-3 .ak-session-3__items { height: var(--ak-session-3-stage-height, var(--ak-session-3-height, auto)); min-height: var(--ak-session-3-stage-height, var(--ak-session-3-height, 0px)); align-items: center; justify-content: center; } } @media screen and (min-width: 1201px) { .ak-session-6 { --ak-title-box-height: calc(44px / 3 * 4); padding-bottom: calc( var(--ak-bottom-menu-height, 44px) * 2 + 86px + 58px - var(--ak-title-box-height) ); } .ak-session-6__title, .ak-session-6__grid { position: relative; top: var(--ak-related-alignment-shift, 0px); } .ak-session-6__visual { height: var(--ak-related-visual-height, 500px); min-height: 0; padding: 60px; box-sizing: border-box; overflow: hidden; } .ak-session-6 [data-ak-room-display="card"] { --ak-poster-short-side: min( 205.01px, calc(27.6667cqw - 99.6px) ); } .ak-session-6__name { height: var(--ak-title-box-height); min-height: 0; padding: 0; box-sizing: border-box; } .ak-session-4 .ak-room-pair__panel { padding: 60px !important; } .ak-session-6::after { height: calc( var(--ak-bottom-menu-height, 44px) * 2 + 86px + 58px - var(--ak-title-box-height) ); } } /* Mobile related products use the approved Simple-product geometry. */ @media screen and (max-width: 1200px) { html body .ak-session-story section.ak-session-6 { position: relative !important; z-index: 2 !important; --ak-related-bottom-space: calc( 129px + var(--ak-mobile-bottom-nav-height, 44px) + var(--ak-frame, 15px) + 20px ) !important; width: calc(100dvw - var(--ak-frame, 15px) - var(--ak-frame, 15px)) !important; margin: 0 0 0 var(--ak-frame, 15px) !important; padding: 0 0 var(--ak-related-bottom-space) !important; background: var(--ak-wall) !important; border: 0 !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__title { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 112px !important; min-height: 112px !important; margin: 0 !important; padding: 16px !important; overflow: hidden !important; box-sizing: border-box !important; background: var(--ak-wall) !important; border-top: 1px solid var(--ak-line) !important; border-bottom: 1px solid var(--ak-line) !important; line-height: 1 !important; letter-spacing: .02em !important; white-space: nowrap !important; opacity: 1 !important; transform: none !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; height: auto !important; gap: 0 !important; border: 0 !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__card:not([hidden]) { display: grid !important; grid-template-rows: minmax(0, auto) auto !important; width: 100% !important; height: auto !important; border: 0 !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__visual { position: relative !important; display: grid !important; place-items: center !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 60px !important; box-sizing: border-box !important; overflow: visible !important; background: var(--ak-wall) !important; border-bottom: 0 !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__visual::before, html body .ak-session-story section.ak-session-6 .ak-session-6__visual::after { content: none !important; position: absolute !important; z-index: 0 !important; display: none !important; background: var(--ak-line) !important; pointer-events: none !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__visual::before { top: calc(50% - .5px) !important; right: 0 !important; left: 0 !important; height: 1px !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__visual::after { top: 0 !important; bottom: 0 !important; left: 50% !important; width: 1px !important; } html body .ak-session-story section.ak-session-6 .ak-poster-related-image-frame { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; box-sizing: border-box !important; background: var(--ak-wall) !important; border: 0 !important; } html body .ak-session-story section.ak-session-6 .ak-poster-related-image-frame [data-ak-room-display="card"] { --ak-poster-short-side: min(32vw, 136px) !important; max-width: 82% !important; max-height: 82% !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__name { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; width: 100% !important; height: 54.4px !important; min-height: 54.4px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: var(--ak-wall) !important; border-top: 1px solid var(--ak-line) !important; border-bottom: 1px solid var(--ak-line) !important; font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: var(--ak-our-text-thin-size) !important; font-weight: var(--ak-our-text-thin-weight) !important; line-height: 1 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } html body .ak-session-story section.ak-session-6 :is( .ak-session-6__product-title, .ak-session-6__collection-title ) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: hidden !important; color: #000 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; text-overflow: ellipsis !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__product-title { font-weight: var(--ak-font-weight-strong) !important; } html body .ak-session-story section.ak-session-6 .ak-session-6__collection-title { border-left: 1px solid var(--ak-line) !important; font-weight: var(--ak-font-weight-regular) !important; } } @media screen and (min-width: 1201px) { html body section.ak-session-6 .ak-session-6__title { --ak-heading-grid-rows: 9; --ak-heading-edge-cell: calc(44px / 3); --ak-heading-height: calc( var(--ak-heading-edge-cell) * var(--ak-heading-grid-rows) ); --ak-heading-padding: 15px; display: flex !important; align-items: center !important; justify-content: center !important; height: var(--ak-heading-height, auto) !important; min-height: 0 !important; padding: 0 var(--ak-heading-padding) !important; } .ak-session-6__title > .ak-title-fit { flex-shrink: 0; } } /* ===================================================== OTHER VIBES — EXACT SIMPLE PRODUCT COMPONENT Posters uses the same wrapper, media, type and hover contract as Simple. ===================================================== */ @media screen and (min-width: 1201px) { html body .ak-simple-related-shell { --ak-session-side-inset: 0px; position: relative !important; z-index: 20 !important; width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-right: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; background: var(--ak-wall) !important; } html body .ak-simple-related-shell > .ak-session-6 { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; border-top-color: var(--ak-line) !important; background-clip: padding-box !important; top: var(--ak-related-section-shift, 0px) !important; transform: none !important; } html body .ak-simple-related-shell > .ak-session-6::before { content: none !important; display: none !important; } html body .ak-simple-related-shell > section.ak-session-6 .ak-session-6__title { height: var(--ak-related-heading-height, 132px) !important; } html body .ak-simple-related-shell > section.ak-session-6 :is( .ak-session-6__title, .ak-session-6__grid ) { top: 0 !important; } html body .ak-simple-related-shell > section.ak-session-6 .ak-session-6__grid { transform: translateY( var(--ak-related-grid-pixel-phase, 0px) ) !important; } html body .ak-simple-related-shell .ak-session-6__visual { position: relative !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; place-items: stretch !important; } html body .ak-simple-related-shell .ak-session-6__visual::before, html body .ak-simple-related-shell .ak-session-6__visual::after { content: ""; position: absolute; z-index: 0; display: block; background: var(--ak-line); pointer-events: none; } html body .ak-simple-related-shell .ak-session-6__visual::before { content: none !important; display: none !important; } html body .ak-simple-related-shell .ak-session-6__visual::after { top: 0; bottom: 0; left: var(--ak-name-divider-left, 50%); width: 1px; } html body .ak-simple-related-shell .ak-simple-related-image-frame { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; width: var(--ak-related-frame-size, 80%) !important; height: var(--ak-related-frame-size, 80%) !important; max-width: none !important; max-height: none !important; aspect-ratio: 1 / 1 !important; justify-self: center !important; align-self: center !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border: 1px solid var(--ak-line) !important; box-sizing: border-box !important; background: var(--ak-wall) !important; color: inherit !important; text-decoration: none !important; } /* Posters keep their original framed-art renderer, but it sits inside the same bordered product box as before. */ html body .ak-simple-related-shell .ak-poster-related-image-frame { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; width: var(--ak-related-frame-size, 80%) !important; height: var(--ak-related-frame-size, 80%) !important; max-width: none !important; max-height: none !important; aspect-ratio: 1 / 1 !important; justify-self: center !important; align-self: center !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border: 1px solid var(--ak-line) !important; box-sizing: border-box !important; background: var(--ak-wall) !important; color: inherit !important; text-decoration: none !important; } html body .ak-simple-related-shell .ak-poster-related-image-frame [data-ak-room-display="card"][data-ak-room-format="portrait"] { width: auto !important; height: 75% !important; max-width: 100% !important; max-height: 75% !important; } html body .ak-simple-related-shell .ak-poster-related-image-frame [data-ak-room-display="card"][data-ak-room-format="landscape"] { width: 75% !important; height: auto !important; max-width: 75% !important; max-height: 100% !important; } html body .ak-simple-related-shell .ak-poster-related-image-frame [data-ak-room-display="card"][data-ak-room-format="square"] { width: var(--ak-related-square-art-width, 53.571%) !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; } html body .ak-simple-related-shell .ak-simple-related-product-image { display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: center !important; } html body .ak-simple-related-shell .ak-simple-related-image-frame[data-ak-related-format="portrait"] .ak-simple-related-product-image { width: auto !important; height: 75% !important; max-width: 100% !important; max-height: 75% !important; } html body .ak-simple-related-shell .ak-simple-related-image-frame[data-ak-related-format="landscape"] .ak-simple-related-product-image { width: 75% !important; height: auto !important; max-width: 75% !important; max-height: 100% !important; } html body .ak-simple-related-shell .ak-simple-related-image-frame[data-ak-related-format="square"] .ak-simple-related-product-image { width: var(--ak-related-square-art-width, 53.571%) !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; } html body .ak-simple-related-shell :is( .ak-session-6__title, .ak-session-6__title > .ak-title-fit ) { font-family: "neue-haas-grotesk-display", sans-serif !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } html body .ak-simple-related-shell .ak-session-6__name { font-family: "neue-haas-grotesk-display", sans-serif !important; color: var(--ak-fat) !important; } html body .ak-simple-related-shell .ak-session-6__product-title { font-size: var(--ak-our-text-strong-size) !important; font-weight: var(--ak-our-text-strong-weight) !important; letter-spacing: .04em !important; text-transform: none !important; } html body .ak-simple-related-shell .ak-session-6__collection-title { font-size: var(--ak-our-text-thin-size) !important; font-weight: var(--ak-our-text-thin-weight) !important; letter-spacing: .04em !important; text-transform: none !important; } html body .ak-simple-related-shell :is( .ak-session-6__product-title, .ak-session-6__collection-title ) { color: inherit !important; text-decoration: none !important; } } @media screen and (max-width: 1200px) { html body .ak-simple-related-shell { position: relative; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } } @media screen and (min-width: 1201px) and (hover: hover) { html body .ak-simple-related-shell .ak-simple-related-product-image { transition: transform 420ms cubic-bezier(.22, 1, .36, 1) !important; transform-origin: center !important; } html body .ak-simple-related-shell .ak-simple-related-image-frame:hover .ak-simple-related-product-image { transform: scale(1.035) !important; } html body .ak-simple-related-shell :is( .ak-session-6__product-title, .ak-session-6__collection-title ) { transition: box-shadow 240ms cubic-bezier(.22, 1, .36, 1) !important; } html body .ak-simple-related-shell .ak-session-6__product-title:hover, html body .ak-simple-related-shell .ak-session-6__collection-title:hover { box-shadow: inset 0 -4px 0 var(--ak-black) !important; } } /* ===================================================== POSTERS — PRODUCT SPECS OVER SESSION 3 (DESKTOP ONLY) The title copies Simple's live menu-aligned width and fitted type. The copy occupies the left half of the brown artwork session and keeps only its content height, with matching top/bottom padding. ===================================================== */ .ak-posters-product-specs { display: none; } @media screen and (min-width: 1201px) { /* Keep the sticky apartment visible in every gap around Product specs. Only the two actual content boxes are white. */ html body .ak-session-story > .ak-posters-session-stack { background: transparent; margin-top: var(--ak-posters-story-overlap, 0px); } html body .ak-session-3 { position: relative; overflow: hidden; border-bottom: 1px solid var(--ak-line); } html body .ak-posters-session-stack .ak-posters-product-specs { position: relative; z-index: 5; display: block; width: 100%; margin: 0 0 -1px; pointer-events: none; } html body .ak-posters-product-specs__label { display: flex; align-items: center; width: var(--ak-posters-specs-label-width, 37.5%); height: var(--ak-posters-specs-label-height, 160px); margin: 0; padding: var(--ak-posters-specs-label-padding, 20px); overflow: hidden; box-sizing: border-box; background: var(--ak-wall); border: 1px solid var(--ak-line); border-left: 0; color: #000; font-family: "neue-haas-grotesk-display", sans-serif; font-size: var(--ak-posters-specs-label-size, 82px); font-weight: 600; line-height: 1; letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; } html body .ak-posters-product-specs__copy { width: calc(50% + 1px); height: auto; margin: -1px 0 0; padding: 37px 44px; box-sizing: border-box; background: var(--ak-wall); border-top: 1px solid var(--ak-line); border-right: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); } html body .ak-posters-product-specs__text, html body .ak-posters-product-specs__text p { width: 100%; margin: 0; color: #000; font-family: "neue-haas-grotesk-display", sans-serif; font-size: 13px !important; font-weight: var(--ak-font-weight-regular) !important; line-height: calc(1.17em + 3px) !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-align: justify !important; text-align-last: auto !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; -webkit-hyphens: none !important; hyphens: none !important; } html body .ak-posters-product-specs__text *, html body .ak-posters-product-specs__text p * { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } html body .ak-posters-product-specs__text > :first-child { margin-top: 0 !important; } html body .ak-posters-product-specs__text > :last-child { margin-bottom: 0 !important; } /* The former full-width Artwork Details block remains available to the untouched mobile layout, but is replaced by Product specs on desktop. */ html body .ak-posters-session-stack .ak-session-general { display: none !important; } } /* ===================================================== POSTER OPTIONS — SAME STACKED BLOCK MOTION AS THE MENU ===================================================== */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow .ak-desktop-option-stack { height: calc( var(--ak-option-row-count, 1) * var(--ak-option-cell-height, 39px) + 1px ) !important; overflow: hidden !important; overflow: clip !important; box-shadow: none !important; } html body .ak-product-split.ak-flow .ak-desktop-option-rows { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; overflow: hidden !important; overflow: clip !important; overscroll-behavior: none !important; scrollbar-width: none !important; } html body .ak-product-split.ak-flow .ak-desktop-option-rows::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } html body .ak-product-split.ak-flow .ak-desktop-option-row { position: absolute !important; right: 0 !important; bottom: calc( var(--ak-option-row-index, 0) * var(--ak-option-cell-height, 39px) ) !important; left: 0 !important; width: 100% !important; height: calc(var(--ak-option-cell-height, 39px) + 1px) !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; opacity: 1 !important; visibility: hidden !important; pointer-events: none !important; clip-path: none !important; z-index: calc( var(--ak-option-row-count, 1) - var(--ak-option-row-index, 0) ) !important; --ak-option-out-delay: calc( ( var(--ak-option-row-count, 1) - 1 - var(--ak-option-row-index, 0) ) * 40ms ); transform: translate3d( 0, calc( (var(--ak-option-row-index, 0) + 1) * var(--ak-option-cell-height, 39px) ), 0 ) !important; transition: transform 40ms cubic-bezier(.32, 0, .12, 1) var(--ak-option-out-delay), visibility 0s linear calc(var(--ak-option-out-delay) + 40ms), background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important; } html body .ak-product-split.ak-flow { --ak-choice-marker-width: var(--ak-option-cell-height, 39px) !important; } html body .ak-product-split.ak-flow button.ak-desktop-option-row::before { width: var(--ak-choice-marker-width) !important; height: 100% !important; } html body .ak-product-split.ak-flow .ak-desktop-option.is-open .ak-desktop-option-row { visibility: visible !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) !important; transition: transform 40ms cubic-bezier(.32, 0, .12, 1) calc(var(--ak-option-row-index, 0) * 40ms), visibility 0s linear 0s, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important; } @media (prefers-reduced-motion: reduce) { html body .ak-product-split.ak-flow .ak-desktop-option-row, html body .ak-product-split.ak-flow .ak-desktop-option.is-open .ak-desktop-option-row { transition-duration: 1ms, 0s, 1ms, 1ms, 1ms !important; transition-delay: 0s !important; } } } /* Poster choices stay white. Hover draws the same black rule from below, while ADD TO CART remains white and starts pulsing after the first choice. */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart), html body .ak-product-split.ak-flow .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart]):hover, html body .ak-product-split.ak-flow .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart]):focus, html body .ak-product-split.ak-flow .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart]):active { background: var(--ak-wall) !important; color: var(--ak-black) !important; } html body .ak-product-split.ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart) { animation: akChoiceLinePulse 1.45s ease-in-out infinite !important; } } @media screen and (min-width: 1201px) and (hover: hover) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase :is( .ak-desktop-option-trigger, .ak-flow-units button ) { transition: box-shadow 240ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease, color 180ms ease !important; } html body .ak-product-split.ak-flow :is( .ak-desktop-option-trigger, .ak-flow-units button ):hover { animation: none !important; background: var(--ak-wall) !important; color: var(--ak-black) !important; box-shadow: inset 0 -4px 0 var(--ak-black) !important; } /* Choice hovers belong only to the label cells. The marker/X squares remain visually quiet, while the line meets both label-cell borders. */ html body .ak-product-split.ak-flow button.ak-desktop-option-row, html body .ak-product-split.ak-flow .ak-flow-units button { box-shadow: none !important; background-image: none !important; } html body .ak-product-split.ak-flow button.ak-desktop-option-row::after, html body .ak-product-split.ak-flow .ak-flow-units button::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; left: var(--ak-choice-marker-width, var(--ak-bottom-menu-height, 44px)) !important; height: var(--ak-hover-rule-height, 4px) !important; background: var(--ak-hover-rule-color, var(--ak-black)) !important; pointer-events: none !important; transform: scaleX(0) !important; transform-origin: left bottom !important; transition: transform 200ms ease !important; z-index: 2 !important; } html body .ak-product-split.ak-flow .ak-flow-units button { position: relative !important; } html body .ak-product-split.ak-flow button.ak-desktop-option-row:hover::after, html body .ak-product-split.ak-flow .ak-flow-units button:hover::after { transform: scaleX(1) !important; } } @media screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) { html body .ak-product-split.ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart) { animation: none !important; box-shadow: inset 0 -4px 0 var(--ak-black) !important; } } /* This must remain last: later legacy rules may not restart either pulse. */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow.ak-flow-ready .ak-desktop-option-trigger.is-ak-choice-cta, html body .ak-product-split.ak-flow.ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart) { animation: none !important; transition: none !important; box-shadow: inset 0 calc(-1 * var(--ak-choice-pulse-size)) 0 rgba(0, 0, 0, var(--ak-choice-pulse-opacity)) !important; } } /* A successful cart update adds .ak-product-is-in-cart. At that point the purchase prompt has done its job, so its pulsing rule disappears. */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow.ak-product-is-in-cart, html body.ak-desktop-cart-is-open .ak-product-split.ak-flow { --ak-choice-pulse-opacity: 0 !important; } html body .ak-product-split.ak-flow.ak-product-is-in-cart .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart), html body.ak-desktop-cart-is-open .ak-product-split.ak-flow .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart) { animation: none !important; transition: none !important; box-shadow: none !important; } } /* ===================================================== DESKTOP PRODUCT MENU TYPOGRAPHY Posters and Simple share the carousel control system. Every visible item matches the single-level menu exactly. ===================================================== */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase :is( .ak-flow-gallery-trigger, .ak-flow-gallery-trigger > span:first-child, .ak-desktop-option-trigger, button.ak-desktop-option-row, button.ak-desktop-option-row > span, .ak-flow-units button, .ak-product-total-area, .ak-product-total-area .wcpa_total::before, .ak-product-add-to-cart-area button[name="add"], .ak-product-add-to-cart-area .add-to-cart, .ak-simple-grid-field, .ak-simple-product-name-field, .ak-simple-total-display ) { font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: var(--ak-our-text-thin-size) !important; font-weight: var(--ak-our-text-thin-weight) !important; line-height: 1.2 !important; letter-spacing: var(--ak-our-text-thin-spacing) !important; text-transform: var(--ak-our-text-thin-transform) !important; } html body .ak-product-split.ak-flow :is( .ak-flow-gallery-trigger > span:first-child, .ak-desktop-option-trigger.is-ak-choice-cta, button.ak-desktop-option-row.is-selected, button.ak-desktop-option-row.is-selected > span, .ak-flow-units button[aria-pressed="true"], .ak-product-add-to-cart-area button[name="add"], .ak-product-add-to-cart-area .add-to-cart ) { font-size: var(--ak-our-text-strong-size) !important; font-weight: var(--ak-our-text-strong-weight) !important; letter-spacing: var(--ak-our-text-strong-spacing) !important; text-transform: var(--ak-our-text-strong-transform) !important; } /* Session 1 keeps its existing responsive percentage/viewport size, but uses the regular single-level-menu weight. */ html body .ak-product-split.ak-flow .ak-product-title, html body .ak-product-split.ak-flow .ak-product-title * { font-family: "neue-haas-grotesk-display", sans-serif !important; font-weight: var(--ak-font-weight-regular) !important; } /* WCPA creates this label as a pseudo-element, so it needs the same explicit type declaration as the visible product controls. */ html body .ak-product-split.ak-flow .ak-flow-purchase .ak-product-total-area .wcpa_total::before { content: "Total" !important; font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: var(--ak-our-text-thin-size) !important; font-weight: var(--ak-our-text-thin-weight) !important; line-height: 1.2 !important; letter-spacing: var(--ak-our-text-thin-spacing) !important; text-transform: var(--ak-our-text-thin-transform) !important; } html body .ak-product-split.ak-flow :is( .ak-desktop-animated-price, .ak-flow-from-price, .ak-size-frozen-price ) { font-size: var(--ak-our-text-thin-size) !important; } } /* ===================================================== FINAL DESKTOP PRODUCT-CONTROL PARITY Explore's label and arrow are independent hover cells. Posters uses the exact same uppercase menu typography as Simple, including chooser rows. ===================================================== */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase :is( .ak-flow-gallery-trigger, .ak-flow-gallery-trigger > span, .ak-desktop-option-trigger, button.ak-desktop-option-row, button.ak-desktop-option-row > span, .ak-flow-units button, .ak-flow-unit-label, .ak-product-total-area, .ak-product-total-area *, .ak-product-total-area .wcpa_total::before, .ak-desktop-animated-price, .ak-flow-from-price, .ak-size-frozen-price, .ak-product-add-to-cart-area button[name="add"], .ak-product-add-to-cart-area .add-to-cart ) { font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .11em !important; text-transform: uppercase !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-product-total-area :is( .ak-desktop-animated-price, .ak-flow-from-price, .ak-size-frozen-price ) { font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .11em !important; text-transform: uppercase !important; } } /* Poster chooser labels match the side menu's small submenu boxes. */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-desktop-options :is( button.ak-desktop-option-row, button.ak-desktop-option-row > span, .ak-flow-units button, .ak-flow-unit-label ) { font-family: var(--ak-menu-font) !important; font-size: clamp(9px, .65vw, 13px) !important; font-weight: var(--ak-font-weight-regular) !important; line-height: 1 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } /* Exact Simple TOTAL typography: label .11em, price .09em. */ html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-product-total-area, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-product-total-area * { font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: 11.5px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1.2 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-product-total-area .wcpa_total::before { content: "TOTAL" !important; font-family: "neue-haas-grotesk-display", sans-serif !important; font-size: 11.5px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1.2 !important; letter-spacing: .11em !important; text-transform: uppercase !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-product-total-area :is( .ak-desktop-animated-price, .ak-flow-from-price, .ak-size-frozen-price, .wcpa_price_outer ) { font-size: 11.5px !important; line-height: 1.2 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } } @media screen and (min-width: 1201px) and (hover: hover) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger:hover, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger:hover > span:first-child, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger > span { background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger > span { position: relative !important; box-shadow: none !important; transition: box-shadow 200ms ease !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger > span:first-child:hover, html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-purchase .ak-flow-gallery-trigger > .ak-flow-gallery-arrow:hover { box-shadow: inset 0 -4px 0 var(--ak-hover-rule-color, var(--ak-hover, #72e946)) !important; } } /* The mobile gallery title is separate from the desktop gallery layout. */ @media screen and (min-width: 1201px) { html body #MainContent .ak-posters-visuals-label { display: none !important; } } /* Grouping is structural on mobile; desktop retains its original layout. */ .ak-posters-mobile-story, .ak-posters-mobile-visuals { display: contents; } /* A chosen poster uses the black purchase action and the yellow hover. */ @media screen and (min-width: 1201px) { html body .ak-product-split.ak-flow[data-ak-posters-product="true"].ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart) { background: var(--ak-black) !important; color: var(--ak-wall) !important; animation: none !important; box-shadow: none !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"].ak-flow-has-size .ak-flow-purchase .ak-product-add-to-cart-area :is(button[name="add"], .add-to-cart):hover { background: var(--ak-cart) !important; color: var(--ak-black) !important; } /* Use the exact 11px diagonal strokes of the selected choice marker. */ html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-units button[aria-pressed="true"] .ak-flow-unit-indicator::before { inset: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(45deg, transparent calc(50% - .5px), var(--ak-black) calc(50% - .5px), var(--ak-black) calc(50% + .5px), transparent calc(50% + .5px)) center / 11px 11px no-repeat, linear-gradient(-45deg, transparent calc(50% - .5px), var(--ak-black) calc(50% - .5px), var(--ak-black) calc(50% + .5px), transparent calc(50% + .5px)) center / 11px 11px no-repeat !important; transform: none !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] .ak-flow-units button[aria-pressed="true"] .ak-flow-unit-indicator::after { content: none !important; } } /* Keep the opening heading and apartment behind the scrolling story, as on Simple. */ @media screen and (min-width: 1201px) { html body.ak-page-product:has(.ak-product-split[data-ak-posters-product="true"]), html body #MainContent:has(.ak-product-split[data-ak-posters-product="true"]) { overflow: visible !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"] { overflow: visible !important; } html body .ak-product-split.ak-flow[data-ak-posters-product="true"].ak-flow-background > .ak-session-one-heading { position: fixed !important; top: var(--ak-flow-top-fixed) !important; right: var(--ak-flow-outer-inset, 15px) !important; left: var(--ak-flow-outer-inset, 15px) !important; width: auto !important; z-index: 10 !important; transition: none !important; } html body .ak-product-split[data-ak-posters-product="true"] ~ .ak-session-story > .ak-session-2-shell { position: sticky !important; top: var(--ak-session-2-top, 160px) !important; z-index: 1; } html body .ak-product-split[data-ak-posters-product="true"] ~ .ak-session-story > .ak-session-2-shell > .ak-session-2 { position: relative !important; inset: auto !important; width: 100% !important; transform: none !important; } } /* Separate transparent layers: the entire native canvas remains visible. Registration maps the frame's physical outer edges to the poster stage; transparent padding is positioned, never clipped or baked into a new asset. */ [data-ak-room-layered="true"] { --ak-layer-width: 182.71119843%; --ak-layer-height: 131.17066291%; --ak-layer-left: -41.35559921%; --ak-layer-top: -15.58533145%; } [data-ak-room-layered="true"][data-ak-room-format="landscape"] { --ak-layer-width: 131.17066291%; --ak-layer-height: 182.71119843%; --ak-layer-left: -15.58533145%; --ak-layer-top: -41.35559921%; } [data-ak-room-layered="true"][data-ak-room-format="square"] { --ak-layer-width: 182.89085546%; --ak-layer-height: 182.89085546%; --ak-layer-left: -41.44542773%; --ak-layer-top: -41.44542773%; } html body [data-ak-room-layered="true"] :is(.ak-room-preview__frame, .ak-room-preview__mount) { position: absolute !important; inset: auto !important; left: var(--ak-layer-left) !important; top: var(--ak-layer-top) !important; width: var(--ak-layer-width) !important; height: var(--ak-layer-height) !important; max-width: none !important; max-height: none !important; object-fit: fill !important; transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; pointer-events: none; } html body [data-ak-room-layered="true"] .ak-room-preview__mount { z-index: 2 !important; } html body [data-ak-room-layered="true"] .ak-room-preview__frame { z-index: 3 !important; } html body [data-ak-room-layered="true"] .ak-room-preview__mount:not([src]) { display: none !important; } /* Product specs preserves the paragraphs and emphasis authored in Shopify. */ @media screen and (min-width: 1201px) { html body .ak-posters-product-specs__text :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) { margin: 0 0 1.2em !important; } html body .ak-posters-product-specs__text :is(strong, b, h1, h2, h3, h4, h5, h6) { font-weight: 600 !important; font-size: 15px !important; } html body .ak-posters-product-specs__text > :last-child { margin-bottom: 0 !important; } } /* The final apartment and Vibes form one normal-flow cover above the pair. */ @media screen and (min-width:1201px) { html body .ak-session-story [data-ak-session-5-shell] { position:relative !important; top:auto !important; height:auto !important; min-height:0 !important; z-index:2 !important; background:var(--ak-wall); } html body .ak-session-story [data-ak-session-5-shell] .ak-session-5 { position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:auto !important; transform:none !important; } html body .ak-session-story .ak-simple-related-shell > .ak-session-6 { top:0 !important; } } html body .ak-session-story [data-ak-session-5-shell] .ak-session-5 { border-bottom:0 !important; } /* Keep the related-products heading one weight lighter on both product types. */ html body.ak-page-inner #MainContent section.ak-session-6 .ak-session-6__title, html body.ak-page-inner #MainContent section.ak-session-6 .ak-session-6__title > .ak-title-fit { font-weight: 500 !important; } /* Snap only the painted top rule; keep the room and Vibes in their own flow. */ @media screen and (min-width: 1201px) { html body.ak-page-inner .ak-simple-related-shell > section.ak-session-6 { border-top-color: transparent !important; } html body.ak-page-inner .ak-simple-related-shell > section.ak-session-6::before { content: "" !important; display: block !important; position: absolute !important; top: calc(var(--ak-related-top-rule-offset, 0px) - 1px) !important; left: 0 !important; right: 0 !important; height: 1px !important; background: var(--ak-line) !important; pointer-events: none !important; z-index: 10 !important; } } /* Locked poster choices remain legible without fading swatches or borders. */ @media screen and (min-width: 1201px) { html body:not(#ak-hover-rule-authority):not(#ak-cart-hover-authority):not(#ak-hover-surface):not(#ak-locked-choice-authority) .ak-product-split[data-ak-posters-product="true"] button.ak-desktop-option-row:is(:disabled, [data-ak-requires-size="true"]) { background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; cursor: not-allowed; } html body:not(#ak-hover-rule-authority):not(#ak-cart-hover-authority):not(#ak-hover-surface):not(#ak-locked-choice-authority) .ak-product-split[data-ak-posters-product="true"] button.ak-desktop-option-row:is(:disabled, [data-ak-requires-size="true"]) > span { color: var(--ak-black, #000) !important; -webkit-text-fill-color: var(--ak-black, #000) !important; opacity: .2 !important; } } /* Let the complete apartment pair pass before pinning its bottom at the purchase controls. The following apartment keeps its existing cover layer. */ @media screen and (min-width:1201px) { html body .ak-session-story .ak-session-4 { top:var(--ak-session-4-bottom-pin-top) !important; } }