/* Generic Serepok mobile layout repairs. */
@media (max-width: 1199.98px) {
    body .section-header {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Keep the mobile brand row a predictable, centered flex surface.  The
       legacy navbar rules size the row from the logo's intrinsic image box,
       which can push the menu toggle toward the top edge when a configured
       logo has transparent padding. */
    .section-header .nav-div,
    .section-header .navbar,
    .section-header #header {
        height: 64px !important;
        min-height: 64px !important;
    }

    /* CMS-generated header rules can switch the desktop utility group back on
       at 1101px. Keep the mobile header contract intact until Bootstrap's
       actual xl breakpoint begins at 1200px. */
    .section-header #header,
    .section-header #header > .container,
    .section-header .serepok-brand-wrap {
        flex-wrap: nowrap !important;
    }

    .section-header #header .serepok-primary-nav-wrap,
    .section-header #header .navbar-end {
        display: none !important;
    }

    .section-header #header > .container {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 64px !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-header .serepok-brand-wrap {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
    }

    .section-header .navbar-brand.serepok-brand,
    .section-header a.navbar-brand.serepok-brand {
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        align-self: center !important;
        line-height: 0 !important;
    }

    .section-header .navbar-brand.serepok-brand .serepok-brand-logo,
    .section-header a.navbar-brand.serepok-brand .serepok-brand-logo {
        display: block !important;
        height: auto !important;
        max-height: 48px !important;
        align-self: center !important;
    }

    .section-header .serepok-menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .section-header .serepok-menu-toggle::before,
    .section-header .serepok-menu-toggle::after {
        display: none !important;
        content: none !important;
    }

    .section-header .serepok-menu-toggle:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--mtd-scheme-primary, #377dff) 70%, transparent) !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }

    .section-header .serepok-menu-toggle-icon {
        display: block !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    #order-standard-checkout .sidebar-collapsed {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
    }

    #order-standard-checkout .sidebar-collapsed > .panel,
    #order-standard-checkout .sidebar-collapsed > .card {
        display: block !important;
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        flex: none !important;
        overflow: visible !important;
    }

    #order-standard-checkout .sidebar-collapsed > .panel > .panel-heading,
    #order-standard-checkout .sidebar-collapsed > .panel > .card-header,
    #order-standard-checkout .sidebar-collapsed > .card > .panel-heading,
    #order-standard-checkout .sidebar-collapsed > .card > .card-header {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px 14px !important;
    }

    #order-standard-checkout .sidebar-collapsed > .panel > .panel-body,
    #order-standard-checkout .sidebar-collapsed > .panel > .card-body,
    #order-standard-checkout .sidebar-collapsed > .card > .panel-body,
    #order-standard-checkout .sidebar-collapsed > .card > .card-body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 8px 14px !important;
        flex: none !important;
        overflow: visible !important;
    }

    #order-standard-checkout .sidebar-collapsed form {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #order-standard-checkout .sidebar-collapsed select,
    #order-standard-checkout .sidebar-collapsed .custom-select {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}