/* ==========================================================================
       PRODUCT OPTION DIALOG
       ========================================================================== */

.store-product-dialog,
.store-product-dialog *,
.store-product-dialog *::before,
.store-product-dialog *::after {
    box-sizing: border-box;
}


/* ==========================================================================
       ADAPTIVE DIALOG WIDTH
       ========================================================================== */

.store-product-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(88rem, calc(100vw - 2rem));
    max-width: 88rem;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    overflow: hidden;
}

    .store-product-dialog.store-product-dialog--compact {
        width: min(76rem, calc(100vw - 2rem));
        max-width: 76rem;
    }

    .store-product-dialog.store-product-dialog--standard {
        width: min(88rem, calc(100vw - 2rem));
        max-width: 88rem;
    }

    .store-product-dialog.store-product-dialog--expanded {
        width: min(96rem, calc(100vw - 2rem));
        max-width: 96rem;
    }


    /* ==========================================================================
       DIALOG CONTENT
       ========================================================================== */

    .store-product-dialog .mud-dialog-content {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none !important;
        margin: 0;
        padding: 0;
        overflow: visible !important;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;
    }

    .store-product-dialog .store-modal-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: clamp(1rem, 2.25vw, 1.5rem);
        overflow: visible;
    }

    .store-product-dialog .store-product-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow: visible;
    }


    /* ==========================================================================
       MAIN PRODUCT GRID
       ========================================================================== */

    .store-product-dialog .store-product-grid {
        display: grid !important;
        grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr);
        grid-template-areas:
            "name price"
            "divider divider"
            "preview options"
            "disclaimer disclaimer";
        align-items: start;
        gap: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        padding: clamp(1rem, 2.5vw, 1.75rem) !important;
    }

.store-product-dialog--expanded .store-product-grid {
    grid-template-columns: minmax(16rem, 0.55fr) minmax(0, 1.45fr);
}

.store-product-dialog .store-product-grid > .mud-grid-item {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    margin: 0;
    padding: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
}


/* ==========================================================================
       GRID AREAS
       ========================================================================== */

.store-product-dialog .store-header-name {
    grid-area: name;
}

.store-product-dialog .store-header-price {
    grid-area: price;
}

.store-product-dialog .store-header-divider {
    grid-area: divider;
}

.store-product-dialog .store-preview-column {
    grid-area: preview;
}

.store-product-dialog .store-options-column {
    grid-area: options;
}

.store-product-dialog .store-disclaimer-column {
    grid-area: disclaimer;
}


/* ==========================================================================
       HEADER
       ========================================================================== */

.store-product-dialog .store-header-name,
.store-product-dialog .store-header-price {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.store-product-dialog .store-header-name {
    justify-content: flex-start;
    padding-right: 1rem !important;
}

.store-product-dialog .store-header-price {
    justify-content: flex-end;
    padding-left: 1rem !important;
}

.store-product-dialog .store-product-heading {
    width: 100%;
    min-width: 0;
}

.store-product-dialog .store-product-eyebrow {
    display: block;
    margin: 0 0 0.25rem;
    color: var(--store-main-color);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.055em;
}

.store-product-dialog .store-product-title {
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--store-text-main);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.store-product-dialog .store-product-price {
    margin: 0;
    color: var(--store-main-color) !important;
    font-size: clamp(1.25rem, 2.25vw, 1.7rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.store-product-dialog .store-price-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.store-product-dialog .store-price-label {
    margin: 0 0 0.15rem;
    color: var(--store-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.store-product-dialog .store-header-divider {
    width: 100%;
    margin: 1rem 0 1.25rem;
}


/* ==========================================================================
       COLUMNS
       ========================================================================== */

.store-product-dialog .store-preview-column,
.store-product-dialog .store-options-column,
.store-product-dialog .store-disclaimer-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.store-product-dialog .store-preview-column {
    padding-right: clamp(0.75rem, 2vw, 1.25rem) !important;
}

.store-product-dialog .store-options-column {
    padding-left: clamp(0.75rem, 2vw, 1.25rem) !important;
}

.store-product-dialog .store-options-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}


/* ==========================================================================
       LARGE PREVIEW
       ========================================================================== */

.store-product-dialog .store-preview-frame {
    position: sticky;
    top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: clamp(20rem, calc(100dvh - 17rem), 34rem);
    min-height: 0;
    margin: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    overflow: hidden;
    border: 0;
    border-radius: var(--store-radius-md);
}

.store-product-dialog .store-preview-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 8;
    padding: 0.3rem 0.55rem;
    color: var(--store-text-secondary);
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: 999rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.025em;
    pointer-events: none;
}

.store-product-dialog .store-main-image-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

    .store-product-dialog .store-product-image,
    .store-product-dialog .store-preview-frame .mud-image,
    .store-product-dialog .store-main-image-shell > img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin-inline: auto;
        object-fit: contain !important;
        object-position: center;
    }


/* ==========================================================================
       LAYERED PREVIEW
       ========================================================================== */

.store-product-dialog .store-layered-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    line-height: 0;
}

.store-product-dialog .store-preview-size-reference {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    visibility: hidden;
    object-fit: contain !important;
    pointer-events: none;
}

.store-product-dialog .store-preview-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
}

