.sku-panel {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        font-family: "DM Sans Local", "GoogleSansFlex", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Segoe UI", Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: 0;
    }

    .sku-panel *,
    .sku-panel *::before,
    .sku-panel *::after {
        box-sizing: border-box;
        letter-spacing: 0;
    }

    .sku-panel .drawer-section {
        gap: 0.5rem;
    }

    .sku-panel .drawer-section > label,
    .sku-frame-color-panel > label {
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        text-transform: none;
    }

    .sku-choice-grid,
    .size-option-grid,
    .sku-color-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .size-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sku-panel > .drawer-section:first-child .sku-choice-grid {
        grid-template-columns: 1fr;
    }
    .sku-orientation-grid,
    .sku-panel > .sku-orientation-section:first-child .sku-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sku-orientation-grid .sku-choice-button {
        min-height: 40px;
        justify-content: center;
        text-align: center;
    }

    .sku-choice-button,
    .sku-frame-card,
    .sku-color-choice {
        border: 1px solid var(--input-border);
        background: var(--input-bg);
        color: var(--text-primary);
        border-radius: 0;
        cursor: pointer;
        transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

    .sku-choice-button {
        min-height: 44px;
        padding: 0.58rem 0.75rem;
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }

    .size-option-card {
        width: 100%;
        min-height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0.5rem 0.35rem;
        gap: 0;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .size-card-series {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 400;
    }

    .size-card-dimensions {
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
    }

    .sku-choice-button.active-chip,
    .sku-frame-card.active-chip,
    .sku-color-choice.active-chip {
        background: var(--text-primary);
        color: var(--bg-primary);
        border-color: var(--text-primary);
    }

    .sku-choice-button.active-chip .size-card-series,
    .sku-choice-button.active-chip .size-card-dimensions {
        color: var(--bg-primary);
    }

    .sku-size-group-title {
        display: block;
        margin-bottom: 0.45rem;
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 12px;
    }

    .sku-size-tabs {
        display: flex;
        min-width: 0;
        margin-bottom: 0.65rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--drawer-border);
        scrollbar-width: none;
    }

    .sku-size-tabs::-webkit-scrollbar {
        display: none;
    }

    .sku-size-tab {
        position: relative;
        min-height: 40px;
        padding: 0 0.7rem;
        flex: 0 0 auto;
        color: var(--text-secondary);
        background: transparent;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        font: inherit;
        font-size: 12px;
        font-weight: 500;
    }

    .sku-size-tab::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 2px;
        content: "";
        background: transparent;
    }

    .sku-size-tab:hover,
    .sku-size-tab[aria-selected="true"] {
        color: var(--text-primary);
    }

    .sku-size-tab[aria-selected="true"]::after {
        background: var(--text-primary);
    }

    .sku-size-tab:focus-visible,
    .sku-choice-button:focus-visible,
    .sku-frame-card:focus-visible,
    .sku-color-choice:focus-visible,
    .sku-quantity-input:focus-visible {
        outline: 2px solid var(--text-primary);
        outline-offset: 2px;
    }

    .sku-size-panel[hidden] {
        display: none;
    }

    .sku-size-selector.has-tabs .sku-size-group-title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sku-frame-list {
        display: grid;
        gap: 0.5rem;
    }

    .sku-frame-card,
    .sku-color-choice {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 44px;
        padding: 0.58rem 0.75rem;
        font: inherit;
        text-align: left;
    }

    .sku-frame-swatch,
    .sku-color-swatch {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border: 1px solid color-mix(in srgb, var(--text-primary), transparent 55%);
        background: var(--frame-swatch, #b98b58);
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.36), inset 0 -2px 3px rgba(0,0,0,0.2);
    }

    .sku-color-swatch {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .sku-frame-card strong {
        font-size: 13px;
        font-weight: 500;
    }

    .sku-frame-card small {
        margin-left: 0.3rem;
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 400;
    }

    .sku-frame-card.active-chip small {
        color: color-mix(in srgb, var(--bg-primary), transparent 28%);
    }

    .sku-frame-color-panel {
        display: grid;
        gap: 0.55rem;
        padding-top: 0.2rem;
    }

    .sku-frame-color-panel[hidden],
    .sku-color-grid[hidden] {
        display: none;
    }

    .sku-color-choice span {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 500;
    }

    .sku-quantity-input {
        width: 96px;
        min-height: 44px;
        padding: 0.58rem 0.75rem;
        color: var(--text-primary);
        background: var(--input-bg);
        border: 1px solid var(--input-border);
        border-radius: 0;
        font: inherit;
        font-size: 13px;
        outline: none;
    }

    .sku-purchase-row {
        display: flex;
        padding-top: 0.85rem;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.9rem;
        border-top: 1px solid var(--drawer-border);
    }

    .sku-price-summary {
        display: grid;
        min-width: 0;
        gap: 0.22rem;
        padding: 0;
        border: 0;
    }

    .sku-price-summary span {
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 400;
    }

    .sku-price-summary strong {
        color: var(--text-primary);
        font-size: 21px;
        font-weight: 500;
        line-height: 1.1;
    }

    .sku-purchase-row #addToCartBtn {
        width: fit-content;
        min-width: 140px;
        max-width: 100%;
        min-height: 44px;
        padding: 0 1rem;
        flex: 0 0 auto;
        border-radius: 0;
        font-size: 13px;
        font-weight: 500;
    }

    .sku-purchase-row #addToCartBtn.is-loading {
        cursor: wait;
    }

    .sku-button-spinner {
        display: none;
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: sku-button-spin 0.75s linear infinite;
    }

    #addToCartBtn.is-loading .sku-button-spinner,
    #persistentAddToCartBtn.is-loading .sku-button-spinner {
        display: inline-block;
    }

    .sku-panel .sku-choice-button,
    .sku-panel .sku-frame-card,
    .sku-panel .sku-color-choice,
    .sku-panel .sku-quantity-input,
    .sku-panel #addToCartBtn {
        border-radius: 0;
        letter-spacing: 0;
    }

    .sku-panel .sku-choice-button,
    .sku-panel .sku-frame-card,
    .sku-panel .sku-color-choice {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }

    .sku-panel #addToCartBtn {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }
    @keyframes sku-button-spin {
        to { transform: rotate(360deg); }
    }

    @media (max-width: 380px) {
        .sku-purchase-row {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    /* New map customizer layout: compact, horizontal option rows. */
    .frontend-theme-art-studio-next.map-static-template .sku-inline-option {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-inline-option > label {
        margin: 0;
        white-space: nowrap;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-inline-option .sku-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        min-width: 0;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-inline-option .sku-choice-button {
        min-height: 34px;
        padding: 0.32rem 0.5rem;
        line-height: 1.2;
    }

    .frontend-theme-art-studio-next.map-static-template .size-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .frontend-theme-art-studio-next.map-static-template .size-option-card {
        min-height: 36px;
        padding: 0.3rem 0.25rem;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-card {
        min-width: 0;
        min-height: 34px;
        padding: 0.32rem 0.5rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        text-align: left;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-swatch {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-card > span:last-child {
        min-width: 0;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-card strong {
        display: block;
        overflow-wrap: anywhere;
        font-size: 11px;
        line-height: 1.2;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-frame-card small {
        display: none;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-color-grid {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 6px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-color-choice {
        min-width: 0;
        min-height: 54px;
        padding: 6px 3px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        text-align: center;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-color-choice .sku-color-swatch {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-color-choice > span:last-child {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.15;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel {
        --sku-control-radius: 6px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-choice-button,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .size-option-card,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-size-tab,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-quantity-input,
    .frontend-theme-art-studio-next.map-static-template .sku-panel #addToCartBtn {
        border-radius: var(--sku-control-radius) !important;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-choice-grid,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .size-option-grid,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-frame-list,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-color-grid {
        border-radius: var(--sku-control-radius);
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-frame-list,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-color-grid {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-frame-list {
        margin-bottom: 8px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-frame-color-panel {
        gap: 8px;
    }

    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-frame-list .sku-frame-card,
    .frontend-theme-art-studio-next.map-static-template .sku-panel .sku-color-grid .sku-color-choice {
        border-radius: var(--sku-control-radius) !important;
    }

    /* Keep the size drawer consistent across every customizer, not only maps. */
    .customizer-page .sku-panel .size-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    /* Keep frame material and color controls identical across customizers. */
    .customizer-page .sku-panel .sku-frame-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .customizer-page .sku-panel .sku-frame-card {
        min-width: 0;
        min-height: 34px;
        padding: 0.32rem 0.5rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        text-align: left;
    }

    .customizer-page .sku-panel .sku-frame-swatch {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .customizer-page .sku-panel .sku-frame-card > span:last-child {
        min-width: 0;
    }

    .customizer-page .sku-panel .sku-frame-card strong {
        display: block;
        overflow-wrap: anywhere;
        font-size: 11px;
        line-height: 1.2;
    }

    .customizer-page .sku-panel .sku-frame-card small {
        display: none;
    }

    .customizer-page .sku-panel .sku-color-grid {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 6px;
    }

    .customizer-page .sku-panel .sku-color-choice {
        min-width: 0;
        min-height: 54px;
        padding: 6px 3px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        text-align: center;
    }

    .customizer-page .sku-panel .sku-color-choice .sku-color-swatch {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .customizer-page .sku-panel .sku-color-choice > span:last-child {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.15;
    }

    .customizer-page .sku-panel .sku-frame-color-panel {
        gap: 8px;
    }

    .customizer-page .sku-panel .size-option-card {
        min-height: 36px;
        padding: 0.3rem 0.25rem;
        border-radius: 6px !important;
    }

    .customizer-page .sku-panel .sku-size-tab {
        border-radius: 6px !important;
    }

    .customizer-page .sku-panel .sku-frame-card,
    .customizer-page .sku-panel .sku-color-choice {
        border-radius: 6px !important;
    }

    /* The map SKU layout is the shared component used by every customizer. */
    .customizer-page .sku-panel .sku-inline-option {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .customizer-page .sku-panel .sku-inline-option > label {
        margin: 0;
        white-space: nowrap;
    }

    .customizer-page .sku-panel .sku-inline-option .sku-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        min-width: 0;
    }

    .customizer-page .sku-panel .sku-inline-option .sku-choice-button {
        min-height: 34px;
        padding: 0.32rem 0.5rem;
        line-height: 1.2;
    }

    .customizer-page .sku-panel .sku-inline-option.sku-options-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .customizer-page .sku-panel {
        --sku-control-radius: 6px;
    }

    .customizer-page .sku-panel .sku-choice-button,
    .customizer-page .sku-panel .size-option-card,
    .customizer-page .sku-panel .sku-size-tab,
    .customizer-page .sku-panel .sku-quantity-input {
        border-radius: var(--sku-control-radius) !important;
    }

    .customizer-page .sku-panel .sku-choice-grid,
    .customizer-page .sku-panel .size-option-grid,
    .customizer-page .sku-panel .sku-frame-list,
    .customizer-page .sku-panel .sku-color-grid {
        border-radius: var(--sku-control-radius);
    }

    .customizer-page .sku-panel .sku-frame-list,
    .customizer-page .sku-panel .sku-color-grid {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .customizer-page .sku-panel .sku-frame-list {
        margin-bottom: 8px;
    }

    .customizer-page .sku-panel .sku-frame-color-panel {
        gap: 8px;
    }

    /* Keep purchase actions fixed below the changing drawer tab content. */
    .customizer-page .drawer-panel.has-purchase-footer {
        overflow: hidden;
        padding-bottom: 0;
    }

    .customizer-page .drawer-panel.has-purchase-footer > .drawer-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .customizer-page .customizer-purchase-footer {
        flex: 0 0 auto;
        width: 100%;
        /* 上下间距保持一致 */
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        background: var(--drawer-bg);
        border-top: 1px solid var(--drawer-border);
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-row {
        display: grid;
        grid-template-columns: minmax(82px, 0.62fr) minmax(0, 1.38fr);
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0;
        border: 0;
    }

    .customizer-page .customizer-purchase-footer .sku-price-summary {
        align-self: center;
        min-width: 0;
    }

    .customizer-page .customizer-purchase-footer .sku-price-summary strong {
        overflow-wrap: anywhere;
        font-size: 26px;
        font-weight: 600;
        line-height: 1;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions {
        display: flex;
        min-width: 0;
        width: 100%;
        gap: 8px;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions .drawer-btn {
        width: 50%;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 0 0.65rem;
        border-radius: 6px !important;
        box-shadow: none !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        transition: none !important;
        transform: none !important;
        white-space: nowrap;
        cursor: pointer;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions .drawer-btn:disabled,
    .customizer-page .customizer-purchase-footer .sku-purchase-actions .drawer-btn.is-loading {
        cursor: not-allowed;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions #persistentAddToCartBtn {
        flex: 1 1 0;
        background: var(--btn-primary-bg);
        color: var(--btn-primary-text);
        border: 1px solid var(--btn-primary-bg);
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions #persistentSaveSkuDraftBtn {
        flex: 1 1 0;
        background: #176b4d;
        color: #fff;
        border: 1px solid #176b4d;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions .drawer-btn:hover,
    .customizer-page .customizer-purchase-footer .sku-purchase-actions #persistentSaveSkuDraftBtn:hover {
        background: inherit;
        color: inherit;
        border-color: inherit;
        box-shadow: none !important;
        transform: none !important;
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions #persistentAddToCartBtn:hover {
        background: var(--btn-primary-bg);
        color: var(--btn-primary-text);
        border-color: var(--btn-primary-bg);
    }

    .customizer-page .customizer-purchase-footer .sku-purchase-actions #persistentSaveSkuDraftBtn:hover {
        background: #176b4d;
        color: #fff;
        border-color: #176b4d;
    }

    .customizer-page .customizer-purchase-footer .status-note {
        margin: 0.45rem 0 0;
    }

    .customizer-page .customizer-purchase-footer .status-note:empty {
        display: none;
    }

    @media (max-width: 430px) {
        .customizer-page .customizer-purchase-footer .sku-purchase-row {
            grid-template-columns: minmax(74px, 0.52fr) minmax(0, 1.48fr);
            gap: 7px;
        }

        .customizer-page .customizer-purchase-footer .sku-purchase-actions {
            gap: 5px;
        }

        .customizer-page .customizer-purchase-footer .sku-purchase-actions .drawer-btn {
            padding: 0 0.35rem;
            font-size: 12px;
        }
    }

    @media (max-width: 340px) {
        .customizer-page .customizer-purchase-footer .sku-purchase-row {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .customizer-page .customizer-purchase-footer .sku-price-summary {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
    }

    /* Use a clean white surface for every customizer rail, drawer and purchase area. */
    .customizer-page .vertical-tab-bar,
    .customizer-page .tab-item,
    .customizer-page .tab-item:hover,
    .customizer-page .tab-item.active,
    .customizer-page .drawer-panel,
    .customizer-page .drawer-header,
    .customizer-page .drawer-content,
    .customizer-page .customizer-purchase-footer {
        background: #fff !important;
        color: #10100f;
    }

    .customizer-page .drawer-panel,
    .customizer-page .customizer-purchase-footer {
        border-color: #e1e1dc;
    }

    .customizer-page .vertical-tab-bar {
        border-color: #e1e1dc;
        box-shadow: none !important;
    }

    /* Tabs stay legible on the white rail; selection is indicated by an underline only. */
    .customizer-page .tab-item,
    .customizer-page .tab-item:hover,
    .customizer-page .tab-item.active {
        position: relative;
        color: #10100f !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .customizer-page .tab-item::after {
        position: absolute;
        right: 14px;
        bottom: 5px;
        left: 14px;
        height: 2px;
        content: "";
        background: transparent;
    }

    .customizer-page .tab-item.active::after {
        background: #10100f;
    }

    /* Match every customizer workspace to the map customizer preview surface. */
    .customizer-page:not(.map-static-template) .main-content-container,
    .customizer-page .mondrian-app,
    .customizer-page .op-art-app {
        background: #e7e7e7 !important;
    }

    .customizer-page .mondrian-stage-wrap,
    .customizer-page .op-art-workspace {
        background-color: #e7e7e7 !important;
        background-image:
            linear-gradient(rgba(17, 17, 17, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px) !important;
        background-size: 48px 48px !important;
    }

    /* Keep the shared physical frame overlay above every non-map artwork preview. */
    .customizer-page:not(.map-static-template) .artwork-frame,
    .customizer-page:not(.map-static-template) .mondrian-stage,
    .customizer-page:not(.map-static-template) .op-art-stage {
        position: relative;
        container-type: inline-size;
        overflow: visible;
    }

    .customizer-page:not(.map-static-template) .titimap-physical-frame {
        z-index: 20;
        /* The map customizer derives its frame from the canvas itself
           (`max(8, round(14 * min(w, h) / 1500))` in map-customizer.js), which
           works out to ~1% of the canvas width. Matching that ratio here keeps
           the frame the same weight as the map's on every artwork; the previous
           1.4cqw with an 8px floor made the non-map frames ~60% thicker.
           The container is the canvas box for star (then scaled by the preview
           transform) and the display box for mondrian/abstract/modular, so 1cqw
           means "1% of what the visitor sees" either way. */
        --physical-frame-depth: clamp(3px, 1cqw, 14px);
    }

    /* Keep every customizer inside the viewport below the current site header. */
    body.customizer-page {
        --customizer-viewport-height: calc(100dvh - var(--customizer-header-height, 72px));
        height: 100dvh;
        overflow: hidden;
    }

    body.customizer-page > #main-content {
        width: 100%;
        height: var(--customizer-viewport-height);
        min-height: 0 !important;
        overflow: hidden;
    }

    body.customizer-page > #main-content > .mondrian-app,
    body.customizer-page > #main-content > .op-art-app,
    body.customizer-page .app-wrapper {
        height: 100%;
        min-height: 0 !important;
        overflow: hidden;
    }

    body.customizer-page .app-wrapper {
        height: 100dvh;
    }

    body.customizer-page .app-wrapper > .main-content-container,
    body.customizer-page .mondrian-app > .main-content-container,
    body.customizer-page .op-art-app > .main-content-container {
        height: var(--customizer-viewport-height);
        min-height: 0 !important;
        overflow: hidden;
    }

    body.customizer-page .mondrian-workspace,
    body.customizer-page .mondrian-stage-wrap,
    body.customizer-page .op-art-workspace,
    body.customizer-page .artwork-display {
        height: 100%;
        min-height: 0 !important;
    }

    body.customizer-page .mondrian-stage-wrap,
    body.customizer-page .op-art-workspace,
    body.customizer-page .artwork-display {
        overflow: hidden;
    }

    /* Keep every non-map artwork inside the same viewport budget as maps.
       The header and the mobile tab bar occupy real space and must not be
       covered by a fixed-size design stage. */
    body.customizer-page:not(.map-static-template) .artwork-display,
    body.customizer-page:not(.map-static-template) .mondrian-stage-wrap,
    body.customizer-page:not(.map-static-template) .op-art-workspace {
        box-sizing: border-box;
        min-height: 0 !important;
        max-height: 100%;
        overflow: hidden;
    }

    body.customizer-page:not(.map-static-template) .artwork-stage,
    body.customizer-page:not(.map-static-template) .mondrian-stage,
    body.customizer-page:not(.map-static-template) .op-art-stage {
        max-width: 100%;
        max-height: 100%;
    }

    /* The non-map customizers used to size their preview from the internal
       canvas resolution (1200px), which made the artwork render noticeably
       larger than the map customizer. Cap it at the same 800px surface the map
       uses so every design area shows the artwork at one scale.
       Scoped to .mondrian-stage / .op-art-stage on purpose: the map and star
       customizers use .artwork-stage and keep their own cap. */
    body.customizer-page:not(.map-static-template) .mondrian-stage,
    body.customizer-page:not(.map-static-template) .op-art-stage {
        max-width: min(var(--frame-max-width, 800px), 800px);
    }

    /* The star customizer sizes its preview from the poster canvas (1000x1500)
       rather than from a print short side, so it rendered ~15% larger than the
       map customizer. Cap it to the same 800px surface. Scoped with
       :has(.star-poster) because star and map share the .artwork-stage markup --
       without it the map customizer would be capped too. */
    body.customizer-page:has(.star-poster) .artwork-stage {
        max-width: min(var(--frame-max-width, 800px), 800px);
        /* This preview is sized from its height and derives the width from the
           aspect ratio, so capping the width alone squashed it. Cap both, at the
           same ratio, to keep the poster in proportion. */
        max-height: calc(min(var(--frame-max-width, 800px), 800px) * var(--frame-height) / var(--frame-width));
    }

    @media (min-width: 681px) {
        body.customizer-page:not(.map-static-template) .mondrian-stage,
        body.customizer-page:not(.map-static-template) .op-art-stage {
            width: min(
                calc(100vw - var(--tab-width, 72px) - 2rem),
                calc((100dvh - var(--customizer-header-height, 72px) - 2rem) * var(--frame-width) / var(--frame-height)),
                var(--frame-max-width, 620px)
            );
        }

        /* The star customizer reuses .artwork-stage from the map customizer, so it
           has to use the map's own width formula (the --frame-gap budget) instead
           of the 2rem one above. With the 2rem budget its preview rendered larger
           than the map preview on the very same viewport. Scoped with
           :has(.star-poster) so the map page keeps its rule from
           map-customizer-shell.css. */
        body.customizer-page:has(.star-poster) .artwork-stage {
            width: min(
                calc(100vw - var(--tab-width) - var(--frame-gap)),
                calc((100vh - var(--customizer-header-height, 72px) - var(--frame-gap)) * var(--frame-width) / var(--frame-height)),
                var(--frame-max-width, 800px)
            );
        }
    }

    @media (max-width: 680px) {
        body.customizer-page:not(.map-static-template) .artwork-display,
        body.customizer-page:not(.map-static-template) .mondrian-stage-wrap,
        body.customizer-page:not(.map-static-template) .op-art-workspace {
            height: calc(100% - var(--customizer-mobile-tab-height, 74px));
            max-height: calc(100% - var(--customizer-mobile-tab-height, 74px));
            padding-bottom: 1rem;
        }

        body.customizer-page:not(.map-static-template) .artwork-stage,
        body.customizer-page:not(.map-static-template) .mondrian-stage,
        body.customizer-page:not(.map-static-template) .op-art-stage {
            width: min(100%, calc(100dvw - 2rem));
            max-height: calc(100% - 1rem);
            overflow: hidden;
        }

        body.customizer-page:not(.map-static-template) .artwork-frame,
        body.customizer-page:not(.map-static-template) .titimap-physical-frame,
        body.customizer-page:not(.map-static-template) .mondrian-stage,
        body.customizer-page:not(.map-static-template) .op-art-stage {
            overflow: hidden !important;
        }

        /* Keep the physical frame visible, but prevent its cast shadow/filter
           from spilling outside the artwork edge on narrow screens. */
        body.customizer-page:not(.map-static-template) .titimap-physical-frame {
            filter: none !important;
        }
        body.customizer-page:not(.map-static-template) .titimap-physical-frame__edge {
            filter: none !important;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--physical-frame-dark), transparent 26%) !important;
        }
    }

    /* Mobile tab drawers are full-screen sheets. They start at the viewport
       top so the controls remain usable without being trapped below the site
       header or behind the bottom tab bar. */
    @media (max-width: 900px) {
        body.customizer-page > #main-content,
        body.customizer-page > #main-content > .mondrian-app,
        body.customizer-page > #main-content > .op-art-app,
        body.customizer-page .app-wrapper,
        body.customizer-page .app-wrapper > .main-content-container {
            overflow: visible !important;
        }

        body.customizer-page .drawer-panel {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: auto !important;
            left: 0 !important;
            z-index: 2000 !important;
            width: 100vw !important;
            height: 100dvh !important;
            max-height: none !important;
            margin: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            transform: translateY(100%) !important;
            transition: transform 280ms ease, opacity 280ms ease !important;
            opacity: 0;
            box-sizing: border-box;
            padding: 1.25rem 1rem calc(var(--customizer-mobile-tab-height, 74px) + 1.5rem);
        }

        body.customizer-page .drawer-panel:not(.open) {
            pointer-events: none !important;
        }

        body.customizer-page .drawer-panel.open {
            display: flex !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
            opacity: 1;
        }
    }