/* Reusable product-media fallback. Colours inherit the active storefront theme. */
.product-media-fallback {
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed var(--site-brand-soft-strong, #d9e1ea);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--site-brand-soft, #f5f7fa), #fff);
    color: #526273;
    text-align: center;
}

.product-media-fallback[hidden] { display: none !important; }

.product-media-fallback__icon {
    position: relative;
    width: 58px;
    height: 46px;
    border: 3px solid var(--site-brand-primary, #789);
    border-radius: 9px;
    opacity: .72;
}

.product-media-fallback__mountains::before,
.product-media-fallback__mountains::after {
    content: '';
    position: absolute;
    bottom: 9px;
    border-right: 12px solid transparent;
    border-bottom: 16px solid var(--site-brand-primary, #789);
    border-left: 12px solid transparent;
}

.product-media-fallback__mountains::before { left: 7px; }
.product-media-fallback__mountains::after { right: 5px; transform: scale(.75); }

.product-media-fallback__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid var(--site-brand-primary, #789);
    transform: translate(-38%, -50%);
}

.product-media-fallback strong { color: #344252; font-size: 15px; }
.product-media-fallback small { color: #758394; font-size: 12px; }
.product-media-fallback--card { height: 180px; min-height: 180px; padding: 14px; }
.product-media-fallback--thumb { width: 72px; height: 84px; min-height: 84px; padding: 4px; gap: 3px; }
.product-media-fallback--thumb .product-media-fallback__icon { width: 28px; height: 23px; border-width: 2px; }
.product-media-fallback--thumb .product-media-fallback__mountains::before,
.product-media-fallback--thumb .product-media-fallback__mountains::after { display: none; }
.product-media-fallback--thumb strong { font-size: 8px; line-height: 1.1; }
.product-media-fallback--thumb small { display: none; }