body.online-m2-layout.m2-onepage-layout {
  --m2-menu-title-font: 'Poppins', 'Segoe UI', Tahoma, system-ui, sans-serif;
}

        /* M2 one-page layout: fixed categories left + full menu */
        body.online-m2-layout.m2-onepage-layout .menu-container {
            overflow: hidden;
            background: #f8fafc;
            padding: 0;
            direction: ltr;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-shell {
            width: 100%;
            height: 100%;
            display: grid;
            direction: ltr;
            grid-template-columns: 216px minmax(0, 1fr);
            grid-template-areas: "sidebar main";
            gap: 0;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-sidebar {
            grid-area: sidebar;
            background: #ffffff;
            border-right: 1px solid #e2e8f0;
            border-left: none;
            overflow-y: auto;
            padding: 10px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-sidebar-btn {
            border: 1px solid rgba(148, 163, 184, 0.32);
            background: #f8fafc;
            color: #0f172a;
            border-radius: 10px;
            text-align: left;
            padding: 10px 12px;
            font-family: var(--m2-menu-title-font);
            font-weight: 600;
            font-size: clamp(11px, 0.15vw + 10px, 12.5px);
            line-height: 1.25;
            white-space: normal;
            cursor: pointer;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-sidebar-btn.active {
            background: #e0f2fe;
            border-color: #38bdf8;
            color: #0c4a6e;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-content {
            grid-area: main;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 12px 10px 28px;
            display: flex;
            flex-direction: column;
            gap: 28px;
            direction: ltr;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
            direction: ltr;
            padding-bottom: 28px;
            margin-bottom: 4px;
            border-bottom: 1px solid #e2e8f0;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-section:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-section-title {
            margin: 0;
            font-family: var(--m2-menu-title-font);
            font-size: clamp(0.95rem, 0.55vw + 0.72rem, 1.15rem);
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0f172a;
            text-align: left;
            direction: ltr;
            unicode-bidi: plaintext;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            align-content: start;
            direction: ltr;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card {
            position: relative !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            width: 100% !important;
            height: auto !important;
            min-height: 155px;
            overflow: hidden;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto auto;
            grid-template-areas:
                "title image"
                "desc image"
                "price image";
            gap: 6px 10px;
            align-items: start;
            padding: 10px 0 10px 12px;
            border-radius: 12px;
            direction: ltr;
            box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card > * {
            min-height: auto !important;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-image-frame {
            grid-area: image;
            grid-row: 1 / -1;
            align-self: stretch;
            margin: -10px 0;
            width: auto;
            height: calc(100% + 20px);
            aspect-ratio: 1 / 1;
            min-width: 128px;
            max-width: 168px;
            border-radius: 0;
            background: #ffffff;
            overflow: hidden;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-image-frame.template-image-placeholder {
            border: none;
            background: #ffffff;
            box-shadow: none;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-image {
            width: 100%;
            height: 100%;
            min-height: 100%;
            object-fit: cover !important;
            object-position: center;
            border-radius: 0;
            display: block;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-title {
            grid-area: title;
            text-align: left;
            direction: ltr;
            unicode-bidi: plaintext;
            padding: 0;
            font-family: var(--m2-menu-title-font);
            font-weight: 700;
            letter-spacing: -0.01em;
            font-size: clamp(0.95rem, 0.65vw + 0.5rem, 1.18rem) !important;
            line-height: 1.28;
            color: #0f172a;
            display: block !important;
            overflow: visible !important;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            white-space: normal;
            flex: none !important;
            max-height: none !important;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-description {
            grid-area: desc;
            text-align: left;
            direction: ltr;
            display: block !important;
            overflow: visible !important;
            padding: 0;
            font-family: var(--m2-menu-title-font);
            font-weight: 500;
            color: #334155;
            font-size: clamp(0.8rem, 0.36vw + 0.54rem, 0.98rem) !important;
            line-height: 1.32;
            flex: none !important;
            max-height: none !important;
        }

        body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid .menu-card-price {
            grid-area: price;
            text-align: left;
            justify-content: flex-start;
            direction: ltr;
            padding: 0;
            font-family: var(--m2-menu-title-font);
            font-weight: 700;
            font-size: clamp(0.88rem, 0.48vw + 0.52rem, 1.08rem) !important;
            color: #0f766e;
            display: block !important;
            overflow: visible !important;
            flex: none !important;
            max-height: none !important;
        }

        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode {
            position: relative !important;
            padding-bottom: 20px;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-title,
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-desc,
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-price {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            padding: 5px 7px;
            background: #ffffff;
            outline: none;
            font-family: var(--m2-menu-title-font);
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-title:focus,
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-desc:focus,
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-price:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-desc {
            min-height: 46px;
            resize: vertical;
            line-height: 1.32;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-price {
            max-width: 120px;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .m2-inline-edit-status {
            position: absolute;
            left: 12px;
            bottom: 4px;
            font-size: 10px;
            font-weight: 600;
            color: #64748b;
            pointer-events: none;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode .menu-card-image-frame.m2-inline-edit-image-zone {
            cursor: copy;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-inline-edit-mode.card-image-dragover .menu-card-image-frame {
            outline: 2px dashed #3b82f6;
            outline-offset: -2px;
        }

        @media (max-width: 900px) {
            body.online-m2-layout.m2-onepage-layout {
                --phone-cart-bar-h: 76px;
            }

            /* Never use classic 2-col mobile-grid on M2 one-page */
            body.online-m2-layout.m2-onepage-layout .menu-container.mobile-grid {
                display: block !important;
                grid-template-columns: none !important;
                grid-auto-rows: unset !important;
                gap: 0 !important;
                padding: 0 !important;
            }

            body.online-m2-layout.m2-onepage-layout .menu-container {
                position: absolute !important;
                left: 0 !important;
                right: 0 !important;
                top: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: auto !important;
                overflow: hidden !important;
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-shell {
                width: 100%;
                height: 100%;
                min-height: 0;
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-content {
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            body.online-m2-layout.m2-onepage-layout.mobile-cart-visible .menu-container {
                bottom: var(--phone-cart-bar-h) !important;
            }

            body.online-m2-layout.m2-onepage-layout .cart-box {
                display: none !important;
            }

            body.online-m2-layout.m2-onepage-layout #mobileBottomBar {
                display: none !important;
            }

            body.online-m2-layout.m2-onepage-layout #mobileCartStickyBar[hidden] {
                display: none !important;
            }

            body.online-m2-layout.m2-onepage-layout #mobileCartStickyBar:not([hidden]) {
                display: block !important;
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-shell {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
                grid-template-areas:
                    "sidebar"
                    "main";
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-sidebar {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                padding: 8px;
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-sidebar-btn {
                flex: 0 0 auto;
                font-size: 12px;
                padding: 8px 11px;
            }

            body.online-m2-layout.m2-onepage-layout .m2-onepage-card-grid {
                grid-template-columns: 1fr;
            }
        }

        /* M2 admin: customization panel + reorder */
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-admin-reorder-card {
            cursor: grab;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-admin-reorder-card:active {
            cursor: grabbing;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-card-grid .menu-card.m2-admin-drag-over {
            outline: 2px dashed #3b82f6;
            outline-offset: 2px;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-sidebar-btn.m2-admin-cat-drag {
            cursor: grab;
        }
        body.admin-mode.m2-onepage-layout .m2-onepage-sidebar-btn.m2-admin-cat-drag-over {
            outline: 2px dashed #0ea5e9;
            outline-offset: 1px;
        }

        .m2-cust-admin-panel {
            position: fixed;
            inset: 0;
            z-index: 12000;
            display: none;
            flex-direction: column;
            background: #f8fafc;
            direction: ltr;
            text-align: left;
        }
        .m2-cust-admin-panel.open { display: flex; }
        .m2-cust-admin-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: #fff;
            border-bottom: 1px solid #e2e8f0;
        }
        .m2-cust-admin-header h2 { margin: 0; font-size: 1.25rem; color: #0f172a; }
        .m2-cust-admin-table-wrap { flex: 1; overflow: auto; padding: 16px 18px; }
        .m2-cust-admin-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }
        .m2-cust-admin-table th,
        .m2-cust-admin-table td {
            padding: 14px 16px;
            vertical-align: top;
            border-bottom: 1px solid #e2e8f0;
            text-align: left;
        }
        .m2-cust-admin-table th {
            background: #e0f2fe;
            color: #0c4a6e;
            font-weight: 800;
            font-size: 0.95rem;
        }
        .m2-cust-admin-table tr:nth-child(even) td { background: #f8fafc; }
        .m2-cust-mod-col-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            font-size: 0.72rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .m2-cust-mod-col-name { flex: 1; min-width: 0; }
        .m2-cust-mod-col-price {
            width: 84px;
            flex-shrink: 0;
            text-align: right;
            padding-right: 2px;
        }
        .m2-cust-mod-col-actions { width: 28px; flex-shrink: 0; }
        .m2-cust-mod-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        .m2-cust-mod-name {
            flex: 1;
            min-width: 0;
            padding: 5px 8px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 0.88rem;
            box-sizing: border-box;
        }
        .m2-cust-mod-price-wrap {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
        }
        .m2-cust-mod-price-prefix {
            color: #64748b;
            font-size: 0.88rem;
        }
        .m2-cust-mod-price {
            width: 72px;
            padding: 5px 6px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 0.88rem;
            text-align: right;
            box-sizing: border-box;
        }
        .m2-cust-mod-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
        .m2-cust-mod-actions button {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 1rem;
            padding: 2px 4px;
        }
        .m2-cust-new-mod-btn,
        .m2-cust-add-items-btn {
            margin-top: 8px;
            padding: 6px 12px;
            background: #2563eb;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
        }
        .m2-cust-linked-item {
            display: block;
            margin-bottom: 4px;
            color: #334155;
            font-size: 0.88rem;
        }
        .m2-cust-add-items-modal {
            position: fixed;
            inset: 0;
            z-index: 13000;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.45);
            direction: ltr;
        }
        .m2-cust-add-items-modal.open { display: flex; }
        .m2-cust-add-items-sheet {
            width: min(520px, 94vw);
            max-height: 88vh;
            overflow: auto;
            background: #fff;
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.2);
        }
        .m2-cust-add-items-sheet h3 { margin: 0 0 12px; color: #0f172a; }
        .m2-cust-add-section { margin-bottom: 16px; }
        .m2-cust-add-section-title {
            font-weight: 800;
            font-size: 0.82rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 8px;
        }
        .m2-cust-add-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 6px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.9rem;
        }
        .m2-cust-add-option-name { flex: 1; min-width: 0; }
        .m2-cust-add-option-price {
            flex-shrink: 0;
            color: #64748b;
            font-size: 0.88rem;
        }
        .m2-cust-add-filter {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-size: 0.95rem;
            box-sizing: border-box;
        }
        .m2-cust-add-item-btn {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px 12px;
            margin-bottom: 6px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            font-size: 0.9rem;
        }
        .m2-cust-add-item-btn:hover { background: #f1f5f9; }
        .m2-cust-linked-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            margin: 0 6px 6px 0;
            background: #e0f2fe;
            border-radius: 999px;
            font-size: 0.82rem;
        }
        .m2-cust-linked-chip button {
            border: none;
            background: transparent;
            cursor: pointer;
            color: #64748b;
            font-size: 1rem;
            line-height: 1;
        }

        .m2-quick-item-edit-modal {
            position: fixed;
            inset: 0;
            z-index: 12500;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.45);
            direction: ltr;
            text-align: left;
        }
        .m2-quick-item-edit-modal.open { display: flex; }
        body.m2-quick-item-edit-open { overflow: hidden; }
        .m2-quick-item-edit-sheet {
            width: min(440px, 94vw);
            max-height: 90vh;
            overflow: auto;
            background: #fff;
            border-radius: 14px;
            padding: 20px 22px;
            box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
            position: relative;
        }
        .m2-quick-item-edit-close {
            position: absolute;
            top: 10px;
            right: 12px;
            border: none;
            background: transparent;
            font-size: 1.5rem;
            cursor: pointer;
            color: #64748b;
        }
        .m2-quick-item-edit-sheet h3 {
            margin: 0 0 16px;
            font-size: 1.15rem;
            color: #0f172a;
        }
        .m2-quick-edit-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
        }
        .m2-quick-edit-field label {
            font-size: 0.78rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .m2-quick-edit-field input,
        .m2-quick-edit-field textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 9px 11px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-size: 0.95rem;
            font-family: inherit;
        }
        .m2-quick-edit-field textarea {
            min-height: 72px;
            resize: vertical;
        }
        .m2-quick-edit-image-zone {
            border: 2px dashed #94a3b8;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            background: #f8fafc;
            cursor: pointer;
            margin-bottom: 14px;
        }
        .m2-quick-edit-image-zone.dragover {
            border-color: #2563eb;
            background: #eff6ff;
        }
        .m2-quick-edit-image-zone img {
            max-width: 100%;
            max-height: 140px;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 8px;
        }
        .m2-quick-edit-image-hint {
            font-size: 0.85rem;
            color: #64748b;
            font-weight: 600;
        }
        .m2-quick-edit-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        .m2-quick-edit-actions button {
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid #cbd5e1;
            background: #fff;
        }
        .m2-quick-edit-actions button#m2QuickEditSaveBtn {
            background: #2563eb;
            color: #fff;
            border-color: #1d4ed8;
        }
        #m2QuickEditStatus {
            margin-top: 8px;
            font-size: 0.82rem;
            color: #64748b;
            min-height: 1em;
        }

        /* M2 item detail modal — flat borderless sheet over dim backdrop */
        body.online-m2-layout.m2-onepage-layout .m2-item-modal {
            position: fixed;
            inset: 0;
            z-index: 11000;
            display: none;
            align-items: flex-end;
            justify-content: center;
            padding: 0;
            background: rgba(15, 23, 42, 0.42);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            direction: ltr;
            text-align: left;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal.open {
            display: flex;
        }

        body.online-m2-layout.m2-onepage-layout.m2-item-modal-open {
            overflow: hidden;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-sheet {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 640px;
            max-height: min(92vh, 900px);
            margin: 0 auto;
            background: #ffffff;
            position: relative;
            border: none;
            border-radius: 22px 22px 0 0;
            box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.18);
            overflow: hidden;
        }

        @media (min-width: 640px) {
            body.online-m2-layout.m2-onepage-layout .m2-item-modal {
                align-items: center;
                padding: 24px 16px;
            }

            body.online-m2-layout.m2-onepage-layout .m2-item-modal-sheet {
                border-radius: 22px;
                box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
            }
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-close {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 5;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.96);
            color: #111827;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-scroll {
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-header {
            padding: 56px 20px 12px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-title {
            margin: 0 0 8px;
            font-family: var(--m2-menu-title-font);
            font-size: clamp(1.35rem, 2vw + 0.8rem, 1.75rem);
            font-weight: 700;
            color: #111827;
            line-height: 1.2;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-desc {
            margin: 0;
            font-size: 15px;
            line-height: 1.5;
            color: #6b7280;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-hero {
            width: 100%;
            min-height: 180px;
            max-height: min(55vh, 420px);
            background: #f8fafc;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-image {
            width: 100%;
            max-height: min(55vh, 420px);
            height: auto;
            object-fit: contain;
            object-position: center;
            display: block;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-image-placeholder {
            width: 100%;
            min-height: 180px;
            max-height: min(55vh, 420px);
            background: #f8fafc;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-options {
            display: flex;
            flex-direction: column;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-options-empty {
            padding: 20px;
            font-size: 14px;
            color: #9ca3af;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-group {
            padding: 20px 20px 8px;
            border: none;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-group + .m2-item-modal-option-group {
            padding-top: 8px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-title {
            margin: 0 0 4px;
            font-family: var(--m2-menu-title-font);
            font-size: 17px;
            font-weight: 700;
            color: #111827;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-hint {
            margin: 0 0 12px;
            font-size: 13px;
            color: #9ca3af;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-rows {
            display: flex;
            flex-direction: column;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-special-group {
            padding-bottom: 16px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-special-instruction {
            display: block;
            width: 100%;
            box-sizing: border-box;
            min-height: 84px;
            margin: 0;
            padding: 12px 14px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #f9fafb;
            color: #111827;
            font-family: var(--m2-menu-title-font);
            font-size: 14px;
            line-height: 1.4;
            resize: vertical;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-special-instruction:focus {
            outline: none;
            border-color: #cbd5e1;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-special-instruction::placeholder {
            color: #9ca3af;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 0;
            border: none;
            background: transparent;
            cursor: pointer;
            text-align: left;
            border-radius: 12px;
            transition: background 0.15s ease;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row:hover:not(:disabled) {
            background: #f8fafc;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row.selected {
            background: #f8fafc;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-check {
            flex: 0 0 22px;
            width: 22px;
            height: 22px;
            border: 2px solid #e2e8f0;
            border-radius: 999px;
            background: #ffffff;
            position: relative;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row.selected .m2-item-modal-option-check {
            border-color: #111827;
            background: #111827;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-row.selected .m2-item-modal-option-check::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 11px;
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-main {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-name {
            font-size: 15px;
            font-weight: 600;
            color: #111827;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-price {
            font-size: 14px;
            color: #6b7280;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-thumb {
            flex: 0 0 52px;
            width: 52px;
            height: 52px;
            border-radius: 10px;
            overflow: hidden;
            background: #ffffff;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-thumb--empty {
            background: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.65);
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-option-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-level-list {
            padding-left: 34px;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-footer {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
            border: none;
            background: #ffffff;
            box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08);
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-qty {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: none;
            border-radius: 999px;
            padding: 4px 6px;
            background: #f3f4f6;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-qty-dec,
        body.online-m2-layout.m2-onepage-layout .m2-item-modal-qty-inc {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 999px;
            background: #f3f4f6;
            color: #111827;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            line-height: 1;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-qty-value {
            min-width: 20px;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #111827;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-add-btn {
            flex: 1 1 auto;
            border: none;
            border-radius: 999px;
            background: #eb1700;
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            padding: 14px 18px;
            cursor: pointer;
            white-space: nowrap;
        }

        body.online-m2-layout.m2-onepage-layout .m2-item-modal-add-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        body.online-m2-layout.m2-onepage-layout .m2-cart-toast {
            position: fixed;
            left: 50%;
            bottom: 24px;
            transform: translateX(-50%) translateY(12px);
            z-index: 12001;
            background: rgba(15, 23, 42, 0.92);
            color: #ffffff;
            padding: 10px 16px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 700;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        body.online-m2-layout.m2-onepage-layout .m2-cart-toast.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }