/** Shopify CDN: Minification failed Line 3246:0 Expected "}" to go with "{" **/ /* ===================================================== ARTSY__KID POSTERS — MOBILE / TABLET MAX WIDTH: 1200PX FLOW: 01 — TITLE 02 — HATCH / PRODUCT INFO 03 — SQUARE PRODUCT MEDIA 04 — COSTUMIZE / TOTAL 05 — ADD TO CART ===================================================== */ @media screen and (max-width: 1200px) { /* ===================================================== 00 — MOBILE VARIABLES HØJDE ===================================================== */ .ak-product-split { --ak-mobile-title-height: 70px; --ak-mobile-info-height: 44px; --ak-mobile-purchase-height: 66px; --ak-mobile-cart-height: 41px; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; background: var(--ak-wall) !important; box-sizing: border-box !important; } /* ===================================================== 01 — REMOVE DESKTOP INTRO / CONSTRUCTION ===================================================== */ .ak-product-split .ak-product-quick-loader, .ak-product-split .ak-product-bottom-hatch, .ak-product-split .ak-product-left-edge-rail, .ak-product-split .ak-product-edge-rail, .ak-product-split .ak-product-door-stage, .ak-product-split .ak-product-construction-grid, .ak-product-split .ak-product-construction-line { display: none !important; visibility: hidden !important; pointer-events: none !important; } .ak-product-split::before, .ak-product-split::after { content: none !important; display: none !important; } /* ===================================================== 02 — MAIN MOBILE FLOW ===================================================== */ .ak-product-split > data-island { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; overflow: visible !important; background: var(--ak-wall) !important; box-sizing: border-box !important; } /* ===================================================== 03 — CONTENT CONTAINER DISPLAY CONTENTS ALLOWS CHILDREN INTO MOBILE FLOW ===================================================== */ .ak-product-split .product-content-container { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: contents !important; overflow: visible !important; background: transparent !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* ===================================================== 04 — PRODUCT TITLE FIXED HEIGHT ===================================================== */ .ak-product-split .ak-product-title { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 1 !important; z-index: 5 !important; width: 100% !important; height: var(--ak-mobile-title-height) !important; min-height: var(--ak-mobile-title-height) !important; max-height: var(--ak-mobile-title-height) !important; margin: 0 !important; padding: 0 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: var(--ak-wall) !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: none !important; } .ak-product-title-mobile { display: block !important; white-space: nowrap !important; } .ak-product-title-desktop { display: none !important; } .ak-product-split .ak-product-title, .ak-product-split .ak-product-title * { font-family: var(--ak-h1-font) !important; font-size: 18px !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: center !important; text-transform: var(--ak-h1-transform) !important; color: var(--ak-h1-color) !important; } /* ===================================================== 05 — HATCH / PRODUCT INFO BAR FIXED HEIGHT ===================================================== */ .ak-product-split .ak-product-extra-content { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 2 !important; z-index: 5 !important; width: 100% !important; height: var(--ak-mobile-info-height) !important; min-height: var(--ak-mobile-info-height) !important; max-height: var(--ak-mobile-info-height) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: var(--ak-mobile-info-height) !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; background: var(--ak-wall) !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; box-sizing: border-box !important; pointer-events: auto !important; } /* ===================================================== 06 — LEFT HATCH ===================================================== */ .ak-product-split .ak-product-extra-content::before { content: "" !important; position: relative !important; grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; box-sizing: border-box !important; background: transparent var(--ak-hatch-pattern) 0 0 / var(--ak-hatch-size, 9px 9px) repeat !important; image-rendering: crisp-edges !important; } /* ===================================================== 07 — PRODUCT INFO BUTTON ===================================================== */ .ak-product-split .ak-product-information { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; height: var(--ak-mobile-info-height) !important; min-height: var(--ak-mobile-info-height) !important; max-height: var(--ak-mobile-info-height) !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: var(--ak-wall) !important; border: 0 !important; border-left: 1px solid var(--ak-line) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .ak-product-split .ak-product-information-title { width: auto !important; margin: 0 !important; padding: 0 !important; font-family: var(--ak-heading-font) !important; font-size: 11px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1 !important; letter-spacing: 0.15em !important; text-align: center !important; text-transform: uppercase !important; color: var(--ak-h2-color) !important; white-space: nowrap !important; transform: translateX(-7.5px) translateY(-1px) !important; } /* CLOSED STATE: ONLY THE PRODUCT INFO LABEL IS VISIBLE. */ .ak-product-split .ak-product-description, .ak-product-split .ak-product-information-fixed { display: none !important; } /* ===================================================== 08 — ADAPTIVE MEDIA AREA THE PREVIEW STAYS SQUARE; THE AREA MAY GROW TALLER ===================================================== */ .ak-product-split .product-media-container { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 3 !important; z-index: 2 !important; width: 100% !important; height: var(--ak-mobile-media-area-height, auto) !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; align-self: auto !important; overflow: hidden !important; background: #0000 !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ===================================================== 16 — CONFIGURATOR AREA DO NOT DISPLAY:NONE THE PRODUCT BLOCK AREA ===================================================== */ .ak-product-split .product-block-area { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ===================================================== MOBILE V3: sticky compact configurator Desktop is deliberately untouched by this block. ===================================================== */ @media screen and (max-width: 1200px) { html { --ak-mobile-bottom-nav-height: 44px; --ak-mobile-buybar-height: 128px; } .ak-product-split .product-media-container { touch-action: pan-y pinch-zoom !important; } .ak-mobile-information-stack { position: relative; z-index: 3; display: grid !important; grid-template-columns: 1fr; background: var(--ak-wall); } .ak-mobile-information-stack .ak-flow-about, .ak-mobile-information-stack .ak-product-information-fixed { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 24px 20px !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; overflow: visible !important; background: var(--ak-wall) !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } .ak-session-2-shell, .ak-session-5-shell { height: calc(100svh - var(--ak-top-menu-height, 44px) - 15px) !important; } .ak-session-2, .ak-session-5, .ak-session-5__stage { width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .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-2 .ak-room-preview__room, .ak-session-5 .ak-room-preview__room { width: 100% !important; height: 100% !important; object-fit: cover !important; } .ak-session-2 .ak-room-preview__room { object-position: 68% center !important; } .ak-session-5 .ak-room-preview__room { object-position: left center !important; } body { padding-bottom: calc(var(--ak-mobile-buybar-height) + var(--ak-mobile-bottom-nav-height) + var(--ak-frame, 15px)) !important; } } /* Final mobile configurator typography. Mirrors the desktop hierarchy, one pixel smaller, and keeps every corrected control uppercase. */ @media screen and (max-width: 1200px) { html body .ak-product-split .ak-mobile-choice-trigger { 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; letter-spacing: var(--ak-our-text-thin-spacing) !important; text-transform: var(--ak-our-text-thin-transform) !important; } html body .ak-product-split .ak-mobile-choice-trigger[aria-expanded="true"], html body .ak-product-split .ak-mobile-choice-trigger.is-active { 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; } html body .ak-product-split :is( .ak-mobile-builder-total, .ak-mobile-builder-total-label, .ak-mobile-basket-trigger, .ak-mobile-basket-label ) { font-family: "neue-haas-grotesk-display", sans-serif !important; 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; } html body .ak-product-split[data-ak-simple-product="true"] :is( .ak-mobile-builder-total-label, .ak-mobile-basket-trigger, .ak-mobile-basket-label ) { font-weight: var(--ak-font-weight-strong) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } html body .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row { 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; letter-spacing: var(--ak-our-text-thin-spacing) !important; text-transform: var(--ak-our-text-thin-transform) !important; } html body .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row.is-selected, html body .ak-product-split .ak-mobile-desktop-options .ak-flow-units button[aria-pressed="true"] { 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; } } /* ===================================================== 18 — PURCHASE ROW COSTUMIZE | TOTAL + PRICE FIXED HEIGHT ===================================================== */ .ak-product-split .ak-product-total-area { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 5 !important; z-index: 8 !important; width: 100% !important; height: var(--ak-mobile-purchase-height) !important; min-height: var(--ak-mobile-purchase-height) !important; max-height: var(--ak-mobile-purchase-height) !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: var(--ak-mobile-purchase-height) !important; align-items: stretch !important; overflow: hidden !important; visibility: visible !important; opacity: 1 !important; background: var(--ak-wall) !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; box-sizing: border-box !important; transform: none !important; } /* ===================================================== 19 — COSTUMIZE ===================================================== */ .ak-product-split .ak-product-total-area::before { content: "COSTUMIZE" !important; position: relative !important; grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 12px !important; background: var(--ak-wall) !important; border-right: 1px solid var(--ak-line) !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: center !important; text-transform: var(--ak-button-transform) !important; color: var(--ak-button-color) !important; white-space: nowrap !important; box-sizing: border-box !important; cursor: pointer !important; } /* ===================================================== 20 — PRICE SUMMARY ===================================================== */ .ak-product-split .ak-product-total-area .wcpa_price_summary { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; overflow: hidden !important; background: var(--ak-wall) !important; box-sizing: border-box !important; } /* HIDE ALL WCPA BREAKDOWN PRICES. KEEP FINAL TOTAL ONLY. */ .ak-product-split .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):not(.ak-size-frozen-price), .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 { display: none !important; } .ak-product-split .ak-product-total-area .wcpa_total { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !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-transform: uppercase !important; color: var(--ak-fatfont-color) !important; transform: none !important; } .ak-product-split .ak-product-total-area .wcpa_total::before { content: "TOTAL" !important; display: block !important; margin: 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: 1 !important; letter-spacing: var(--ak-h2-spacing) !important; text-transform: uppercase !important; color: var(--ak-h2-color) !important; } .ak-product-split .ak-product-total-area .wcpa_total > *:first-child { display: none !important; } .ak-product-split .ak-product-total-area .wcpa_total * { visibility: visible !important; opacity: 1 !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit !important; } /* ===================================================== 21 — ADD TO CART DIRECTLY UNDER PURCHASE ROW ===================================================== */ .ak-product-split .ak-product-add-to-cart-area { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 6 !important; z-index: 8 !important; width: 100% !important; height: var(--ak-mobile-cart-height) !important; min-height: var(--ak-mobile-cart-height) !important; max-height: var(--ak-mobile-cart-height) !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden !important; visibility: visible !important; opacity: 1 !important; background: var(--ak-cta-background) !important; box-sizing: border-box !important; transform: none !important; } .ak-product-split .ak-product-add-to-cart-area .add-to-cart-container { position: relative !important; width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; box-sizing: border-box !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 { appearance: none !important; -webkit-appearance: none !important; position: relative !important; width: 100% !important; height: var(--ak-mobile-cart-height) !important; min-height: var(--ak-mobile-cart-height) !important; max-height: var(--ak-mobile-cart-height) !important; margin: 0 !important; padding: 0 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: var(--ak-cta-background) !important; color: var(--ak-cta-color) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--ak-cta-font) !important; font-size: var(--ak-cta-size) !important; font-weight: var(--ak-cta-weight) !important; line-height: var(--ak-cta-line-height) !important; letter-spacing: var(--ak-cta-spacing) !important; text-align: center !important; text-transform: var(--ak-cta-transform) !important; box-sizing: border-box !important; transform: none !important; } /* ===================================================== 22 — REMOVE DESKTOP CART SPLIT EFFECT ===================================================== */ .ak-product-split .ak-product-add-to-cart-area button[name="add"]::before, .ak-product-split .ak-product-add-to-cart-area button[name="add"]::after, .ak-product-split .ak-product-add-to-cart-area .add-to-cart::before, .ak-product-split .ak-product-add-to-cart-area .add-to-cart::after { content: none !important; display: none !important; } .ak-product-split .shopify-payment-button { display: none !important; } /* ===================================================== 23 — DUPLICATE / ORIGINAL TOTAL SAFETY ===================================================== */ .ak-product-split .wcpa_price_summary:not(.ak-product-total-area .wcpa_price_summary) { visibility: hidden !important; } /* ===================================================== 24 — BOX SIZING ===================================================== */ .ak-product-split *, .ak-product-split *::before, .ak-product-split *::after { box-sizing: border-box; } } @media (max-width: 1200px) { /* The mobile purchase rows above mirror the live WCPA total and forward basket clicks to the original add-to-cart button. Keep those original controls in the DOM for state and events, but do not let their duplicate presentation add two extra flow rows. */ .ak-product-split .ak-product-total-area, .ak-product-split .ak-product-add-to-cart-area { display: none !important; } @keyframes ak-builder-attention { 0%, 100% { background-color: var(--ak-wall); } 50% { background-color: var(--ak-cart, var(--ak-wall)); } } } @media (prefers-reduced-motion: reduce) { } @media (prefers-reduced-motion: reduce) { } /* Responsive sizing inside the universal frame, never the full screen width. */ @media screen and (max-width: 1200px) { .ak-product-split { max-width: calc(100dvw - 2 * var(--ak-frame, 15px)) !important; margin-inline: auto !important; } .ak-product-split .ak-product-title-mobile { font-size: var(--ak-mobile-title-size, 20px) !important; line-height: 1.15 !important; text-wrap: balance; } } /* Height-driven gallery area and responsive title layout. */ @media screen and (max-width: 1200px) { .ak-product-split .product-media-container { width: var(--ak-mobile-media-size, 100%) !important; height: var(--ak-mobile-media-area-height, var(--ak-mobile-media-size, auto)) !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; align-self: center !important; aspect-ratio: auto !important; background: #0000 !important; } .ak-product-split .product-side-gallery-nav { height: var(--ak-mobile-media-area-height, var(--ak-mobile-media-size)) !important; } .ak-product-split .ak-product-extra-content, .ak-product-split .ak-product-extra-content button, .ak-product-split .ak-product-extra-content a { font-size: var(--ak-mobile-label-size, 11px) !important; line-height: 1.15 !important; } .ak-product-split .ak-product-title, .ak-product-split .ak-product-title * { font-size: var(--ak-mobile-title-size, 18px) !important; line-height: 1.15 !important; } } @media screen and (max-width: 1200px) and (prefers-reduced-motion: reduce) { } /* Final mobile row heights */ @media screen and (max-width: 1200px) { .ak-product-split { --ak-mobile-info-height: 52px; --ak-mobile-purchase-height: 77px; --ak-mobile-cart-height: 25px; } .ak-product-split .product-side-gallery-nav { right: 14px !important; } .ak-product-split .ak-product-information { height: 100% !important; min-height: 0 !important; max-height: none !important; display: grid !important; place-items: center !important; padding: 0 !important; } .ak-product-split .ak-product-information-title { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: center !important; font-size: 11px !important; line-height: 1 !important; } } /* COSTUMIZE: animate the visible cell itself, without a hidden overlay. */ @media screen and (max-width: 1200px) { @keyframes ak-build-visible-pulse { 0%, 100% { box-shadow: inset 0 0 0 100vmax var(--ak-wall); } 50% { box-shadow: inset 0 0 0 100vmax var(--ak-cart); } } } @media screen and (max-width: 1200px) and (prefers-reduced-motion: reduce) { } @media screen and (max-width: 1200px) { } /* New purchase controls belong exclusively to mobile/tablet. */ @media screen and (min-width: 1201px) { .ak-product-split .ak-mobile-builder-trigger, .ak-product-split .ak-mobile-basket-trigger { display: none !important; } } @media screen and (max-width: 1200px) { .ak-product-split .ak-product-information-title { font-weight: var(--ak-font-weight-strong) !important; } } /* Mobile builder internals. Panel geometry is defined in the canonical block below. */ @media screen and (max-width: 1200px) { } /* Session 1 uses the same two-layer compositor as every other session. */ @media screen and (max-width: 1200px) { .ak-product-split .ak-product-media-sources { display: none !important; } .ak-product-split .product-media-container { width: var(--ak-mobile-media-size, 100%) !important; height: var(--ak-mobile-media-area-height, var(--ak-mobile-media-size, auto)) !important; aspect-ratio: auto !important; flex: 0 0 auto !important; overflow: hidden !important; box-sizing: border-box !important; background: #0000 !important; } .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(76%, calc(100% - 48px)) !important; max-width: calc(100% - 40px) !important; aspect-ratio: var(--ak-session-one-aspect-ratio) !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } } /* Final mobile precedence for the v3 bottom sheet. */ /* Mobile sticky scenes. The configurator is defined once in the canonical mobile configurator block below. */ @media screen and (max-width: 1200px) { .ak-session-2-shell, .ak-session-5-shell { height: calc(100svh - var(--ak-top-menu-height, 44px) - 15px) !important; } .ak-session-story.is-session-2-pinned .ak-session-2 { position: fixed !important; top: calc(var(--ak-top-menu-height, 44px) + 15px) !important; } .ak-session-story.is-session-5-pinned .ak-session-5 { position: fixed !important; top: calc(var(--ak-top-menu-height, 44px) + 15px) !important; } } /* Mobile v4 corrections: desktop-identical choices and true scene cropping. */ @media screen and (max-width: 1200px) { .ak-product-split .ak-product-extra-content { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; border: 0 !important; overflow: hidden !important; } .ak-mobile-general-slot, .ak-mobile-about-slot { position: relative; z-index: 3; display: block !important; width: 100%; background: var(--ak-wall); } .ak-mobile-general-slot .ak-product-information-fixed, .ak-mobile-about-slot .ak-flow-about { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 50px !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid var(--ak-line) !important; background: var(--ak-wall) !important; color: var(--ak-black) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-sizing: border-box !important; } .ak-mobile-general-slot .ak-product-information-fixed > *, .ak-mobile-about-slot .ak-flow-about > * { width: 100% !important; max-width: 60ch !important; margin-left: auto !important; margin-right: auto !important; } .ak-mobile-general-slot .ak-product-information-fixed-title, .ak-mobile-about-slot .ak-product-information-title { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 0 24px !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; white-space: normal !important; transform: none !important; } .ak-mobile-general-slot p, .ak-mobile-about-slot .ak-product-description, .ak-mobile-about-slot .ak-product-description * { display: block !important; 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-black) !important; } .ak-mobile-general-slot p, .ak-mobile-about-slot .ak-product-description p { margin-top: 0 !important; margin-bottom: 1.2em !important; line-height: 1.6 !important; } .ak-mobile-general-slot p:last-child, .ak-mobile-about-slot .ak-product-description p:last-child { margin-bottom: 0 !important; } /* Keep each room as its original landscape scene and crop the viewport. The artwork and room therefore retain their desktop relationship. */ .ak-session-2-shell, .ak-session-5-shell { overflow: hidden !important; } .ak-session-2 { --ak-mobile-scene-width: calc((100svh - var(--ak-top-menu-height, 44px) - 15px) * 1.76615); width: var(--ak-mobile-scene-width) !important; max-width: none !important; left: calc((100vw - 30px) * .75 - var(--ak-mobile-scene-width) * .3865) !important; } .ak-session-5 { --ak-mobile-scene-width: calc((100svh - var(--ak-top-menu-height, 44px) - 15px) * 1.82270); width: var(--ak-mobile-scene-width) !important; max-width: none !important; left: calc((100vw - 30px) * .75 - var(--ak-mobile-scene-width) * .5803) !important; } .ak-session-story.is-session-2-pinned .ak-session-2, .ak-session-story.is-session-5-pinned .ak-session-5 { width: var(--ak-mobile-scene-width) !important; } .ak-session-2 .ak-room-preview__room, .ak-session-5 .ak-room-preview__room { width: 100% !important; height: 100% !important; object-fit: fill !important; object-position: center !important; } .ak-session-4 .ak-room-pair__panel { padding: 24px !important; padding: 0 !important; } /* The lead preview reaches the universal frame; no inset gutter. */ .ak-product-split .product-media-container { width: calc(100% + (2 * var(--ak-frame, 15px))) !important; margin-left: calc(-1 * var(--ak-frame, 15px)) !important; margin-right: calc(-1 * var(--ak-frame, 15px)) !important; 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; } /* The media owns this junction: one top line only. */ .ak-product-split .ak-product-title { border-bottom: 0 !important; } .ak-mobile-about-slot .ak-flow-about { border-bottom: 0 !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; border-top: 1px solid var(--ak-line) !important; box-sizing: border-box !important; } /* Native sticky is reliable in Mobile Safari and keeps the same overlay relationship as the fixed desktop implementation. */ .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; } 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 { display: none !important; visibility: hidden !important; opacity: 0 !important; position: fixed !important; inset: auto !important; } } /* Mobile presentation for the shared desktop configurator. */ @media screen and (max-width: 1200px) { @keyframes akMobileOptionSpinner { to { transform: rotate(360deg); } } } /* Mobile presentation for the shared desktop configurator. */ @media screen and (max-width: 1200px) { } /* Mobile presentation for the shared desktop configurator. */ @media screen and (max-width: 1200px) { } /* Mobile presentation for the shared desktop configurator. */ @media screen and (max-width: 1200px) { .ak-product-split .ak-mobile-purchase-row { position: fixed !important; left: var(--ak-mobile-controls-left, 15px) !important; right: auto !important; bottom: auto !important; width: var(--ak-mobile-controls-width, calc(100% - 30px)) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; z-index: 2147483645 !important; transform: none !important; } .ak-product-split .ak-mobile-purchase-row-top { top: var(--ak-mobile-controls-top) !important; display: grid !important; grid-template-columns: var(--ak-mobile-columns, repeat(3, minmax(0, 1fr))) !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; border: 0 !important; border-top: 1px solid var(--ak-line, #ccc) !important; border-bottom: 1px solid var(--ak-line, #ccc) !important; } .ak-product-split .ak-mobile-choice-trigger { appearance: none !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 4px !important; box-sizing: border-box !important; border: 0 !important; border-right: 1px solid var(--ak-line, #ccc) !important; border-radius: 0 !important; background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; font-family: var(--ak-fatfont-font, Arial, sans-serif) !important; font-size: 11px !important; font-weight: var(--ak-font-weight-regular) !important; line-height: 1 !important; letter-spacing: .12em !important; text-transform: uppercase !important; text-align: center !important; } .ak-product-split .ak-mobile-choice-trigger:last-child { border-right: 0 !important; } .ak-product-split .ak-mobile-choice-trigger > span { display: block !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; color: inherit !important; font-weight: inherit !important; } .ak-product-split .ak-mobile-purchase-row-bottom { top: calc(var(--ak-mobile-controls-top) + 46px) !important; display: block !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border: 0 !important; } .ak-product-split .ak-mobile-builder-total { display: grid !important; grid-template-columns: var(--ak-mobile-columns, repeat(3, minmax(0, 1fr))) !important; align-items: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font: 700 10px/1 var(--ak-fatfont-font, Arial, sans-serif) !important; letter-spacing: .14em !important; } .ak-product-split .ak-mobile-builder-total-label { grid-column: 1; text-align: center; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } .ak-product-split .ak-mobile-builder-price { grid-column: 3 !important; width: 100% !important; min-width: 0 !important; padding: 0 3px !important; box-sizing: border-box !important; text-align: center !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; white-space: nowrap !important; } .ak-product-split .ak-mobile-cart-row { top: calc(var(--ak-mobile-controls-top) + 82px) !important; display: block !important; height: 47px !important; min-height: 47px !important; max-height: 47px !important; border: 0 !important; } .ak-product-split .ak-mobile-basket-trigger { appearance: none !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--ak-black, #000) !important; color: var(--ak-wall) !important; font: 700 10px var(--ak-fatfont-font, Arial, sans-serif) !important; letter-spacing: .16em !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } .ak-product-split .ak-mobile-basket-label { font: inherit !important; letter-spacing: inherit !important; } .ak-product-split .ak-mobile-basket-trigger:disabled { opacity: .55 !important; } .ak-product-split .ak-mobile-basket-logo, .ak-product-split .ak-mobile-builder-cap, .ak-product-split .ak-mobile-builder-hatch, .ak-product-split .ak-mobile-builder-status { display: none !important; } .ak-product-split .ak-product-configurator-area { position: fixed !important; right: auto !important; bottom: auto !important; display: block !important; min-height: 0 !important; max-height: none !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--ak-line, #ccc) !important; box-sizing: border-box !important; background: var(--ak-wall) !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; transform: none !important; transition: none !important; z-index: 2147483646 !important; } html.ak-mobile-builder-open .ak-product-split .ak-product-configurator-area { visibility: visible !important; pointer-events: auto !important; } .ak-product-split .ak-product-configurator-area > .product-block-area { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none !important; } .ak-product-split .ak-mobile-desktop-options, .ak-product-split .ak-mobile-desktop-options .ak-desktop-option, .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-stack, .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-rows { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important; opacity: 1 !important; visibility: inherit !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option { display: none !important; } .ak-product-split[data-ak-mobile-panel="size"] .ak-mobile-desktop-options [data-ak-configurator-section="size"], .ak-product-split[data-ak-mobile-panel="frame"] .ak-mobile-desktop-options [data-ak-configurator-section="frame"], .ak-product-split[data-ak-mobile-panel="passepartout"] .ak-mobile-desktop-options [data-ak-configurator-section="passepartout"] { display: block !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-trigger, .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-status:empty { display: none !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-rows { display: grid !important; grid-auto-rows: var(--ak-mobile-option-row-height) !important; gap: 0 !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row { appearance: none !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: var(--ak-mobile-option-row-height) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 5px !important; gap: .3em !important; box-sizing: border-box !important; border: 0 !important; border-bottom: 1px solid var(--ak-line, #ccc) !important; border-radius: 0 !important; background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; font: 400 11px/1 var(--ak-fatfont-font, Arial, sans-serif) !important; letter-spacing: .08em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; clip-path: none !important; opacity: 1 !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row:last-child { border-bottom: 0 !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row::before, .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row::after { content: none !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row > span { display: inline !important; width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; white-space: nowrap !important; } .ak-product-split .ak-mobile-desktop-options button[data-ak-configurator-group="size"] > span:last-child, .ak-product-split .ak-mobile-desktop-options button[data-ak-configurator-group="passepartout"] > span:last-child { display: none !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-row.is-selected { background: var(--ak-black, #000) !important; color: var(--ak-wall) !important; font-weight: var(--ak-font-weight-strong) !important; } .ak-product-split .ak-mobile-desktop-options .ak-flow-units { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; padding: 0 !important; } .ak-product-split .ak-mobile-desktop-options .ak-flow-units button { width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-align: center !important; box-sizing: border-box !important; } .ak-product-split .ak-mobile-desktop-options .ak-flow-units button + button { border-left: 1px solid var(--ak-line, #ccc) !important; } .ak-product-split .ak-mobile-desktop-options .ak-flow-units button[aria-pressed="true"] { font-weight: var(--ak-font-weight-strong) !important; } .ak-product-split .ak-mobile-desktop-options .ak-desktop-option-loading { display: none; position: absolute; inset: 0; pointer-events: none; background: url('ak-brand-icon.svg') center / 36px 36px no-repeat; } .ak-product-split .ak-mobile-desktop-options .is-loading .ak-desktop-option-rows { opacity: .18 !important; } .ak-product-split .ak-mobile-desktop-options .is-loading .ak-desktop-option-loading { display: block; } html body .ak-product-split .ak-mobile-choice-trigger { animation: none; box-shadow: none; } html body .ak-product-split .ak-mobile-choice-trigger.ak-mobile-size-required { animation: akMobileChoiceLinePulse 1.45s ease-in-out infinite; } @keyframes akMobileChoiceLinePulse { 0%, 100% { box-shadow: inset 0 -2px 0 var(--ak-black, #000); } 50% { box-shadow: inset 0 -2px 0 transparent; } } } /*HØJDE PÅ LEJLIGHEDER*/ @media screen and (max-width: 1200px) { .ak-session-2-shell { /* Ret 0.85 for samlet størrelse */ --ak-mobile-room-height: calc( 100svh - var(--ak-frame, 15px) - var(--ak-mobile-bottom-nav-height, 44px) - 129px - var(--ak-top-menu-height, 44px) ); /* Ret 0px for vandret placering */ --ak-mobile-room-shift-x: -270px; height: var(--ak-mobile-room-height) !important; /* Sticky stopper 1 px under topmenuen */ top: calc(var(--ak-top-menu-height, 44px) + 1px) !important; } .ak-session-2 { width: var(--ak-mobile-scene-width) !important; height: var(--ak-mobile-room-height) !important; --ak-mobile-scene-width: calc(var(--ak-mobile-room-height) * 1.76615); left: calc( ((100vw - 30px) * 0.75) - (var(--ak-mobile-scene-width) * 0.3865) + var(--ak-mobile-room-shift-x) ) !important; } .ak-session-story.is-session-2-pinned .ak-session-2 { width: var(--ak-mobile-scene-width) !important; } } @media screen and (max-width: 1200px) { .ak-session-story.is-session-2-pinned .ak-session-2 { z-index: 1 !important; } .ak-mobile-about-slot { position: relative !important; z-index: 2 !important; isolation: isolate; } .ak-mobile-about-slot .ak-flow-about { position: relative !important; z-index: 2 !important; background: var(--ak-wall) !important; } } .ak-session-3 .ak-session-artwork { transition: opacity 1500ms cubic-bezier(.22, 1, .36, 1), transform 1800ms cubic-bezier(.22, 1, .36, 1); } /* Append after the existing mobile CSS. Requires the updated section.liquid. */ @media screen and (max-width: 1200px) { html body .ak-product-split.ak-flow[data-ak-mobile-scene] .product-media-container { position: relative !important; height: var(--ak-mobile-media-area-height) !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; background: #0000 !important; border-top: 0 !important; overflow: hidden !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title { position: absolute !important; inset: auto !important; top: 50% !important; left: 50% !important; z-index: 8 !important; display: flex !important; width: 80% !important; max-width: 80% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ak-ses1) !important; transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; text-align: center !important; pointer-events: none !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title, html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title * { font-size: var(--ak-mobile-heading-size, 32px) !important; line-height: 1.05 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title-mobile { display: block !important; width: 100% !important; white-space: nowrap !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title-desktop { display: none !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-title .ak-mobile-heading-line { display: block !important; white-space: nowrap !important; overflow-wrap: normal !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-session-one-room-placement { position: absolute !important; top: 50% !important; left: 50% !important; z-index: 6 !important; width: auto !important; height: min(54%, calc(var(--ak-mobile-media-size) * .62 / var(--ak-session-one-aspect-ratio, .8))) !important; max-width: none !important; max-height: none !important; aspect-ratio: var(--ak-session-one-aspect-ratio, .8) !important; transform: translate(-50%, -50%) !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-flow-scroll-cue { position: absolute !important; inset: auto !important; left: 50% !important; bottom: 50px !important; z-index: 9 !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: translateX(-50%) !important; color: var(--ak-black, #000) !important; font-family: var(--ak-fatfont-font, Arial, sans-serif) !important; font-size: 11px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1 !important; letter-spacing: 0.21em !important; white-space: nowrap !important; pointer-events: none !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene][data-ak-mobile-explored="true"] .ak-flow-scroll-cue { opacity: 0 !important; visibility: hidden !important; animation: none !important; } html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-left-edge-rail, html body .ak-product-split.ak-flow[data-ak-mobile-scene] .ak-product-edge-rail { display: none !important; } } @media screen and (max-width: 1200px) { html body .ak-product-split.ak-flow[data-ak-mobile-scene] .product-media-container { border-top: 0 !important; } } html body .ak-product-split.ak-flow .ak-product-title, html body .ak-product-split.ak-flow .ak-product-title * { color: var(--ak-ses1) !important; } /* MOBILE PRODUCT INTRO: change the total duration here. */ @media screen and (max-width: 1200px) { .ak-product-split.ak-flow { --ak-mobile-product-intro-duration: 5.5s; --ak-intro-unit: calc(var(--ak-mobile-product-intro-duration) / 5.5); --ak-intro-ease: cubic-bezier(.22, 1, .36, 1); /* Streger */ --ak-intro-top-start: 0s; --ak-intro-top-time: calc(var(--ak-intro-unit) * .45); --ak-intro-bottom-start: calc(var(--ak-intro-unit) * .45); --ak-intro-bottom-time: calc(var(--ak-intro-unit) * .45); --ak-intro-cart-line-start: calc(var(--ak-intro-unit) * .90); --ak-intro-cart-line-time: calc(var(--ak-intro-unit) * .40); --ak-intro-dividers-start: calc(var(--ak-intro-unit) * 1.30); --ak-intro-dividers-time: calc(var(--ak-intro-unit) * .50); /* SIZE, FRAME og MOUNT */ --ak-intro-size-start: calc(var(--ak-intro-unit) * 1.85); --ak-intro-frame-start: calc(var(--ak-intro-unit) * 2.05); --ak-intro-mount-start: calc(var(--ak-intro-unit) * 2.25); --ak-intro-choice-time: calc(var(--ak-intro-unit) * .30); /* Amount, pris og ADD TO CART */ --ak-intro-amount-start: calc(var(--ak-intro-unit) * 2.60); --ak-intro-amount-time: calc(var(--ak-intro-unit) * .45); --ak-intro-cart-text-start: calc(var(--ak-intro-unit) * 3.05); --ak-intro-cart-text-time: calc(var(--ak-intro-unit) * .40); /* Overskrift og billede */ --ak-intro-title-start: calc(var(--ak-intro-unit) * 3.50); --ak-intro-title-time: calc(var(--ak-intro-unit) * .70); --ak-intro-art-start: calc(var(--ak-intro-unit) * 4.05); --ak-intro-art-time: calc(var(--ak-intro-unit) * .80); /* Sort knap, derefter hvid tekst */ --ak-intro-black-start: calc(var(--ak-intro-unit) * 4.90); --ak-intro-black-time: calc(var(--ak-intro-unit) * .35); --ak-intro-white-start: calc(var(--ak-intro-unit) * 5.25); --ak-intro-white-time: calc(var(--ak-intro-unit) * .25); --ak-intro-scroll-start: calc(var(--ak-intro-unit) * 6.00); --ak-intro-scroll-time: calc(var(--ak-intro-unit) * .40); } html body .ak-product-split.ak-flow .ak-mobile-cart-row { border-top: 1px solid var(--ak-line, #ccc) !important; } html body .ak-product-split.ak-flow .ak-mobile-product-intro-cover { position: absolute; inset: 0; z-index: 7; background: var(--ak-wall); pointer-events: none; } .ak-mobile-product-intro-clock { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-top { border-top-color: transparent !important; border-bottom-color: transparent !important; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-cart-row { border-top-color: transparent !important; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-choice-trigger { border-right-color: transparent !important; animation: none !important; box-shadow: none !important; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-basket-trigger { position: relative !important; background: var(--ak-wall) !important; color: #000 !important; opacity: 1 !important; overflow: hidden; isolation: isolate; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-bottom { overflow: hidden; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="running"]):not([data-ak-mobile-product-intro="complete"]) .product-media-container { background: var(--ak-wall) !important; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .product-media-container::after { opacity: 0 !important; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-top::before, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-top::after, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-cart-row::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ak-line, #ccc); z-index: 3; pointer-events: none; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-top::before { top: -1px; transform: scaleX(0); transform-origin: left center; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-purchase-row-top::after { bottom: -1px; transform: scaleX(0); transform-origin: right center; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-cart-row::before { top: -1px; opacity: 0; transform: translateY(46px); } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-choice-trigger:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: var(--ak-line, #ccc); transform: scaleY(0); transform-origin: bottom center; z-index: 3; pointer-events: none; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-choice-trigger > span, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-builder-total-label, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-builder-price, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-basket-label, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-product-title, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-session-one-room-placement, html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-flow-scroll-cue { filter: opacity(0); } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-basket-label { position: relative; z-index: 1; color: #000; } html body .ak-product-split.ak-flow:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-basket-trigger::before { content: ""; position: absolute; inset: 0; background: var(--ak-black, #000); opacity: 0; z-index: 0; pointer-events: none; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-product-intro-clock { animation: akMobileProductIntroClock var(--ak-mobile-product-intro-duration) linear both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-purchase-row-top::before { animation: akMobileProductLineX var(--ak-intro-top-time) var(--ak-intro-ease) var(--ak-intro-top-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-purchase-row-top::after { animation: akMobileProductLineX var(--ak-intro-bottom-time) var(--ak-intro-ease) var(--ak-intro-bottom-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-cart-row::before { animation: akMobileProductCartLine var(--ak-intro-cart-line-time) var(--ak-intro-ease) var(--ak-intro-cart-line-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-choice-trigger:not(:last-child)::after { animation: akMobileProductLineY var(--ak-intro-dividers-time) var(--ak-intro-ease) var(--ak-intro-dividers-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-choice-trigger > span { animation: akMobileProductFromBelow var(--ak-intro-choice-time) var(--ak-intro-ease) var(--ak-intro-choice-start) both; } .ak-product-split.ak-flow [data-ak-mobile-choice="size"] { --ak-intro-choice-start: var(--ak-intro-size-start); } .ak-product-split.ak-flow [data-ak-mobile-choice="frame"] { --ak-intro-choice-start: var(--ak-intro-frame-start); } .ak-product-split.ak-flow [data-ak-mobile-choice="passepartout"] { --ak-intro-choice-start: var(--ak-intro-mount-start); } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-builder-total-label, html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-builder-price { animation: akMobileProductFromAbove var(--ak-intro-amount-time) var(--ak-intro-ease) var(--ak-intro-amount-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-basket-label { animation: akMobileProductFromBelow var(--ak-intro-cart-text-time) var(--ak-intro-ease) var(--ak-intro-cart-text-start) both, akMobileProductCartTextWhite var(--ak-intro-white-time) ease var(--ak-intro-white-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-product-title { animation: akMobileProductFromBelow var(--ak-intro-title-time) var(--ak-intro-ease) var(--ak-intro-title-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-product-intro-cover { animation: akMobileProductCoverOut var(--ak-intro-title-time) ease var(--ak-intro-title-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-session-one-room-placement { animation: akMobileProductFromAbove var(--ak-intro-art-time) var(--ak-intro-ease) var(--ak-intro-art-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-mobile-basket-trigger::before { animation: akMobileProductBlackIn var(--ak-intro-black-time) ease var(--ak-intro-black-start) both; } html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="running"] .ak-flow-scroll-cue { animation: akMobileProductFadeIn var(--ak-intro-scroll-time) ease var(--ak-intro-scroll-start) both; } @keyframes akMobileProductIntroClock { from { translate: 0; } to { translate: 1px; } } @keyframes akMobileProductLineX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes akMobileProductLineY { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes akMobileProductCartLine { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } } @keyframes akMobileProductFromBelow { from { filter: opacity(0); translate: 0 20px; } to { filter: opacity(1); translate: 0 0; } } @keyframes akMobileProductFromAbove { from { filter: opacity(0); translate: 0 -20px; } to { filter: opacity(1); translate: 0 0; } } @keyframes akMobileProductFadeIn { from { filter: opacity(0); } to { filter: opacity(1); } } @keyframes akMobileProductCoverOut { from { opacity: 1; } to { opacity: 0; } } @keyframes akMobileProductBlackIn { from { opacity: 0; } to { opacity: 1; } } @keyframes akMobileProductCartTextWhite { from { color: #000; } to { color: var(--ak-wall); } } } @media screen and (max-width: 1200px) and (prefers-reduced-motion: reduce) { html body .ak-product-split.ak-flow { --ak-mobile-product-intro-duration: 0s; } } @media screen and (max-width: 1200px) and (prefers-reduced-motion: no-preference) { html body .ak-product-split.ak-flow[data-ak-mobile-product-intro="complete"] .ak-flow-scroll-cue > .ak-scroll-cue-pulse { display: block; animation: akProductScrollCueFade 2200ms ease-in-out infinite; } } @media screen and (max-width: 1200px) { html body .ak-mobile-general-slot, html body .ak-mobile-about-slot, html body .ak-mobile-information-stack, html body .ak-product-split .ak-product-information-fixed, html body .ak-product-split .ak-flow-about { display: none !important; } } @media screen and (max-width: 1200px) { html body .ak-session-general { padding: 45px calc(45px + var(--ak-frame, 15px)) !important; box-sizing: border-box !important; } } @media screen and (max-width: 1200px) { html body .ak-session-4 .ak-room-pair__panel { padding: 80px calc(80px + var(--ak-frame, 15px)) !important; box-sizing: border-box !important; } } @media screen and (max-width: 1200px) { .ak-session-5-shell { --ak-mobile-room-height: calc( 100svh - var(--ak-frame, 15px) - var(--ak-mobile-bottom-nav-height, 44px) - 129px - var(--ak-top-menu-height, 44px) ); height: var(--ak-mobile-room-height) !important; top: calc(var(--ak-top-menu-height, 44px) + 1px) !important; } .ak-session-5 { --ak-mobile-scene-width: calc(var(--ak-mobile-room-height) * 1.82270); height: var(--ak-mobile-room-height) !important; } .ak-session-5 .ak-session-5__stage { height: 100% !important; } html body .ak-session-story .ak-session-5 { left: calc( ((100vw - 65px) * 0.75) - (var(--ak-mobile-scene-width) * 0.5803) + 100px ) !important; } } @media screen and (max-width: 1200px) { html body .ak-session-3 .ak-session-3__items { height: min(72vw, 520px) !important; min-height: min(72vw, 520px) !important; max-height: min(72vw, 520px) !important; min-width: 0; box-sizing: border-box; } html body .ak-session-3 .ak-session-artwork { width: var(--ak-session-3-width, min(72vw, 520px)) !important; height: var(--ak-session-3-height, min(72vw, 520px)) !important; max-width: 100% !important; flex: none; } } /* Mobile related products: outside the sticky room story. */ /* Related products cover the sticky room within its original containing block. */ @media screen and (max-width: 1200px) { html body .ak-mobile-session-5-slot { position: relative; width: 100%; height: calc(100svh - var(--ak-frame, 15px) - var(--ak-mobile-bottom-nav-height, 44px) - 129px - var(--ak-top-menu-height, 44px)); } html body .ak-session-story > .ak-session-5-shell { position: sticky !important; top: calc(var(--ak-top-menu-height, 44px) + 1px) !important; z-index: 1 !important; } html body .ak-session-story > .ak-session-5-shell .ak-session-5 { position: relative !important; top: auto !important; transform: none !important; } html body section.ak-session-6 { --ak-related-mobile-stage: min(calc(100vw - 2 * var(--ak-frame, 15px) - 60px), 460px); --ak-related-mobile-short: calc(var(--ak-related-mobile-stage) * 0.7); position: relative !important; z-index: 2 !important; isolation: isolate; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 var(--ak-frame, 15px) calc(129px + var(--ak-mobile-bottom-nav-height, 44px) + var(--ak-frame, 15px) + 30px) !important; padding: 0 0 calc(129px + var(--ak-mobile-bottom-nav-height, 44px) + var(--ak-frame, 15px) + 30px) !important; box-sizing: border-box !important; background: var(--ak-wall) !important; } html body section.ak-session-6 .ak-session-6__title { position: relative !important; display: flex !important; min-height: 100px !important; margin: 0 !important; padding: 30px 15px !important; white-space: normal !important; background: var(--ak-wall) !important; opacity: 1 !important; transform: none !important; transition: none !important; font-size: 22px !important; letter-spacing: 0.03em !important; line-height: 1.2 !important; } html body section.ak-session-6 .ak-session-6__grid { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; width: 100% !important; height: auto !important; background: var(--ak-wall) !important; border-top: 1px solid var(--ak-line, #d6d6d6) !important; border-bottom: 0 !important; } html body section.ak-session-6 .ak-session-6__card:not([hidden]) { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-width: 0 !important; border: 0 !important; background: var(--ak-wall) !important; } html body section.ak-session-6 .ak-session-6__card[hidden] { display: none !important; } html body section.ak-session-6 .ak-session-6__visual { position: relative !important; display: grid !important; place-items: center !important; flex: none !important; order: 1 !important; width: 100% !important; height: calc(var(--ak-related-mobile-stage) + 60px) !important; min-height: 0 !important; padding: 30px !important; box-sizing: border-box !important; overflow: hidden !important; background: var(--ak-wall) !important; } html body [data-ak-room-display="card"] { --ak-poster-short-side: var(--ak-related-mobile-short); width: var(--ak-poster-short-side) !important; height: auto !important; aspect-ratio: var(--ak-room-aspect-ratio, 1) !important; max-width: 100% !important; max-height: 100% !important; } html body [data-ak-room-display="card"][data-ak-room-format="landscape"] { width: auto !important; height: var(--ak-poster-short-side) !important; } html body section.ak-session-6 .ak-session-6__name { position: relative !important; display: flex !important; flex: none !important; order: 2 !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: auto !important; min-height: 68px !important; margin: 0 !important; padding: 12px 20px !important; box-sizing: border-box !important; background: var(--ak-wall) !important; border-top: 1px solid var(--ak-line, #d6d6d6) !important; border-bottom: 1px solid var(--ak-line, #d6d6d6) !important; color: var(--ak-black, #000) !important; text-align: center !important; white-space: normal !important; opacity: 1 !important; visibility: visible !important; font-size: 17px !important; letter-spacing: 0.08em !important; } html body section.ak-session-6::after { display: none !important; } } @media screen and (max-width: 1200px) { html body section.ak-session-6 { --ak-related-bottom-space: calc( 129px + var(--ak-mobile-bottom-nav-height, 44px) + var(--ak-frame, 15px) + 80px ); padding-bottom: var(--ak-related-bottom-space) !important; } html body section.ak-session-6::after { content: "" !important; display: block !important; position: absolute !important; top: auto !important; bottom: 0 !important; left: 50% !important; width: 1px !important; height: var(--ak-related-bottom-space) !important; border: 0 !important; background: var(--ak-line, #d6d6d6) !important; pointer-events: none !important; } } @media screen and (max-width: 1200px) { html body .ak-session-3 { height: calc(min(72vw, 520px) + 144px) !important; min-height: calc(min(72vw, 520px) + 144px) !important; max-height: calc(min(72vw, 520px) + 144px) !important; padding: 72px 24px !important; box-sizing: border-box !important; } html body .ak-session-3 .ak-session-3__items { height: min(72vw, 520px) !important; min-height: min(72vw, 520px) !important; max-height: min(72vw, 520px) !important; align-items: center !important; justify-content: center !important; } } /* ===================================================== ARTSY KID — SIMPLE PRODUCT / MOBILE Session 1. Standalone simple-product overrides. ===================================================== */ @media screen and (max-width: 1200px) { html { --ak-mobile-buybar-height: 83px !important; } /* EDIT ONLY THIS VALUE TO CHANGE THE MOBILE FIGURE SIZE. */ .ak-product-split[data-ak-simple-product="true"] { --ak-simple-mobile-figure-height: 80%; } .ak-product-split[data-ak-simple-product="true"] > .ak-desktop-options.ak-simple-options, .ak-product-split[data-ak-simple-product="true"] > .ak-product-total-area.ak-simple-total-area, .ak-product-split[data-ak-simple-product="true"] .ak-product-media-sources { display: none !important; } .ak-product-split[data-ak-simple-product="true"] .ak-mobile-purchase-row-top { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; .ak-mobile-purchase-row-bottom { top: var(--ak-mobile-controls-top) !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border-top: 0 !important; } .ak-product-split[data-ak-simple-product="true"] .ak-mobile-simple-product-title { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; .ak-mobile-builder-total-label { grid-column: 1 / 3 !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; padding: 0 22px !important; overflow: hidden !important; background: var(--ak-wall) !important; color: var(--ak-black, #000) !important; font-family: var(--ak-fatfont-font, Arial, sans-serif) !important; font-size: 11px !important; font-weight: var(--ak-font-weight-strong) !important; line-height: 1 !important; letter-spacing: .12em !important; text-align: center !important; text-align: left !important; text-overflow: ellipsis !important; text-transform: uppercase !important; white-space: nowrap !important; } .ak-product-split[data-ak-simple-product="true"] .ak-mobile-builder-price { grid-column: 3 !important; padding: 0 22px !important; text-align: right !important; } .ak-product-split[data-ak-simple-product="true"] .ak-mobile-cart-row { top: calc(var(--ak-mobile-controls-top) + 36px) !important; } .ak-product-split[data-ak-simple-product="true"] .ak-product-configurator-area { display: none !important; } .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-media { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 24px !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; background: var(--ak-wall) !important; } .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-triptych, .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-panel:first-child { .ak-simple-session-one-triptych { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-panel:first-child { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; height: var(--ak-simple-mobile-figure-height) !important; aspect-ratio: .55 / 1 !important; margin: 0 !important; overflow: hidden !important; animation: akSimpleFigureBreathing 2.4s cubic-bezier(.45, 0, .55, 1) infinite both !important; will-change: transform; } .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-panel:not(:first-child) { display: none !important; } .ak-product-split[data-ak-simple-product="true"] .ak-simple-session-one-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-fit: cover !important; object-position: center !important; transform: translateY(18.4%) scale(1.64) !important; transform-origin: center center !important; } html body .ak-product-split[data-ak-simple-product="true"]:not([data-ak-mobile-product-intro="complete"]) .ak-mobile-simple-product-title { filter: opacity(0); html body .ak-product-split[data-ak-simple-product="true"] .ak-flow-scroll-cue { top: calc(var(--ak-mobile-media-area-height) * .95) !important; bottom: auto !important; font-size: 10px !important; transform: translate(-50%, -50%) !important; } html body .ak-product-split[data-ak-simple-product="true"][data-ak-mobile-product-intro="running"] .ak-mobile-simple-product-title { animation: akMobileProductFromBelow var(--ak-intro-choice-time, 300ms) var(--ak-intro-ease, cubic-bezier(.22, 1, .36, 1)) var(--ak-intro-size-start, 1850ms) both; .ak-product-split[data-ak-simple-product="true"] .ak-flow-scroll-cue, .ak-product-split[data-ak-simple-product="true"] .ak-flow-scroll-cue > .ak-scroll-cue-pulse { display: block !important; } } @media screen and (max-width: 1200px) and (prefers-reduced-motion: reduce) { html body .ak-product-split[data-ak-simple-product="true"] .ak-mobile-simple-product-title { .ak-simple-session-one-panel:first-child { animation: none !important; filter: opacity(1) !important; transform: none !important; } } /* Canonical compact Simple-product buy bar: price and cart remain flush with the bottom navigation after their requested height reductions. */ @media screen and (max-width: 1200px) { html { --ak-mobile-buybar-height: 73px !important; } html body .ak-product-split[data-ak-simple-product="true"] { --ak-mobile-price-row-height: 32px; --ak-mobile-cart-row-height: 41px; --ak-simple-mobile-lift: 41px; } html body .ak-product-split[data-ak-simple-product="true"] .ak-mobile-purchase-row-bottom { top: var(--ak-mobile-controls-top) !important; height: var(--ak-mobile-price-row-height) !important; min-height: var(--ak-mobile-price-row-height) !important; max-height: var(--ak-mobile-price-row-height) !important; } html body .ak-product-split[data-ak-simple-product="true"] .ak-mobile-cart-row { top: calc(var(--ak-mobile-controls-top) + var(--ak-mobile-price-row-height)) !important; height: var(--ak-mobile-cart-row-height) !important; min-height: var(--ak-mobile-cart-row-height) !important; max-height: var(--ak-mobile-cart-row-height) !important; } html body .ak-product-split[data-ak-simple-product="true"] :is( .ak-mobile-builder-total, .ak-mobile-builder-total-label, .ak-mobile-builder-price, .ak-mobile-basket-trigger, .ak-mobile-basket-label ) { font-size: 11.5px !important; letter-spacing: 0.05em !important; } html body .ak-product-split[data-ak-simple-product="true"] .ak-mobile-builder-total-label { font-weight: var(--ak-font-weight-strong) !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } html body .ak-product-split[data-ak-simple-product="true"] :is( .ak-mobile-basket-trigger, .ak-mobile-basket-label ) { letter-spacing: 0.07em !important; text-transform: uppercase !important; } html body .ak-product-split[data-ak-simple-product="true"] :is( .ak-flow-gallery-trigger, .ak-flow-gallery-trigger > span:first-child ) { font-size: 11.5px !important; font-weight: var(--ak-font-weight-strong) !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } }