/* ============================================
   JJW Header Styles
   Version: 1.1
   !important on all properties to override
   theme and WooCommerce defaults throughout.
   Brand Colors:
     Pitch Black  #191710
     Racing Red   #E12F2F
     Cotton Rose  #F7C9C9
     Alabaster    #E9DFDF
     Coffee Bean  #200908
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

/* ---------- CSS Variables ---------- */
:root {
    --hdr-red:          #E12F2F;
    --hdr-black:        #191710;
    --hdr-coffee:       #200908;
    --hdr-rose:         #F7C9C9;
    --hdr-alabaster:    #E9DFDF;
    --hdr-white:        #ffffff;
    --hdr-gray:         #999999;
    --hdr-font:         'Trio', sans-serif;
    --hdr-syne:         'Syne', sans-serif;
    --hdr-height:       72px;
    --hdr-height-mob:   60px;
    --hdr-transition:   0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hdr-glass-bg:     rgba(25, 23, 16, 0.65);
    --hdr-glass-blur:   blur(18px);
    --hdr-glass-border: rgba(255, 255, 255, 0.07);
    --hdr-drawer-width: 420px;
    --hdr-z-header:     1000;
    --hdr-z-drawer:     1100;
    --hdr-z-overlay:    1050;
    --hdr-z-backdrop:   1040;
}


/* ============================================
   HEADER BASE
   ============================================ */
.jjw-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--hdr-z-header) !important;
    height: var(--hdr-height) !important;
    background: var(--hdr-glass-bg) !important;
    backdrop-filter: var(--hdr-glass-blur) !important;
    -webkit-backdrop-filter: var(--hdr-glass-blur) !important;
    border-bottom: 1px solid var(--hdr-glass-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background var(--hdr-transition), box-shadow var(--hdr-transition) !important;
    box-sizing: border-box !important;
}

.jjw-header.is-scrolled {
    background: rgba(25, 23, 16, 0.88) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35) !important;
}

.jjw-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #E12F2F 30%, #E12F2F 70%, transparent 100%) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
}

body {
    padding-top: var(--hdr-height) !important;
}


/* ============================================
   HEADER INNER
   ============================================ */
.jjw-header__inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 40px !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}


/* ============================================
   LOGO
   ============================================ */
.jjw-header__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity var(--hdr-transition) !important;
}

.jjw-logo-link:hover {
    opacity: 0.85 !important;
    text-decoration: none !important;
}

.jjw-logo-img {
    height: 38px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.jjw-logo-text {
    font-family: var(--hdr-syne) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================
   PRIMARY NAV
   ============================================ */
.jjw-header__nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-nav__list {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.jjw-nav__list li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
}

.jjw-nav__list > li > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: none !important;
    background: none !important;
    transition: color var(--hdr-transition), background var(--hdr-transition) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    position: relative !important;
    box-shadow: none !important;
}

.jjw-nav__list > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: #E12F2F !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform var(--hdr-transition) !important;
}

.jjw-nav__list > li > a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background: none !important;
}

.jjw-nav__list > li > a:hover::after {
    transform: scaleX(1) !important;
}

.jjw-nav__list > li.current-menu-item > a,
.jjw-nav__list > li.current-menu-parent > a,
.jjw-nav__list > li.current-menu-ancestor > a {
    color: #ffffff !important;
}

.jjw-nav__list > li.current-menu-item > a::after,
.jjw-nav__list > li.current-menu-parent > a::after,
.jjw-nav__list > li.current-menu-ancestor > a::after {
    transform: scaleX(1) !important;
    background: #E12F2F !important;
}

/* Dropdown submenu */
.jjw-nav__list .sub-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 200px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: rgba(25, 23, 16, 0.95) !important;
    backdrop-filter: var(--hdr-glass-blur) !important;
    -webkit-backdrop-filter: var(--hdr-glass-blur) !important;
    border: 1px solid var(--hdr-glass-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: opacity var(--hdr-transition), transform var(--hdr-transition), visibility var(--hdr-transition) !important;
    z-index: 10 !important;
}

.jjw-nav__list li:hover > .sub-menu,
.jjw-nav__list li:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.jjw-nav__list .sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    transition: color var(--hdr-transition), padding-left var(--hdr-transition) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.jjw-nav__list .sub-menu li a:hover {
    color: #ffffff !important;
    padding-left: 26px !important;
    text-decoration: none !important;
    background: none !important;
}


/* ============================================
   ACTION BUTTONS (Search, Cart, Hamburger)
   ============================================ */
.jjw-header__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-action-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: none !important;
    border: none !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: color var(--hdr-transition), background var(--hdr-transition) !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.jjw-action-btn:hover {
    color: #ffffff !important;
    background: rgba(225, 47, 47, 0.12) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

.jjw-action-btn:focus-visible {
    outline: 2px solid #E12F2F !important;
    outline-offset: 2px !important;
}

.jjw-action-btn.is-active {
    color: #E12F2F !important;
    background: rgba(225, 47, 47, 0.1) !important;
}

.jjw-icon {
    display: block !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Cart count badge */
.jjw-cart-count {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: #E12F2F !important;
    color: #ffffff !important;
    font-family: var(--hdr-font) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 16px !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: transform var(--hdr-transition) !important;
    border: none !important;
    box-shadow: none !important;
}

.jjw-cart-count:empty,
.jjw-cart-count[data-count="0"] {
    display: none !important;
}

.jjw-cart-count.bump {
    animation: jjw-cart-bump 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes jjw-cart-bump {
    0%, 100% { transform: scale(1); }
    40%       { transform: scale(1.4); }
}

/* Hamburger */
.jjw-hamburger {
    flex-direction: column !important;
    gap: 5px !important;
    display: none !important;
}

.jjw-hamburger__bar {
    display: block !important;
    width: 20px !important;
    height: 1.5px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 2px !important;
    transition: transform var(--hdr-transition), opacity var(--hdr-transition), background var(--hdr-transition) !important;
    transform-origin: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-hamburger:hover .jjw-hamburger__bar {
    background: #ffffff !important;
}

.jjw-hamburger.is-active .jjw-hamburger__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg) !important;
}
.jjw-hamburger.is-active .jjw-hamburger__bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.jjw-hamburger.is-active .jjw-hamburger__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg) !important;
}


/* ============================================
   DRAWERS (Shared Base)
   ============================================ */
.jjw-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--hdr-drawer-width) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(20, 18, 12, 0.97) !important;
    backdrop-filter: var(--hdr-glass-blur) !important;
    -webkit-backdrop-filter: var(--hdr-glass-blur) !important;
    border-left: 1px solid var(--hdr-glass-border) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    z-index: var(--hdr-z-drawer) !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.jjw-drawer[hidden] {
    display: flex !important;
    pointer-events: none !important;
}

