@media (max-width: 1199px) {
    .header-inner .main-nav { display: none; }
    .header-inner .mobile-menu { display: inline-grid; }
    .header-inner > .wordmark { margin-left: auto; }
    #cart-dialog, #menu-dialog {
        height: 100dvh;
        max-height: 100dvh;
        max-width: 100vw;
        overflow: hidden;
    }
    #cart-dialog { width: var(--panel-cart-tablet, 462px); }
    #menu-dialog { width: calc(100vw - var(--panel-menu-gap, 42px)); }
    #cart-dialog::backdrop, #menu-dialog::backdrop { background: #0006; backdrop-filter: none; }
    :is(#cart-dialog, #menu-dialog) > .dialog-header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 0;
        min-height: calc(var(--panel-header-height, 48px) + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 0 0;
        flex: none;
        background: var(--panel-header-background, #f5f5f5);
        border-bottom: 1px solid #e6e6e6;
    }
    :is(#cart-dialog, #menu-dialog) > .dialog-header h2 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 8px 4px;
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 650;
        overflow-wrap: anywhere;
    }
    #cart-dialog .cart-quantity { font-size: inherit; font-weight: inherit; color: inherit; padding: 0; }
    :is(#cart-dialog, #menu-dialog) > .dialog-header > [data-close] {
        grid-column: 3;
        grid-row: 1;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #000;
    }
    :is(#cart-dialog, #menu-dialog) > .dialog-header > [data-close] svg {
        width: calc(var(--panel-close-size, 14px) * 2);
        height: calc(var(--panel-close-size, 14px) * 2);
        stroke-width: 1.4;
        pointer-events: none;
    }
    :is(#cart-dialog, #menu-dialog) > .dialog-header > [data-close]:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
    #menu-dialog > nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    #cart-dialog > .cart-items { min-height: 0; overscroll-behavior: contain; }
    #cart-dialog > .cart-bottom { flex: none; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
    #menu-dialog { width: var(--panel-menu-mobile, 90vw); }
    #cart-dialog { width: var(--panel-cart-mobile, 90vw); }
}