/* Prototype-03: commission artwork interaction and detail dialog. */
.p2-product-copy { position: relative; isolation: isolate; }
.alo-copy-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.alo-copy-trigger:hover { background: transparent; }
.alo-copy-trigger:focus-visible { outline: 3px solid #5367d5; outline-offset: -6px; border-radius: 12px; }
.p2-product-copy a { position: relative; z-index: 2; }
.alo-art-trigger { border: 0; width: 100%; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.alo-art-trigger img { transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s !important; }
.alo-art-trigger:focus-visible, .alo-dialog :focus-visible { outline: 3px solid #5367d5; outline-offset: 5px; }
/* Keep the explicitly requested Kor interaction independent of page-wide motion rules. */
.alo-art-trigger:hover img, .alo-art-trigger:focus-visible img { transform: translateY(-12px) scale(1.075); filter: drop-shadow(0 15px 7px #33314720); animation: alo-float 2.8s .45s ease-in-out infinite !important; }
@keyframes alo-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
html.alo-modal-open { overflow: hidden; scrollbar-gutter: stable; }
html.alo-contact-scrolling, html.alo-contact-scrolling body { scroll-behavior: auto !important; overflow-anchor: none; }
.alo-dialog { --alo-ink: #333147; color: var(--alo-ink); background: #eeecff; border: 1px solid #333147; border-radius: 25px; padding: 0; width: min(1060px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 64px); margin: auto; overflow: auto; overscroll-behavior: contain; box-shadow: 10px 12px 0 #33314726, 0 30px 100px #0003; }
.alo-dialog::backdrop { background: rgb(25 24 39 / 48%); }
.alo-dialog[open] { animation: alo-open .32s ease-out both !important; }
.alo-dialog[open]::backdrop { animation: alo-backdrop-in .32s ease-out both !important; }
.alo-dialog[open].alo-closing { animation: alo-out .26s ease-in both !important; }
.alo-dialog[open].alo-closing::backdrop { animation: alo-backdrop-out .26s ease-in both !important; }
@keyframes alo-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes alo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes alo-backdrop-in { from { background: rgb(25 24 39 / 0%); } to { background: rgb(25 24 39 / 48%); } }
@keyframes alo-backdrop-out { from { background: rgb(25 24 39 / 48%); } to { background: rgb(25 24 39 / 0%); } }
.alo-close { position: sticky; top: 14px; float: right; margin: 14px 14px -58px 0; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #333147; background: #fff8e7; color: #333147; font: 30px/1 sans-serif; cursor: pointer; box-shadow: 2px 3px 0 #333147; }
.alo-layout { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: start; }
.alo-gallery { position: sticky; top: 0; padding: 32px 24px; background: #b5a6ff; border-radius: 24px 0 24px 0; min-width: 0; }
.alo-gallery-heading { display: flex; justify-content: space-between; align-items: center; }
.alo-eyebrow { font: 500 10px/1.6 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }
.alo-image-frame { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1; margin: 25px 0 16px; overflow: hidden; border-radius: 18px; touch-action: pan-y; }
.alo-image-frame::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #eeecff70; z-index: -1; }
.alo-image-frame img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: contain; transform-origin: center; }
.alo-image-frame .alo-sample-outgoing { position: absolute; inset: 0; pointer-events: none; }
.alo-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.alo-gallery-controls, .alo-gallery-controls * { -webkit-user-select: none; user-select: none; }
.alo-gallery-controls button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #333147; border-radius: 50%; background: #eeecff; color: #333147; font-size: 23px; cursor: pointer; }
.alo-gallery-controls button:hover { background: #fff8e7; }
#alo-sample-caption { text-align: center; margin: 0; }
#alo-sample-caption strong { display: block; font-size: 17px; }
#alo-sample-caption span { font: 11px 'DM Mono',monospace; }
.alo-gallery-note { text-align: center; font-size: 12px; margin: 20px 0 0; }
.alo-info { padding: 38px clamp(22px,3vw,42px) 32px; min-width: 0; }
.alo-info > .alo-eyebrow { padding-right: 28px; margin: 0 0 16px; color: #5367b1; }
.alo-info h2 { font-size: clamp(36px,4vw,52px); letter-spacing: -.045em; line-height: 1.05; margin: 0 0 24px; }
.alo-info h2 span { display: block; font-size: 14px; line-height: 1.5; letter-spacing: 0; font-weight: 400; margin-top: 12px; }
.alo-price { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.alo-price strong { font-size: 32px; letter-spacing: -.04em; }
.alo-price small { font: 11px 'DM Mono',monospace; letter-spacing: 0; }
.alo-price > span { padding: 6px 10px; border: 1px solid #33314766; border-radius: 99px; font-size: 11px; }
.alo-info p, .alo-info li, .alo-extras { font-size: 14px; line-height: 1.7; }
.alo-info .alo-quote { font-size: 12px; color: #514f68; }
.alo-highlights { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 20px 0; list-style: none; }
.alo-info .alo-highlights li { padding: 5px 9px; border-radius: 6px; background: #dbd5fa; font-size: 11px; }
.alo-info h3 { font-size: 17px; letter-spacing: -.02em; margin: 0 0 10px; line-height: 1.4; }
.alo-time { padding: 18px; border: 1px solid #333147; background: #fff8e7; border-radius: 12px; }
.alo-time p { margin: 0; font-size: 12px; }
.alo-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid #33314730; }
.alo-section p { margin: 10px 0; }
.alo-section ul, .alo-section ol { padding-left: 19px; margin: 0; }
.alo-section li + li { margin-top: 9px; }
.alo-extras { margin: 0; }
.alo-extras div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #33314730; }
.alo-extras dt { flex: 1; }
.alo-extras dd { margin: 0; text-align: right; font-size: 12px; }
.alo-important { padding: 15px; border-left: 3px solid #5367d5; background: #ded8fa; border-radius: 0 8px 8px 0; }
.alo-important strong { display: block; }
.alo-order { margin-top: 26px; padding-top: 12px; }
.alo-order p { font-size: 12px; }
.alo-order > a { display: flex; justify-content: space-between; margin-top: 14px; }
.alo-order > a:last-child { width: fit-content; font-size: 12px; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .alo-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .alo-layout { grid-template-columns: 1fr; }
  .alo-gallery { position: relative; padding: 26px 24px 22px; border-radius: 17px 17px 22px 22px; }
  .alo-gallery-heading { padding-right: 48px; }
  .alo-image-frame { max-width: 330px; margin: 20px auto 12px; }
  .alo-gallery-controls { max-width: 330px; margin-inline: auto; }
  .alo-info { padding: 28px 22px; }
  .alo-close { top: 10px; margin: 10px 10px -54px 0; }
}
/* A centered sample card, with information scrolling independently on desktop. */
@media (min-width: 761px) {
  .alo-dialog { height: min(840px, calc(100dvh - 64px)); overflow: hidden; }
  .alo-layout { height: 100%; padding: 24px; gap: 24px; box-sizing: border-box; align-items: center; }
  .alo-close { position: absolute; top: 12px; right: 12px; margin: 0; }
  .alo-gallery { position: relative; top: auto; padding: 26px 22px; border-radius: 22px; border: 1px solid #33314720; box-shadow: 0 8px 24px #3331470d; max-height: 100%; overflow-y: auto; box-sizing: border-box; }
  .alo-gallery-heading { justify-content: center; }
  .alo-image-frame { width: min(100%, max(160px, calc(100dvh - 340px))); margin: 22px auto 16px; }
  .alo-info { align-self: stretch; height: 100%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 26px 18px 24px 8px; scrollbar-width: thin; }
  .alo-info > .alo-eyebrow { padding-right: 36px; }
}
@media (max-width: 760px) {
  .alo-layout { padding: 18px; gap: 10px; }
  .alo-gallery { border-radius: 18px; padding: 24px 18px; }
  .alo-gallery-heading { justify-content: center; padding-right: 0; }
  .alo-info { padding: 22px 4px; }
}