.ln3d-section.container { padding-bottom: 80px; scroll-margin-top: 140px; }
.ln3d-frame { --ln3d-green: var(--green1, #147444); position: relative; isolation: isolate; min-height: 860px; padding: 80px 40px; border: 32px solid var(--gray1, #f4f4f4); border-radius: 32px; background: var(--gray1, #f4f4f4); font-weight: 500; line-height: 1.375; }
.ln3d-frame *, .ln3d-frame *::before, .ln3d-frame *::after { box-sizing: border-box; }
.ln3d-frame [hidden] { display: none !important; }
.ln3d-scene { position: absolute; z-index: -1; inset: 0; border-radius: 16px; background: #ecd3b4 url('images/room.png') center / cover no-repeat; }
.ln3d-frame button { font: inherit; cursor: pointer; }
.ln3d-frame button:disabled { cursor: not-allowed; opacity: .45; }
.ln3d-frame button:focus-visible, .ln3d-frame input:focus-visible { outline: 2px solid var(--ln3d-green); outline-offset: 3px; }
.ln3d-controls { width: max(500px, 80%); max-width: 100%; margin: auto; display: grid; gap: 24px; }
.ln3d-name, .ln3d-options, .ln3d-order { width: min(100%, 500px); justify-self: center; }
.ln3d-name { display: flex; flex-direction: column; gap: 12px; }
.ln3d-name > label, .ln3d-options legend { text-transform: uppercase; text-align: center; font-size: 18px; font-weight: 700; }
.ln3d-input-wrap { position: relative; }
.ln3d-input { width: 100%; height: 50px; border: 1px solid var(--gray4, #dadada); background: white; border-radius: 8px; padding: 12px 78px 12px 20px; color: var(--black1, #252525); font-size: 16px; font-weight: 400; }
.ln3d-frame .ln3d-input:focus { outline: none; box-shadow: none; }
.ln3d-counter { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 400; color: var(--gray5, #737373); pointer-events: none; }
.ln3d-cart-error, .ln3d-unavailable { color: #9e2020; font-size: 13px; }
.ln3d-input-error { position: absolute; z-index: 2; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; padding: 10px 14px; border-radius: 8px; background: #252525; color: white; font-size: 13px; font-weight: 500; text-align: center; box-shadow: 0 4px 16px rgb(0 0 0 / 15%); pointer-events: none; }
.ln3d-input-error::before { content: ''; position: absolute; bottom: 100%; left: calc(50% - 6px); border: 6px solid transparent; border-bottom-color: #252525; }
.ln3d-input[aria-invalid="true"] { border-color: #9e2020; }
.ln3d-modes { display: flex; justify-self: center; padding: 6px; border-radius: 100px; background: rgb(255 255 255 / 20%); }
.ln3d-frame .ln3d-modes button { border: 0; border-radius: 100px; padding: 7px 16px; background: transparent; color: var(--black1, #252525); font-size: 16px; font-weight: 600; }
.ln3d-frame .ln3d-modes button[aria-pressed="true"] { background: var(--ln3d-green); color: white; font-weight: 700; }
.ln3d-letters { --ln3d-letter-gap: clamp(4px, calc(48px / var(--ln3d-count, 1)), 16px); display: grid; grid-template-columns: repeat(var(--ln3d-count, 1), minmax(0, 1fr)); gap: var(--ln3d-letter-gap); width: 100%; max-width: calc(var(--ln3d-count, 1) * 120px + (var(--ln3d-count, 1) - 1) * var(--ln3d-letter-gap)); margin-inline: auto; min-height: 165px; align-items: end; }
.ln3d-empty { display: grid; place-items: center; width: 100%; min-height: 165px; margin: 0; padding: 16px; text-align: center; font-size: 14px; }
.ln3d-letter { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 16px; }
.ln3d-letter-art { position: relative; container-type: inline-size; width: 100%; max-width: 120px; aspect-ratio: 1.1; }
.ln3d-letter-art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.ln3d-letter-art > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(80px, 85cqw); font-weight: 700; line-height: 1; }
.ln3d-letter-palette { position: relative; display: grid; place-items: center; width: 100%; max-width: 45px; aspect-ratio: 1; padding: 4px; border: 2px solid white; border-radius: 50%; background: #eee; }
.ln3d-letter-swatch { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.ln3d-letter-swatch > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ln3d-palette-icon { display: none; position: absolute; width: 20px; height: 20px; max-width: 75%; max-height: 75%; }
.ln3d-letter-palette.is-active .ln3d-palette-icon { display: block; }
.ln3d-letter-palette:hover { outline: 1px solid var(--ln3d-green); }
.ln3d-letter-palette:focus-visible { outline: 1px solid #252525; outline-offset: 2px; }
.ln3d-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.ln3d-options legend { width: 100%; padding: 0; margin-bottom: 12px; }
.ln3d-option-list { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ln3d-option { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; background: white; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; }
.ln3d-option:has(input:checked) { border-color: var(--ln3d-green); color: var(--ln3d-green); }
.ln3d-option input { appearance: none; width: 22px; height: 22px; margin: 0; border: 0; border-radius: 50%; background: url('images/radio.svg') center no-repeat; flex-shrink: 0; cursor: pointer; }
.ln3d-option input:checked { background-image: url('images/radio-selected.svg'); }
.ln3d-surfaces .ln3d-option { flex: 0 1 180px; }
.ln3d-order { padding: 16px 24px; background: white; border-radius: 16px; }
.ln3d-order-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.ln3d-order-heading p { font-size: 16px; margin: 0 0 4px; }
.ln3d-summary { display: flex; flex-wrap: wrap; gap: 8px; color: var(--gray5, #737373); font-size: 14px; }
.ln3d-summary > span + span:not(:empty) { border-left: 1px solid #ddd; padding-left: 8px; }
.ln3d-total { font-size: 20px; font-weight: 700; white-space: nowrap; }
.ln3d-frame .ln3d-primary { display: flex; align-items: center; justify-content: center; width: 100%; gap: 12px; padding: 12px 16px; min-height: 50px; background: var(--ln3d-green); color: white; border: 0; border-radius: 100px; font-size: 16px; font-weight: 700; }
.ln3d-primary:hover:not(:disabled) { background: #105b35; }
.ln3d-add > picture { flex-shrink: 0; }
.ln3d-disclaimer { margin: 8px 0 0; text-align: center; color: var(--gray5, #737373); font-size: 12px; line-height: 1.4; }
.ln3d-setup { margin: 10px 0; font-size: 14px; }
.ln3d-picker { width: 350px; max-width: 100%; max-height: var(--ln3d-picker-max-height, calc(100dvh - var(--header-height, 146px) - 32px)); display: flex; flex-direction: column; overflow: hidden; padding: 24px 16px; border: 0; border-radius: 16px; margin: 0; background: white; color: var(--black1, #252525); box-shadow: 0 12px 40px rgb(0 0 0 / 12%); opacity: 1; translate: 0 0; transition: opacity 180ms ease, translate 180ms ease; }
.ln3d-picker:not([open]) { display: none; }
.ln3d-picker-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 16px; }
.ln3d-picker-body { display: flex; min-height: 0; flex-direction: column; gap: 24px; margin-inline: calc(-1 * var(--ln3d-scrollbar-gutter, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable both-edges; }
.ln3d-picker-body > * { flex-shrink: 0; }
.ln3d-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ln3d-picker-heading, .ln3d-frame .ln3d-save { flex-shrink: 0; }
.ln3d-picker-heading h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 0; }
.ln3d-frame .ln3d-close { display: grid; place-items: center; border: 0; padding: 0; width: 24px; height: 24px; flex-shrink: 0; line-height: 1; color: inherit; background: transparent; }
.ln3d-close .ln3d-close-mobile { display: none; }
.ln3d-frame .ln3d-save { margin-top: 8px; }
.ln3d-picker-preview { position: relative; height: 174px; margin-bottom: -8px; }
.ln3d-picker-preview img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; max-height: 100%; max-width: 100%; object-fit: contain; }
.ln3d-picker fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.ln3d-picker legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.ln3d-color-list { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; justify-content: space-between; }
.ln3d-swatch { width: 100%; aspect-ratio: 1; border: 1px solid #ddd; border-radius: 50%; padding: 4px; background: white; position: relative; }
.ln3d-swatch-fill { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ln3d-swatch-fill > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ln3d-swatch[aria-pressed="true"], .ln3d-pattern[aria-pressed="true"] .ln3d-pattern-image { border-color: #252525; outline: none; }
.ln3d-swatch:focus-visible { outline: none; border-color: #252525; }
.ln3d-pattern:focus-visible { outline: none; }
.ln3d-pattern:focus-visible .ln3d-pattern-image { border-color: #252525; }
.ln3d-swatch[aria-pressed="true"]::after, .ln3d-pattern[aria-pressed="true"] .ln3d-pattern-image::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: url('images/check.svg') center no-repeat; pointer-events: none; }
.ln3d-pattern-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); gap: 12px; }
.ln3d-pattern { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ln3d-pattern-image { position: relative; display: block; width: 45px; height: 45px; border: 1px solid #ddd; border-radius: 50%; padding: 4px; }
.ln3d-pattern-fill { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background-color: var(--ln3d-pattern-color, transparent); background-image: var(--ln3d-pattern-background-image, none); background-position: center; background-size: cover; }
.ln3d-pattern-fill > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ln3d-pattern-name, .ln3d-pattern-price { font-size: 13px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.ln3d-pattern-name { overflow-wrap: normal; }
.ln3d-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ln3d-frame[data-picker-layout="inline"]:has(.ln3d-picker[open]) { display: grid; grid-template-columns: minmax(0, 1fr) 350px; column-gap: 32px; align-items: start; }
.ln3d-frame[data-picker-layout="inline"] .ln3d-controls { grid-row: 1; }
.ln3d-frame[data-picker-layout="inline"]:has(.ln3d-picker[open]) .ln3d-controls { grid-column: 1; width: 100%; }
.ln3d-frame[data-picker-layout="inline"] .ln3d-picker { position: sticky; top: var(--ln3d-picker-top, calc(var(--header-height, 146px) + 16px)); grid-column: 2; grid-row: 1; align-self: start; }
.ln3d-picker:modal { position: fixed; inset: 0; margin: auto; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); }
.ln3d-picker::backdrop { background: rgb(37 37 37 / 60%); }
html:has(.ln3d-picker:modal), html:has(.ln3d-confirmation:modal) { overflow: hidden; scrollbar-gutter: stable; }
/* Keep the sticky header attached to the viewport while the page is locked. */
body:has(.ln3d-picker:modal), body:has(.ln3d-confirmation:modal) { overflow: clip; }
.ln3d-confirmation { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 20px; width: 640px; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: 16px; background: white; color: var(--black1, #252525); box-shadow: 0 12px 40px rgb(0 0 0 / 12%); }
.ln3d-confirmation:not([open]) { display: none; }
.ln3d-confirmation::backdrop { background: rgb(37 37 37 / 60%); }
.ln3d-confirmation-heading { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 16px; }
.ln3d-confirmation-heading h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ln3d-confirmation-body { display: flex; min-height: 0; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable both-edges; }
.ln3d-confirmation-body > * { flex-shrink: 0; }
.ln3d-confirmation-name { margin: 0; text-align: center; font-size: 28px; font-weight: 700; overflow-wrap: anywhere; }
.ln3d-confirmation-summary { justify-content: center; }
.ln3d-confirmation-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 8px; padding: 0; margin: 0; list-style: none; }
.ln3d-confirmation-letters li { display: flex; flex: 0 0 80px; min-width: 0; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; overflow-wrap: anywhere; }
.ln3d-confirmation-letters img { display: block; width: 100%; height: 80px; object-fit: contain; margin-bottom: 4px; }
.ln3d-confirmation-pattern { color: var(--gray5, #737373); font-size: 12px; }
.ln3d-confirmation-total { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-top: 16px; border-top: 1px solid #dadada; }
.ln3d-confirmation-total strong { font-size: 20px; font-weight: 700; white-space: nowrap; }
.ln3d-confirmation-actions { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1fr; gap: 12px; }
.ln3d-confirmation-actions a { text-decoration: none; }
.ln3d-frame .ln3d-secondary { display: flex; align-items: center; justify-content: center; padding: 12px 16px; min-height: 50px; border: 1px solid var(--ln3d-green); border-radius: 100px; background: white; color: var(--ln3d-green); font-size: 16px; font-weight: 700; transition: background-color 180ms ease, color 180ms ease; }
.ln3d-frame .ln3d-secondary:is(:hover, :focus-visible) { background: var(--ln3d-green); color: white; }
@starting-style { .ln3d-picker[open] { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .ln3d-picker, .ln3d-frame .ln3d-secondary { transition: none; } }
@media (max-width: 768px) {
    .ln3d-section.container { padding: 0 0 50px; }
    .ln3d-frame { --ln3d-preview-height: 175px; --ln3d-input-height: 45px; --ln3d-controls-gap: 20px; min-height: 0; padding: 0 16px 16px; border: 0; border-radius: 20px; background: var(--gray1, #f4f4f4); }
    .ln3d-scene { height: calc(var(--ln3d-preview-height) + var(--ln3d-controls-gap) + var(--ln3d-input-height) / 2); border-radius: 16px 16px 0 0; background-position: center; }
    .ln3d-controls { width: 100%; gap: var(--ln3d-controls-gap); display: flex; flex-direction: column; align-items: center; }
    .ln3d-letters { order: -1; grid-template-columns: repeat(var(--ln3d-count, 1), minmax(56px, 1fr)); gap: 12px; max-width: calc(var(--ln3d-count, 1) * 88px + (var(--ln3d-count, 1) - 1) * 12px); min-height: var(--ln3d-preview-height); padding-block: 36px 4px; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .ln3d-empty { order: -1; min-height: var(--ln3d-preview-height); }
    .ln3d-letter { gap: 12px; }
    .ln3d-letter-art { max-width: 88px; }
    .ln3d-letter-palette { max-width: 40px; }
    .ln3d-name { gap: 8px; }
    .ln3d-input { height: var(--ln3d-input-height); }
    .ln3d-name > label { order: 1; }
    .ln3d-name > label, .ln3d-options legend { font-size: 14px; }
    .ln3d-modes { width: min(100%, 500px); padding: 4px; background: white; border: 1px solid #ddd; }
    .ln3d-frame .ln3d-modes button, .ln3d-frame .ln3d-modes button[aria-pressed="true"] { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; padding: 7px 5px; }
    .ln3d-option-list { gap: 8px; }
    .ln3d-option { flex: 1; min-height: 45px; padding: 10px 12px; font-size: 14px; }
    .ln3d-option input { width: 20px; height: 20px; }
    .ln3d-surfaces .ln3d-option { flex: 1 1 120px; }
    .ln3d-frame .ln3d-add, .ln3d-frame .ln3d-save { min-height: 45px; }
    .ln3d-order { width: min(calc(100% + 32px), 532px); margin: 0 -16px -16px; padding: 16px; }
    .ln3d-order-heading p { font-size: 14px; }
    .ln3d-total { font-size: 18px; }
    .ln3d-summary { font-size: 13px; }
    .ln3d-picker-preview { height: 153px; }
    .ln3d-picker-heading h3 { font-size: 16px; }
    .ln3d-frame .ln3d-close { width: 22px; height: 22px; }
    .ln3d-close .ln3d-close-desktop { display: none; }
    .ln3d-close .ln3d-close-mobile { display: block; }
}
@media (max-width: 339px) {
    .ln3d-frame .ln3d-modes button, .ln3d-frame .ln3d-modes button[aria-pressed="true"] { font-size: 11px; padding-inline: 5px; }
    .ln3d-pattern-list { gap: 6px; }
    .ln3d-pattern-name, .ln3d-pattern-price { font-size: 12px; }
}
@media (max-width: 480px) {
    .ln3d-confirmation { padding: 20px 16px; gap: 16px; }
    .ln3d-confirmation-heading h2 { font-size: 18px; }
    .ln3d-confirmation-actions { grid-template-columns: 1fr; gap: 8px; }
    .ln3d-confirmation-letters { column-gap: 6px; }
    .ln3d-confirmation-letters li { flex-basis: 64px; }
    .ln3d-confirmation-letters img { height: 68px; }
}
@media (max-height: 720px) {
    .ln3d-picker { padding-block: 16px; }
    .ln3d-picker-body { gap: 16px; }
    .ln3d-picker-preview { margin-bottom: 0; }
}
@media (forced-colors: active) { .ln3d-option input { appearance: auto; } }