.store-product-dialog .store-preview-foreground {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
}


/* ==========================================================================
       IMAGE LOADING
       ========================================================================== */

.store-product-dialog .store-image-loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.store-product-dialog .store-image-loader--large {
    min-height: 10rem;
}

.store-product-dialog .is-loading {
    opacity: 0;
}

.store-product-dialog .is-loaded {
    opacity: 1;
    transition: opacity 160ms ease;
}

.store-product-dialog .is-load-error {
    opacity: 0;
}

.store-product-dialog .store-image-load-error {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    color: var(--store-text-muted);
    background: var(--store-surface-subtle);
    pointer-events: none;
}

.store-product-dialog .store-image-load-error--large {
    border-radius: var(--store-radius-sm);
}


/* ==========================================================================
       PRODUCT DESCRIPTION

       Give product information clear hierarchy before configuration begins.
       ========================================================================== */

.store-product-dialog .store-product-description-panel {
    width: 100%;
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--store-surface-subtle);
    border: 1px solid var(--store-border);
    border-left: 0.25rem solid var(--store-main-color);
    border-radius: var(--store-radius-sm);
}

.store-product-dialog .store-product-description-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0;
}

.store-product-dialog .store-product-description-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.store-product-dialog .store-product-description-copy {
    min-width: 0;
}

.store-product-dialog .store-product-description-label {
    display: block;
    margin: 0 0 0.3rem;
    color: var(--store-main-color);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.055em;
}

.store-product-dialog .store-description {
    width: 100%;
    min-width: 0;
    max-width: 68ch;
    margin: 0;
    color: var(--store-text-secondary);
    font-size: 0.925rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.store-product-dialog .store-option-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    color: var(--store-text-secondary);
    background: var(--store-main-color-pale);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
}

    .store-product-dialog .store-option-intro .mud-icon-root {
        margin-top: 0.05rem;
        color: var(--store-main-color);
    }

    .store-product-dialog .store-option-intro .mud-typography {
        margin: 0;
        color: inherit;
        font-size: 0.84rem;
        line-height: 1.45;
    }


/* ==========================================================================
       OPTION SECTIONS
       ========================================================================== */

.store-product-dialog .store-option-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0.9rem 0 0;
    padding: 1rem !important;
    overflow: visible;
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
}

    .store-product-dialog .store-option-section:first-of-type {
        margin-top: 0;
    }

