/* ─── Spares/accessories product-detail sheet (ProductDetailDialog) ──────────
   Shipped as an Experience RCL static asset (not host CSS) so both hosts get
   it: the consumer app (real mobile runtime) and the admin host (designer
   preview reaches this dialog via SparesAccessoriesRuntime → OpenDetail). Both
   App.razor heads link _content/BrandedMark.Components.Experience/css/product-detail-sheet.css.

   Global (not container-scoped / not a .razor.css): the dialog is portaled out
   of .mobile-experience-container, and .pdd-gallery .mud-carousel reaches into
   MudCarousel internals that scoped CSS can't touch without ::deep.

   The .bm-sheet chrome (rounded bottom-sheet frame + drag handle) lives in the
   consumer app's base-theme.css only. In the admin designer preview that chrome
   is absent, so the dialog degrades to a plain centred MudDialog — an accepted
   fallback for a preview; the layout rules below still apply.

   All colours read MudBlazor palette variables so the sheet follows the active
   (incl. dark) theme island. */

/* Hero image / gallery */
.pdd-gallery {
    height: 280px;
    background-color: var(--mud-palette-background-gray);
    overflow: hidden;
}

.pdd-gallery .mud-carousel {
    height: 100%;
    background: transparent;
}

.pdd-slide {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdd-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Missing-image placeholder icon — shared by the sheet hero and the
   spares/accessories cards. Muted so it reads as "no photo", theme-aware.
   (bm- prefixed as a cross-component utility; housed here alongside its only
   two consumers rather than in base-theme.css.) */
.bm-image-placeholder-icon {
    font-size: 56px;
    color: var(--mud-palette-text-disabled);
    fill: var(--mud-palette-text-disabled);
}

/* Body */
.pdd-strike {
    text-decoration: line-through;
}

.pdd-desc {
    line-height: 1.6;
}

/* Sticky action bar (mirrors the account portal's StickySubmitBar) */
.pdd-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--mud-palette-surface); /* fallback for engines without color-mix */
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Quantity stepper — full-width so it occupies the same footprint as the
   Add-to-Cart button it replaces. */
.pdd-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 24px;
    overflow: hidden;
}

.pdd-qty-value {
    flex: 1;
    text-align: center;
}