/* ==========================================================
   2. HEADER LAYOUT (CAROUSEL TOPBAR)
========================================================== */
.marbo-announcement-bar {
    background-color: #000000;
    color: #ffffff;
    position: relative;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes arrows to the edges */
    padding: 1px 40px; /* 40px margin from screen edges on Desktop */
}

.marbo-announcement-bar.has-bottom-border {
    border-bottom: 1px solid #000000 !important;
}

.topbar-arrow {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
}

.topbar-arrow:hover {
    opacity: 1;
}

.topbar-slider-viewport {
    overflow: hidden;
    flex: 1; /* Takes up remaining middle space */
    max-width: 800px; /* Prevents text from stretching too wide on huge screens */
    margin: 0 auto;
}

.topbar-slider-track {
    display: flex;
    width: 100%;
}

.topbar-slide {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    user-select: none;
}

.topbar-slide strong, 
.topbar-slide b {
    font-weight: 600;
    color: #ffffff; 
}

/* Tablet & Mobile (Thinner Bar) */
@media (max-width: 768px) {
    .marbo-announcement-bar {
        padding: 1px 15px; /* Thinner padding, closer to edges on mobile */
    }
    .topbar-slide {
        font-size: 8px;
        letter-spacing: 0.5px;
    }
    .topbar-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* The actual scrolling animation */
@keyframes marboMarqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
    position: sticky;
    top: -150px; 
    z-index: 9999;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.site-header.smart-sticky {
    transform: translateY(150px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

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

.header-left, .header-right { flex: 1; display: flex; align-items: center; }
.header-right { justify-content: flex-end; }

/* Menus & Animations */
.left-nav ul, .right-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 30px; }
.left-nav ul li, .right-nav ul li { position: relative; }

.left-nav a, .right-nav a {
    text-decoration: none; color: #111111;
    font-size: 13px; font-weight: 600; 
    position: relative; display: inline-block; padding-bottom: 4px; 
}

.left-nav a::after, .right-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px; background-color: #111111; transition: width 0.25s ease-out; 
}

@keyframes dribbleLine {
    0%   { width: 0; }
    45%  { width: 115%; } 
    65%  { width: 90%; }  
    85%  { width: 105%; } 
    100% { width: 100%; } 
}

.left-nav a:hover::after, .right-nav a:hover::after,
.left-nav .current-menu-item > a::after, .right-nav .current-menu-item > a::after {
    animation: dribbleLine 0.45s ease-out forwards;
}

.left-nav ul ul.sub-menu, .right-nav ul ul.sub-menu {
    position: absolute; top: 100%; left: 0;
    background: #ffffff; border: 1px solid #f0f0f0; box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    min-width: 200px; padding: 18px 22px; border-radius: 8px; z-index: 10000;
    display: flex; flex-direction: column; gap: 13px;
    opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s ease;
}

.left-nav ul li:hover > ul.sub-menu, .right-nav ul li:hover > ul.sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.left-nav ul ul.sub-menu li a, .right-nav ul ul.sub-menu li a {
    font-size: 13.5px; width: fit-content; font-weight: 600; 
}

.header-center .custom-logo-link img { max-height: 29px; width: auto; display: block; margin: 0 auto; }
.custom-text-logo { font-size: 28px; font-weight: 300; text-decoration: none; color: #111; }

.header-icons { display: flex; gap: 20px; align-items: center; margin-left: 38px; }
.nav-icon { color: #111111; display: flex; align-items: center; transition: opacity 0.3s ease; }
.nav-icon:hover { opacity: 0.6; }

/* FIX: STRIP CIRCLES FROM MAIN HEADER ICONS */
.header-icons .nav-icon,
.mobile-menu-trigger .nav-icon {
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ==========================================================
   TABLET & MOBILE HEADER RESPONSIVENESS
========================================================== */

/* 1. Hide Mobile Elements on Desktop */
.mobile-menu-trigger { display: none; }
.marbo-mobile-menu { display: none; }

/* 2. Mobile/Tablet Styles */
@media (max-width: 1024px) {
    .header-container { padding: 0 20px; position: relative; }
    .left-nav, .right-nav { display: none; } 

    /* Forces Hamburger and Search into a perfect horizontal row */
    .mobile-menu-trigger { 
        flex: 0 1 auto; 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        gap: 18px !important; 
    }
    .hamburger-btn { 
        background: transparent; border: none; cursor: pointer; color: #111; 
        padding: 0; margin: 0; display: flex; align-items: center; 
    }
    .mobile-search-icon {
        display: flex !important; align-items: center !important; padding: 0; margin: 0;
    }
    
    /* Hides the Desktop search icon so it doesn't show twice */
    .desktop-search-icon { display: none !important; }
    
    .header-center { position: absolute; left: 50%; transform: translateX(-50%); width: auto; }
    .header-right { flex: 0 1 auto; justify-content: flex-end; }
    .desktop-account-icon { display: none !important; }
    .header-icons { margin-left: 0; gap: 15px; }

    /* ==========================================================
       PREMIUM MOBILE SLIDE-OUT MENU (White Background & Choreographed Entrance)
    ========================================================== */
    .marbo-mobile-menu {
        display: flex !important; 
        flex-direction: column !important; 
        position: fixed !important; top: 0; left: 0; 
        width: 100% !important; 
        height: 100vh !important; 
        height: 100dvh !important; /* Respects mobile browser address bars */
        background: #ffffff !important; 
        z-index: 100001 !important; 
        transform: translateX(-100%); 
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        overflow: hidden !important; /* CRITICAL: Stops the full container from scrolling */
    }
    .marbo-mobile-menu.active { transform: translateX(0) !important; }

	/* 1. FIXED Header Area */
    .mobile-menu-header { 
        flex: 0 0 auto !important; 
        display: flex; justify-content: space-between; align-items: center; 
        padding: 10px 16px; 
        border-bottom: 1px solid #eeeeee; margin: 0; 
        background: #ffffff;
    }
    .mobile-logo-area { display: flex; align-items: center; }
    .mobile-close-btn { 
        background: #f4f4f4; border: 1px solid #e0e0e0; border-radius: 50%;
        width: 28px; height: 28px; cursor: pointer; color: #333333; 
        display: flex; align-items: center; justify-content: center; padding: 0; 
        box-shadow: none !important;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .mobile-close-btn:hover {
        background: #e9e9e9;
        border-color: #d0d0d0;
    }

    /* 2. SCROLLABLE Menu Body */
    .mobile-menu-body { 
        flex: 1 1 auto !important; 
        overflow-y: auto !important; 
        padding: 14px 16px; 
        background: #ffffff;
    }

    /* Navigation Items with Staggered Slide-In from Left */
    .premium-mobile-nav { display: flex; flex-direction: column; gap: 4px; } 
    .premium-nav-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 11px 14px; border-radius: 10px; 
        text-decoration: none; 
        border: 1px solid transparent;
        opacity: 0;
        transform: translateX(-35px);
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
    }
    .premium-nav-item.active { 
        background: #f0f0f0; 
        border-color: #e2e2e2; 
    }
    .premium-nav-item:hover { 
        background: #f6f6f6; 
    }
    .nav-item-left { display: flex; align-items: center; gap: 12px; }

    .marbo-mobile-menu.active .premium-nav-item {
        opacity: 1;
        transform: translateX(0);
    }
    .marbo-mobile-menu.active .premium-mobile-nav a:nth-child(1) { transition-delay: 0.12s; }
    .marbo-mobile-menu.active .premium-mobile-nav a:nth-child(2) { transition-delay: 0.18s; }
    .marbo-mobile-menu.active .premium-mobile-nav a:nth-child(3) { transition-delay: 0.24s; }
    .marbo-mobile-menu.active .premium-mobile-nav a:nth-child(4) { transition-delay: 0.30s; }
    .marbo-mobile-menu.active .premium-mobile-nav a:nth-child(5) { transition-delay: 0.36s; }

    .drawer-nav-icon { 
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border: 1px solid #e0e0e0; border-radius: 50%; 
        background: #f7f7f7;
    }

    .nav-divider { width: 1px; height: 16px; background: #e5e5e5; }
    .nav-text { 
        font-family: var(--marbo-font-heading, 'Fraunces', serif); font-size: 15px; font-weight: 450; color: #111; 
    }
    .nav-arrow { display: flex; align-items: center; }

    /* 3. FIXED Footer with Background Image */
    .mobile-menu-footer-fixed {
        flex: 0 0 auto !important; 
        padding: 5px 20px 0; 
        position: relative;
        background-color: #ffffff; 
    }

    .menu-dotted-line {
        border-bottom: 1px dashed #e5e5e5;
        margin: 0 0 15px 0; 
    }

    /* Auth Buttons Grid with Slide-Up */
    .auth-buttons-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;
        position: relative; z-index: 2;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.28s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
    }
    .marbo-mobile-menu.active .auth-buttons-grid {
        opacity: 1;
        transform: translateY(0);
    }

    .auth-btn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 10px 0; border-radius: 8px; text-decoration: none; 
        font-family: 'Satoshi', var(--marbo-font-body, sans-serif); font-size: 13px; font-weight: 500;
        box-shadow: none !important;
    }
    .btn-login { background: #111; color: #fff; border: 1px solid #111; }
    .btn-login svg { color: #fff; width: 16px; height: 16px; }
    .btn-register { background: #f5f5f5; color: #222222; border: 1px solid #e0e0e0; }
    .btn-register:hover { background: #eeeeee; }
    .btn-register svg { width: 16px; height: 16px; }

    /* Follow Us Section with Slide-Up */
    .mobile-social-section { 
        text-align: center; position: relative; z-index: 2; margin-bottom: -30px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.34s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.34s;
    }
    .marbo-mobile-menu.active .mobile-social-section {
        opacity: 1;
        transform: translateY(0);
    }

    .social-title { 
        display: flex; align-items: center; justify-content: center; gap: 12px; 
    }
    .social-title p { 
        font-family: 'Satoshi', var(--marbo-font-body, sans-serif); font-size: 13px; color: #555555; margin: 0; font-weight: 500; 
    }
    .social-title .line { width: 25px; height: 1px; background: #e5e5e5; }
    .social-icons { display: flex; justify-content: center; gap: 12px; }
    .social-icons a {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e2e2e2;
        color: #444444; background: #f8f8f8;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .social-icons a:hover {
        transform: translateY(-2px);
        background: #ffffff;
        border-color: #111111;
        color: #111111;
    }
    .social-icons a svg { width: 16px; height: 16px; }
    
    /* The Art Image Slides Up from the Bottom */
    .mobile-footer-art {
        width: 100%;
        height: auto;
        display: block;
        margin-top: 15px; 
        pointer-events: none; 
        opacity: 0;
        transform: translateY(45px);
        transition: opacity 0.5s ease 0.38s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
    }
    .marbo-mobile-menu.active .mobile-footer-art {
        opacity: 1;
        transform: translateY(0);
    }
	
} /* End of @media (max-width: 1024px) */

/* Ensure the parent link allows the badge to float outside of it without being cut off */
.cart-icon-wrap,
.wishlist-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    overflow: visible !important; 
}

/* ==========================================================
   MINI ROUND BADGES (Cart & Wishlist - Matching Luxury Minimal Styling)
========================================================== */
.cart-count-badge,
.wishlist-count-badge {
    position: absolute !important;
    top: -6px !important; 
    right: -7px !important; 
    background-color: #111111 !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    width: 15px !important; 
    height: 15px !important;
    min-width: 15px !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    line-height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    z-index: 99 !important; 
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-count-badge[style*="none"],
.wishlist-count-badge[style*="none"] {
    display: none !important;
}

.cart-count-badge.badge-pop,
.wishlist-count-badge.badge-pop {
    animation: marboBadgePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes marboBadgePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ==========================================================
   HOMEPAGE TRANSPARENT HEADER (As Seen in hero.mp4)
========================================================== */

/* 1. Default State: Absolute, transparent, overlaying hero slider */
body.home .site-header:not(.smart-sticky) {
    position: absolute;
    top: 35px; /* Sits below announcement bar */
    left: 0;
    width: 100%;
    background-color: transparent !important;
    border-bottom: none !important;
    z-index: 1000;
    transform: none;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Admin bar offsets */
body.admin-bar.home .site-header:not(.smart-sticky) {
    top: 67px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.home .site-header:not(.smart-sticky) {
        top: 81px;
    }
}

/* 2. Text, Menu Links, and Icons in Pure White */
body.home .site-header:not(.smart-sticky) .left-nav a,
body.home .site-header:not(.smart-sticky) .right-nav a,
body.home .site-header:not(.smart-sticky) .nav-icon,
body.home .site-header:not(.smart-sticky) .custom-text-logo,
body.home .site-header:not(.smart-sticky) .hamburger-btn,
body.home .site-header:not(.smart-sticky) .cart-trigger,
body.home .site-header:not(.smart-sticky) .search-trigger,
body.home .site-header:not(.smart-sticky) .header-action-btn i,
body.home .site-header:not(.smart-sticky) .header-action-btn {
    color: #ffffff !important;
}

body.home .site-header:not(.smart-sticky) .left-nav a::after,
body.home .site-header:not(.smart-sticky) .right-nav a::after {
    background-color: #ffffff !important;
}

/* 3. Invert Logo to Crisp White */
body.home .site-header:not(.smart-sticky) .custom-logo-link img {
    filter: brightness(0) invert(1) !important;
}

/* 4. Scrolled State: Slides down as fixed solid white header */
body.home .site-header.smart-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
    animation: marboSlideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    z-index: 9999 !important;
}

body.admin-bar.home .site-header.smart-sticky {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar.home .site-header.smart-sticky {
        top: 46px !important;
    }
}

/* 5. Revert Scrolled Elements back to Deep Black */
body.home .site-header.smart-sticky .left-nav a,
body.home .site-header.smart-sticky .right-nav a,
body.home .site-header.smart-sticky .nav-icon,
body.home .site-header.smart-sticky .custom-text-logo,
body.home .site-header.smart-sticky .hamburger-btn,
body.home .site-header.smart-sticky .cart-trigger,
body.home .site-header.smart-sticky .search-trigger,
body.home .site-header.smart-sticky .header-action-btn i,
body.home .site-header.smart-sticky .header-action-btn {
    color: #111111 !important;
}

body.home .site-header.smart-sticky .custom-logo-link img {
    filter: none !important;
}