/* =========================================================
   HEADER
========================================================= */

.header {
    position: relative;
    z-index: 1000;
    background: #06153f;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 15px 0;
    border-bottom: 1px solid #00000014;
}

.logo img {
    display: block;
    width: 90px;
}


/* =========================================================
   SEARCH
========================================================= */

.search-box {
    position: relative;
    flex: 1;
}

.search-box input {
    width: 100%;
    height: 45px;
    padding: 0 55px 0 20px;
    border: 0;
    border-radius: 50px;
    outline: none;
    background: #f9f9f9;
    color: #00000080;
    font-size: 0.875rem;
}

.search-box input:focus {
    box-shadow: 0 1px 11px 1px #00000057;
}

.search-box button {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #469bc2;
    color: #fff;
    cursor: pointer;
}

/* ---- Header search autosuggest (assets/js/header-search.js) ---- */

.header-search-suggest {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1001;
    max-height: 420px;
    overflow-y: auto;
    padding: 10px 0;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.header-search-group + .header-search-group {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 8px;
}

.header-search-group-label {
    padding: 4px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.header-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition);
}

.header-search-item:hover,
.header-search-item:focus {
    background: #f5fbff;
    color: var(--text-dark);
}

.header-search-item-thumb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid var(--border);
}

.header-search-item-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.header-search-item-title {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Ratings sit under the title (wc_get_rating_html()'s own real .star-rating
   markup -- same stars WooCommerce renders everywhere else, just scaled
   down to fit this row) -- omitted by header-search.js entirely for a
   product with no ratings yet, so no empty row shows. */
.header-search-item-rating {
    margin-top: 3px;
    font-size: 0.7rem;
    line-height: 1;
}

.header-search-item-rating .star-rating {
    font-size: 0.7rem;
}

/* Pinned to the right of the row -- a fixed-width column the flexible
   .header-search-item-body above never grows into, so it always lines up
   regardless of how long a title/rating line is. price_html is
   WooCommerce's own get_price_html() output verbatim (see
   Header_Search_Service's own docblock) -- its <del>/<ins> sale-price
   markup already renders correctly here, just recolored/sized to match
   this small context instead of a shop/product-card's own (larger) price. */
.header-search-item-price {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--btn-blue);
    text-align: right;
    white-space: nowrap;
}

.header-search-item-price del {
    margin-right: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 1;
}

.header-search-item-price ins {
    font-weight: 600;
    text-decoration: none;
}

.header-search-item--term {
    justify-content: space-between;
}

.header-search-item--term .header-search-item-title {
    font-weight: 500;
}

.header-search-item-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.header-search-empty {
    margin: 0;
    padding: 12px 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
}


/* =========================================================
   HEADER RIGHT ICONS
========================================================= */

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-right .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.header-right .icon img {
    display: block;
    filter: invert(59%)
            sepia(42%)
            saturate(700%)
            hue-rotate(158deg)
            brightness(88%)
            contrast(87%);
}

.header-right .icon span {
    position: absolute;
    top: -5px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d02229;
    color: #fff;
    font-size: 0.625rem;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar-menu {
    background: #fff;
}

.navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 22px;
}

.header-inner-page .navbar-wrapper {
    border-bottom: 1px solid #00000014;
}


/* =========================================================
   CATEGORY DROPDOWN
========================================================= */

.category-dropdown {
    position: relative;
    flex-shrink: 0;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 45px;
    padding: 0 18px 0 0;
    border: 0;
    border-right: 1px solid #eee;
    background: transparent;
    color: #000000cc;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.category-btn .fa-chevron-down {
    margin-left: 4px;
    font-size: 11px;
    transition: transform 0.25s ease;
}


/* Category menu - CLOSED */

.category-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    z-index: 9999;

    width: 220px;
    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}


/* Category menu - OPEN */

.category-dropdown.active .category-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


/* Chevron */

