/* Full-width site header + floating mobile footer. */
:root {
    --bk-chrome-gap: 10px;
    --bk-site-header-height: 50px;
    --bk-floating-footer-height: 60px;
    --bk-chrome-left-gap: max(var(--bk-chrome-gap), env(safe-area-inset-left, 0px));
    --bk-chrome-right-gap: max(var(--bk-chrome-gap), env(safe-area-inset-right, 0px));
}

/* Header is attached to the top and both side edges, like the original layout. */
#bkSiteHeader {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 4px !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18) !important;
    overflow: visible !important;
}

.bk-header-spacer {
    height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
}

/* Footer remains floating with equal side and bottom spacing. */
.bottom-nav,
.instagram-footer {
    right: var(--bk-chrome-right-gap) !important;
    left: var(--bk-chrome-left-gap) !important;
    bottom: calc(var(--bk-chrome-gap) + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(11, 42, 57, .24) !important;
}

body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
}

.bk-circle-popup {
    bottom: calc(80px + var(--bk-chrome-gap) + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 480px) {
    #bkSiteHeader {
        padding-right: 10px !important;
        padding-left: 10px !important;
        border-radius: 0 !important;
    }

    .bottom-nav,
    .instagram-footer {
        border-radius: 16px !important;
    }
}


/* Compact header while preserving the existing logo size. */
#bkSiteHeader .header-title,
#bkSiteHeader .header-title a {
    height: 40px;
    max-height: 40px;
}

#bkSiteHeader .header-title a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

#bkSiteHeader .header-title img {
    max-height: 40px !important;
    height: auto !important;
    width: auto !important;
    position: relative;
    z-index: 1;
}

/* A masked light wave that travels across the logo once every six seconds. */
#bkSiteHeader .header-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, .18) 44%,
        rgba(255, 255, 255, .96) 50%,
        rgba(255, 255, 255, .28) 56%,
        transparent 63%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 260% 100%;
    background-position: 180% 0;
    mix-blend-mode: screen;
    -webkit-mask-image: url('/bashkardi3.png');
    mask-image: url('/bashkardi3.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: bk-logo-electric-wave 6s ease-in-out infinite;
}

@keyframes bk-logo-electric-wave {
    0% {
        opacity: 0;
        background-position: 180% 0;
    }
    2% {
        opacity: 1;
    }
    20% {
        opacity: .96;
        background-position: -80% 0;
    }
    24%, 100% {
        opacity: 0;
        background-position: -80% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .header-title a::after {
        animation: none !important;
        display: none !important;
    }
}


/* Slower logo electric wave and decorative black waving flag. */
:root {
    --bk-site-header-height: 50px;
}

#bkSiteHeader {
    height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 4px !important;
}

.bk-header-spacer {
    height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--bk-site-header-height) + env(safe-area-inset-top, 0px)) !important;
}

#bkSiteHeader .header-title,
#bkSiteHeader .header-title a {
    height: 40px;
    max-height: 40px;
}

#bkSiteHeader .header-title a {
    gap: 0;
}

#bkSiteHeader .header-title a::after {
    animation: bk-logo-electric-wave 15s ease-in-out infinite;
}

@keyframes bk-logo-electric-wave {
    0% {
        opacity: 0;
        background-position: 180% 0;
    }
    1.5% {
        opacity: 1;
    }
    13.3% {
        opacity: .97;
        background-position: -80% 0;
    }
    15%, 100% {
        opacity: 0;
        background-position: -80% 0;
    }
}

#bkSiteHeader .bk-logo-flag {
    position: absolute;
    left: -16px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
}

#bkSiteHeader .bk-logo-flag-pole {
    position: absolute;
    right: 2px;
    top: 1px;
    width: 2px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #cfd8df 0%, #8b97a1 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

#bkSiteHeader .bk-logo-flag-pole::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #dde5ea;
    transform: translateX(-50%);
}

#bkSiteHeader .bk-logo-flag-cloth {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 16px;
    height: 11px;
    transform-origin: 100% 50%;
    animation: bk-flag-wave 2.8s ease-in-out infinite;
}

#bkSiteHeader .bk-logo-flag-cloth::before,
#bkSiteHeader .bk-logo-flag-cloth::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1px 7px 7px 1px;
}

