/* =========================================================
   MITHIORA PREMIUM ECOMMERCE HEADER
   ========================================================= */

:root {
    --mithiora-green: #1B4332;
    --mithiora-dark-green: #073B2A;
    --mithiora-deep-green: #052F23;
    --mithiora-gold: #C99A32;
    --mithiora-light-gold: #E7C66A;
    --mithiora-cream: #F8F3E6;
    --mithiora-soft-green: #EAF4ED;
    --mithiora-text: #17251F;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.mithiora-topbar {
    min-height: 31px;
    background: linear-gradient( 90deg, #06382A, #0B4A36, #06382A );
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}


.topbar-wrapper {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.topbar-left,
.topbar-right,
.topbar-badges {
    display: flex;
    align-items: center;
}


.topbar-left {
    gap: 10px;
}


    .topbar-left i,
    .topbar-right i {
        color: var(--mithiora-light-gold);
    }


.topbar-divider {
    opacity: .45;
}


.topbar-badges {
    gap: 7px;
}


    .topbar-badges span {
        display: inline-flex;
        align-items: center;
        padding: 4px 11px;
        border-radius: 20px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.08);
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }


.topbar-right {
    gap: 10px;
}


    .topbar-right a {
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        transition: .2s ease;
    }


        .topbar-right a:hover {
            color: var(--mithiora-light-gold);
        }


/* =========================================================
   MAIN NAVBAR
   ========================================================= */

.mithiora-navbar {
    min-height: 70px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(27,67,50,.09);
    box-shadow: 0 4px 18px rgba(27,67,50,.07);
    z-index: 1000;
}


/* =========================================================
   LOGO
   ========================================================= */

.mithiora-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 28px;
    text-decoration: none;
}


.mithiora-logo {
    width: 188px;
    height: auto;
    max-height: 61px;
    object-fit: contain;
    display: block;
}


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

.mithiora-menu {
    display: flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}


.mithiora-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 0 10px !important;
    color: #18251F !important;
    font-size: 13px;
    font-weight: 650;
    transition: color .25s ease, background .25s ease;
}


    .mithiora-nav-link:hover {
        color: var(--mithiora-green) !important;
    }


    /* ACTIVE UNDERLINE */

    .mithiora-nav-link::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 13px;
        height: 2px;
        border-radius: 5px;
        background: var(--mithiora-gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
    }


    .mithiora-nav-link:hover::after,
    .mithiora-nav-link.active::after {
        transform: scaleX(1);
    }


    /* =========================================================
   DROPDOWN ARROW
   ========================================================= */

    .mithiora-nav-link.dropdown-toggle::after {
        position: static;
        width: auto;
        height: auto;
        margin-left: 6px;
        background: none;
        border-top: 4px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transform: none;
    }


/* =========================================================
   OFFERS
   ========================================================= */

.offer-nav-link {
    color: var(--mithiora-green) !important;
    font-weight: 750;
}


.offer-fire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    margin-right: 5px;
    border-radius: 7px;
    background: #E52D27;
    color: #fff;
    font-size: 11px;
}


/* =========================================================
   MEGA MENU
   ========================================================= */

.mithiora-mega-menu {
    width: 850px;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 0;
    padding: 24px;
    border: 0;
    border-top: 3px solid var(--mithiora-gold);
    border-radius: 0 0 16px 16px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(0,0,0,.14);
}


.mega-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--mithiora-green);
    font-size: 15px;
    font-weight: 750;
}


.mega-icon {
    font-size: 20px;
}


.mega-link {
    display: block;
    padding: 7px 8px;
    border-radius: 7px;
    color: #435049;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: .2s ease;
}


    .mega-link:hover {
        padding-left: 14px;
        background: var(--mithiora-soft-green);
        color: var(--mithiora-green);
    }


/* =========================================================
   MEGA OFFER
   ========================================================= */

.mega-offer {
    height: 100%;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient( 145deg, var(--mithiora-dark-green), var(--mithiora-green) );
    color: #fff;
    text-align: center;
}


.mega-offer-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--mithiora-gold);
    color: #17251F;
    font-size: 9px;
    font-weight: 800;
}


.mega-offer h4 {
    margin: 13px 0 5px;
    font-size: 20px;
}


    .mega-offer h4 strong {
        display: block;
        color: var(--mithiora-light-gold);
        font-size: 28px;
    }


.mega-offer p {
    margin: 0 0 8px;
    font-size: 12px;
}


.mega-offer small {
    display: block;
    opacity: .8;
    font-size: 10px;
}


.mega-code {
    display: inline-block;
    margin: 5px 0 13px;
    padding: 6px 12px;
    border: 1px dashed var(--mithiora-light-gold);
    border-radius: 7px;
    color: var(--mithiora-light-gold);
    font-weight: 800;
    letter-spacing: 1px;
}


.mega-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #fff;
    color: var(--mithiora-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition: .2s ease;
}


    .mega-shop-btn:hover {
        background: var(--mithiora-gold);
        color: #fff;
        transform: translateY(-2px);
    }


/* =========================================================
   SMALL DROPDOWN
   ========================================================= */

.mithiora-small-dropdown {
    min-width: 200px;
    padding: 8px;
    border: 0;
    border-top: 3px solid var(--mithiora-gold);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}


    .mithiora-small-dropdown .dropdown-item {
        padding: 9px 11px;
        border-radius: 7px;
        color: #304038;
        font-size: 13px;
        transition: .2s ease;
    }


        .mithiora-small-dropdown .dropdown-item:hover {
            background: var(--mithiora-soft-green);
            color: var(--mithiora-green);
        }


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

