/* ========================================================================
   TABLET HEADER FIX — 691px to 1035px ONLY
   Does NOT affect mobile (<691px) or desktop (>1035px)
   ======================================================================== */

@media (min-width: 691px) and (max-width: 1035px) {

    /* --- Force flex layout instead of Bootstrap grid overflow --- */
    #header .wrapper-header.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 16px !important;
        min-height: 64px !important;
    }

    /* Hamburger col — shrink to icon size only */
    #header .wrapper-header > .col-md-4.tf-lg-hidden {
        flex: 0 0 40px !important;
        max-width: 40px !important;
        width: 40px !important;
        padding: 0 !important;
    }

    #header .wrapper-header > .col-md-4.tf-lg-hidden a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Logo col — shrink to fit */
    #header .wrapper-header > .col-md-4:nth-child(2) {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    #header .logo-header .logo {
        height: 32px !important;
        width: auto !important;
        max-width: 120px !important;
    }

    /* Search col — takes remaining space */
    #header .wrapper-header > .desktop-search-col {
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* Search input — slightly smaller on tablet */
    #header .desktop-search-col .search-box input {
        height: 40px !important;
        font-size: 13px !important;
        padding: 8px 48px 8px 14px !important;
    }

    #header .desktop-search-col .search-box .tf-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Nav icons col — shrink to fit */
    #header .wrapper-header > .col-md-4:last-child {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Tighten icon spacing */
    #header .nav-icon.gap-20 {
        gap: 8px !important;
    }

    /* Hide text labels on tablet for compactness */
    #header .nav-icon-item .text {
        display: none !important;
    }

    /* Keep icon items reasonably sized */
    #header .nav-icon-item {
        padding: 6px !important;
    }

    /* User avatar — slightly smaller */
    #header .nav-account .rounded-circle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    /* Prevent container from adding extra padding */
    #header .main-header .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Remove Bootstrap row negative margins that cause overflow */
    #header .wrapper-header.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure columns don't use Bootstrap percentage widths */
    #header .wrapper-header > [class*="col-"] {
        /* Reset Bootstrap col-md-4 (33.33%) that causes 4-col overflow */
        /* flex-basis is handled individually above */
    }
}