/* ==========================================================================
   V2 Storefront Header – Global Stylesheet
   Loaded by includes/header.php on every storefront page.
   ========================================================================== */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --v2-primary:              var(--primary-color, var(--primary-color));
    --v2-primary-dark:         var(--primary-dark,  var(--primary-dark));
    --v2-primary-light:        color-mix(in srgb, var(--v2-primary) 10%, white);
    --v2-primary-light-strong: color-mix(in srgb, var(--v2-primary) 18%, white);
    --v2-primary-border-soft:  color-mix(in srgb, var(--v2-primary) 22%, white);
    --v2-primary-shadow:       color-mix(in srgb, var(--v2-primary) 18%, transparent);
    --v2-border:        #e5e7eb;
    --v2-text:          #111827;
    --v2-muted:         #6b7280;
    --v2-soft-bg:       #f3f4f6;
    --v2-topbar:        #191919;
    --v2-star-filled:   #f59e0b;
    --v2-card-radius:   14px;
    --v2-section-gap:   52px;
    --v2-transition:    cubic-bezier(.4,0,.2,1);
}

/* ── Body overrides ─────────────────────────────────────────────────────── */
body {
    font-family: 'Poppins', sans-serif;
}

/* ── Sticky shell ───────────────────────────────────────────────────────── */
.v2-sticky-shell {
    position: sticky;
    top: 0;
    z-index: 1005;
    background: #fff;
    transition: box-shadow .2s ease;
}

body.v2-scrolled .v2-sticky-shell {
    box-shadow: 0 4px 20px rgba(17,24,39,.08);
}

/* ── Top nav bar ────────────────────────────────────────────────────────── */
.v2-top-nav {
    background: var(--v2-topbar);
    color: #fff;
    font-size: 13px;
}

.v2-top-nav-inner {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4%;
}

.v2-top-nav-left  { color: rgba(255,255,255,.92); font-weight: 400; }