.store-product-dialog .store-section-title {
    width: 100%;
    min-width: 0;
    margin: 0 0 0.8rem;
    color: var(--store-text-main);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


/* ==========================================================================
       EXACT 5 x 2 VISUAL GRID

       No horizontal scroll.
       MudPagination handles additional choices.
       ========================================================================== */

.store-product-dialog .store-option-gallery,
.store-product-dialog .store-option-gallery--five {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: auto;
}

    .store-product-dialog .store-option-gallery::-webkit-scrollbar,
    .store-product-dialog .store-option-gallery--five::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

.store-product-dialog .store-option-gallery-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
       OPTION CARDS
       ========================================================================== */

.store-product-dialog .store-option-preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 7.25rem;
    margin: 0;
    padding: 0.35rem;
    color: var(--store-text-main);
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
    box-shadow: none;
    font: inherit;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    appearance: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {

    .store-product-dialog
    .store-option-preview-card:hover:not(:disabled) {
        border-color: var(--store-main-color);
        box-shadow: 0 0 0 1px var(--store-main-color);
        transform: translateY(-1px);
    }
}

.store-product-dialog
.store-option-preview-card:focus-visible {
    outline: 2px solid var(--store-main-color);
    outline-offset: 2px;
}

.store-product-dialog
.store-option-preview-card.is-selected {
    border: 2px solid var(--store-main-color);
    background: var(--store-white);
    box-shadow: 0 0 0 1px var(--store-main-color);
}

    .store-product-dialog
    .store-option-preview-card.is-selected::after {
        position: absolute;
        top: 0.35rem;
        right: 0.35rem;
        z-index: 7;
        display: grid;
        place-items: center;
        width: 1.45rem;
        height: 1.45rem;
        color: var(--store-white);
        background: var(--store-main-color);
        border: 2px solid var(--store-white);
        border-radius: 50%;
        box-shadow: 0 1px 3px var(--store-border-strong);
        content: "\2713";
        font-size: 0.8rem;
        font-weight: 900;
        line-height: 1;
        pointer-events: none;
    }

.store-product-dialog
.store-option-preview-card.is-previewing {
    border-color: var(--store-main-color);
    background: var(--store-main-color-pale);
    box-shadow: 0 0 0 1px var(--store-main-color);
}

.store-product-dialog
.store-option-preview-card.is-selected.is-previewing {
    background: var(--store-white);
}

.store-product-dialog
.store-option-preview-card--image-only {
    min-height: 5.2rem;
}

    .store-product-dialog
    .store-option-preview-card--image-only
    .store-option-image-shell {
        height: 4.5rem;
        min-height: 4.5rem;
    }


/* ==========================================================================
       THUMBNAIL IMAGE SHELL
       ========================================================================== */

.store-product-dialog .store-option-image-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 4.5rem;
    min-height: 4.5rem;
    overflow: hidden;
    background: var(--store-white);
    border-radius: 0.4rem;
}

    .store-product-dialog .store-option-preview-image,
    .store-product-dialog .store-option-image-shell > img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        max-height: 100% !important;
        margin: 0;
        object-fit: contain !important;
        object-position: center;
        background: transparent;
        border-radius: 0.4rem;
    }


/* ==========================================================================
       OPTION TEXT
       ========================================================================== */

.store-product-dialog .store-option-preview-name,
.store-product-dialog
.store-option-preview-card .mud-typography {
    display: -webkit-box;
    width: 100%;
    min-height: 1.8rem;
    margin: 0;
    overflow: hidden;
    color: var(--store-text-main);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.store-product-dialog .store-option-price-increase {
    color: var(--store-main-color);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    white-space: normal;
}


/* ==========================================================================
       PAGINATION
       ========================================================================== */

.store-product-dialog .store-option-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0 0.8rem;
}

    .store-product-dialog
    .store-option-pagination
    .mud-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        margin-inline: auto;
    }

    .store-product-dialog
    .store-option-pagination
    .mud-pagination-item {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }


/* ==========================================================================
       BYO
       ========================================================================== */

.store-product-dialog .store-byo-row {
    align-items: center;
}

.store-product-dialog .store-byo-label {
    display: flex;
    align-items: center;
}


/* ==========================================================================
       INPUTS
       ========================================================================== */