.mithiora-search-form {
    margin-left: auto;
    margin-right: 17px;
}


.mithiora-search-box {
    width: 285px;
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(27,67,50,.15);
    border-radius: 22px;
    background: #FCFBF7;
    transition: .25s ease;
}


    .mithiora-search-box:focus-within {
        border-color: var(--mithiora-green);
        box-shadow: 0 0 0 3px rgba(27,67,50,.07);
    }


    .mithiora-search-box input {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 15px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #26362E;
        font-size: 11px;
    }


        .mithiora-search-box input::placeholder {
            color: #7B857F;
        }


    .mithiora-search-box button {
        width: 43px;
        height: 100%;
        border: 0;
        background: var(--mithiora-green);
        color: #fff;
        transition: .25s ease;
    }


        .mithiora-search-box button:hover {
            background: var(--mithiora-gold);
        }


/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.mithiora-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}


/* =========================================================
   WISHLIST
   ========================================================= */

.mithiora-action-link,
.mithiora-cart-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #17251F !important;
    text-decoration: none;
    transition: .2s ease;
}


    .mithiora-action-link:hover,
    .mithiora-cart-link:hover {
        color: var(--mithiora-green) !important;
    }


.action-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--mithiora-green);
    font-size: 18px;
    transition: .25s ease;
}


.mithiora-action-link:hover .action-icon-wrapper,
.mithiora-cart-link:hover .action-icon-wrapper {
    background: var(--mithiora-soft-green);
}


.action-text {
    font-size: 12px;
    font-weight: 650;
}


/* =========================================================
   BADGE
   ========================================================= */

.mithiora-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 50%;
    background: #E52D27;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    border: 2px solid #fff;
}


.cart-badge {
    top: -5px;
    right: -3px;
}


/* =========================================================
   CART INFO
   ========================================================= */

.cart-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}


    .cart-info strong {
        font-size: 11px;
    }


    .cart-info small {
        margin-top: 3px;
        color: #6E7973;
        font-size: 9px;
    }


/* =========================================================
   ACCOUNT
   ========================================================= */

.mithiora-account-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #17251F !important;
    text-decoration: none;
}


.account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--mithiora-soft-green);
    color: var(--mithiora-green);
    border: 1px solid rgba(27,67,50,.1);
    font-size: 17px;
}


.account-details {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}


    .account-details small {
        color: #26362E;
        font-size: 10px;
        font-weight: 700;
    }


    .account-details strong {
        margin-top: 3px;
        color: #78827D;
        font-size: 8px;
        max-width: 85px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.mithiora-account-link::after {
    margin-left: 2px;
}


/* =========================================================
   ACCOUNT DROPDOWN
   ========================================================= */

.mithiora-account-menu {
    min-width: 240px;
    padding: 9px;
    border: 0;
    border-top: 3px solid var(--mithiora-gold);
    border-radius: 0 0 13px 13px;
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
}


.account-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}


.account-menu-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mithiora-green);
    color: #fff;
    font-size: 19px;
}


.account-menu-header div {
    display: flex;
    flex-direction: column;
}


.account-menu-header small {
    color: #89938D;
    font-size: 10px;
}


.account-menu-header strong {
    margin-top: 2px;
    color: var(--mithiora-green);
    font-size: 12px;
}


.mithiora-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 12px;
}


    .mithiora-account-menu .dropdown-item i {
        width: 20px;
        color: var(--mithiora-green);
        font-size: 15px;
    }


    .mithiora-account-menu .dropdown-item:hover {
        background: var(--mithiora-soft-green);
        color: var(--mithiora-green);
    }


.mithiora-account-menu .logout-item {
    color: #C0392B !important;
}


    .mithiora-account-menu .logout-item i {
        color: #C0392B !important;
    }


/* =========================================================
   LOGIN / REGISTER
   ========================================================= */

.mithiora-login-link {
    color: var(--mithiora-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}


.mithiora-register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 0 16px;
    border-radius: 20px;
    background: var(--mithiora-green);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .25s ease;
}


    .mithiora-register-btn:hover {
        background: var(--mithiora-gold);
        color: #fff;
        transform: translateY(-1px);
    }


/* =========================================================
   MOBILE TOGGLER
   ========================================================= */

.mithiora-toggler {
    padding: 5px 8px;
    border: 0;
    color: var(--mithiora-green);
    font-size: 27px;
}


    .mithiora-toggler:focus {
        box-shadow: none;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1500px) {

    .mithiora-logo-link {
        margin-right: 18px;
    }

    .mithiora-logo {
        width: 165px;
    }

    .mithiora-nav-link {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 12px;
    }

    .mithiora-search-box {
        width: 245px;
    }

    .mithiora-actions {
        gap: 9px;
    }

    .action-text {
        display: none;
    }
}


@media (max-width: 1300px) {

    .topbar-badges {
        display: none;
    }

    .mithiora-logo {
        width: 155px;
    }

    .mithiora-nav-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .mithiora-search-form {
        margin-right: 10px;
    }

    .mithiora-search-box {
        width: 220px;
    }

    .account-details {
        display: none;
    }
}


@media (max-width: 1199px) {

    .mithiora-topbar {
        display: none;
    }

    .mithiora-navbar {
        min-height: 70px;
    }

    .mithiora-logo {
        width: 155px;
    }

    .mithiora-navbar .collapse {
        display: none !important;
    }

    .mithiora-toggler {
        display: block;
    }
}


@media (min-width: 1200px) {

    .mithiora-toggler {
        display: none;
    }
}


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

@media (max-width: 575px) {

    .mithiora-navbar {
        min-height: 62px;
    }

    .mithiora-logo {
        width: 135px;
    }
}