/* ── BSB Header ── */

.bsb-header {
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    padding:        1rem 0;
    z-index:        1000;
    pointer-events: none;
}

.header-container {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    max-width:       100%;
}

@media (min-width: 1660px) {
    .header-container {
        padding-left:  10rem;
        padding-right: 10rem;
    }
    .bsb-left-sidebar {
        left: calc(10rem + 25px) !important;
    }
}

/* ── Logo ── */
.bsb-header-logo {
    pointer-events: auto;
    width:          80px;
    display:        block;
}

.bsb-header-logo img {
    width:  100%;
    height: auto;
}

/* ── Header Actions ── */
.bsb-header-actions {
    display:        flex;
    align-items:    center;
    gap:            1.25rem;
    pointer-events: auto;
}

/* ── Bag Toggle ── */
.bsb-bag-toggle {
    display:        flex;
    align-items:    center;
    justify-content:center;
    pointer-events: auto;
}

.bsb-bag-wrapper {
    position:    relative;
    display:     inline-flex;
    align-items: center;
}

.bsb-bag-count {
    position:        absolute;
    top:             -7px;
    left:            -9px;
    min-width:       16px;
    height:          16px;
    background:      #e02020;
    color:           #ffffff;
    font-size:       10px;
    font-weight:     700;
    border-radius:   50px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 3px;
    line-height:     1;
    pointer-events:  none;
}

.bsb-bag-icon {
    display:    inline-flex;
    align-items:center;
    transition: opacity 0.3s ease;
}

.bsb-bag-icon svg {
    width:  26px;
    height: auto;
    display:block;
}

.bsb-bag-toggle:hover .bsb-bag-icon {
    opacity: 0.7;
}

/* ── Menu Toggle ── */
.bsb-menu-toggle {
    pointer-events:  auto;
    background:      none;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    z-index:         1001;
    outline:         none;
}

.bsb-menu-icon {
    display:    inline-flex;
    align-items:center;
    transition: opacity 0.3s ease;
}

.bsb-menu-icon svg {
    width:   35px;
    height:  auto;
    display: block;
}

/* ── Off-Canvas Menu ── */
.bsb-offcanvas-menu {
    position:         fixed;
    top:              0;
    right:            0;
    width:            100vw;
    max-width:        50%;
    height:           100vh;
    background-color: #000000;
    z-index:          2000;
    display:          flex;
    align-items:      center;
    transform:        translateX(100%);
    visibility:       hidden;
}

.bsb-menu-close {
    position:        absolute;
    top:             3.5rem;
    left:            4rem;
    z-index:         2001;
    background:      none;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    outline:         none;
}

.bsb-close-icon {
    display:    inline-flex;
    align-items:center;
    filter:     brightness(0) invert(1);
    transition: transform 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.bsb-close-icon svg {
    width:   26px;
    height:  auto;
    display: block;
}

.bsb-menu-close:hover .bsb-close-icon {
    transform: scale(1.15) rotate(90deg);
}

.bsb-offcanvas-bag {
    position:        absolute;
    top:             3.75rem;
    right:           10rem;
    z-index:         2001;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.bsb-offcanvas-bag .bsb-bag-icon {
    filter: brightness(0) invert(1);
}

.bsb-offcanvas-bag:hover .bsb-bag-icon {
    opacity:   0.7;
    transform: scale(1.1);
}

/* ── Menu List ── */
.bsb-menu-inner {
    padding-left: 7rem;
    width:        100%;
}

.bsb-menu-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.bsb-menu-item {
    overflow: hidden;
}

.bsb-menu-link {
    display:         inline-block;
    text-decoration: none;
    color:           #ffffff;
    font-family:     var(--bsb-font-display);
    font-size:       1.4rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.15em;
    position:        relative;
    transform:       translateY(100%);
    transition:      color 0.3s ease;
}

.bsb-menu-link::after {
    content:          '';
    position:         absolute;
    top:              calc(50% - 4px);
    left:             -15px;
    width:            calc(100% + 30px);
    height:           2px;
    background-color: var(--bsb-pink);
    transform:        scaleX(0) translateY(50%);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.bsb-menu-link:hover::after,
.bsb-menu-link.is-active::after {
    transform: scaleX(1) translateY(50%);
}

/* ── Left Sidebar ── */
.bsb-left-sidebar {
    position:       fixed;
    left:           40px;
    top:            0;
    height:         100vh;
    width:          30px;
    z-index:        50;
    pointer-events: none;
}

@media (max-width: 1440px) {
    .bsb-left-sidebar { left: 25px; }
}

.bsb-sidebar-text {
    position:       absolute;
    top:            50vh;
    left:           50%;
    transform:      translate(-50%, -50%) rotate(180deg);
    pointer-events: auto;
    font-family:    var(--bsb-font-primary);
    font-size:      1.1rem;
    font-weight:    500;
    letter-spacing: 0.15em;
    writing-mode:   vertical-rl;
    white-space:    nowrap;
    opacity:        0.95;
    color:          #ffffff;
    transition:     color 0.4s ease;
}

.bsb-social-icons {
    position:        absolute;
    bottom:          4rem;
    left:            50%;
    transform:       translateX(-50%);
    pointer-events:  auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    color:           #ffffff;
}

.bsb-social-icons a {
    display:    flex;
    align-items:center;
    opacity:    0.8;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bsb-social-icons a:hover {
    opacity:   1;
    transform: scale(1.15) translateY(-2px);
}

/* SVG social icons use currentColor — control via color property on sidebar */
.bsb-social-icons svg {
    width:   24px;
    height:  auto;
    display: block;
}

/* ── Dynamic Sidebar States ── */
.bsb-left-sidebar.is-dark .bsb-sidebar-text { color: var(--bsb-color-text); }
.bsb-left-sidebar.is-dark .bsb-social-icons { color: var(--bsb-color-text); }
.bsb-left-sidebar.is-light .bsb-sidebar-text { color: #ffffff; }
.bsb-left-sidebar.is-light .bsb-social-icons { color: #ffffff; }

/* ── Dynamic Header States ── */
.bsb-header.is-light .bsb-header-logo img { filter: brightness(0) invert(1); }
.bsb-header.is-light .bsb-menu-icon       { filter: brightness(0) invert(1); }
.bsb-header.is-light .bsb-bag-toggle .bsb-bag-icon { filter: brightness(0) invert(1); }

.bsb-header.is-dark .bsb-header-logo img  { filter: brightness(0); }
.bsb-header.is-dark .bsb-menu-icon        { filter: brightness(0); }
.bsb-header.is-dark .bsb-bag-toggle .bsb-bag-icon  { filter: brightness(0); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .bsb-left-sidebar { display: none; }
}

@media (max-width: 768px) {
    .bsb-offcanvas-menu {
        max-width: 100vw;
    }
    .bsb-menu-inner { padding-left: 3rem; }
    .bsb-menu-link  { font-size: 1.2rem; }
    .bsb-menu-close { left: 2rem; }
    .bsb-offcanvas-bag { right: 2rem; }
}