@media (max-width: 768px) {

    .header {
        transition: background 0.3s ease, padding 0.3s ease;
        padding-top: 1rem;
    }

    .header-inner {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .logo {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: auto !important;
        opacity: 1;
        max-height: 140px;
        overflow: hidden;
        transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.4s ease !important;
        margin: 0;
    }

    .logo-img {
        height: 110px !important;
        width: auto !important;
        max-width: 200px !important;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    .nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.2rem;
        width: 100%;
    }

    .header:not(.transparent) {
        padding-top: 0;
    }

    .header:not(.transparent) .header-inner {
        flex-direction: row;
        justify-content: center;
        gap: 1.2rem;
    }

    .header:not(.transparent) .logo {
        opacity: 0 !important;
        max-height: 0 !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header:not(.transparent) .nav {
        justify-content: center;
        width: auto;
    }
}

@media (max-width: 768px) {
    .logo .logo-img {
        height: 115px !important;
        width: auto !important;
        max-width: 220px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    .header:not(.transparent) .header-inner {
        justify-content: center !important;
        flex-direction: row !important;
        padding: 8px 0 !important;
        min-height: unset !important;
        max-height: unset !important;
    }

    .header:not(.transparent) .nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.9rem !important;
        width: 100% !important;
    }

    .header:not(.transparent) .nav a {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    .header:not(.transparent) .nav .cart-icon {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .header:not(.transparent) .header-inner {
        min-height: 52px !important;
        padding: 10px 0 !important;
    }
}