/* =========================================================
   Store product dialog
   Complete responsive replacement
   ========================================================= */
.store-product-dialog,
.store-product-dialog *,
.store-product-dialog *::before,
.store-product-dialog *::after {
    box-sizing: border-box;
}

/* =========================================================
   Dialog shell
   ========================================================= */

.store-product-dialog {
    width: min(68rem, calc(100% - 2rem));
    max-width: 68rem;
    max-height: min(56rem, calc(100dvh - 2rem));
    margin: auto;
}

    /* =========================================================
   Dialog content
   ========================================================= */

    .store-product-dialog .mud-dialog-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 0;
        max-height: calc(100dvh - 8rem);
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

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

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

    /* =========================================================
   Main product grid
   ========================================================= */

    .store-product-dialog .store-product-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1.08fr);
        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;
    }

        /*
   Reset MudGrid width, flex-basis, margin and padding.
   This prevents negative gutters and asymmetric spacing.
*/
        .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 placement */

    .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;
    }

    /* =========================================================
   Product header
   ========================================================= */

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

    .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-title {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        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;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    .store-product-dialog .store-product-price {
        max-width: 100%;
        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;
        overflow-wrap: anywhere;
    }

    .store-product-dialog .store-header-divider {
        width: 100%;
        min-width: 0;
        margin: 1rem 0 1.25rem;
        border-color: var(--store-border);
    }

    /* =========================================================
   Main 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%;
    }

    .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-left: 5%;
        padding: 0;
    }

    /* =========================================================
   Product 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%;
        min-height: 24rem;
        margin: 0;
        padding: clamp(1rem, 2vw, 1.5rem);
        overflow: hidden;
        border: 1px solid var(--store-border);
        border-radius: var(--store-radius-md);
    }

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

    /* =========================================================
   Layered product images
   ========================================================= */

    .store-product-dialog .image-container {
        position: relative;
        width: fit-content;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
    }

    .store-product-dialog .background-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        object-fit: contain;
        object-position: center;
    }

    .store-product-dialog .foreground-image {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* =========================================================
   Product description and sections
   ========================================================= */

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

    .store-product-dialog .store-option-section {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0.8rem 0 0;
        padding: 1rem !important;
        overflow: hidden;
        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.75rem;
        color: var(--store-text-main);
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* =========================================================
   Option gallery
   ========================================================= */

    .store-product-dialog .store-option-gallery {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 8rem;
        gap: 0.65rem;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 0 0.85rem !important;
        padding: 0.15rem 0.1rem 0.7rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 0.1rem;
        scroll-snap-type: inline proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--store-border) var(--store-transparent);
        -webkit-overflow-scrolling: touch;
    }

        .store-product-dialog .store-option-gallery > .mud-grid-item {
            width: 8rem !important;
            min-width: 8rem !important;
            max-width: 8rem !important;
            margin: 0;
            padding: 0 !important;
            flex: none !important;
            flex-basis: auto !important;
            scroll-snap-align: start;
        }

        .store-product-dialog .store-option-gallery::-webkit-scrollbar {
            height: 0.45rem;
        }

        .store-product-dialog .store-option-gallery::-webkit-scrollbar-track {
            background: var(--store-transparent);
        }

        .store-product-dialog .store-option-gallery::-webkit-scrollbar-thumb {
            background: var(--store-border);
            border: 0.1rem solid var(--store-white);
            border-radius: 999rem;
        }

    /* =========================================================
   Option cards
   ========================================================= */

    .store-product-dialog .store-option-preview-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 10rem;
        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: left;
        cursor: pointer;
        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.is-selected:hover:not(:disabled) {
        background: color-mix( in srgb, var(--store-main-color-light) 20%, transparent );
        border-color: var(--store-main-color);
        box-shadow: var(--store-green-glow);
        transform: translateY(-1px);
    }
}