.v2-top-nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.v2-top-nav-right a {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.v2-top-nav-right a:hover { color: #fff; }

/* ── Main header ────────────────────────────────────────────────────────── */
.v2-header-wrap {
    background: #fff;
    border-bottom: 1px solid var(--v2-border);
    transition: border-color .2s ease;
}

.v2-header-inner {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 0 4%;
    transition: min-height .2s ease, gap .2s ease;
}

body.v2-scrolled .v2-header-inner { min-height: 76px; gap: 22px; }

/* Logo */
.v2-header-logo {
    display: inline-flex;
    align-items: center;
    color: var(--v2-text);
    text-decoration: none;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    transition: font-size .2s ease;
}
.v2-header-logo img {
    max-height: 44px;
    width: auto;
    display: block;
    transition: max-height .2s ease;
}
body.v2-scrolled .v2-header-logo            { font-size: 28px; }
body.v2-scrolled .v2-header-logo img        { max-height: 38px; }

/* Search */
.v2-header-search-shell { min-width: 0; }

.v2-search-form {
    height: 48px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px 58px;
    border: 2px solid var(--v2-primary);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: height .2s ease;
}
body.v2-scrolled .v2-search-form { height: 44px; }

.v2-search-input {
    border: 0; outline: 0;
    padding: 0 18px;
    font-size: 14px;
    min-width: 0;
    font-family: inherit;
}

.v2-search-category {
    position: relative;
    border-left: 1px solid var(--v2-border);
    background: #fff;
}
.v2-search-category select {
    width: 100%; height: 100%;
    border: 0; outline: 0;
    padding: 0 36px 0 16px;
    appearance: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    font-family: inherit;
    cursor: pointer;
}
.v2-search-category i {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280; font-size: 14px;
}

.v2-search-btn {
    border: 0;
    background: var(--v2-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease;
}
.v2-search-btn:hover { background: var(--v2-primary-dark); }
.v2-search-btn i     { font-size: 21px; }

/* Header action icons */
.v2-header-actions { display: flex; align-items: center; gap: 8px; }

.v2-action-link,
.v2-lang-toggle {
    width: 42px; height: 42px;
    border: 1px solid var(--v2-border);
    border-radius: 50%;
    background: #fff;
    color: var(--v2-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
body.v2-scrolled .v2-action-link,
body.v2-scrolled .v2-lang-toggle { width: 40px; height: 40px; }
body.v2-scrolled .v2-user-avatar { width: 40px; height: 40px; min-width: 40px; }

.v2-action-link:hover,
.v2-lang-toggle:hover {
    color: var(--v2-primary);
    border-color: var(--v2-primary);
    background: var(--v2-primary-light);
}

.v2-action-link i,
.v2-lang-toggle i { font-size: 20px; line-height: 1; }

/* User avatar (replaces user icon when logged in & has profile picture) */
.v2-action-link.has-avatar {
    padding: 0;
    border-color: var(--v2-border);
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}
.v2-action-link.has-avatar:hover {
    border-color: var(--v2-primary);
    background: transparent;
}
.v2-user-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Mobile menu avatar */
.mobile-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
    border: 1.5px solid var(--v2-border);
}

.v2-action-link .count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--v2-primary);
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

/* Language switcher */
.v2-lang-switcher { position: relative; }

.v2-lang-menu {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    min-width: 165px;
    background: #fff;
    border: 1px solid var(--v2-border);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(17,24,39,.12);
    padding: 8px 0;
    display: none;
    z-index: 1002;
}
.v2-lang-switcher.open .v2-lang-menu { display: block; }

.v2-lang-menu a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 14px;
    text-decoration: none;
    color: #374151; font-size: 13px;
}
.v2-lang-menu a:hover { background: #f9fafb; color: var(--v2-primary); }

.v2-lang-active {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--v2-primary);
    flex-shrink: 0;
}

/* ── Navigation wrap ─────────────────────────────────────────────────────── */
.navigation-wrap {
    padding: 14px 0 20px;
    background: #fff;
    position: relative;
    z-index: 100;
}
.navigation-wrap .v2-nav-inner-pad { padding: 0 4%; position: relative; }

.navigation-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 54px;
    padding-left: 286px;
    position: relative;
    border: 1px solid var(--v2-border);
    border-radius: 8px;
    background: #fff;
}

/* Category nav panel */
.category-nav {
    position: absolute;
    left: 0; top: 0;
    width: 286px;
    flex-shrink: 0;
}

.category-nav-inner {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px; height: 54px;
    background: var(--v2-primary); color: #fff;
    cursor: pointer; user-select: none;
    min-width: 286px;
    white-space: nowrap;
    font-weight: 700; font-size: 14px;
    letter-spacing: .02em;
    border-radius: 8px 0 0 8px;
}
.category-nav-inner:hover { background: var(--v2-primary-dark); }
.category-nav-inner i     { margin-left: auto; font-size: 1.1rem; }

/* Category dropdown */
.category-dropdown-wrap {
    position: absolute;
    top: 100%; left: 0;
    width: 286px; height: 552px;
    background: #fff;
    border: 1px solid var(--v2-border);
    border-top: none;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    z-index: 999;
    display: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
/* Hover-open on all pages */
.category-nav:hover .category-dropdown-wrap { display: block; }
/* Permanently open on homepage via .show class */
.category-nav.show .category-dropdown-wrap {
    display: block;
    box-shadow: 0 20px 32px rgba(17,24,39,.08);
}
.category-nav.show .category-nav-inner {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.category-dropdown ul.mega-menu.vertical-megamenu {
    list-style: none; margin: 0; padding: 10px 0;
    height: 100%; overflow-y: auto;
}

.category-dropdown ul.vertical-megamenu > li > a.menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    font-size: 15px; color: var(--v2-text);
    text-decoration: none; font-weight: 500;
    white-space: nowrap; line-height: 1.25;
    transition: background .15s, color .15s;
}
.category-dropdown ul.vertical-megamenu > li > a.menu-item:hover,
.category-dropdown ul.vertical-megamenu > li:hover > a.menu-item {
    background: var(--v2-primary-light);
    color: var(--v2-primary);
}

.category-dropdown .menu-item-icon { width: 22px; text-align: center; flex-shrink: 0; }
.category-dropdown .menu-item-icon i { font-size: .95rem; color: var(--v2-primary); }

.category-dropdown li.multi-level > a.menu-item > .las.la-angle-right {
    margin-left: auto; font-size: .75rem;
}
.category-dropdown li.multi-level > .sub-menu {
    display: none;
    position: absolute;
    left: 100%; top: 0;
    width: 200px;
    background: #fff;
    border: 1px solid var(--v2-border);
    box-shadow: 4px 4px 14px rgba(0,0,0,.1);
    list-style: none; padding: 8px 0; margin: 0;
    z-index: 1000;
}
.category-dropdown li.multi-level:hover > .sub-menu { display: block; }
.category-dropdown .sub-menu a {
    display: block; padding: 7px 16px;
    font-size: .8rem; color: var(--v2-text); text-decoration: none;
}
.category-dropdown .sub-menu a:hover { background: var(--v2-primary-light); color: var(--v2-primary); }

/* ── RTL: flip navigation sidebar to right side ─────────────────────────── */
[dir="rtl"] .navigation-inner {
    padding-left: 0;
    padding-right: 286px;
}
[dir="rtl"] .category-nav {
    left: auto;
    right: 0;
}
[dir="rtl"] .category-nav-inner {
    border-radius: 0 8px 8px 0;
    flex-direction: row-reverse;
}
[dir="rtl"] .category-nav-inner i {
    margin-left: 0;
    margin-right: auto;
}
[dir="rtl"] .category-dropdown-wrap {
    left: auto;
    right: 0;
}
[dir="rtl"] .category-dropdown li.multi-level > .sub-menu {
    left: auto;
    right: 100%;
}
[dir="rtl"] .category-dropdown li.multi-level > a.menu-item > .las.la-angle-right {
    transform: scaleX(-1);
    margin-left: 0;
    margin-right: auto;
}

/* Primary menu (nav links in the nav bar) */
.primary-menu {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    justify-content: flex-start;
    padding: 0 24px;
}
.primary-menu-list {
    display: flex; align-items: center;
    gap: 34px; list-style: none; margin: 0; padding: 0;
}
.primary-menu .nav-item {
    display: inline-flex; align-items: center; height: 100%;
}
.primary-menu .nav-item a {
    color: var(--v2-text); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
}
.primary-menu .nav-item a:hover { color: var(--v2-primary); }

/* ── Responsive: hide V2 desktop header on mobile ────────────────────────── */
@media (max-width: 991px) {
    .v2-top-nav,
    .v2-header-wrap,
    .navigation-wrap {
        display: none !important;
    }
}

/* ── Global Page Hero / Banner Override ─────────────────────────────────── */
/* Covers: about, blog, contact, cart, checkout, account, wishlist, order etc */
.hero-section,
.page-hero,
.page-banner,
.page-header,
.blog-header,
.blog-hero,
.contact-hero,
.wishlist-header,
.cart-header,
.checkout-header,
.account-header,
.order-header,
.custom-page-header,
.auth-hero {
    background: linear-gradient(135deg, var(--primary-color, var(--primary-color)) 0%, var(--primary-dark, var(--primary-dark)) 100%) !important;
    color: #fff !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    min-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

/* h1 inside any page hero */
.hero-section h1, .page-hero h1, .page-banner h1,
.page-header h1, .blog-header h1, .blog-hero h1,
.contact-hero h1, .wishlist-header h1, .cart-header h1,
.checkout-header h1, .account-header h1, .order-header h1,
.custom-page-header h1, .auth-hero h1 {
    font-size: 36px !important;
    font-weight: 800 !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
    color: #fff !important;
}

/* p/subtitle inside any page hero */
.hero-section p, .page-hero p, .page-banner p,
.page-header p, .blog-header p, .blog-hero p,
.contact-hero p, .wishlist-header p, .cart-header p,
.checkout-header p, .account-header p, .order-header p,
.custom-page-header p, .auth-hero p {
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.88) !important;
}

/* Inner wrappers — keep above ::before pattern */
.blog-header-inner,
.hero-content,
.page-hero-inner,
.page-header > .container,
.page-header > *,
.wishlist-header > *,
.cart-header > *,
.checkout-header > *,
.account-header > *,
.order-header > *,
.custom-page-header > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section, .page-hero, .page-banner,
    .page-header, .blog-header, .blog-hero,
    .contact-hero, .wishlist-header, .cart-header,
    .checkout-header, .account-header, .order-header,
    .custom-page-header {
        min-height: 100px !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .hero-section h1, .page-hero h1, .page-banner h1,
    .page-header h1, .blog-header h1, .wishlist-header h1,
    .cart-header h1, .checkout-header h1, .account-header h1 {
        font-size: 24px !important;
    }
    .hero-section p, .page-hero p, .blog-header p,
    .page-header p, .wishlist-header p {
        font-size: 13px !important;
    }
}