.category-dropdown.active .category-btn .fa-chevron-down {
    transform: rotate(180deg);
}


/* Category items */

.category-menu li {
    width: 100%;
    margin: 0;
}

.category-menu li a {
    display: block;
    width: 100%;
    padding: 10px 18px;
    color: #000000CC;
    text-decoration: none;
    font-size: 14px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.category-menu li a:hover {
    background: #f5f8fa;
    color: #469bc2;
}


/* =========================================================
   MAIN NAV MENU
========================================================= */

.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 40px;

    margin: 0;
    padding: 0 0 0 30px;

    list-style: none;
}

.nav-menu li {
    margin: 0;
}

.nav-menu li a {
    position: relative;

    display: block;

    color: #000;
    text-decoration: none;

    font-size: 1rem;
    font-weight: 500;
}

.nav-menu li a::after {
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    content: "";
    background: #d02229;

    transition: width 0.3s ease;
}

.nav-menu li a:hover::after {
    width: 100%;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-box {
    position: relative;
    margin-left: auto;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 12px 15px;

    background: #fff;
    cursor: pointer;
}

.user-avatar {
    width: 45px;
    height: 45px;
    min-width: 45px;

    overflow: hidden;
    border-radius: 50%;
    background: #f5f5f5;
}

.user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details {
    min-width: 0;
}

.user-details h6 {
    margin: 0 0 3px;

    color: #282c3f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.user-details span {
    display: block;
    overflow: hidden;

    color: #696e79;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.profile-links {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 9999;

    width: 240px;
    padding: 7px 0;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);

    /* Plain display:none default -- NOT an opacity/visibility system. Same
       fix, same reason, as .notification-menu/.cart-menu's own (see their
       docblocks in style.css): assets/js/header.js's shared zurglePanels
       toggle opens/closes every one of these panels (notification/messages/
       cart/wishlist/profile) purely via jQuery's fadeIn()/fadeOut(), which
       only ever animates `opacity` and toggles `display` -- it never touches
       `visibility`. With visibility:hidden as the actual default (as this
       rule had before), the panel stayed invisible regardless of `display`,
       UNLESS something else was ALSO forcing visibility:visible -- which a
       desktop `.profile-box:hover .profile-links` rule used to do here,
       masking this exact same bug this whole file already fixed for
       notification/cart. Confirmed live: removing that now-conflicting hover
       rule (see the comment immediately below) first exposed this -- jQuery
       fadeIn() alone couldn't make the panel visible at all without it.
       There's a second, equally real bug this also fixes: jQuery's own
       `:visible` check (used here to decide whether a panel is already open)
       only ever looks at `display`/element dimensions, never opacity or
       visibility -- with no `display:none` anywhere in this rule, the panel
       already measured as "visible" to jQuery from initial page load, so the
       toggle handler's `if (!isOpen) fadeIn()` branch never even ran on the
       very first click. */
    display: none;
}


/* Desktop hover */

@media (min-width: 992px) {

    /* Profile dropdown is click-only, not hover -- assets/js/header.js's
       shared zurglePanels toggle already opens/closes it (and keeps it open
       until an actual outside click, never on mouseleave) the same way it
       already does for notification/cart/wishlist. A
       `.profile-box:hover .profile-links` rule used to live here and was
       removed -- it fought that click-driven state: moving the mouse off
       `.profile-box` closed the menu even immediately after a click,
       regardless of outside-click intent. The Categories mega-dropdown
       right below is a SEPARATE component and intentionally stays
       hover-driven on desktop -- not touched by this. */

    /* Categories dropdown opens on hover here (desktop) -- header.js's click
       handler deliberately only toggles the .active class below 992px (see
       its "CATEGORY DROPDOWN TOGGLE" comment), same convention ported from
       the original static mockup's own custom.js. That JS-side behavior was
       always correct; this :hover rule was simply never written to match it,
       leaving desktop with no way to open the menu at all.

       display: block is required here, not just opacity/visibility -- this
       theme's own style.css sets `.category-menu { display: none; }` as its
       base/closed state (a SEPARATE rule from anything in this file), and
       opacity/visibility do nothing to override display:none; only .active
       .category-menu in style.css also sets display: block to actually open
       it, which this :hover rule needs to match. */
    .category-dropdown:hover .category-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .category-dropdown:hover .category-btn .fa-chevron-down {
        transform: rotate(180deg);
    }

}

