/* ============================================================================
   BYO unit dialog
   ----------------------------------------------------------------------------
   BYO form layout, graphic controls, option copy, sticky preview, image
   sizing, and responsive stacking.

   Source: Pasted text (3)(1).txt
   ============================================================================ */

.store-byo-unit-dialog {
    width: min(64rem, calc(100vw - 2rem));
    max-width: 64rem;
}

    .store-byo-unit-dialog .store-byo-unit-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 0.75fr);
        align-items: start;
        gap: 1.5rem;
        min-width: 0;
    }

    .store-byo-unit-dialog .store-byo-unit-form {
        display: grid;
        gap: 1.35rem;
        min-width: 0;
    }

        .store-byo-unit-dialog .store-byo-unit-form > .store-admin-form-section + .store-admin-form-section {
            padding-top: 1.35rem;
            border-top: 1px solid var(--store-divider);
        }

    .store-byo-unit-dialog .store-byo-graphic-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.75rem;
        min-width: 0;
    }

    .store-byo-unit-dialog .store-byo-graphic-select {
        min-width: 0;
    }

    .store-byo-unit-dialog .store-byo-select-graphic {
        min-height: 3.5rem;
        white-space: nowrap;
    }

    .store-byo-unit-dialog .store-byo-option-row {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-width: 0;
    }

    .store-byo-unit-dialog .store-byo-option-copy {
        min-width: 0;
        padding-top: 0.2rem;
    }

    .store-byo-unit-dialog .store-byo-option-title {
        color: var(--store-text-main);
        font-size: 0.9rem;
        font-weight: 750;
        line-height: 1.4;
    }

    .store-byo-unit-dialog .store-byo-option-description {
        display: block;
        margin-top: 0.15rem;
        color: var(--store-text-muted);
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .store-byo-unit-dialog .store-byo-preview-panel {
        position: sticky;
        top: 1rem;
        min-width: 0;
        overflow: hidden;
        background: var(--store-white);
        border: 1px solid var(--store-border);
        border-radius: var(--store-radius-sm);
    }

    .store-byo-unit-dialog .store-byo-preview-header {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--store-border);
    }

    .store-byo-unit-dialog .store-byo-preview-title {
        margin: 0;
        color: var(--store-text-main);
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .store-byo-unit-dialog .store-byo-preview-description {
        display: block;
        margin-top: 0.2rem;
        color: var(--store-text-muted);
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .store-byo-unit-dialog .store-byo-preview-frame {
        display: grid;
        place-items: center;
        min-height: 18rem;
        padding: 1rem;
        background: var(--store-surface-subtle);
    }

    .store-byo-unit-dialog .store-byo-preview-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 21rem;
        object-fit: contain;
    }

    .store-byo-unit-dialog .store-byo-preview-empty {
        display: grid;
        place-items: center;
        gap: 0.5rem;
        max-width: 14rem;
        color: var(--store-text-muted);
        text-align: center;
    }

@media screen and (max-width: 600px) {
    .store-byo-unit-dialog .store-byo-graphic-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .store-byo-unit-dialog .store-byo-select-graphic {
        width: 100%;
    }
}

@media screen and (max-width: 899.98px) {
    .store-byo-unit-dialog .store-byo-unit-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .store-byo-unit-dialog .store-byo-preview-panel {
        position: static;
    }

    .store-byo-unit-dialog .store-byo-preview-frame {
        min-height: 14rem;
    }
}