/* =======================================================================
   Bushman Music — Header mini-cart as a right-side slide-in DRAWER
   Loads site-wide. Theme combo: white panel, dark text #1c1c1e, amber #ffb700
   ======================================================================= */

:root {
    --bmc-dark: #1c1c1e;
    --bmc-text: #3a3a3e;
    --bmc-muted: #8a8a91;
    --bmc-line: #ececef;
    --bmc-accent: #ffb700;
    --bmc-accent-dark: #e6a500;
    --bmc-accent-soft: #fff7e3;
    --bmc-panel-2: #fbfbfc;
    --bmc-drawer-w: min(400px, 100vw);
}

/* prevent the off-canvas drawer from creating horizontal scroll */
body { overflow-x: hidden; }

/* ---- Lift the cart's header ROW above its sibling rows when the drawer opens.
   The theme splits the header into stacked VC rows: the cart sits in the amber
   nav row (z-index:3) while the dark contact/search row above it is z-index:5.
   Because the drawer lives inside the lower row, the upper row painted over its
   top (the "Your Cart" band was hidden until the sticky header dropped the dark
   row on scroll). Raising the cart's row resolves the overlap. ---- */
.header .vc_row:has(.header-cart .hbe-toggle.active) {
    position: relative !important;
    z-index: 100001 !important;
}

/* ---- Lift the whole cart context above the page when the drawer is open.
   This isolates a fresh stacking context so the overlay (below) and the
   drawer (above) order correctly regardless of the theme header's z-index. ---- */
.header-cart:has(.hbe-toggle.active) {
    position: relative;
    z-index: 100000;
    isolation: isolate;
}

/* ---- Dim overlay — sibling of the drawer INSIDE the same context,
   so it can never trap the drawer's clicks ---- */
.header-cart:has(.hbe-toggle.active)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, .45);
    z-index: 1;
    pointer-events: auto;
}

/* ---- Drawer panel ---- */
.header-cart .cart-box.box,
.header-cart [id^="cart-box-"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: var(--bmc-drawer-w) !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: -18px 0 60px rgba(20, 20, 30, .22) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;

    /* slide-in animation */
    transform: translateX(100%);
    visibility: hidden;
    opacity: 1 !important;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility .32s ease;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* theme opens the panel by adding .active to the toggle just before it */
.header-cart .hbe-toggle.active + .cart-box.box,
.header-cart .hbe-toggle.active + [id^="cart-box-"] {
    transform: translateX(0);
    visibility: visible;
}

/* neutralize theme mobile centering override */
@media (max-width: 1024px) {
    .header-cart .cart-box {
        right: 0 !important;
        left: auto !important;
        margin-left: 0 !important;
    }
}

/* Close (×) icon -> circular button, top-right of drawer header */
.header-cart .cart-box .close-toggle {
    top: 18px !important;
    right: 16px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f1f3 !important;
    z-index: 4 !important;
    overflow: hidden !important;
    transition: background .15s ease, transform .15s ease;
}
.header-cart .cart-box .close-toggle:hover {
    background: var(--bmc-dark) !important;
    transform: rotate(90deg);
}
/* override theme: svg.close is absolute top/left 0 with z-index:-1 (sits behind bg) */
.header-cart .cart-box .close-toggle svg.close {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 13px !important;
    height: 13px !important;
    z-index: 1 !important;
    color: var(--bmc-dark) !important;
    fill: var(--bmc-dark) !important;
}
.header-cart .cart-box .close-toggle:hover svg.close { fill: #fff !important; }

/* ---- Inner wrappers become the flex column ---- */
.header-cart .cart-box .widget_shopping_cart,
.header-cart .cart-box .widget_shopping_cart_content {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Drawer header label — reuse theme's hidden .widgettitle as the header band */
.header-cart .cart-box .widgettitle {
    display: block !important;
    flex: 0 0 auto;
    order: -1;
    margin: 0 !important;
    padding: 22px 50px 18px 22px !important;
    font-family: "Oswald", "Heebo", sans-serif !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: var(--bmc-dark) !important;
    background: #fff !important;
    border-bottom: 2px solid var(--bmc-accent) !important;
}
.header-cart .cart-box .widgettitle::before {
    content: "Your Cart";
    font-size: 17px;
}

/* ---- Item list (scrolls, fills available height) ---- */
.header-cart .cart-box .cart_list,
.header-cart ul.woocommerce-mini-cart.cart_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 22px !important;
    height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #d6d6db transparent;
}
.header-cart .cart-box .cart_list::-webkit-scrollbar { width: 6px; }
.header-cart .cart-box .cart_list::-webkit-scrollbar-thumb {
    background: #d6d6db; border-radius: 6px;
}
.header-cart .cart-box .cart_list::-webkit-scrollbar-track { background: transparent; }
/* remove theme's faint ::before divider lines */
.header-cart .cart-box .product_list_widget > li::before,
.header-cart .cart-box .woocommerce-mini-cart__total::before { display: none !important; }

.header-cart ul.cart_list li.mini_cart_item {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 10px !important;
    margin: 0 -10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bmc-line) !important;
    border-radius: 8px;
    transition: background .15s ease;
}
.header-cart ul.cart_list li.mini_cart_item:hover { background: #faf7ee; }
.header-cart ul.cart_list li.mini_cart_item:last-child { border-bottom: 0 !important; }

/* Thumbnail */
.header-cart ul.cart_list li.mini_cart_item a:not(.remove) img,
.header-cart ul.cart_list li.mini_cart_item img {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    float: none !important;
    object-fit: cover;
    border: 1px solid var(--bmc-line);
    border-radius: 8px;
    background: #f7f7f8;
    order: 1;
    flex: 0 0 64px;
}

/* Title + meta wrapper (product link) */
.header-cart ul.cart_list li.mini_cart_item a:not(.remove) {
    order: 2;
    flex: 1 1 auto;
    display: block;
    padding: 0 26px 0 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--bmc-dark) !important;
    text-decoration: none !important;
}
.header-cart ul.cart_list li.mini_cart_item a:not(.remove):hover { color: var(--bmc-accent-dark) !important; }
.header-cart ul.cart_list li.mini_cart_item .cart-product-title { color: var(--bmc-dark) !important; }

/* Quantity / price line */
.header-cart ul.cart_list li.mini_cart_item .quantity {
    order: 3;
    flex: 0 0 100%;
    display: block;
    margin: 6px 0 0 78px;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--bmc-muted) !important;
}
.header-cart ul.cart_list li.mini_cart_item .quantity .woocommerce-Price-amount {
    color: var(--bmc-accent-dark) !important;
    font-weight: 700;
}