.store-product-dialog .store-input,
.store-product-dialog .mud-input-control,
.store-product-dialog .mud-input-root,
.store-product-dialog .mud-input-slot {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.store-product-dialog .store-input {
    margin: 0 !important;
}


/* ==========================================================================
       HELPER TEXT
       ========================================================================== */

.store-product-dialog .store-helper-note {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 0.55rem;
    color: var(--store-text-secondary) !important;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left !important;
    overflow-wrap: anywhere;
}


/* ==========================================================================
       DISCLAIMER
       ========================================================================== */

.store-product-dialog .store-disclaimer-column {
    margin-top: 1rem;
}

.store-product-dialog .store-disclaimer {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.9rem 1rem;
    color: var(--store-disclaimer-text) !important;
    background: var(--store-disclaimer-bg);
    border: 1px solid var(--store-disclaimer-border);
    border-radius: var(--store-radius-sm);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.5;
    text-align: left !important;
    overflow-wrap: anywhere;
}

.store-product-dialog
.store-product-description-panel
.store-disclaimer-column {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--store-disclaimer-border);
}

.store-product-dialog
.store-product-description-panel
.store-disclaimer {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}


/* ==========================================================================
       ACTIONS
       ========================================================================== */

.store-product-dialog .mud-dialog-actions {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: var(--store-white);
    border-top: 1px solid var(--store-border);
}

.store-product-dialog .store-action-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0.9rem max(1.25rem, env(safe-area-inset-right)) max(0.9rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.store-product-dialog .store-action-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.65rem;
    min-width: 0;
}

.store-product-dialog .store-action-summary-label {
    color: var(--store-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.store-product-dialog .store-action-summary-price {
    color: var(--store-main-color);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.store-product-dialog .store-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

    .store-product-dialog .store-action-buttons .store-btn {
        min-height: 2.75rem;
    }


/* ==========================================================================
       TABLET
       ========================================================================== */

@media screen and (min-width: 600px) and (max-width: 959.98px) {

    .store-product-dialog,
    .store-product-dialog.store-product-dialog--compact,
    .store-product-dialog.store-product-dialog--standard,
    .store-product-dialog.store-product-dialog--expanded {
        width: min(48rem, calc(100vw - 1.5rem));
        max-width: 48rem;
        max-height: none;
    }

        .store-product-dialog .mud-dialog-content {
            height: auto;
            max-height: none !important;
            overflow: visible !important;
        }

        .store-product-dialog .store-product-grid,
        .store-product-dialog--expanded .store-product-grid {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "name"
                "price"
                "divider"
                "preview"
                "options"
                "disclaimer";
            padding: clamp(1rem, 3vw, 1.4rem) !important;
        }

        .store-product-dialog .store-header-name,
        .store-product-dialog .store-header-price {
            justify-content: flex-start;
            padding: 0 !important;
        }

        .store-product-dialog .store-header-price {
            margin-top: 0.3rem;
        }

        .store-product-dialog .store-product-price {
            text-align: left;
        }

        .store-product-dialog .store-preview-column,
        .store-product-dialog .store-options-column {
            padding: 0 !important;
        }

        .store-product-dialog .store-options-column {
            margin-top: 1rem;
        }

        .store-product-dialog .store-preview-frame {
            position: relative;
            top: auto;
            min-height: 19rem;
        }

        .store-product-dialog .store-main-image-shell {
            min-height: 17rem;
        }

        .store-product-dialog .store-options-panel {
            width: 100%;
            margin: 0;
            overflow: visible;
        }

        .store-product-dialog .store-option-gallery,
        .store-product-dialog .store-option-gallery--five {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            grid-auto-flow: row !important;
            overflow: visible !important;
        }
}

/* ==========================================================================
       PRODUCT OPTIONS HOLDER

       Desktop:
       - The large product preview stays visible.
       - The outer dialog content owns vertical scrolling.
       - Image/product/background galleries themselves never scroll.
       - MudPagination continues to control visual choices.
       ========================================================================== */

.store-product-dialog .store-options-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}


/* ==========================================================================
       VISUAL OPTION GRID

       IMPORTANT:
       The grid does NOT scroll.

       MudPagination controls additional images/products/backgrounds.
       ========================================================================== */

.store-product-dialog .store-option-gallery,
.store-product-dialog .store-option-gallery--five {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: auto;
}


    /* Remove any old gallery scrollbar */

    .store-product-dialog .store-option-gallery::-webkit-scrollbar,
    .store-product-dialog .store-option-gallery--five::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


/* ==========================================================================
       OPTION SECTIONS

       Do not let an individual section create its own scrollbar.
       ========================================================================== */

.store-product-dialog .store-option-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0.9rem 0 0;
    padding: 1rem !important;
    overflow: visible;
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
}


    .store-product-dialog
    .store-option-section:first-of-type {
        margin-top: 0;
    }


/* ==========================================================================
       LARGE PREVIEW

       Keep the product preview visible while the customer scrolls through
       additional configuration options.
       ========================================================================== */

@media screen and (min-width: 960px) {

    .store-product-dialog .store-preview-frame {
        position: sticky;
        top: 1rem;
        align-self: start;
    }
}


/* ==========================================================================
       DIALOG CONTENT

       The dialog itself does not create another nested scrollbar.
       The right-side options holder owns desktop option scrolling.
       ========================================================================== */

.store-product-dialog .mud-dialog-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none !important;
    margin: 0;
    padding: 0;
    overflow: visible !important;
    scrollbar-gutter: auto;
}


