/* Braidy Jewelers — Black Friday Popup, v1.0.0 */
.braidy-bf-popup,
.braidy-bf-popup * { box-sizing: border-box; }
.braidy-bf-popup[hidden] { display: none !important; }
.braidy-bf-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 74px 20px 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
    isolation: isolate;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.braidy-bf-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(1, 1, 3, var(--bbf-darkness, .78));
    backdrop-filter: blur(var(--bbf-blur, 14px)) saturate(.6);
    -webkit-backdrop-filter: blur(var(--bbf-blur, 14px)) saturate(.6);
    opacity: 0;
    transition: opacity 640ms ease;
}
.braidy-bf-dialog {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    margin: auto;
    text-align: center;
    opacity: 0;
    filter: blur(13px);
    transform: translate3d(0, 58px, 0) scale(.83) rotate(-3deg);
    transform-origin: center center;
    transition: opacity 650ms ease 80ms,
                filter 720ms ease 80ms,
                transform 1000ms cubic-bezier(.16, 1, .3, 1) 80ms;
}
.braidy-bf-popup.braidy-bf-visible .braidy-bf-backdrop { opacity: 1; }
.braidy-bf-popup.braidy-bf-visible .braidy-bf-dialog {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
}
.braidy-bf-aura {
    position: absolute;
    z-index: -1;
    inset: 8% 10%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 52%, rgba(231, 165, 44, .2) 0%, rgba(176, 106, 20, .10) 34%, transparent 72%);
    filter: blur(36px);
    opacity: .8;
}
.braidy-bf-close {
    position: absolute;
    z-index: 5;
    top: -52px;
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(18, 18, 20, .92);
    color: #f7f0df;
    border: 1px solid rgba(229, 187, 101, .6);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.09);
    cursor: pointer;
    transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
    -webkit-tap-highlight-color: transparent;
}
.braidy-bf-close svg { display: block; width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.braidy-bf-close:hover, .braidy-bf-close:focus-visible {
    transform: rotate(90deg) scale(1.07);
    background: #d7ab4c;
    color: #080808;
    box-shadow: 0 0 25px rgba(220, 173, 66, .4);
}
.braidy-bf-close:focus-visible, .braidy-bf-artwork-link:focus-visible { outline: 2px solid #fbd77c; outline-offset: 5px; }
.braidy-bf-event-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 6px;
    color: #e8be68;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .43em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms ease 400ms, transform 600ms ease 400ms;
}
.braidy-bf-event-label span { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, #b9964f); }
.braidy-bf-event-label span:last-child { transform: rotate(180deg); }
.braidy-bf-popup.braidy-bf-visible .braidy-bf-event-label { opacity: 1; transform: none; }
.braidy-bf-artwork-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 0;
}
.braidy-bf-artwork {
    display: block;
    width: min(var(--bbf-desktop-width, 850px), calc(100vw - 40px));
    height: auto;
    max-width: 100%;
    max-height: min(var(--bbf-desktop-height, 750px), calc(100vh - 158px));
    max-height: min(var(--bbf-desktop-height, 750px), calc(100dvh - 158px));
    object-fit: contain;
    border: 0;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 26px 24px rgba(0,0,0,.85)) drop-shadow(0 10px 40px rgba(206,146,34,.28));
    transition: filter 400ms ease, transform 500ms cubic-bezier(.16,1,.3,1);
}
.braidy-bf-artwork-link:hover .braidy-bf-artwork {
    transform: translateY(-4px) scale(1.017);
    filter: drop-shadow(0 31px 30px rgba(0,0,0,.88)) drop-shadow(0 16px 55px rgba(226,177,54,.44));
}
.braidy-bf-hint {
    color: rgba(237, 219, 180, .86);
    font-size: 10px;
    letter-spacing: .25em;
    margin-top: 10px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 550ms ease 550ms, transform 550ms ease 550ms;
}
.braidy-bf-hint span { color: #edc875; font-size: 14px; }
.braidy-bf-popup.braidy-bf-visible .braidy-bf-hint { opacity: 1; transform: none; }
.braidy-bf-popup.braidy-bf-closing .braidy-bf-dialog {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, 18px, 0) scale(.94);
    transition: opacity 340ms ease, filter 340ms ease, transform 340ms ease;
}
.braidy-bf-popup.braidy-bf-closing .braidy-bf-backdrop { opacity: 0; transition-duration: 390ms; }
@media (max-width: 767px) {
    .braidy-bf-popup { padding: 80px 12px 45px; }
    .braidy-bf-artwork { width: min(var(--bbf-mobile-width, 400px), calc(100vw - 24px)); max-height: min(var(--bbf-mobile-height, 600px), calc(100dvh - 160px)); }
    .braidy-bf-event-label { font-size: 8px; letter-spacing: .26em; gap: 8px; margin-bottom: 10px; }
    .braidy-bf-event-label span { width: 15px; }
    .braidy-bf-hint { font-size: 8px; letter-spacing: .18em; margin-top: 5px; }
    .braidy-bf-close { top: -56px; right: 3px; width: 45px; height: 45px; }
    .braidy-bf-aura { filter: blur(18px); }
}
@media (max-height: 470px) {
    .braidy-bf-popup { padding: 60px 12px 16px; }
    .braidy-bf-artwork { max-height: calc(100dvh - 105px); }
    .braidy-bf-event-label, .braidy-bf-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .braidy-bf-popup *, .braidy-bf-popup *::before, .braidy-bf-popup *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .braidy-bf-dialog { transform: none; filter: none; }
}