.profile-links a {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 11px 16px;

    color: #282c3f;
    background: transparent;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.profile-links a:hover {
    color: #469bc2;
    background: #f8f8f8;
}

.profile-links a i {
    width: 18px;
    min-width: 18px;

    color: #696e79;
    font-size: 14px;
    text-align: center;
}

.profile-links a:hover i {
    color: #469bc2;
}

.profile-links .logout {
    margin-top: 5px;
    padding-top: 13px;

    border-top: 1px solid #eee;
    color: #d02229;
}

.profile-links .logout i {
    color: #d02229;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 992px) {

    .header-top {
        min-height: 65px;
        gap: 15px;
    }

    .search-box {
        max-width: none;
    }

    .header-right {
        gap: 12px;
    }

    .menu-toggle {
        display: flex;
    }


    /* Mobile navbar */

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;

        width: 100%;
        max-height: calc(100vh - 65px);

        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-10px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }

    .navbar-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .navbar-wrapper {
        display: block;
        padding: 15px 0 20px;
       
    }


    /* Category */

    .category-dropdown {
        width: 100%;
    }

    .category-btn {
        justify-content: flex-start;

        width: 100%;
        height: 45px;

        padding: 0 15px;

        border-right: 0;
        border-bottom: 1px solid #eee;
    }

    .category-btn .fa-chevron-down {
        margin-left: auto;
    }

    .category-menu {
        position: static;

        width: 100%;
        max-height: 0;

        overflow: hidden;

        padding: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;

        transition: max-height 0.3s ease;
    }

    .category-dropdown.active .category-menu {
        max-height: 500px;
    }

    .category-menu li a {
        padding: 11px 30px;
        border-bottom: 1px solid #f2f2f2;
    }


    /* Navigation */

    .nav-menu {
        display: block;
        width: 100%;

        margin: 10px 0 0;
        padding: 0;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu li a {
        display: block;
        padding: 12px 15px;

        border-bottom: 1px solid #eee;
    }

    .nav-menu li a::after {
        display: none;
    }


    /* Profile */

    .profile-box {
        width: 100%;
    }

    .profile-links {
        position: static;

        display: none;

        width: 100%;
        margin-top: 10px;

        border: 0;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;
    }

    .profile-box:hover .profile-links {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 767px) {

    .header-top {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 0;
    }

    .logo {
        margin-right: auto;
    }

    .logo img {
        width: 65px;
    }

    .search-box {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
    }

    .header-right {
        gap: 8px;
    }

    .header-right .icon {
        width: 27px;
    }

    .header-right .icon img {
        width: 20px;
        height: 20px;
    }

    .menu-toggle {
        width: 35px;
        height: 35px;
    }

    .navbar-wrapper {
        gap: 5px;
    }

    .nav-menu {
        gap: 0 !important;
    }

    .cta-content {
        padding-left: 12px;
    }
    .navbar-wrapper{
        gap: 0px !important;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 400px) {

    .header-top {
        gap: 5px;
    }

    .logo img {
        width: 65px;
    }

    .header-right {
        gap: 5px;
    }

    .header-right .icon {
        width: 24px;
    }

    .header-right .icon img {
        width: 18px;
        height: 18px;
    }

    .header-right .icon span {
        top: -5px;
        right: -4px;

        min-width: 15px;
        height: 15px;

        font-size: 9px;
    }

    .menu-toggle {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .nav-menu li a,
    .category-menu li a {
        font-size: 12px;
    }

}