#bkSiteHeader .bk-logo-flag-cloth::before {
    background:
        radial-gradient(circle at 22% 30%, rgba(255,255,255,.22), transparent 42%),
        linear-gradient(90deg, #0f0f10 0%, #1a1a1b 38%, #050505 68%, #171718 100%);
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
    clip-path: polygon(0 0, 88% 6%, 100% 50%, 88% 94%, 0 100%, 10% 52%);
}

#bkSiteHeader .bk-logo-flag-cloth::after {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    mix-blend-mode: screen;
    opacity: .45;
    clip-path: polygon(0 0, 82% 7%, 96% 48%, 82% 92%, 0 100%, 10% 52%);
}

@keyframes bk-flag-wave {
    0%, 100% {
        transform: perspective(60px) rotateY(8deg) skewY(0deg) translateX(0);
    }
    25% {
        transform: perspective(60px) rotateY(24deg) skewY(-5deg) translateX(-1px);
    }
    50% {
        transform: perspective(60px) rotateY(12deg) skewY(2deg) translateX(0);
    }
    75% {
        transform: perspective(60px) rotateY(28deg) skewY(-3deg) translateX(-1px);
    }
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag {
        left: -13px;
        width: 19px;
        height: 20px;
    }

    #bkSiteHeader .bk-logo-flag-pole {
        height: 18px;
    }

    #bkSiteHeader .bk-logo-flag-cloth {
        width: 14px;
        height: 10px;
        top: 3px;
        right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .header-title a::after,
    #bkSiteHeader .bk-logo-flag-cloth {
        animation: none !important;
    }
}


/* v1.0.151 refined slower logo shine + more visible realistic raised black flag */
#bkSiteHeader .header-title a::after {
    background: linear-gradient(
        104deg,
        transparent 0%,
        transparent 34%,
        rgba(255, 255, 255, .08) 41%,
        rgba(255, 255, 255, .22) 46%,
        rgba(255, 255, 255, .95) 50%,
        rgba(255, 255, 255, .26) 54%,
        rgba(255, 255, 255, .10) 59%,
        transparent 66%,
        transparent 100%
    );
    background-size: 280% 100%;
    background-position: 195% 0;
    animation: bk-logo-electric-wave-refined 15s cubic-bezier(.2,.56,.24,1) infinite !important;
}

@keyframes bk-logo-electric-wave-refined {
    0% {
        opacity: 0;
        background-position: 195% 0;
    }
    2% {
        opacity: .08;
    }
    3.5% {
        opacity: .92;
    }
    24.5% {
        opacity: .98;
        background-position: -120% 0;
    }
    27% {
        opacity: 0;
        background-position: -120% 0;
    }
    100% {
        opacity: 0;
        background-position: -120% 0;
    }
}

#bkSiteHeader .bk-logo-flag {
    left: -20px;
    top: 50%;
    width: 32px;
    height: 30px;
    transform: translateY(-50%);
}

#bkSiteHeader .bk-logo-flag-pole {
    right: 3px;
    top: 1px;
    width: 2.5px;
    height: 27px;
    border-radius: 3px;
    background: linear-gradient(180deg, #edf2f5 0%, #bcc7cf 20%, #8b97a1 65%, #d6dfe5 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        0 0 0 1px rgba(0,0,0,.08),
        0 2px 4px rgba(0,0,0,.18);
}

#bkSiteHeader .bk-logo-flag-pole::before {
    top: -3px;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #dfe7ec 46%, #b6c1c9 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

#bkSiteHeader .bk-logo-flag-cloth {
    top: 4px;
    right: 5px;
    width: 24px;
    height: 15px;
    transform-origin: 100% 52%;
    animation: bk-flag-wave-refined 4.2s cubic-bezier(.45,.05,.35,.95) infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.26));
}

#bkSiteHeader .bk-logo-flag-cloth::before,
#bkSiteHeader .bk-logo-flag-cloth::after {
    border-radius: 1px 9px 9px 1px;
}

#bkSiteHeader .bk-logo-flag-cloth::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 28%),
        linear-gradient(90deg, #202021 0%, #0b0b0c 18%, #2b2b2d 42%, #050505 64%, #272729 82%, #0a0a0b 100%);
    clip-path: polygon(0 2%, 74% 0, 94% 10%, 100% 50%, 94% 89%, 74% 100%, 0 98%, 7% 52%);
}

