/* ========================================================================== 
   HubBits & MorDocs — Product Media Chamber R1
   Shared vector frame, adaptive backdrop, and safe focal-point presentation.
   ========================================================================== */

.hm-media-chamber{
    --hm-media-focal-x:50%;
    --hm-media-focal-y:50%;
    isolation:isolate;
}

.hm-media-chamber .hm-media-backdrop-image{
    position:absolute;
    z-index:0;
    inset:-12%;
    width:124%;
    height:124%;
    max-width:none;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    object-fit:cover;
    object-position:var(--hm-media-focal-x) var(--hm-media-focal-y);
    filter:blur(26px) saturate(.78) brightness(.34) contrast(.96);
    opacity:.68;
    transform:scale(1.06);
    pointer-events:none;
}

.hm-media-chamber.hm-media-backdrop--theme .hm-media-backdrop-image{
    display:none;
}

.hm-media-vector-frame{
    position:absolute;
    z-index:5;
    inset:10px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    overflow:visible;
    color:rgba(var(--ware-accent-rgb,var(--record-accent-rgb,201,166,99)),.52);
    filter:drop-shadow(0 0 10px rgba(var(--ware-accent-rgb,var(--record-accent-rgb,201,166,99)),.13));
    pointer-events:none;
}

.hm-media-vector-frame__ring,
.hm-media-vector-frame__corner,
.hm-media-vector-frame__arc{
    fill:none;
    stroke:currentColor;
    vector-effect:non-scaling-stroke;
}

.hm-media-vector-frame__ring{
    stroke-width:1;
    opacity:.42;
}

.hm-media-vector-frame__corner{
    stroke-width:1.35;
    opacity:.78;
}

.hm-media-vector-frame__arc{
    stroke-width:.8;
    opacity:.24;
}

.hm-media-vector-frame__node{
    fill:rgba(var(--ware-badge-rgb,var(--record-badge-rgb,240,217,149)),.74);
    stroke:none;
}

.hm-media-frame--minimal .hm-media-vector-frame__arc,
.hm-media-frame--minimal .hm-media-vector-frame__node{
    display:none;
}

.hm-media-frame--minimal .hm-media-vector-frame__ring{
    opacity:.24;
}

.hm-media-frame--minimal .hm-media-vector-frame__corner{
    opacity:.52;
}

.hm-media-chamber img:not(.hm-media-backdrop-image){
    object-position:var(--hm-media-focal-x) var(--hm-media-focal-y);
}

@media(prefers-reduced-motion:reduce){
    .hm-media-chamber *,
    .hm-media-chamber *::before,
    .hm-media-chamber *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* ==========================================================================
   HM Product Media Chamber R1.0c — Unified Safe-Fit Renderer
   One foreground contract for catalog cards and individual ware chambers.
   Adaptive backdrops may crop; foreground product artwork does not in Auto or
   Contain mode. Context styles control viewport insets/padding only.
   ========================================================================== */
.hm-media-chamber .hm-media-stage{
    box-sizing:border-box;
    min-width:0;
    min-height:0;
}

.hm-media-chamber .hm-media-stage > .hm-media-foreground{
    display:block;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    margin:0;
    padding:0;
    border:0;
    object-fit:contain;
    object-position:var(--hm-media-focal-x) var(--hm-media-focal-y);
    transform:none;
}

.hm-media-chamber.hm-media-fit--auto .hm-media-stage > .hm-media-foreground,
.hm-media-chamber.hm-media-fit--contain .hm-media-stage > .hm-media-foreground{
    object-fit:contain;
}

.hm-media-chamber.hm-media-fit--cover .hm-media-stage > .hm-media-foreground{
    object-fit:cover;
}

.hm-media-chamber .hm-media-stage > .hm-media-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

@media(hover:hover){
    .hm-media-chamber.hm-media-fit--auto .hm-media-stage > .hm-media-foreground,
    .hm-media-chamber.hm-media-fit--contain .hm-media-stage > .hm-media-foreground{
        transform:none;
    }
}