.jjw-drawer.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.jjw-drawer__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Drawer Header */
.jjw-drawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 28px 20px !important;
    border-bottom: 1px solid var(--hdr-glass-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.jjw-drawer__title {
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* Drawer close button */
.jjw-drawer .jjw-drawer__close,
.jjw-cart-drawer .jjw-drawer__close,
.jjw-search-drawer .jjw-drawer__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 4px !important;
    color: rgba(148, 163, 184, 0.5) !important;
    cursor: pointer !important;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    float: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

.jjw-drawer .jjw-drawer__close:hover,
.jjw-cart-drawer .jjw-drawer__close:hover,
.jjw-search-drawer .jjw-drawer__close:hover {
    color: #ffffff !important;
    border-color: #E12F2F !important;
    background: rgba(225, 47, 47, 0.12) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.jjw-drawer .jjw-drawer__close:focus-visible,
.jjw-cart-drawer .jjw-drawer__close:focus-visible,
.jjw-search-drawer .jjw-drawer__close:focus-visible {
    outline: 2px solid #E12F2F !important;
    outline-offset: 2px !important;
}

.jjw-drawer .jjw-drawer__close svg,
.jjw-cart-drawer .jjw-drawer__close svg,
.jjw-search-drawer .jjw-drawer__close svg {
    display: block !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}


/* ============================================
   SEARCH DRAWER
   ============================================ */
.jjw-search-form-wrap {
    padding: 32px 28px !important;
    margin: 0 !important;
}

.jjw-search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: border-color var(--hdr-transition), box-shadow var(--hdr-transition) !important;
}

.jjw-search-form:focus-within {
    border-color: #E12F2F !important;
    box-shadow: 0 0 0 3px rgba(225, 47, 47, 0.12) !important;
}

.jjw-search-input {
    flex: 1 !important;
    height: 52px !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-family: var(--hdr-font) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.jjw-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.jjw-search-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    background: #E12F2F !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background var(--hdr-transition) !important;
    outline: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.jjw-search-submit:hover {
    background: #c92525 !important;
}

.jjw-search-submit:focus-visible {
    outline: 2px solid #F7C9C9 !important;
    outline-offset: -2px !important;
}

.jjw-search-submit svg {
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}


/* ============================================
   CART DRAWER BODY
   ============================================ */
.jjw-cart-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent !important;
}

.jjw-cart-body::-webkit-scrollbar {
    width: 3px !important;
}

.jjw-cart-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 3px !important;
}

/* WooCommerce default mini cart fallback overrides */
.jjw-cart-body .woocommerce-mini-cart {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-cart-body .woocommerce-mini-cart__empty-message {
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: center !important;
    padding: 40px 0 !important;
    margin: 0 !important;
    background: none !important;
}

.jjw-cart-body .woocommerce-mini-cart-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 28px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    background: none !important;
    list-style: none !important;
}

.jjw-cart-body .woocommerce-mini-cart-item img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.jjw-cart-body .woocommerce-mini-cart-item .remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    color: rgba(148, 163, 184, 0.5) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: none !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 3px !important;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
    padding: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.jjw-cart-body .woocommerce-mini-cart-item .remove:hover {
    color: #ffffff !important;
    border-color: #E12F2F !important;
    background: rgba(225, 47, 47, 0.15) !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

.jjw-cart-body .woocommerce-mini-cart-item a:not(.remove) {
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: color var(--hdr-transition) !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
}

.jjw-cart-body .woocommerce-mini-cart-item a:not(.remove):hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.jjw-cart-body .quantity {
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 1px !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jjw-cart-body .woocommerce-Price-amount {
    font-family: var(--hdr-font) !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: none !important;
}

.jjw-cart-body .woocommerce-mini-cart__total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 28px !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    background: none !important;
}

.jjw-cart-body .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: #ffffff !important;
    font-size: 14px !important;
}

.jjw-cart-empty {
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: center !important;
    padding: 40px 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* Cart Footer */
.jjw-cart-footer {
    padding: 20px 28px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-top: 1px solid var(--hdr-glass-border) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.jjw-cart-footer__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all var(--hdr-transition) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.jjw-cart-footer__btn--view {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.jjw-cart-footer__btn--view:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.jjw-cart-footer__btn--checkout {
    background: #E12F2F !important;
    color: #ffffff !important;
    border: 1px solid #E12F2F !important;
    box-shadow: none !important;
}

.jjw-cart-footer__btn--checkout:hover {
    background: #c92525 !important;
    border-color: #c92525 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none !important;
}


/* ============================================
   MOBILE FULL-SCREEN OVERLAY
   ============================================ */
.jjw-mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--hdr-z-overlay) !important;
    background: #191710 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.jjw-mobile-overlay[hidden] {
    display: flex !important;
    pointer-events: none !important;
}

.jjw-mobile-overlay.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.jjw-mobile-overlay__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 28px !important;
    margin: 0 !important;
}

.jjw-mobile-overlay__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--hdr-height-mob) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.jjw-mobile-overlay__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-radius: 4px !important;
    color: rgba(148, 163, 184, 0.5) !important;
    cursor: pointer !important;
    transition: color var(--hdr-transition), border-color var(--hdr-transition), background var(--hdr-transition) !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
}