/* Remove (×) button */
.header-cart ul.cart_list li.mini_cart_item a.remove,
.header-cart ul.cart_list li.mini_cart_item a.remove_from_cart_button {
    position: absolute !important;
    top: 14px !important;
    right: 0 !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center;
    border-radius: 50% !important;
    background: #f1f1f3 !important;
    color: #6a6a72 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all .15s ease;
}
.header-cart ul.cart_list li.mini_cart_item a.remove:hover,
.header-cart ul.cart_list li.mini_cart_item a.remove_from_cart_button:hover {
    background: #e23b3b !important;
    color: #fff !important;
}

/* ---- Subtotal (pinned above buttons) ---- */
.header-cart .cart-box .woocommerce-mini-cart__total.total,
.header-cart .woocommerce-mini-cart__total.total {
    flex: 0 0 auto;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 18px 22px !important;
    border: 0 !important;
    border-top: 2px solid var(--bmc-dark) !important;
    background: var(--bmc-panel-2) !important;
    font-size: 15px;
    color: var(--bmc-dark) !important;
}
.header-cart .woocommerce-mini-cart__total.total strong {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--bmc-dark) !important;
}
.header-cart .woocommerce-mini-cart__total.total .woocommerce-Price-amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--bmc-accent-dark) !important;
}
.header-cart .woocommerce-mini-cart__total.total::after {
    content: "Shipping & taxes calculated at checkout";
    flex: 0 0 100%;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
    color: var(--bmc-muted);
}

/* ---- Buttons (pinned footer) ---- */
.header-cart .woocommerce-mini-cart__buttons.buttons {
    flex: 0 0 auto;
    display: flex !important;
    gap: 10px;
    margin: 0 !important;
    padding: 16px 22px 22px !important;
    background: var(--bmc-panel-2);
    border-top: 1px solid var(--bmc-line);
}
.header-cart .woocommerce-mini-cart__buttons.buttons a {
    width: auto !important;
    flex: 1 1 50%;
    margin: 0 !important;
    padding: 13px 10px !important;
    text-align: center;
    font-family: "Oswald", "Heebo", sans-serif;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all .2s ease;
}
/* View cart -> outline */
.header-cart .woocommerce-mini-cart__buttons.buttons a:not(.checkout) {
    background: #fff !important;
    color: var(--bmc-dark) !important;
    border: 1.5px solid var(--bmc-dark) !important;
}
.header-cart .woocommerce-mini-cart__buttons.buttons a:not(.checkout):hover {
    background: var(--bmc-dark) !important;
    color: #fff !important;
}
/* Checkout -> filled amber */
.header-cart .woocommerce-mini-cart__buttons.buttons a.checkout {
    background: linear-gradient(180deg, #ffc733, var(--bmc-accent)) !important;
    color: #000 !important;
    border: 1.5px solid var(--bmc-accent) !important;
    box-shadow: 0 4px 12px rgba(255, 183, 0, .3);
}
.header-cart .woocommerce-mini-cart__buttons.buttons a.checkout:hover {
    background: var(--bmc-dark) !important;
    color: #fff !important;
    border-color: var(--bmc-dark) !important;
}

/* ---- Empty cart message ---- */
.header-cart .woocommerce-mini-cart__empty-message {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 28px 22px !important;
    text-align: center;
    color: var(--bmc-muted) !important;
    font-size: 14px;
}

/* =======================================================================
   Header LOGIN flyout — professional dropdown card
   Shown when the (logged-out) "My account" icon is clicked. The theme drops
   .login-box below the toggle (absolute, z-index:15), so no stacking fix is
   needed — this is styling only. Scoped to .header-login so the cart drawer
   above is untouched.
   ======================================================================= */
.header-login .login-box.box,
.header-login [id^="login-box-"] {
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: 330px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bmc-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(20, 20, 30, .18) !important;
    overflow: hidden !important;
}

/* little pointer notch toward the icon */
.header-login .login-box.box::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid var(--bmc-line);
    border-top: 1px solid var(--bmc-line);
    transform: rotate(45deg);
    z-index: 1;
}

/* Header band with "Sign In" title */
.header-login .login-box .widget_reglog::before {
    content: "Sign In";
    display: block;
    padding: 20px 22px 16px;
    font-family: "Oswald", "Heebo", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bmc-dark);
    background: #fff;
    border-bottom: 2px solid var(--bmc-accent);
}
/* When logged in the same flyout shows a greeting + Dashboard/Logout, so the
   title reads "My Account" instead of "Sign In". */
body.logged-in .header-login .login-box .widget_reglog::before {
    content: "My Account";
}
.header-login .login-box .widget_reglog {
    position: relative;
    z-index: 2;
}

/* Body padding for the form */
.header-login .login-box .widget_reglog #loginform,
.header-login .login-box .widget_reglog form[name="loginform"] {
    margin: 0 !important;
    padding: 20px 22px 22px !important;
}

/* ---- Logged-in state: greeting + Dashboard / Logout buttons ----
   Markup: .widget_reglog > span (greeting) + <a class="button"> ×2. */
