/* ============================================
   Ervi Shot Custom Header & Mobile Nav
   ============================================ */

/* --- Reset: hide ALL old Shoptimizer header elements --- */
body .col-full.topbar-wrapper,
body .secondary-navigation,
body .shoptimizer-myaccount,
body .header-widget-region,
body .shoptimizer-sticky-header,
body .s-observer,
body .mobile-overlay,
body .menu-overlay:not(.ervi-overlay) {
    display: none !important;
}

/* --- Override old Shoptimizer header constraints --- */
.site-header .col-full,
.site-header .col-full.main-header {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    /* hide the old main-header div entirely */
}

.col-full-nav,
.shoptimizer-primary-navigation,
.site-header .site-branding {
    all: unset !important;
    display: none !important;
}

/* Reset .site-header-cart inside our header */
.ervi-header-container .site-header-cart {
    display: flex !important;
    align-items: center;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cart drawer must appear above our fixed header */
#shoptimizerCartDrawer {
    z-index: 400 !important;
}

/* Cart drawer close button — match mobile menu close */
#shoptimizerCartDrawer .close-drawer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    cursor: pointer;
    color: #111;
    padding: 0;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

#shoptimizerCartDrawer .close-drawer:hover {
    background: rgba(0, 0, 0, 0.1);
}

#shoptimizerCartDrawer .close-drawer span {
    display: flex;
    align-items: center;
    justify-content: center;
}

#shoptimizerCartDrawer .close-drawer svg {
    width: 24px;
    height: 24px;
}


/* ===========================
   HEADER — fixed, transparent
   =========================== */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: none !important;
    z-index: 200;
    height: 72px;
    background: transparent;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s ease;
    box-shadow: none;
}

/* Gradient overlay — dark top to transparent bottom (home page only) */
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.25) 50%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease;
    opacity: 0;
}

body.home .site-header:not(.header-scrolled)::before {
    opacity: 1;
}

/* Scrolled — glassmorphic white */
.site-header.header-scrolled {
    height: 64px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

.site-header.header-scrolled::before {
    opacity: 0;
}

/* ===========================
   Header container — flex row
   =========================== */
.ervi-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 5vw;
}

/* ===========================
   Logo
   =========================== */
.ervi-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.ervi-logo-img {
    height: 36px;
    width: auto;
    transition: filter 0.3s ease;
}

/* White logo on transparent header — only on home page */
body.home .site-header:not(.header-scrolled) .ervi-logo-img {
    filter: brightness(0) invert(1);
}

.site-header.header-scrolled .ervi-logo-img {
    filter: none;
}

/* Non-home pages — dark logo */
body:not(.home) .site-header:not(.header-scrolled) .ervi-logo-img {
    filter: brightness(0);
}

.ervi-site-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s ease;
}

.site-header.header-scrolled .ervi-site-title {
    color: #111;
}

/* ===========================
   Desktop Nav
   =========================== */
.ervi-nav-desktop {
    display: none;
    align-items: center;
    gap: 0;
    margin-left: auto;
}

@media (min-width: 993px) {
    .ervi-nav-desktop {
        display: flex;
    }
}

.ervi-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.ervi-nav-links li {
    list-style: none;
    position: relative;
}

.ervi-nav-links li a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    line-height: 72px;
    transition: opacity 0.2s ease, color 0.3s ease;
    white-space: nowrap;
}

.ervi-nav-links li a:hover {
    opacity: 0.65;
}

/* Chevron indicator for parent items (left side, SVG-based) */
.ervi-nav-links>li.menu-item-has-children>a {
    position: relative;
    padding-left: 30px;
}

.ervi-nav-links>li.menu-item-has-children>a::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(-90deg);
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.45;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.ervi-nav-links>li.menu-item-has-children:hover>a::before {
    transform: translateY(-50%) rotate(-270deg);
    opacity: 0.8;
}

/* ===========================
   Desktop Dropdown Sub-menu
   =========================== */