/* ==========================================================================
       TABLET

       Preview and options are stacked, so do not use an inner options scrollbar.
       ========================================================================== */

@media screen and (min-width: 600px) and (max-width: 959.98px) {

    .store-product-dialog .store-options-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }


    .store-product-dialog .store-preview-frame {
        position: relative;
        top: auto;
    }


    .store-product-dialog .store-option-gallery,
    .store-product-dialog .store-option-gallery--five {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: visible !important;
    }
}


/* ==========================================================================
       MOBILE

       Let the page naturally stack vertically.
       ========================================================================== */

@media screen and (max-width: 599.98px) {

    .store-product-dialog .store-options-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }


    .store-product-dialog .store-preview-frame {
        position: relative;
        top: auto;
    }


    .store-product-dialog .store-option-gallery,
    .store-product-dialog .store-option-gallery--five {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
    }
}
/* ==========================================================================
       MOBILE
       ========================================================================== */

@media screen and (max-width: 599.98px) {

    .store-product-dialog,
    .store-product-dialog.store-product-dialog--compact,
    .store-product-dialog.store-product-dialog--standard,
    .store-product-dialog.store-product-dialog--expanded {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

        .store-product-dialog .mud-dialog-content {
            width: 100%;
            height: auto;
            max-height: none !important;
            overflow: visible !important;
            scrollbar-gutter: auto;
        }

        .store-product-dialog .store-modal-content {
            padding: 0;
        }

        .store-product-dialog .store-product-grid,
        .store-product-dialog--expanded .store-product-grid {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "name"
                "price"
                "divider"
                "preview"
                "options"
                "disclaimer";
            padding: 1rem calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left)) !important;
        }

        .store-product-dialog .store-header-name,
        .store-product-dialog .store-header-price {
            justify-content: flex-start;
            padding: 0 !important;
        }

        .store-product-dialog .store-product-price {
            text-align: left;
            white-space: normal;
        }

        .store-product-dialog .store-preview-column,
        .store-product-dialog .store-options-column {
            padding: 0 !important;
        }

        .store-product-dialog .store-options-column {
            margin-top: 1rem;
        }

        .store-product-dialog .store-options-panel {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: visible;
        }

        .store-product-dialog .store-preview-frame {
            position: relative;
            top: auto;
            min-height: 13rem;
            padding: 0.75rem;
        }

        .store-product-dialog .store-main-image-shell {
            min-height: 12rem;
        }

            .store-product-dialog .store-product-image,
            .store-product-dialog .store-main-image-shell > img {
                max-height: 12rem !important;
            }
        /* Product description */

        .store-product-dialog .store-product-description-panel {
            margin-bottom: 1rem;
            padding: 0.8rem;
        }

        .store-product-dialog .store-product-description-layout {
            gap: 0.6rem;
        }
        /* Two visual choices across on phones */

        .store-product-dialog .store-option-gallery,
        .store-product-dialog .store-option-gallery--five {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            grid-auto-flow: row !important;
            gap: 0.5rem;
            overflow: visible !important;
        }

        .store-product-dialog .store-option-image-shell {
            height: 4.25rem;
            min-height: 4.25rem;
        }

        .store-product-dialog .store-action-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 0.55rem;
        }

        .store-product-dialog .store-btn {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }
}