.jjw-mobile-overlay__close:hover {
    color: #ffffff !important;
    border-color: #E12F2F !important;
    background: rgba(225, 47, 47, 0.12) !important;
    opacity: 1 !important;
}

.jjw-mobile-overlay__close svg {
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}

/* Mobile Nav */
.jjw-mobile-nav {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 40px 0 !important;
    overflow-y: auto !important;
    margin: 0 !important;
}

.jjw-mobile-nav__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.jjw-mobile-nav__list > li {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    list-style: none !important;
    background: none !important;
}

.jjw-mobile-nav__list > li > a {
    display: block !important;
    padding: 16px 0 !important;
    font-family: var(--hdr-syne) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    margin: 0 !important;
    transition: color var(--hdr-transition), padding-left var(--hdr-transition) !important;
}

.jjw-mobile-nav__list > li > a:hover,
.jjw-mobile-nav__list > li.current-menu-item > a {
    color: #ffffff !important;
    padding-left: 12px !important;
    text-decoration: none !important;
    background: none !important;
}

.jjw-mobile-nav__list .sub-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 8px 16px !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

.jjw-mobile-nav__list .sub-menu.is-open {
    display: block !important;
}

.jjw-mobile-nav__list .sub-menu li a {
    display: block !important;
    padding: 10px 0 !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    transition: color var(--hdr-transition) !important;
}

.jjw-mobile-nav__list .sub-menu li a:hover {
    color: #E12F2F !important;
    text-decoration: none !important;
    background: none !important;
}

/* Overlay Footer */
.jjw-mobile-overlay__footer {
    padding: 24px 0 40px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.jjw-action-btn--mobile {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: var(--hdr-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    transition: color var(--hdr-transition) !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.jjw-action-btn--mobile:hover {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
    text-decoration: none !important;
}

.jjw-action-btn--mobile svg {
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}


/* ============================================
   BACKDROP
   ============================================ */
.jjw-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--hdr-z-backdrop) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.jjw-backdrop.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* ============================================
   STAGGER ANIMATION — Mobile nav items
   ============================================ */
.jjw-mobile-nav__list > li {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease !important;
}

.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(1) { transition-delay: 0.05s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(2) { transition-delay: 0.10s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(3) { transition-delay: 0.15s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(4) { transition-delay: 0.20s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(5) { transition-delay: 0.25s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(6) { transition-delay: 0.30s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(7) { transition-delay: 0.35s !important; }
.jjw-mobile-overlay.is-open .jjw-mobile-nav__list > li:nth-child(8) { transition-delay: 0.40s !important; }


/* ============================================
   RESPONSIVE: Tablet
   ============================================ */
@media (max-width: 1024px) {
    .jjw-header__inner {
        padding: 0 24px !important;
        grid-template-columns: 1fr auto !important;
    }

    .jjw-header__nav {
        display: none !important;
    }

    .jjw-hamburger {
        display: inline-flex !important;
    }
}


/* ============================================
   RESPONSIVE: Mobile
   ============================================ */
@media (max-width: 768px) {
    :root {
        --hdr-height: var(--hdr-height-mob);
        --hdr-drawer-width: 100vw;
    }

    .jjw-header__inner {
        padding: 0 16px !important;
    }

    .jjw-logo-img {
        height: 30px !important;
    }

    .jjw-logo-text {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    .jjw-drawer {
        border-left: none !important;
        border-top: 1px solid var(--hdr-glass-border) !important;
    }

    .jjw-mobile-nav__list > li > a {
        font-size: 22px !important;
    }
}