/* Correct the visual alignment caused by whitespace inside logo1.png. */
.header-inner {
    min-height: 88px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.logo-wrapper {
    width: 112px;
    height: 78px;
    flex: 0 0 112px;
    justify-content: flex-start;
    overflow: hidden;
}

.brand-logo {
    width: 112px;
    height: 112px;
    max-width: none;
    object-fit: contain;
    transform: translateY(-16px);
}

@media (max-width: 768px) {
    .sakthi-style-header {
        width: 100%;
        backdrop-filter: none;
    }

    .header-inner {
        width: 100%;
        min-height: 76px;
        padding: 8px 18px !important;
    }
    .logo-wrapper { width: 92px; height: 64px; flex-basis: 92px; }
    .brand-logo { width: 92px; height: 92px; transform: translateY(-12px); }

    .main-navigation {
        display: block;
        width: min(86vw, 340px);
        padding: 92px 18px 24px;
        overflow-y: auto;
        background: #fffdf8;
        box-shadow: -16px 0 45px rgba(12,39,30,.2);
    }

    .main-navigation::before {
        content: "MENU";
        position: absolute;
        top: 34px;
        left: 28px;
        color: #173d31;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
    }

    .main-navigation .nav-list {
        position: static;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    .main-navigation .nav-list > li {
        width: 100%;
        padding: 0 !important;
        border-bottom: 1px solid #e9e5dc;
    }

    .main-navigation .nav-list > li > .nav-item {
        width: 100%;
        padding: 16px 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        color: #28362f;
        background: transparent;
        border-radius: 0;
        font-size: 14px;
    }

    .main-navigation .has-dropdown > .nav-item { color: #8b681e !important; }

    .menu-toggle.active {
        position: fixed;
        top: 30px;
        right: 24px;
    }

    .menu-toggle.active span { background: #173d31; }
    .menu-backdrop.active { background: rgba(7,25,19,.62); backdrop-filter: blur(2px); }
}

@media (max-width: 768px) {
    .main-navigation {
        width: min(82vw, 320px);
        padding: 88px 0 24px;
        background: #fffdf8;
    }

    .main-navigation::before {
        content: "SHRI GANGA FOODS";
        inset: 0 0 auto;
        height: 88px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        color: #fff;
        background: #173d31;
        font: 800 13px/1 'Segoe UI', sans-serif;
        letter-spacing: 1.3px;
    }

    .main-navigation .nav-list { padding: 12px 18px 0 !important; }

    .main-navigation .nav-list > li {
        border-bottom: 1px solid #ece6dc;
    }

    .main-navigation .nav-list > li > .nav-item {
        min-height: 54px;
        padding: 0 10px !important;
        color: #2a3932;
        font-size: 13px;
        font-weight: 700;
    }

    .main-navigation .nav-list > li > .nav-item::after {
        content: "›";
        color: #a99a83;
        font-size: 20px;
        font-weight: 400;
    }

    .main-navigation .has-dropdown > .nav-item {
        margin: 0;
        padding: 0 10px !important;
        color: #2a3932 !important;
        background: transparent !important;
        border-radius: 0;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: normal;
    }

    .main-navigation .has-dropdown > .nav-item::after {
        margin-left: auto !important;
        color: #a99a83;
        border: 0 !important;
        vertical-align: initial !important;
    }

    .main-navigation .has-dropdown:hover > .dropdown-toggle-btn,
    .main-navigation .has-dropdown.active > .dropdown-toggle-btn {
        color: #2a3932 !important;
        background: transparent !important;
    }

    .main-navigation .nav-list > li > .nav-item:hover,
    .main-navigation .nav-list > li > .nav-item:focus,
    .main-navigation .nav-list > li > .nav-item.active {
        color: #2a3932 !important;
        background: transparent !important;
    }

    .main-navigation .has-dropdown:not(.active) > .dropdown-menu {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .main-navigation .has-dropdown.active > .dropdown-menu {
        margin: 0 !important;
        border-top: 1px solid #ece6dc !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 2px solid #d79b2b !important;
    }

    .menu-toggle.active {
        top: 31px;
        right: 22px;
    }

    .menu-toggle.active span { background: #fff; }
}

@media (max-width: 768px) {
    .main-navigation {
        right: -100vw !important;
        width: 320px !important;
        max-width: calc(100vw - 48px);
    }

    .main-navigation.active { right: 0 !important; }

    .menu-toggle { z-index: 2105; }
    .menu-toggle.active {
        position: fixed !important;
        top: 31px !important;
        right: 22px !important;
    }

    .menu-backdrop { z-index: 1999; }
    .main-navigation { z-index: 2100; }
}

@media (max-width: 380px) {
    .header-inner { padding-right: 14px !important; padding-left: 14px !important; }
}