/* ==========================================================================
       VIEWPORT AND ACTION BEHAVIOR

       The outer dialog content owns the only vertical scrollbar. The preview can
       remain sticky on desktop without creating a second scrolling region.
       ========================================================================== */

.store-product-dialog .mud-dialog-content {
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--store-border-strong) transparent;
}

    .store-product-dialog .mud-dialog-content::-webkit-scrollbar {
        width: 0.625rem;
    }

    .store-product-dialog .mud-dialog-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .store-product-dialog .mud-dialog-content::-webkit-scrollbar-thumb {
        background: var(--store-border-strong);
        border: 0.125rem solid var(--store-white);
        border-radius: 999rem;
    }

@media (hover: hover) and (pointer: fine) {

    .store-product-dialog .mud-dialog-content::-webkit-scrollbar-thumb:hover {
        background: var(--store-main-color);
    }
}

.store-product-dialog .store-options-panel {
    max-height: none !important;
    padding-right: 0;
    overflow: visible !important;
    scrollbar-width: auto;
}

@media screen and (min-width: 960px) {

    .store-product-dialog .store-preview-frame {
        top: 1rem;
    }
}

@media screen and (min-width: 600px) and (max-width: 959.98px) {

    .store-product-dialog {
        max-height: calc(100dvh - 1.5rem);
    }

        .store-product-dialog .mud-dialog-content {
            min-height: 0;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior-y: contain;
        }

        .store-product-dialog .store-preview-frame {
            height: 22rem;
            min-height: 0;
        }

        .store-product-dialog .store-main-image-shell {
            min-height: 0;
        }
}

