/* Front-page mobile menu. Desktop AJAX tabs remain available above 767px. */
.mobile-menu { display: none; }
@media (max-width: 767px) {
    body.page-template-template-front-page #main-wrapper { overflow: visible; }
    @supports (overflow: clip) {
        body.page-template-template-front-page #main-wrapper { overflow-x: clip; overflow-y: visible; }
    }
    #indienne #menu_items > .widget-categoriestabs,
    #african #menu_items > .widget-categoriestabs { display: none; }
    #indienne .mobile-menu, #african .mobile-menu {
        display: block;
        --menu-top: 0px;
        --menu-nav-height: 55px;
        font-family: Arial, sans-serif;
        scroll-margin-top: calc(var(--menu-top) + 12px);
    }
    .mobile-menu-nav {
        position: sticky;
        top: var(--menu-top);
        z-index: 100;
        display: flex;
        align-items: stretch;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background: #fff;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0,0,0,.06);
        margin: 0 -15px 20px;
        padding: 0 15px;
    }
    .mobile-menu-nav::-webkit-scrollbar { display: none; }
    .mobile-menu-nav a {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: 55px;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
        color: #555;
        border-bottom: 3px solid transparent;
        text-decoration: none;
    }
    .mobile-menu-nav a.is-active { color: #a6000a; border-bottom-color: #a6000a; font-weight: 700; }
    .mobile-menu-nav a:focus-visible { outline: 2px solid #a6000a; outline-offset: -4px; }
    .mobile-menu-category { margin-bottom: 28px; scroll-margin-top: calc(var(--menu-top) + var(--menu-nav-height) + 16px); }
    .mobile-menu-category > h3 { margin: 0 0 14px; font-size: 21px; font-weight: 700; line-height: 1.3; color: #222; }
    .mobile-menu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .mobile-menu-card { min-width: 0; border: 1px solid #dce1e3; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
    .mobile-menu-card-link { display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-height: 122px; color: #222; text-decoration: none; }
    .mobile-menu-card-link:hover, .mobile-menu-card-link:focus { color: #222; text-decoration: none; }
    .mobile-menu-card-copy { flex: 1; min-width: 0; }
    .mobile-menu-card-copy h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
    .mobile-menu-card-copy p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #62696d; }
    .mobile-menu-price { display: block; margin-top: 8px; font-size: 16px; line-height: 1.3; color: #a6000a; }
    .mobile-menu-image { flex: 0 0 88px; width: 88px; height: 88px; margin: 0; border-radius: 4px; overflow: hidden; background: #f1f3f3; }
    .mobile-menu-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .mobile-menu-image.is-placeholder { background: linear-gradient(135deg, #f4eeee, #eee); }
}
@media (min-width: 600px) and (max-width: 767px) {
    .mobile-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-menu-image { flex-basis: 72px; width: 72px; height: 72px; }
}