/**
 * Compact frame/hanger preview chrome for cart surfaces only.
 * Selectors: .bic-thumb-frame, .cfu-frame-wrap, .bdr-frame-wrap (and padding wrappers).
 * Does NOT target .poster-frame or .preview-frame-wrap (editor / checkout).
 */

.bic-thumb-wrap--framed,
.bic-thumb-wrap--hanger {
    padding: 0;
    box-sizing: border-box;
}

.bic-thumb-frame .bic-thumb-img,
.bdr-frame-wrap .bdr-thumb-img {
    object-fit: cover;
}

.bic-thumb-frame.physical-framed,
.cfu-frame-wrap.physical-framed,
.bdr-frame-wrap.physical-framed {
    border-radius: 0;
    overflow: hidden;
    border: none;
}

.bic-thumb-frame.physical-framed::after,
.cfu-frame-wrap.physical-framed::after,
.bdr-frame-wrap.physical-framed::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bic-thumb-frame.physical-framed.physical-frame-white,
.cfu-frame-wrap.physical-framed.physical-frame-white,
.bdr-frame-wrap.physical-framed.physical-frame-white {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.22),
        0 0 0 8px  rgba(0, 0, 0, 0.15),
        0 0 0 7px  var(--bc-surface, #fff),
        0 0 0 2px  rgba(240, 240, 240, 0.98);
}

.bic-thumb-frame.physical-framed.physical-frame-white::after,
.cfu-frame-wrap.physical-framed.physical-frame-white::after,
.bdr-frame-wrap.physical-framed.physical-frame-white::after {
    box-shadow:
        inset 0  2px 4px rgba(0, 0, 0, 0.14),
        inset 2px 0  3px rgba(0, 0, 0, 0.08),
        inset 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.bic-thumb-frame.physical-framed.physical-frame-black,
.cfu-frame-wrap.physical-framed.physical-frame-black,
.bdr-frame-wrap.physical-framed.physical-frame-black {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.55),
        0 0 0 8px  rgba(255, 255, 255, 0.06),
        0 0 0 7px  #1a1410,
        0 0 0 2px  #5c4c40;
}

.bic-thumb-frame.physical-framed.physical-frame-black::after,
.cfu-frame-wrap.physical-framed.physical-frame-black::after,
.bdr-frame-wrap.physical-framed.physical-frame-black::after {
    box-shadow:
        inset 0  2px 5px rgba(0, 0, 0, 0.45),
        inset 2px 0  4px rgba(0, 0, 0, 0.28),
        inset 0 -1px 3px rgba(0, 0, 0, 0.18);
}

.bic-thumb-frame.physical-framed.physical-frame-natural,
.cfu-frame-wrap.physical-framed.physical-frame-natural,
.bdr-frame-wrap.physical-framed.physical-frame-natural {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.24),
        0 0 0 8px  rgba(0, 0, 0, 0.10),
        0 0 0 7px  #c9a66b,
        0 0 0 2px  #a67c52;
}

.bic-thumb-frame.physical-framed.physical-frame-dark-wood,
.cfu-frame-wrap.physical-framed.physical-frame-dark-wood,
.bdr-frame-wrap.physical-framed.physical-frame-dark-wood {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.38),
        0 0 0 8px  rgba(255, 255, 255, 0.05),
        0 0 0 7px  #5c4030,
        0 0 0 2px  #3d2a1a;
}

.bic-thumb-frame.physical-hanger,
.cfu-frame-wrap.physical-hanger,
.bdr-frame-wrap.physical-hanger {
    border-radius: 0;
    overflow: visible;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.bic-thumb-frame.physical-hanger .bic-thumb-img,
.cfu-frame-wrap.physical-hanger .bic-thumb-img,
.cfu-frame-wrap.physical-hanger .cfu-thumb-img,
.bdr-frame-wrap.physical-hanger .bdr-thumb-img {
    position: relative;
    z-index: 1;
}

.bic-thumb-frame.physical-hanger::before,
.bic-thumb-frame.physical-hanger::after,
.cfu-frame-wrap.physical-hanger::before,
.cfu-frame-wrap.physical-hanger::after,
.bdr-frame-wrap.physical-hanger::before,
.bdr-frame-wrap.physical-hanger::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--hanger-rail-overhang-x));
    right: calc(-1 * var(--hanger-rail-overhang-x));
    height: var(--hanger-rail-height);
    z-index: 5;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.bic-thumb-frame.physical-hanger::before,
.cfu-frame-wrap.physical-hanger::before,
.bdr-frame-wrap.physical-hanger::before {
    top: 0;
    transform: translateY(calc(-1 * var(--hanger-rail-outside-y)));
}

.bic-thumb-frame.physical-hanger::after,
.cfu-frame-wrap.physical-hanger::after,
.bdr-frame-wrap.physical-hanger::after {
    bottom: 0;
    transform: translateY(var(--hanger-rail-outside-y));
}