@media screen and (max-width: 599.98px) {

    .store-product-dialog,
    .store-product-dialog.store-product-dialog--compact,
    .store-product-dialog.store-product-dialog--standard,
    .store-product-dialog.store-product-dialog--expanded {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
    }

        .store-product-dialog .mud-dialog-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior-y: contain;
            scrollbar-gutter: auto;
            -webkit-overflow-scrolling: touch;
        }

        .store-product-dialog .store-header-price {
            margin-top: 0.45rem;
        }

        .store-product-dialog .store-price-summary {
            align-items: flex-start;
        }

        .store-product-dialog .store-header-divider {
            margin: 0.8rem 0 1rem;
        }

        .store-product-dialog .store-preview-frame {
            height: clamp(10.5rem, 32dvh, 15rem);
            min-height: 0;
        }

        .store-product-dialog .store-main-image-shell {
            min-height: 0;
        }

            .store-product-dialog .store-product-image,
            .store-product-dialog .store-main-image-shell > img {
                max-height: 100% !important;
            }

        .store-product-dialog .store-options-column {
            margin-top: 0.875rem;
        }

        .store-product-dialog .store-product-description-panel {
            margin-bottom: 0.875rem;
            padding: 0.875rem;
        }

        .store-product-dialog .store-description {
            max-width: none;
            font-size: 0.9375rem;
            line-height: 1.55;
        }

        .store-product-dialog .store-option-section {
            margin-top: 0.75rem;
            padding: 0.875rem !important;
        }

        .store-product-dialog .store-option-gallery,
        .store-product-dialog .store-option-gallery--five {
            gap: 0.625rem;
        }

        .store-product-dialog .store-option-preview-card,
        .store-product-dialog .store-option-preview-card--image-only {
            min-height: 0;
            padding: 0.45rem;
        }

            .store-product-dialog .store-option-image-shell,
            .store-product-dialog
            .store-option-preview-card--image-only
            .store-option-image-shell {
                height: auto;
                min-height: 5.25rem;
                aspect-ratio: 4 / 3;
            }

            .store-product-dialog .store-option-preview-name,
            .store-product-dialog
            .store-option-preview-card .mud-typography {
                min-height: 1.95rem;
                font-size: 0.8125rem;
                line-height: 1.25;
            }

        .store-product-dialog .store-form-control .mud-input {
            min-height: 3rem;
        }

        .store-product-dialog .store-byo-label,
        .store-product-dialog .store-byo-quantity {
            min-width: 0;
            padding-top: 0.35rem !important;
            padding-bottom: 0.35rem !important;
        }

            .store-product-dialog .store-byo-label .mud-typography,
            .store-product-dialog .store-option-section .mud-checkbox .mud-typography {
                min-width: 0;
                white-space: normal;
                overflow-wrap: anywhere;
            }

        .store-product-dialog .store-option-section .mud-checkbox {
            align-items: flex-start;
            width: 100%;
            min-width: 0;
        }

        .store-product-dialog .mud-dialog-actions {
            box-shadow: 0 -0.35rem 1rem rgb(0 0 0 / 8%);
        }

        .store-product-dialog .store-action-bar {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.55rem;
            padding: 0.625rem max(0.875rem, env(safe-area-inset-right)) max(0.625rem, env(safe-area-inset-bottom)) max(0.875rem, env(safe-area-inset-left));
        }

        .store-product-dialog .store-action-summary {
            justify-content: space-between;
            gap: 0.5rem;
            text-align: left;
        }

        .store-product-dialog .store-action-buttons {
            display: grid;
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
            align-items: center;
            gap: 0.5rem;
            width: 100%;
        }

            .store-product-dialog .store-action-buttons .store-btn {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                min-height: 3rem;
                line-height: 1.2;
                white-space: normal;
            }
}


/* ==========================================================================
       REDUCED MOTION
       ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .store-product-dialog *,
    .store-product-dialog *::before,
    .store-product-dialog *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

    .store-product-dialog
    .store-option-preview-card:hover:not(:disabled),
    .store-product-dialog
    .store-option-preview-card:active:not(:disabled) {
        transform: none;
    }
}
/* Option price presentation
   ====================================================================== */

.store-option-preview-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.35rem 0.2rem;
}

.store-option-price-increase {
    margin: 0 !important;
    color: var(--store-main-color-dark);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}


/* Dropdown options
   ====================================================================== */

.store-select-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.store-select-option-name {
    min-width: 0;
    overflow: hidden;
    color: var(--store-text-main);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-select-option-price {
    justify-self: end;
    color: var(--store-main-color-dark);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* Selected dropdown value
   ====================================================================== */

.store-priced-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

    .store-priced-select.has-price .mud-input-slot {
        padding-right: 7rem !important;
    }

.store-priced-select-value {
    position: absolute;
    top: 50%;
    right: 2.75rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--store-main-color-dark);
    font-size: 0.8125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}


/* Mobile
   ====================================================================== */

@media (max-width: 37.5rem) {
    .store-priced-select.has-price .mud-input-slot {
        padding-right: 6.25rem !important;
    }

    .store-priced-select-value {
        right: 2.5rem;
        font-size: 0.75rem;
    }

    .store-select-option-row {
        align-items: start;
        gap: 0.75rem;
    }

    .store-select-option-name {
        overflow: visible;
        line-height: 1.35;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}