#bkSiteHeader .bk-logo-flag-cloth::after {
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.05) 14%,
            rgba(255,255,255,.18) 28%,
            rgba(255,255,255,.04) 45%,
            rgba(255,255,255,.14) 60%,
            rgba(255,255,255,.03) 78%,
            rgba(255,255,255,.10) 100%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    opacity: .72;
    clip-path: polygon(2% 4%, 73% 3%, 92% 12%, 97% 50%, 92% 88%, 73% 97%, 2% 96%, 9% 52%);
    mix-blend-mode: screen;
}

@keyframes bk-flag-wave-refined {
    0%, 100% {
        transform: perspective(95px) rotateY(12deg) skewY(0deg) scaleX(1) translateX(0);
    }
    18% {
        transform: perspective(95px) rotateY(28deg) skewY(-5deg) scaleX(0.97) translateX(-1px);
    }
    38% {
        transform: perspective(95px) rotateY(16deg) skewY(3deg) scaleX(1.02) translateX(0);
    }
    58% {
        transform: perspective(95px) rotateY(30deg) skewY(-4deg) scaleX(0.98) translateX(-1px);
    }
    78% {
        transform: perspective(95px) rotateY(18deg) skewY(2deg) scaleX(1.01) translateX(0);
    }
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag {
        left: -17px;
        width: 28px;
        height: 27px;
    }

    #bkSiteHeader .bk-logo-flag-pole {
        height: 24px;
    }

    #bkSiteHeader .bk-logo-flag-cloth {
        width: 21px;
        height: 13px;
        top: 4px;
        right: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .header-title a::after,
    #bkSiteHeader .bk-logo-flag-cloth {
        animation: none !important;
    }
}


/* v1.0.152 - rebuild logo area so the flag has its own space and never gets clipped */
#bkSiteHeader .header-title {
    overflow: visible !important;
}

#bkSiteHeader .header-title a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    padding-left: 28px !important;
    min-width: calc(100% + 28px);
}

#bkSiteHeader .header-title img {
    position: relative;
    z-index: 1;
}

#bkSiteHeader .bk-logo-flag {
    left: 4px !important;
    top: 50%;
    width: 34px;
    height: 32px;
    transform: translateY(-50%);
    overflow: visible;
}

#bkSiteHeader .bk-logo-flag-pole {
    right: 4px;
    top: 1px;
    width: 2.5px;
    height: 29px;
}

#bkSiteHeader .bk-logo-flag-cloth {
    top: 4px;
    right: 6px;
    width: 25px;
    height: 16px;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a {
        padding-left: 24px !important;
        min-width: calc(100% + 24px);
    }

    #bkSiteHeader .bk-logo-flag {
        left: 3px !important;
        width: 30px;
        height: 28px;
    }

    #bkSiteHeader .bk-logo-flag-pole {
        height: 25px;
    }

    #bkSiteHeader .bk-logo-flag-cloth {
        width: 22px;
        height: 14px;
        right: 5px;
    }
}


/* v1.0.153 use provided black flag image next to logo, nearly attached, no animation yet */
#bkSiteHeader .header-title,
#bkSiteHeader .header-title a {
    overflow: visible !important;
}

#bkSiteHeader .header-title a {
    position: relative;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding-left: 0 !important;
    min-width: 0 !important;
}

#bkSiteHeader .header-title img {
    display: block;
}

#bkSiteHeader .header-title > a > img:first-child {
    max-height: 40px !important;
    height: auto !important;
    width: auto !important;
    position: relative;
    z-index: 1;
}

#bkSiteHeader .bk-logo-flag,
#bkSiteHeader .bk-logo-flag-pole,
#bkSiteHeader .bk-logo-flag-cloth {
    display: none !important;
}

#bkSiteHeader .bk-logo-flag-image {
    width: 26px !important;
    height: auto !important;
    max-height: 24px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    pointer-events: none !important;
    transform: translateY(1px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a {
        gap: 1px !important;
    }

    #bkSiteHeader .bk-logo-flag-image {
        width: 22px !important;
        max-height: 20px !important;
    }
}


/* v1.0.154 refine logo shine: only on logo, delayed first run, and smaller adjacent flag */
#bkSiteHeader .header-title,
#bkSiteHeader .header-title a {
    overflow: visible !important;
}

#bkSiteHeader .header-title a {
    position: relative;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding-left: 0 !important;
    min-width: 0 !important;
}