.store-product-dialog .store-option-preview-card:active:not(:disabled) {
    background: color-mix( in srgb, var(--store-main-color-light) 20%, transparent );
    border-color: var(--store-main-color);
    box-shadow: none;
    transform: translateY(0);
}

.store-product-dialog .store-option-preview-card.is-selected {
    background: color-mix( in srgb, var(--store-main-color-light) 20%, transparent );
    border-color: var(--store-main-color);
    box-shadow: var(--store-green-glow);
}

    .store-product-dialog .store-option-preview-card.is-selected::after {
        position: absolute;
        top: 0.45rem;
        right: 0.45rem;
        display: grid;
        place-items: center;
        width: 1.4rem;
        height: 1.4rem;
        color: var(--store-white);
        background: var(--store-main-color);
        border: 2px solid var(--store-white);
        border-radius: 999rem;
        content: "\2713";
        font-size: 0.8rem;
        font-weight: 800;
        line-height: 1;
    }

.store-product-dialog .store-option-preview-image,
.store-product-dialog .store-option-preview-card .mud-image,
.store-product-dialog .store-option-preview-card img {
    display: block;
    width: 100% !important;
    height: 7rem !important;
    min-height: 7rem;
    margin-inline: auto;
    object-fit: contain !important;
    object-position: center;
    background: var(--store-white);
    border-radius: 0.45rem;
}

.store-product-dialog .store-option-preview-card .mud-typography {
    display: -webkit-box;
    min-height: 2.4em;
    margin: 0;
    overflow: hidden;
    color: var(--store-text-main);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* =========================================================
   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;
}

.store-product-dialog .mud-input-control {
    margin-top: 0;
}

.store-product-dialog .mud-input-outlined-border {
    border-color: var(--store-border);
    border-radius: var(--store-radius-sm);
}

.store-product-dialog .mud-input-control:hover .mud-input-outlined-border {
    border-color: var(--store-main-color);
}

.store-product-dialog
.mud-input-control.mud-input-focused
.mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--store-main-color);
}

.store-product-dialog .mud-input-label {
    color: var(--store-text-secondary);
    font-weight: 650;
}

    .store-product-dialog .mud-input-label.mud-input-label-inputcontrol {
        background: var(--store-white);
    }

.store-product-dialog .mud-error-text {
    margin-top: 0.35rem;
    color: var(--store-danger);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.4;
}

/* =========================================================
   Checkbox and selected option details
   ========================================================= */

.store-product-dialog .mud-checkbox {
    margin-inline: 0;
}

    .store-product-dialog .mud-checkbox .mud-icon-root {
        color: var(--store-main-color);
    }

.store-product-dialog .store-option-thumbnail {
    flex: 0 0 2.5rem;
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-left: 0.5rem;
    object-fit: contain;
    object-position: center;
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: 0.35rem;
}

.store-product-dialog .store-option-price-increase {
    margin-left: 0.25rem;
    color: var(--store-main-color);
    font-weight: 800;
    white-space: normal;
    overflow-wrap: anywhere;
}

.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;
    max-width: 100%;
    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;
}

/* =========================================================
   Sticky action area
   ========================================================= */

.store-product-dialog .mud-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--store-white);
    border-top: 1px solid var(--store-border);
    box-shadow: var(--store-shadow-sm);
}

.store-product-dialog .store-action-bar {
    max-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));
}

/* =========================================================
   Add button
   ========================================================= */

.store-product-dialog .store-btn-primary {
    order: 2;
    min-width: 10rem;
}

/* =========================================================
   Cancel button
   ========================================================= */

.store-product-dialog .store-btn-secondary {
    order: 1;
}

/* =========================================================
   Tablet
   600px through 959.98px
   ========================================================= */

