/* Shared by the Shopify storefront and studio. Source: brand/web/size-guide. */
.mapia-size-guide { display: block; min-width: 0; color: #242c26; }
.mapia-size-guide *, .mapia-size-dialog *, .mapia-order * { box-sizing: border-box; }
.mapia-size-scene { --mapia-scene-cm: .8cqw; container-type: inline-size; position: relative; overflow: hidden; margin: 0; aspect-ratio: 1; background: #e5dbca; border-radius: 3px; }
/* The close square composition retains the table and ornaments. Its furniture
   is decorative and supplies no dimension or calibration. */
.mapia-size-room { display: block; width: 100%; height: 100%; object-fit: cover; }
/* One shared drawing unit: 1 cm = 0.8% of a 125 cm-wide view.
   Artwork and ISO A4 (21 x 29.7 cm) face the viewer on the same plane.
   The image model supplies no object sizes; all reference geometry is CSS.
   Give both frame dimensions explicitly and keep the image out of flow:
   WebKit can grow an auto-height aspect-ratio frame around a 100%-height image. */
.mapia-size-frame { position: absolute; left: 50%; top: 34%; width: calc(40 * var(--mapia-scene-cm)); height: calc(60 * var(--mapia-scene-cm)); box-sizing: content-box !important; border: calc(1.2 * var(--mapia-scene-cm)) solid #232323; transform: translate(-50%, -50%); background: #252525; box-shadow: .16cqw .16cqw .12cqw #fff4 inset, .5cqw .65cqw .65cqw #352b2450, .1cqw .12cqw .1cqw #201c1a60; transition: width 260ms ease, height 260ms ease, left 180ms ease; }
.mapia-size-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset .12cqw .15cqw .23cqw #18181760; }
.mapia-size-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.mapia-size-guide:has(.mapia-size-options input[value="30x45"]:checked) .mapia-size-frame { width: calc(30 * var(--mapia-scene-cm)); height: calc(45 * var(--mapia-scene-cm)); }
.mapia-size-guide[data-show-scale] .mapia-size-frame { left: 43%; }
.mapia-size-paper { position: absolute; left: 80%; top: 34%; width: calc(21 * var(--mapia-scene-cm)); aspect-ratio: 210 / 297; transform: translate(-50%, -50%); background: linear-gradient(112deg, #fffefb, #f9f8f3 72%, #f3f1e9); outline: .5px solid #e5e1d6; box-shadow: .15cqw .22cqw .35cqw #352b243d; }
.mapia-size-paper-label { position: absolute; top: calc(100% + 2cqw); left: 50%; width: 200%; transform: translateX(-50%); text-align: center; font-family: var(--mapia-font-body, sans-serif); font-size: clamp(10px, 2cqw, 13px); line-height: 1.5; color: #364337; }
.mapia-size-paper-label strong, .mapia-size-paper-label span { display: block; }
.mapia-size-paper-label strong { font-weight: 600; }
.mapia-size-check { display: block; width: max-content; max-width: 100%; min-height: 44px; margin: 14px auto 0; padding: 10px 18px; border: 1px solid #71876f; border-radius: 4px; background: #edf2e9; color: #234a3b; font-family: var(--mapia-font-body, sans-serif); font-size: .8rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.mapia-size-check:hover { color: #18392c; background: #e2eadb; border-color: #234a3b; }
.mapia-size-check:focus-visible { outline: 3px solid #166c99; outline-offset: 4px; }
.mapia-size-dialog .mapia-size-guide { width: min(100%, max(280px, calc(100dvh - 330px))); margin-inline: auto; }
.mapia-size-options { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; padding: 0 !important; margin: 18px 0 0 !important; border: 0 !important; }
.mapia-size-options label { position: relative; display: block; min-width: 0; padding: 0; margin: 0; cursor: pointer; }
.mapia-size-options input { position: absolute; width: 1px; height: 1px; opacity: 0; inset: 50% auto auto 50%; }
.mapia-size-options label > span { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 8px; padding: 16px 18px; min-height: 60px; border: 1px solid #a2aca0; border-radius: 3px; background: transparent; font-family: var(--mapia-font-body, sans-serif); font-size: .92rem; font-weight: 400; line-height: 1.4; text-transform: none; transition: background 140ms ease, border-color 140ms ease; }
.mapia-size-options strong { font-weight: 600; }
.mapia-size-options input:checked + span { border-color: #234a3b; box-shadow: inset 0 0 0 1px #234a3b; background: #edf2e9; color: #234a3b; }
.mapia-size-options label:hover > span { border-color: #234a3b; }
.mapia-size-options input:focus-visible + span { outline: 3px solid #166c99; outline-offset: 4px; }
.mapia-size-included { text-align: center; margin: 14px 0 0 !important; font-size: .76rem; line-height: 1.6; color: #485549; }
.mapia-size-caption { font-size: .67rem; line-height: 1.6; text-align: center; color: #60665e; max-width: 430px; margin: 9px auto 0 !important; }
.mapia-size-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mapia-size-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #234a3b; text-decoration: underline; text-underline-offset: 4px; font-size: .82rem; font-weight: 500; cursor: pointer; }
.mapia-size-link:hover { color: #18392c; background: transparent; }
.mapia-size-link:focus-visible { outline: 3px solid #166c99; outline-offset: 4px; }
.mapia-creator-sizes { margin: 20px auto 0; padding-top: 18px; border-top: 1px solid #dcded4; font-size: .81rem; line-height: 1.8; }
.mapia-creator-sizes p { margin: 0; color: #485549; }
.mapia-creator-prices { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
.mapia-creator-prices strong { font-weight: 600; color: #234a3b; }
.mapia-creator-sizes small { display: block; font-size: .74rem; color: #60665e; }
.mapia-size-dialog { position: fixed; inset: 0; margin: auto; padding: 28px; width: min(760px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #d8d9cf; border-radius: 6px; background: #f7f5f0; color: #242c26; box-shadow: 0 24px 90px #132d2340; }
.mapia-size-dialog::backdrop { background: #13251de0; backdrop-filter: blur(3px); }
html:has(.mapia-size-dialog[open]) { overflow: hidden; }
.mapia-size-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.mapia-size-dialog-head h2 { margin: 0; font-family: var(--mapia-font-display, Georgia, serif); font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.1; font-weight: 400; letter-spacing: -.025em; }
.mapia-size-dialog-head button { flex: 0 0 auto; min-height: 44px; min-width: 44px; margin: -8px -8px 0 0; border: 0; background: transparent; color: #234a3b; font-size: .8rem; padding: 8px; cursor: pointer; }
.mapia-size-dialog-head button:focus-visible { outline: 3px solid #166c99; outline-offset: 2px; }
.mapia-size-dialog-intro { margin: 0 0 20px; color: #60665e; font-size: .85rem; line-height: 1.65; }
.mapia-quality.mapia-quality--sizes { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; column-gap: clamp(28px, 5vw, 64px); row-gap: 24px; }
.mapia-quality--sizes .mapia-quality__intro { grid-column: 2; grid-row: 1; }
.mapia-quality--sizes .mapia-quality__art { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: none; padding: 0; background: none; }
.mapia-quality--sizes .mapia-quality__copy { grid-column: 2; grid-row: 2; }
.mapia-quality--sizes h2 { font-weight: 400; letter-spacing: -.025em; }
.mapia-quality--sizes .mapia-quality__copy dl { margin: 0; }
.mapia-quality--sizes .mapia-quality__copy dl div { display: block; }
.mapia-quality--sizes .mapia-quality__copy dd { margin-top: 8px; }
.mapia-order { margin: 52px 0 0; padding-top: 44px; border-top: 1px solid #ced3c7; }
.mapia-order h2 { font-family: var(--mapia-font-display, Georgia, serif); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 14px; }
.mapia-order-lede { color: #60665e; font-size: .88rem; line-height: 1.7; margin: 0 0 28px; }
.mapia-order-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.mapia-order-room { min-width: 0; }
.mapia-order-room-label { font-size: .77rem; margin: 0 0 10px; color: #485549; }
.mapia-order-art-picker { margin-bottom: 16px; }
.mapia-order-art-picker label { font-size: .78rem; display: block; margin-bottom: 6px; }
.mapia-order-art-picker select { width: 100%; }
.mapia-order-room .mapia-size-options { margin-top: 12px !important; }
.mapia-order-choice { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.mapia-order-choice legend { float: none; font-family: var(--mapia-font-body, sans-serif); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 4px; padding: 0; }
.mapia-order-choice .mapia-size-options { margin-top: 8px !important; }
.mapia-order-choice .mapia-size-options label > span { padding: 15px 12px; font-size: .85rem; }
.mapia-order-choice small { display: block; color: #60665e; margin-top: 9px; font-size: .73rem; line-height: 1.5; }
.mapia-order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 24px 0 5px; padding-top: 20px; border-top: 1px solid #cbd0c4; font-size: .88rem; }
.mapia-order-total strong { font-size: 1.55rem; color: #234a3b; font-weight: 600; }
.mapia-order-delivery { font-size: .75rem; color: #60665e; margin: 0 0 20px; }
.mapia-order-continue { display: block; width: 100%; min-height: 54px; font-size: .9rem; background: #234a3b; color: white; border: 1px solid #234a3b; border-radius: 4px; padding: 14px; }
.mapia-order-continue:disabled { background: #e3e8df; color: #56644f; border-color: #c4cdbd; opacity: 1; cursor: default; }
.mapia-order-summary { font-size: .76rem; line-height: 1.65; color: #60665e; }
.mapia-order-empty { padding: 26px; background: #eeeee6; border-radius: 4px; color: #485549; font-size: .85rem; line-height: 1.7; }
.mapia-order [hidden], .mapia-size-guide [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .mapia-size-frame, .mapia-size-options label > span { transition: none; } }
@media (max-width: 760px) {
  .mapia-quality.mapia-quality--sizes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mapia-quality--sizes .mapia-quality__intro { grid-column: 1; grid-row: 1; }
  .mapia-quality--sizes .mapia-quality__art { grid-column: 1; grid-row: 2; }
  .mapia-quality--sizes .mapia-quality__copy { grid-column: 1; grid-row: 3; }
  .mapia-order-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mapia-order { margin-top: 34px; padding-top: 32px; }
  .mapia-size-dialog { padding: 18px; width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .mapia-size-options label > span { padding: 13px 12px; font-size: .82rem; }
  .mapia-size-caption { font-size: .65rem; }
}

.mapia-order-size-stage .mapia-size-options, .mapia-order-size-stage .mapia-size-included { display: none !important; }
.mapia-order-size-stage .mapia-size-check { display: none; }
.mapia-order-room .mapia-size-link { margin: 8px auto 0; display: flex; }
.mapia-order-room .mapia-size-caption { margin-top: 12px !important; }

.mapia-size-options label > span > span { font: inherit; color: inherit; text-transform: none; }