/* stop old full-anchor shine so the flag is not affected */
#bkSiteHeader .header-title a::after {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

#bkSiteHeader .bk-logo-mark {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;
    max-height: 40px;
    overflow: hidden;
    isolation: isolate;
}

#bkSiteHeader .bk-logo-mark img {
    max-height: 40px !important;
    height: auto !important;
    width: auto !important;
    display: block;
    position: relative;
    z-index: 1;
}

#bkSiteHeader .bk-logo-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        104deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, .08) 41%,
        rgba(255, 255, 255, .18) 45%,
        rgba(255, 255, 255, .92) 50%,
        rgba(255, 255, 255, .22) 55%,
        rgba(255, 255, 255, .08) 60%,
        transparent 67%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 280% 100%;
    background-position: 195% 0;
    mix-blend-mode: screen;
    -webkit-mask-image: url('/bashkardi3.png');
    mask-image: url('/bashkardi3.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: bk-logo-electric-wave-delayed 15s cubic-bezier(.24,.56,.24,1) infinite;
    animation-delay: 5s;
}

@keyframes bk-logo-electric-wave-delayed {
    0% {
        opacity: 0;
        background-position: 195% 0;
    }
    2% {
        opacity: .18;
    }
    4% {
        opacity: .96;
    }
    17.2% {
        opacity: .98;
        background-position: -120% 0;
    }
    19% {
        opacity: 0;
        background-position: -120% 0;
    }
    100% {
        opacity: 0;
        background-position: -120% 0;
    }
}

#bkSiteHeader .bk-logo-flag-image {
    width: 20px !important;
    height: auto !important;
    max-height: 18px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    pointer-events: none !important;
    transform: translateY(1px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a {
        gap: 1px !important;
    }

    #bkSiteHeader .bk-logo-flag-image {
        width: 17px !important;
        max-height: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .bk-logo-mark::after {
        animation: none !important;
        display: none !important;
    }
}


/* v1.0.155 reverse logo shine direction and slightly reduce flag size */
#bkSiteHeader .bk-logo-mark::after {
    background-position: -195% 0;
    animation: bk-logo-electric-wave-delayed-reverse 15s cubic-bezier(.24,.56,.24,1) infinite !important;
    animation-delay: 5s;
}

@keyframes bk-logo-electric-wave-delayed-reverse {
    0% {
        opacity: 0;
        background-position: -195% 0;
    }
    2% {
        opacity: .18;
    }
    4% {
        opacity: .96;
    }
    17.2% {
        opacity: .98;
        background-position: 120% 0;
    }
    19% {
        opacity: 0;
        background-position: 120% 0;
    }
    100% {
        opacity: 0;
        background-position: 120% 0;
    }
}

#bkSiteHeader .bk-logo-flag-image {
    width: 17px !important;
    max-height: 15px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-image {
        width: 15px !important;
        max-height: 13px !important;
    }
}


/* v1.0.156 force a noticeably smaller header flag (both width and height). */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 13px !important;
    max-width: 13px !important;
    min-width: 13px !important;
    height: auto !important;
    max-height: 11px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 13px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 11px !important;
        max-width: 11px !important;
        min-width: 11px !important;
        max-height: 9px !important;
        flex-basis: 11px !important;
    }
}


/* v1.0.157: flag is only about 10% smaller than its original v1.0.153 size. */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 23px !important;
    max-width: 23px !important;
    min-width: 23px !important;
    height: auto !important;
    max-height: 22px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 23px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 20px !important;
        max-width: 20px !important;
        min-width: 20px !important;
        max-height: 18px !important;
        flex-basis: 20px !important;
    }
}


/* v1.0.158: slightly larger flag than v1.0.157, closer to the original look. */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 25px !important;
    max-width: 25px !important;
    min-width: 25px !important;
    height: auto !important;
    max-height: 23px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 25px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 21px !important;
        max-width: 21px !important;
        min-width: 21px !important;
        max-height: 19px !important;
        flex-basis: 21px !important;
    }
}


/* v1.0.159: make header flag 40% larger than v1.0.158 current size. */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 35px !important;
    max-width: 35px !important;
    min-width: 35px !important;
    height: auto !important;
    max-height: 32px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 35px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 29px !important;
        max-width: 29px !important;
        min-width: 29px !important;
        max-height: 27px !important;
        flex-basis: 29px !important;
    }
}