@media screen and (min-width: 600px) and (max-width: 959.98px) {
    .store-product-dialog {
        width: min(48rem, calc(100% - 1.5rem));
        max-width: 48rem;
        max-height: calc(100dvh - 1.5rem);
        border-radius: var(--store-radius-lg);
    }

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

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

        /*
       Tablet uses one column so the preview and controls
       remain comfortably sized.
    */
        .store-product-dialog .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-header-divider {
            margin: 0.85rem 0 1rem;
        }

        .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;
            padding: 1rem;
        }

            .store-product-dialog .store-product-image,
            .store-product-dialog .store-preview-frame .mud-image,
            .store-product-dialog .store-preview-frame img {
                max-height: 17rem !important;
            }

        .store-product-dialog .store-option-gallery {
            grid-auto-columns: 7.75rem;
        }

            .store-product-dialog .store-option-gallery > .mud-grid-item {
                width: 7.75rem !important;
                min-width: 7.75rem !important;
                max-width: 7.75rem !important;
            }

        .store-product-dialog .store-action-bar {
            padding: 0.85rem max(1rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        }

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

/* =========================================================
   Mobile
   Up to 599.98px
   ========================================================= */

@media screen and (max-width: 599.98px) {
    .store-product-dialog {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

        .store-product-dialog::before {
            height: 0.25rem;
        }

        .store-product-dialog .mud-dialog-content {
            width: 100%;
            height: calc(100dvh - 0.25rem);
            max-height: calc(100dvh - 0.25rem);
            scrollbar-gutter: auto;
        }

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

        .store-product-dialog .store-product-card {
            border: 0;
            border-radius: 0;
            box-shadow: none !important;
        }

        .store-product-dialog .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-header-price {
            margin-top: 0.25rem;
        }

        .store-product-dialog .store-product-title {
            font-size: clamp(1.35rem, 7vw, 1.65rem);
        }

        .store-product-dialog .store-product-price {
            font-size: clamp(1.2rem, 6vw, 1.45rem);
            text-align: left;
            white-space: normal;
        }

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

        .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: 13rem;
            padding: 0.75rem;
        }

            .store-product-dialog .store-product-image,
            .store-product-dialog .store-preview-frame .mud-image,
            .store-product-dialog .store-preview-frame img {
                max-height: 12rem !important;
            }

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

        .store-product-dialog .store-option-gallery {
            grid-auto-columns: 7rem;
            gap: 0.65rem;
            margin-inline: 0 !important;
            padding-inline: 0.1rem !important;
        }

            .store-product-dialog .store-option-gallery > .mud-grid-item {
                width: 7rem !important;
                min-width: 7rem !important;
                max-width: 7rem !important;
            }

        .store-product-dialog .store-option-preview-card {
            min-height: 8.75rem;
        }

            .store-product-dialog .store-option-preview-image,
            .store-product-dialog .store-option-preview-card .mud-image,
            .store-product-dialog .store-option-preview-card img {
                height: 5.75rem !important;
                min-height: 5.75rem;
            }

        .store-product-dialog .store-option-thumbnail {
            margin-left: 0.4rem;
        }

        .store-product-dialog .store-action-bar {
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 0.55rem;
            padding: 0.75rem calc(1rem + env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
        }

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

        .store-product-dialog .store-btn-primary {
            order: 1;
        }

        .store-product-dialog .store-btn-secondary {
            order: 2;
        }

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

/* =========================================================
   Large desktop
   1200px and wider
   ========================================================= */

@media screen and (min-width: 1200px) {
    .store-product-dialog .store-product-grid {
        grid-template-columns: minmax(0, 1fr) minmax(23rem, 1.05fr);
    }

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

        .store-product-dialog .store-product-image,
        .store-product-dialog .store-preview-frame .mud-image,
        .store-product-dialog .store-preview-frame img {
            max-height: 23rem !important;
        }
}

/* =========================================================
   Media containment
   ========================================================= */

.store-product-dialog img,
.store-product-dialog svg,
.store-product-dialog video,
.store-product-dialog canvas,
.store-product-dialog iframe {
    max-width: 100%;
}

/* =========================================================
   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),
    .store-product-dialog .store-btn:hover:not(:disabled),
    .store-product-dialog .store-btn:active:not(:disabled) {
        transform: none;
    }
}