.ervi-nav-links li>.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 500;
    pointer-events: none;
}

.ervi-nav-links li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Sub-menu items */
.ervi-nav-links li>.sub-menu li {
    margin: 0;
}

.ervi-nav-links li>.sub-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #333 !important;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
    border-radius: 0;
    position: relative;
}

.ervi-nav-links li>.sub-menu li a::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: #0071e3;
    border-radius: 2px;
    transition: height 0.2s ease;
}

.ervi-nav-links li>.sub-menu li a:hover {
    background: rgba(0, 113, 227, 0.04);
    color: #111 !important;
    padding-left: 24px;
    opacity: 1;
}

.ervi-nav-links li>.sub-menu li a:hover::before {
    height: 18px;
}

/* Scrolled — dark links */
.site-header.header-scrolled .ervi-nav-links li a {
    color: #111;
    line-height: 64px;
}

.site-header.header-scrolled .ervi-nav-links li>.sub-menu li a {
    line-height: 1.4;
}

/* Cart button (desktop) */
.ervi-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.3s ease;
}

.ervi-cart-btn:hover {
    opacity: 0.65;
}

.site-header.header-scrolled .ervi-cart-btn {
    color: #111;
}

/* ===========================
   Mobile Right (cart + hamburger)
   =========================== */
.ervi-mobile-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.ervi-mobile-right .ervi-mobile-cart {
    order: 1;
}

.ervi-mobile-right .ervi-mobile-toggle {
    order: 2;
}

@media (min-width: 993px) {
    .ervi-mobile-right {
        display: none;
    }
}

.ervi-mobile-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-header.header-scrolled .ervi-mobile-cart {
    color: #111;
}

.ervi-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.92);
    padding: 0;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.site-header.header-scrolled .ervi-mobile-toggle {
    color: #111;
}

/* ===========================
   Non-home pages — dark header icons/links
   =========================== */
body:not(.home) .site-header .ervi-nav-links li a {
    color: #111;
}

body:not(.home) .site-header .ervi-cart-btn {
    color: #111;
}

body:not(.home) .site-header .ervi-mobile-cart {
    color: #111;
}

body:not(.home) .site-header .ervi-mobile-toggle {
    color: #111;
}

/* ===========================
   Overlay (behind mobile drawer)
   =========================== */
.ervi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

body.ervi-mobile-open .ervi-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ===========================
   Mobile Nav Drawer (right side)
   =========================== */
.ervi-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    background: #fff;
    z-index: 310;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
}

body.ervi-mobile-open .ervi-mobile-nav {
    transform: translateX(0);
}

/* Drawer header */
.ervi-mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    min-height: 72px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.ervi-mobile-menu-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ervi-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    cursor: pointer;
    color: #111;
    padding: 0;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ervi-mobile-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Nav links in drawer */