/* v1.0.160: make header flag 5% larger than v1.0.159 current size. */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 37px !important;
    max-width: 37px !important;
    min-width: 37px !important;
    height: auto !important;
    max-height: 34px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 37px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 30px !important;
        max-width: 30px !important;
        min-width: 30px !important;
        max-height: 28px !important;
        flex-basis: 30px !important;
    }
}


/* v1.0.161: make header flag 10% larger than v1.0.160 current size. */
#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    width: 41px !important;
    max-width: 41px !important;
    min-width: 41px !important;
    height: auto !important;
    max-height: 37px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: translateY(1px) !important;
    flex: 0 0 41px !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .header-title a > img.bk-logo-flag-image,
    #bkSiteHeader .bk-logo-flag-image {
        width: 33px !important;
        max-width: 33px !important;
        min-width: 33px !important;
        max-height: 31px !important;
        flex-basis: 33px !important;
    }
}


/* v1.0.162: animate only the flag cloth by slicing the provided image into multiple moving strips. */
#bkSiteHeader .header-title,
#bkSiteHeader .header-title a {
    overflow: visible !important;
}

#bkSiteHeader .header-title a {
    position: relative;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding-left: 0 !important;
    min-width: 0 !important;
}

#bkSiteHeader .header-title a > img.bk-logo-flag-image,
#bkSiteHeader .bk-logo-flag-image {
    display: none !important;
}

#bkSiteHeader .bk-logo-flag-wave {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 37px;
    flex: 0 0 41px;
    overflow: visible;
    pointer-events: none;
    transform: translateY(1px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice {
    position: absolute;
    top: 0;
    bottom: 0;
    background-image: url('/assets/images/header-black-flag.png');
    background-repeat: no-repeat;
    background-size: 41px 37px;
    will-change: transform, filter;
    animation: bk-flag-wave-slices 3.2s ease-in-out infinite;
    transform-origin: left center;
}

#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 9px;  background-position: 0 0;    animation-delay: 0s;    z-index: 5; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 8px; width: 9px;  background-position: -8px 0;  animation-delay: .12s; z-index: 4; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 16px; width: 9px; background-position: -16px 0; animation-delay: .24s; z-index: 3; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 24px; width: 9px; background-position: -24px 0; animation-delay: .36s; z-index: 2; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 32px; width: 9px; background-position: -32px 0; animation-delay: .48s; z-index: 1; }

@keyframes bk-flag-wave-slices {
    0%, 100% {
        transform: perspective(90px) rotateY(0deg) translateY(0) scaleY(1);
        filter: brightness(1);
    }
    20% {
        transform: perspective(90px) rotateY(14deg) translateY(-0.4px) scaleY(.985);
        filter: brightness(1.04);
    }
    45% {
        transform: perspective(90px) rotateY(-11deg) translateY(0.5px) scaleY(1.02);
        filter: brightness(.98);
    }
    70% {
        transform: perspective(90px) rotateY(18deg) translateY(-0.2px) scaleY(.99);
        filter: brightness(1.03);
    }
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-wave {
        width: 33px;
        height: 31px;
        flex-basis: 33px;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice {
        background-size: 33px 31px;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 7px; background-position: 0 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 6px; width: 7px; background-position: -6px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 12px; width: 7px; background-position: -12px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 18px; width: 7px; background-position: -18px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 24px; width: 9px; background-position: -24px 0; }
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice {
        animation: none !important;
    }
}


/* v1.0.163: keep the pole fully static and animate only the cloth area. */
#bkSiteHeader .bk-logo-flag-wave {
    position: relative;
    isolation: isolate;
}

/* Static pole overlay to hide any movement from the original image slices. */
#bkSiteHeader .bk-logo-flag-wave::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background-image: url('/assets/images/header-black-flag.png');
    background-repeat: no-repeat;
    background-size: 41px 37px;
    background-position: right center;
    z-index: 12;
    pointer-events: none;
}

