@media (max-width: 991px) {
    .product__left .abr { display: none; }
}
.abr {
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: var(--bs-tertiary-bg, #f3f5f6);
    border: 1px solid var(--bs-border-color, #e2e7ea);
    border-radius: var(--bs-border-radius, .5rem);
}
.abr__title { font-weight: 700; margin-bottom: .6rem; text-align: center; }
.abr__tiles { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.abr__tile {
    position: relative; width: 62px; height: 62px;
    padding: 0; border: 0; background: transparent; cursor: pointer;
}
.abr__ring { position: absolute; inset: 0; border-radius: 50%; }
.abr__ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
    background: linear-gradient(135deg, #ff7800 0%, #ff2d75 50%, #00baff 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.abr__thumb { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background: #f2f2f2; }
.abr__thumb-video { width: 100%; height: 100%; object-fit: cover; }
.abr__modal { position: fixed; inset: 0; z-index: 9999; }
.abr__modal[hidden] { display: none; }
.abr__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.abr__dialog {
    position: relative; margin: 4vh auto 0; background: #000;
    width: min(420px, calc(100% - 24px));
    max-height: 92vh; border-radius: 12px; overflow: hidden;
}
.abr__video { display: block; width: 100%; max-height: 92vh; background: #000; }
.abr__close {
    position: absolute; right: .5rem; top: .4rem; z-index: 3;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .22); color: #fff; font-size: 22px; line-height: 34px;
}
.abr__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 26px; line-height: 40px;
}
.abr__nav--prev { left: .5rem; }
.abr__nav--next { right: .5rem; }
.abr__nav[disabled] { opacity: .25; cursor: default; }
.abr__counter {
    position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 3;
    text-align: center; color: #fff; font-size: .85rem; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}