.ervi-mobile-nav-links {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.ervi-mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ervi-mobile-menu-list li,
.ervi-mobile-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Link row — flex container for link + toggle */
.ervi-mobile-link-row {
    display: flex;
    align-items: center;
}

.ervi-mobile-link-row a.ervi-mobile-link,
.ervi-mobile-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    padding: 18px 24px;
    font-size: 17px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ervi-mobile-link-row a.ervi-mobile-link:active,
.ervi-mobile-link-row a.ervi-mobile-link:hover,
.ervi-mobile-menu-list li a:active,
.ervi-mobile-menu-list li a:hover {
    background: rgba(0, 0, 0, 0.02);
}

.ervi-mobile-link-text {
    flex: 1;
}

/* Chevron icon (items without children) */
.ervi-chevron {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.ervi-mobile-link:hover .ervi-chevron,
.ervi-mobile-menu-list li a:hover .ervi-chevron {
    transform: translateX(4px);
    color: rgba(0, 0, 0, 0.5);
}

/* Toggle-link (parent items with empty URL — entire row is toggle) */
.ervi-link-toggle {
    cursor: pointer;
}

.ervi-toggle-icon-inline {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.25);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.ervi-has-children.ervi-submenu-open>.ervi-mobile-link-row .ervi-toggle-icon-inline {
    transform: rotate(180deg);
    color: #0071e3;
}

/* ===========================
   Accordion Toggle Button (+/−)
   =========================== */
.ervi-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 56px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.3);
    padding: 0;
    transition: color 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.ervi-submenu-toggle:hover {
    color: rgba(0, 0, 0, 0.6);
    background: none;
}

/* + icon morphs to − when expanded */
.ervi-toggle-icon {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When expanded, the vertical line of the + fades/rotates to make − */
.ervi-has-children.ervi-submenu-open>.ervi-mobile-link-row .ervi-toggle-icon {
    transform: rotate(45deg);
    color: #0071e3;
}

.ervi-has-children.ervi-submenu-open>.ervi-mobile-link-row .ervi-submenu-toggle {
    color: #0071e3;
    background: none;
}

/* ===========================
   Sub-menu (accordion panel)
   =========================== */
.ervi-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    opacity: 0;
    background: rgba(0, 0, 0, 0.015);
}

.ervi-has-children.ervi-submenu-open>.ervi-sub-menu {
    max-height: 600px;
    opacity: 1;
}

/* Sub-menu items */
.ervi-sub-menu .ervi-mobile-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.ervi-sub-menu .ervi-mobile-item:last-child {
    border-bottom: none;
}

.ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link,
.ervi-sub-menu .ervi-mobile-menu-list li a {
    padding: 14px 24px 14px 40px;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    position: relative;
}

/* Left accent bar on sub-items */
.ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: rgba(0, 113, 227, 0.15);
    border-radius: 3px;
    transition: background 0.2s ease, height 0.2s ease;
}

.ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link:hover::before {
    background: #0071e3;
    height: 24px;
}

.ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link:hover {
    color: #111;
    background: rgba(0, 113, 227, 0.03);
}

/* Deeper levels indent more */
.ervi-sub-menu .ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link {
    padding-left: 56px;
    font-size: 14px;
}

.ervi-sub-menu .ervi-sub-menu .ervi-mobile-link-row a.ervi-mobile-link::before {
    left: 40px;
}

/* Sub-menu chevrons — smaller */
.ervi-sub-menu .ervi-chevron {
    width: 14px;
    height: 14px;
}

/* Footer in drawer */
.ervi-mobile-nav-footer {
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.ervi-mobile-nav-footer p {
    margin: 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.35);
}

/* Prevent body scroll */
body.ervi-mobile-open {
    overflow: hidden !important;
}

/* ===========================
   Content positioning
   =========================== */

/* Default: NO padding — hero/Elementor content slides UNDER transparent header */
#content {
    padding-top: 0 !important;
}

/* WooCommerce & archive pages need padding since they have no hero */
body.woocommerce-page #content,
body.archive #content,
body.search #content,
body.blog #content,
body.single-post #content,
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content,
body.error404 #content {
    padding-top: 72px;
}

/* Elementor pages — content goes full under header */
body.elementor-page #content,
body.page-template-default #content {
    padding-top: 0 !important;
}

/* On Elementor pages, hide the archive header / breadcrumb wrapper */
body.elementor-page .archive-header,
body.elementor-page .shoptimizer-archive>.archive-header {
    display: none !important;
}

/* Elementor sections should be full width */
body.elementor-page #content .col-full {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure Elementor first section goes under header */
body.elementor-page .elementor-section-wrap>.elementor-section:first-child,
body.elementor-page .elementor>.elementor-section:first-child,
body.elementor-page .elementor>.e-con:first-child {
    margin-top: -72px;
    padding-top: 72px;
}

@media (min-width: 993px) {
    .ervi-mobile-nav {
        display: none !important;
        width: 100%;
        max-width: none;
    }

    .ervi-overlay {
        display: none !important;
    }
}