/* Constrain the moving slices to the cloth section only. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 8px; background-position: 0 0;    animation-delay: 0s;    z-index: 5; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 7px; width: 8px; background-position: -7px 0;  animation-delay: .12s; z-index: 4; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 14px; width: 8px; background-position: -14px 0; animation-delay: .24s; z-index: 3; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 21px; width: 8px; background-position: -21px 0; animation-delay: .36s; z-index: 2; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 28px; width: 7px; background-position: -28px 0; animation-delay: .48s; z-index: 1; }

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-wave::after {
        width: 5px;
        background-size: 33px 31px;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 7px; background-position: 0 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 6px; width: 7px; background-position: -6px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 12px; width: 6px; background-position: -12px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 17px; width: 6px; background-position: -17px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 22px; width: 6px; background-position: -22px 0; }
}


/* v1.0.164: reduce visible separation near the pole and make the cloth wave more pronounced. */
#bkSiteHeader .bk-logo-flag-wave {
    width: 41px;
    height: 37px;
}

/* Static cloth anchor next to the pole so the split looks attached, not detached. */
#bkSiteHeader .bk-logo-flag-wave::before {
    content: "";
    position: absolute;
    top: 0;
    left: 31px;
    width: 5px;
    height: 100%;
    background-image: url('/assets/images/header-black-flag.png');
    background-repeat: no-repeat;
    background-size: 41px 37px;
    background-position: -31px 0;
    z-index: 10;
    pointer-events: none;
}

/* Keep the pole static but pull it 1px toward the cloth to remove the visual gap. */
#bkSiteHeader .bk-logo-flag-wave::after {
    right: -1px;
    width: 6px;
    z-index: 12;
}

/* Slight overlap between slices so seams are less noticeable. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 9px; background-position: 0 0;    animation-delay: 0s;    z-index: 5; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 7px; width: 9px; background-position: -7px 0;  animation-delay: .12s; z-index: 4; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 14px; width: 9px; background-position: -14px 0; animation-delay: .24s; z-index: 3; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 21px; width: 9px; background-position: -21px 0; animation-delay: .36s; z-index: 2; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 28px; width: 8px; background-position: -28px 0; animation-delay: .48s; z-index: 1; }

/* Stronger cloth motion for a clearer waving effect. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice {
    animation-name: bk-flag-wave-slices-stronger;
    animation-duration: 2.8s;
}

@keyframes bk-flag-wave-slices-stronger {
    0%, 100% {
        transform: perspective(90px) rotateY(0deg) translateY(0) scaleY(1) skewY(0deg);
        filter: brightness(1);
    }
    18% {
        transform: perspective(90px) rotateY(22deg) translateY(-0.7px) scaleY(.97) skewY(-1.5deg);
        filter: brightness(1.08);
    }
    42% {
        transform: perspective(90px) rotateY(-18deg) translateY(0.8px) scaleY(1.05) skewY(1.5deg);
        filter: brightness(.96);
    }
    68% {
        transform: perspective(90px) rotateY(28deg) translateY(-0.5px) scaleY(.98) skewY(-2deg);
        filter: brightness(1.07);
    }
    85% {
        transform: perspective(90px) rotateY(-10deg) translateY(0.4px) scaleY(1.02) skewY(.8deg);
        filter: brightness(.99);
    }
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-wave {
        width: 33px;
        height: 31px;
        flex-basis: 33px;
    }

    #bkSiteHeader .bk-logo-flag-wave::before {
        left: 24px;
        width: 4px;
        background-size: 33px 31px;
        background-position: -24px 0;
    }

    #bkSiteHeader .bk-logo-flag-wave::after {
        width: 5px;
        right: -1px;
        background-size: 33px 31px;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 7px; background-position: 0 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 6px; width: 7px; background-position: -6px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 12px; width: 7px; background-position: -12px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 18px; width: 7px; background-position: -18px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 23px; width: 5px; background-position: -23px 0; }
}


/* v1.0.165: make flag slices overlap more so seams visually disappear. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice {
    overflow: hidden;
    opacity: .995;
    backface-visibility: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 calc(100% - 2px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 calc(100% - 2px), transparent 100%);
}

/* Desktop: wider slices + smaller step = more overlap */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 11px; background-position: 0 0;    animation-delay: 0s;    z-index: 5; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 6px; width: 11px; background-position: -6px 0;  animation-delay: .12s; z-index: 4; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 12px; width: 11px; background-position: -12px 0; animation-delay: .24s; z-index: 3; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 18px; width: 11px; background-position: -18px 0; animation-delay: .36s; z-index: 2; }
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 24px; width: 10px; background-position: -24px 0; animation-delay: .48s; z-index: 1; }