.header-login .login-box .widget_reglog > span:first-child {
    display: block;
    margin: 0 !important;
    padding: 20px 22px 4px !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--bmc-dark);
}
/* breathing room around the two action links */
body.logged-in .header-login .login-box .widget_reglog {
    padding-bottom: 24px !important;
}
/* extra gap below the last action button (Logout) */
.header-login .login-box .widget_reglog a.button:last-child {
    margin-bottom: 4px !important;
}
.header-login .login-box .widget_reglog a.button {
    display: block !important;
    width: auto !important;
    margin: 10px 22px 0 !important;
    padding: 12px 18px !important;
    font-family: "Oswald", "Heebo", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    border-radius: 8px !important;
    transition: all .2s ease;
}
/* Dashboard — filled amber */
.header-login .login-box .widget_reglog a.button {
    color: #000 !important;
    background: linear-gradient(180deg, #ffc733, var(--bmc-accent)) !important;
    border: 1.5px solid var(--bmc-accent) !important;
    box-shadow: 0 4px 12px rgba(255, 183, 0, .28);
}
.header-login .login-box .widget_reglog a.button:hover {
    color: #fff !important;
    background: var(--bmc-dark) !important;
    border-color: var(--bmc-dark) !important;
}
/* Logout — outline (the second button link) */
.header-login .login-box .widget_reglog a.button + a.button {
    color: var(--bmc-dark) !important;
    background: #fff !important;
    border: 1.5px solid var(--bmc-dark) !important;
    box-shadow: none;
}
.header-login .login-box .widget_reglog a.button + a.button:hover {
    color: #fff !important;
    background: var(--bmc-dark) !important;
    border-color: var(--bmc-dark) !important;
}

/* Circular close (×) — mirror the cart drawer's close button */
.header-login .login-box .close-toggle {
    top: 16px !important;
    right: 14px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #f1f1f3 !important;
    z-index: 4 !important;
    overflow: hidden !important;
    transition: background .15s ease, transform .15s ease;
}
.header-login .login-box .close-toggle:hover {
    background: var(--bmc-dark) !important;
    transform: rotate(90deg);
}
.header-login .login-box .close-toggle svg.close {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 12px !important;
    height: 12px !important;
    z-index: 1 !important;
    color: var(--bmc-dark) !important;
    fill: var(--bmc-dark) !important;
}
.header-login .login-box .close-toggle:hover svg.close { fill: #fff !important; }

/* Field rows + labels */
.header-login .login-box .widget_reglog p {
    margin: 0 0 14px !important;
}
.header-login .login-box .widget_reglog label {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bmc-dark);
}

/* Inputs */
.header-login .login-box .widget_reglog input.input,
.header-login .login-box .widget_reglog input[type="text"],
.header-login .login-box .widget_reglog input[type="email"],
.header-login .login-box .widget_reglog input[type="password"] {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid var(--bmc-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: var(--bmc-dark) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.header-login .login-box .widget_reglog input.input:focus,
.header-login .login-box .widget_reglog input[type="text"]:focus,
.header-login .login-box .widget_reglog input[type="email"]:focus,
.header-login .login-box .widget_reglog input[type="password"]:focus {
    outline: none !important;
    border-color: var(--bmc-accent) !important;
    box-shadow: 0 0 0 3px rgba(255, 183, 0, .18) !important;
}

/* Remember-me line */
.header-login .login-box .widget_reglog .login-remember,
.header-login .login-box .widget_reglog label.login-remember {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bmc-muted);
}
.header-login .login-box .widget_reglog .login-remember input {
    width: auto !important;
    margin: 0 7px 0 0 !important;
    vertical-align: middle;
}

/* Submit button — amber gradient, full width */
.header-login .login-box .widget_reglog .login-submit { margin: 4px 0 0 !important; }
.header-login .login-box .widget_reglog input.button,
.header-login .login-box .widget_reglog button.button,
.header-login .login-box .widget_reglog input[type="submit"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    font-family: "Oswald", "Heebo", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.2;
    color: #000 !important;
    background: linear-gradient(180deg, #ffc733, var(--bmc-accent)) !important;
    border: 1.5px solid var(--bmc-accent) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 183, 0, .28);
    cursor: pointer;
    transition: all .2s ease;
}
.header-login .login-box .widget_reglog input.button:hover,
.header-login .login-box .widget_reglog button.button:hover,
.header-login .login-box .widget_reglog input[type="submit"]:hover {
    background: var(--bmc-dark) !important;
    color: #fff !important;
    border-color: var(--bmc-dark) !important;
}

/* Links (Forgot password? / Sign up) — exclude .button so the amber action
   buttons keep their own colours. */
.header-login .login-box .widget_reglog a:not(.button) {
    color: var(--bmc-accent-dark) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}
.header-login .login-box .widget_reglog a:not(.button):hover {
    color: var(--bmc-dark) !important;
    text-decoration: underline !important;
}
/* "Forgot password?" link + "Don't have account yet? Sign up" line sit OUTSIDE
   the form (direct children of .widget_reglog), so they had no padding. Give
   them the same left/right inset as the inputs, space them apart and add room
   at the bottom. */
.header-login .login-box .widget_reglog form + a {
    display: block;
    margin: 0 !important;
    padding: 16px 22px 0 !important;
    font-size: 13px;
    font-weight: 600;
}
.header-login .login-box .widget_reglog > p {
    margin: 0 !important;
    padding: 10px 22px 22px !important;
    font-size: 13px;
    color: var(--bmc-muted);
}

/* Header toggle label "My account" -> uppercase */
.header-login .login-title {
    text-transform: uppercase !important;
    letter-spacing: .3px;
}