/* Header Base Structure */
.y-l-site-header {
    background-color: var(--y-color-background);
    width: var(--y-percent-100);
    position: sticky;
    top: 0;
    z-index: var(--y-z-1000);
}

.y-l-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo Styling */
.y-c-logo-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

.y-c-site-logo {
    height: var(--y-percent-100);
    width: var(--y-percent-100);
    object-fit: contain;
}

/* Desktop Navigation */
.y-c-desktop-nav {
    flex: 2;
    display: flex;
    justify-content: flex-start;
}

.y-c-nav-list {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--y-spacing-40);
    margin: 0;
    padding: 0;
    list-style: none;
}

.y-c-nav-link {
    padding: var(--y-spacing-4) var(--y-spacing-15);
    border-radius: var(--y-radius-5);
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-24);
    font-weight: var(--y-font-weight-500);
    color: var(--y-color-primary-text);
    text-decoration: none;
    transition: var(--y-transition-default);
    position: relative;
}

.y-c-nav-link:hover,
.y-c-nav-link.y-c-active-link {
    background-image: var(--y-color-primary);
    color: var(--y-color-secondary-text);
}

/* Actions Section (Cart & Login) */
.y-c-header-actions {
    display: flex;
    align-items: center;
    gap: var(--y-spacing-30);
}

/* Cart Icon */
.y-c-cart-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.y-c-action-icon {
    font-size: var(--y-font-size-32);
    color: var(--y-color-primary-text);
    transition: var(--y-transition-default);
    padding: var(--y-spacing-4);
    position: relative;
}

.y-c-action-icon:hover {
    color: var(--y-color-primary);
}

.y-c-cart-badge {
    position: absolute;
    top: var(--y-spacing-neg-8);
    right: var(--y-spacing-neg-8);
    background-color: var(--y-color-primary);
    color: var(--y-color-secondary-text);
    font-size: var(--y-font-size-12);
    font-weight: var(--y-font-weight-700);
    height: var(--y-size-20);
    width: var(--y-size-20);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--y-radius-full);
}

/* Login Button */
.y-c-header-auth-btn {
    display: flex;
    align-items: center;
    gap: var(--y-spacing-10);
    padding: var(--y-spacing-10) var(--y-spacing-30);
    background-color: transparent;
    border: var(--y-border-1) solid var(--y-color-primary-text);
    border-radius: var(--y-radius-16);
    color: var(--y-color-primary-text);
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-20);
    font-weight: var(--y-font-weight-500);
    text-decoration: none;
    transition: var(--y-transition-default);
    white-space: nowrap;
}

.y-c-header-auth-btn:hover {
    background-color: var(--y-color-accent);
    border-color: var(--y-color-accent);
}

.y-c-header-auth-btn i {
    font-size: var(--y-font-size-20);
}

/* Mobile Toggle */
.y-c-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--y-color-primary-text);
    font-size: var(--y-font-size-32);
    cursor: pointer;
    padding: var(--y-spacing-4);
}

/* Mobile Menu (Dropdown Style - Updated) */
.y-l-mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 60%;
    max-width: 100%;
    height: 100vh;
    background-color: var(--y-color-background);
    transition: all 0.3s ease-in-out;
    z-index: var(--y-z-1001);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Hidden State */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}

.y-l-mobile-menu.open {
    /* Open State */
    max-height: 100vh;
    /* Allow enough height for content */
    opacity: 1;
    visibility: visible;
}

.y-l-mobile-menu-inner {
    padding: var(--y-spacing-20) var(--y-spacing-30) var(--y-spacing-30);
}

.y-l-header-mobile-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--y-spacing-20);
}

.y-l-header-mobile-links a {
    display: block;
    font-size: var(--y-font-size-24);
    font-weight: var(--y-font-weight-600);
    color: var(--y-color-primary-text);
    padding: var(--y-spacing-15);
    border-radius: var(--y-radius-8);
    transition: var(--y-transition-default);
    text-align: center;
}

.y-l-header-mobile-links a:hover,
.y-l-header-mobile-links a.y-c-active-link {
    background-color: var(--y-color-accent);
    color: var(--y-color-secondary-text);
}


/* Large Tablets & Small Desktops (1024px and below) */
@media (max-width: 1024px) {
    .y-c-nav-list {
        gap: var(--y-spacing-20);
    }

    .y-c-nav-link {
        font-size: var(--y-font-size-20);
        padding: var(--y-spacing-4) var(--y-spacing-10);
    }

    .y-c-header-actions {
        flex: 1;
        gap: var(--y-spacing-20);
    }

    .y-c-header-auth-btn {
        font-size: var(--y-font-size-18);
        padding: var(--y-spacing-8) var(--y-spacing-20);
    }

    .y-c-action-icon {
        font-size: var(--y-font-size-28);
    }
}

/* Tablets (768px and below) */
@media (max-width: 768px) {

    .y-c-desktop-nav,
    .y-c-header-auth-btn,
    .y-u-hidden-mobile {
        display: none;
    }

    .y-c-mobile-toggle.y-u-hidden-desktop {
        display: block;
    }

    .y-c-site-logo {
        height: var(--y-size-130);
    }

    .y-l-header-inner {
        flex-direction: row-reverse;
        height: var(--y-size-80);
        justify-content: space-between;
        padding: 0 var(--y-spacing-20);
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .y-c-site-logo {
        height: var(--y-size-100);
    }

    .y-l-header-inner {
        height: var(--y-size-70);
    }

    /* REMOVED: Sidebar override that forced width/height */

    .y-l-header-mobile-links a:hover,
    .y-l-header-mobile-links a.y-c-active-link {
        padding-right: var(--y-spacing-20);
    }

    .y-c-action-icon {
        font-size: var(--y-font-size-24);
    }

    .y-c-mobile-toggle {
        font-size: var(--y-font-size-28);
    }
}