@media (max-width: 480px) {
    /* Mobile: same idea with tighter spacing */
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-1 { left: 0;  width: 8px; background-position: 0 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-2 { left: 5px; width: 8px; background-position: -5px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-3 { left: 10px; width: 8px; background-position: -10px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 { left: 15px; width: 8px; background-position: -15px 0; }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 { left: 20px; width: 8px; background-position: -20px 0; }
}


/* v1.0.166: blend the cloth section nearest the pole with stronger overlap so the split is hidden too. */
#bkSiteHeader .bk-logo-flag-wave::before {
    /* fixed cloth anchor next to the pole becomes slightly wider and starts a bit earlier */
    left: 29px !important;
    width: 7px !important;
    background-position: -29px 0 !important;
    z-index: 11;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2px, #000 100%);
}

#bkSiteHeader .bk-logo-flag-wave::after {
    /* keep pole fixed but bring it 1px tighter to the cloth */
    right: -2px !important;
}

/* Pull the last moving slice further under the fixed cloth anchor near the pole. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 {
    left: 17px !important;
    width: 12px !important;
    background-position: -17px 0 !important;
}
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 {
    left: 22px !important;
    width: 12px !important;
    background-position: -22px 0 !important;
    z-index: 6;
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-wave::before {
        left: 22px !important;
        width: 6px !important;
        background-size: 33px 31px !important;
        background-position: -22px 0 !important;
    }

    #bkSiteHeader .bk-logo-flag-wave::after {
        right: -2px !important;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 {
        left: 14px !important;
        width: 9px !important;
        background-position: -14px 0 !important;
    }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 {
        left: 18px !important;
        width: 9px !important;
        background-position: -18px 0 !important;
    }
}


/* v1.0.167: correct the pole-side overlap direction. Move the cloth anchor RIGHT and let the last moving slice tuck under it. */
#bkSiteHeader .bk-logo-flag-wave::before {
    /* fixed cloth piece next to the pole: shift right and widen slightly */
    left: 31px !important;
    width: 8px !important;
    background-position: -31px 0 !important;
    z-index: 11 !important;
}

#bkSiteHeader .bk-logo-flag-wave::after {
    /* keep the pole tight to the cloth, not farther away */
    right: 0 !important;
    width: 6px !important;
}

/* Move the last moving pieces toward the pole so they tuck under the fixed cloth piece. */
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 {
    left: 18px !important;
    width: 12px !important;
    background-position: -18px 0 !important;
}
#bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 {
    left: 25px !important;
    width: 13px !important;
    background-position: -25px 0 !important;
    z-index: 6 !important;
}

@media (max-width: 480px) {
    #bkSiteHeader .bk-logo-flag-wave::before {
        left: 24px !important;
        width: 6px !important;
        background-size: 33px 31px !important;
        background-position: -24px 0 !important;
    }

    #bkSiteHeader .bk-logo-flag-wave::after {
        right: 0 !important;
        width: 5px !important;
        background-size: 33px 31px !important;
    }

    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-4 {
        left: 15px !important;
        width: 9px !important;
        background-position: -15px 0 !important;
    }
    #bkSiteHeader .bk-logo-flag-wave .bk-flag-wave-slice-5 {
        left: 20px !important;
        width: 10px !important;
        background-position: -20px 0 !important;
    }
}


/* v1.0.175: guarantee first logo shine starts 5 seconds after page load. */
#bkSiteHeader .bk-logo-mark::after {
    animation-name: bk-logo-electric-wave-delayed-reverse !important;
    animation-duration: 15s !important;
    animation-timing-function: cubic-bezier(.24,.56,.24,1) !important;
    animation-iteration-count: infinite !important;
    animation-delay: 5s !important;
    animation-fill-mode: backwards !important;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    #bkSiteHeader .bk-logo-mark::after {
        animation: none !important;
        display: none !important;
    }
}


/* v1.0.176: lock floating footer to one constant viewport position while scrolling. */
.bottom-nav,
.instagram-footer {
    position: fixed !important;
    bottom: var(--bk-chrome-gap, 10px) !important;
    margin-bottom: 0 !important;
    translate: none !important;
    transition-property: none !important;
    animation: none !important;
}
.bk-circle-popup {
    bottom: calc(var(--bk-floating-footer-height, 60px) + var(--bk-chrome-gap, 10px) + 10px) !important;
}