/* Google Fonts Import - Inter as backup for TT Norms */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Convention: Use font files for weight, not font-weight. TT Norms Regular / Medium / Bold map to .otf files in fonts folder. */
/* TT Norms Font Faces – by file */
@font-face {
    font-family: 'TT Norms Regular';
    src: url('../fonts/TypeType - TT Norms Regular.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Medium';
    src: url('../fonts/TypeType - TT Norms Medium.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Bold';
    src: url('../fonts/TypeType - TT Norms Bold.otf') format('opentype');
    font-style: normal;
    font-display: swap;
}

/* TT Norms – same faces for font-weight–based selection (e.g. body copy) */
@font-face {
    font-family: 'TT Norms';
    src: url('../fonts/TypeType - TT Norms Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms';
    src: url('../fonts/TypeType - TT Norms Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms';
    src: url('../fonts/TypeType - TT Norms Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Use font files for weight: 'TT Norms Regular' | 'TT Norms Medium' | 'TT Norms Bold'. Do not use font-weight in selectors. */
/* Reusable typography: 28px / 36px line-height / 1% letter-spacing (use class .font-large) */
.font-large {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
}

/* Figma design tokens – colors from selected frame (use var(--color-name) in styles) */
:root {
    /* Usage / semantic */
    --color-icon-inverse: #ffffff;
    --color-icon-default: #191919;
    --color-background-inverse: #191919;
    --color-border-disabled: #f7f7f7;
    --color-border-default: #e7e7e7;
    --color-background-disabled: #f7f7f7;
    --color-background-primary: #ffffff;
    /* icon/disabled – disabled icon color (e.g. icon-button--disabled svg) */
    --color-icon-disabled: #B2B2B2;
    /* text/disabled – disabled text (e.g. category selector in edit mode) */
    --color-text-disabled: #B2B2B2;
    --color-border-strong: #d6d6d6;
    /* Base – primary shades (50) */
    --color-black: #000000;
    --color-red-50: #f54323;
    --color-red-80: #b71000; /* primary button badge / darker red */
    --color-amber-50: #f4922a;
    --color-yellow-50: #ebb11e;
    --color-green-50: #1fa74f;
    --color-teal-50: #2aa4a9;
    --color-cyan-50: #34afdf;
    --color-blue-50: #6c87fb;
    --color-purple-50: #8754de;
    --color-magenta-50: #DF3480;
    /* Base – light shades (20) */
    --color-red-20: #fec7bd;
    --color-amber-20: #fece90;
    --color-yellow-20: #ffe591;
    --color-green-20: #a9e9c1;
    --color-teal-20: #b6e9ea;
    --color-cyan-20: #b7eafe;
    --color-blue-20: #d1dafb;
    --color-purple-20: #d7c3fd;
    --color-magenta-20: #FD80B7;
    --color-neutral-20: #c4c4c4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'TT Norms', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background-color: #f1f1f1;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    /* Force 1:1 pixel ratio for consistent border rendering */
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Status Bar */
.status-bar {
    background-color: #000000;
    color: #ffffff;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1920px;
    z-index: 1000;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.store-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 12px;
    height: 12px;
    background-color: #00832d;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-text {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.live-order-notification {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-badge {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.count-text {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.notification-text {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hardware-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 26px;
}

.hardware-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #ffffff;
}

.hardware-icon svg {
    width: 24px;
    height: 24px;
    stroke: none; /* Icons use fill only; stroke made them look thicker */
    shape-rendering: geometricPrecision; /* Crisper rendering to match Figma */
}

.clock {
    display: flex;
    align-items: center;
}

.clock-text {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #ffffff;
    white-space: nowrap;
}

/* Main Layout */
.main-container {
    display: flex;
    height: 920px; /* 1080px - 72px status bar - 88px bottom nav */
    width: 1920px;
    background-color: #f1f1f1;
    margin-top: 72px; /* Account for fixed status bar */
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 24px;
    gap: 24px;
    box-sizing: border-box;
}

/* Sidebar */
.sidebar {
    width: 450px;
    min-width: 450px;
    background-color: white;
    border-right: 2px solid #e7e7e7;
    padding: 0;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    height: 872px;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 24px 40px;
    height: 120px;
}

.category-header--with-popover {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    flex-shrink: 0;
}

.menu-switcher-popover {
    position: absolute;
    left: 24px;
    right: 24px;
    /* top set by JS so popover is 16px below the icon button */
    max-height: 400px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 2px solid #e7e7e7;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none;
    box-sizing: border-box;
}

.menu-switcher-popover.is-open {
    display: block;
}

/* List and option share same padding (8px 32px); list adds vertical spacing only so option provides horizontal inset */
.menu-switcher-popover-list {
    padding: 8px 32px;
}

/* Shared option style for both menu switcher and slot action popovers; scoped so no parent (e.g. edit-mode-panel) overrides */
.menu-switcher-popover .menu-switcher-popover-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 84px;
    min-height: 84px;
    padding: 8px 0;
    border: none;
    border-top: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    background: none;
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 28px;
    line-height: 36px;
    color: #191919;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.menu-switcher-popover .menu-switcher-popover-option:first-child {
    border-top: none;
}

.menu-switcher-popover .menu-switcher-popover-option:last-child {
    border-bottom: none;
}

.menu-switcher-popover .menu-switcher-popover-option:hover {
    background-color: #f7f7f7;
}

.menu-switcher-popover .menu-switcher-popover-option:active {
    background-color: #f1f1f1;
}

/* Selectable option: bold label and show check when active (menu switcher only) */
.menu-switcher-popover .menu-switcher-popover-option.active {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Label: only shared typography (inherit from option); no other overrides */
.menu-switcher-popover .menu-switcher-popover-option-label {
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: unset;
    letter-spacing: inherit;
}

/* Icon: same structure in both popovers; empty in menu switcher, filled in slot action. Margin only when icon has content so label isn't pushed right when icon is hidden. */
.menu-switcher-popover .menu-switcher-popover-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.menu-switcher-popover .menu-switcher-popover-option-icon:empty {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.menu-switcher-popover .menu-switcher-popover-option-icon:not(:empty) {
    margin-right: 24px;
}

.menu-switcher-popover .menu-switcher-popover-option-icon svg {
    width: 28px;
    height: 28px;
}

/* Check: same structure in both popovers; shown only when selectable and active (menu switcher) */
.menu-switcher-popover .menu-switcher-popover-option-check {
    display: none;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}

.menu-switcher-popover .menu-switcher-popover-option-check:empty {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.menu-switcher-popover .menu-switcher-popover-option.active .menu-switcher-popover-option-check:not(:empty) {
    display: flex;
}

.menu-switcher-popover .menu-switcher-popover-option-check svg {
    width: 32px;
    height: 32px;
    color: #191919;
}

/* Destructive option (slot action: Remove tile) – red text and icon only */
.menu-switcher-popover .menu-switcher-popover-option--destructive {
    color: var(--color-red-80);
}

.menu-switcher-popover .menu-switcher-popover-option--destructive .menu-switcher-popover-option-icon {
    color: var(--color-red-80);
}

.category-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    color: #191919;
    line-height: 44px;
    letter-spacing: 0.01em;
}

/* Icon button – circular control base (72px circle, 28px svg) */
.icon-button {
    border-radius: 9999px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    border: none;
}

.icon-button svg {
    width: 28px;
    height: 28px;
    fill: var(--color-icon-default);
}

/* Tertiary – white bg, border (used for slot action, edit btn, category dropdown) */
.icon-button--tertiary {
    background-color: #ffffff;
    border: 2px solid var(--color-border-strong);
}

/* Secondary – gray bg (used for empty slot plus) */
.icon-button--secondary {
    background-color: #f1f1f1;
}

.icon-button--secondary svg,
.icon-button--secondary svg path {
    fill: #191919;
}

/* Disabled state – matches Figma selected frame (muted bg + icon) */
.icon-button--disabled {
    background-color: var(--color-background-disabled);
    border: 2px solid var(--color-border-disabled);
    color: var(--color-icon-disabled);
    cursor: default;
    pointer-events: none;
}

.icon-button--disabled svg,
.icon-button--disabled svg path {
    fill: var(--color-icon-disabled);
}

/* Glass – translucent white (e.g. on colored swipe action) */
.glass-icon-button {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    -webkit-tap-highlight-color: transparent;
}

.glass-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.glass-icon-button:active {
    background-color: rgba(255, 255, 255, 0.4);
}

.glass-icon-button svg,
.glass-icon-button svg path {
    fill: currentColor;
}

.category-list {
    list-style: none;
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item {
    padding: 18px 24px;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    background-color: white;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 36px;
    letter-spacing: 1%;
    height: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-item:hover {
    background-color: #f1f1f1;
}

.category-item.active {
    background-color: #191919;
    color: white;
}

/* Disabled state – same dimensions as .category-item (matches Figma category selector disabled) */
.category-item--disabled {
    color: var(--color-text-disabled);
    background-color: white;
    cursor: default;
    pointer-events: none;
}

.category-item--disabled:hover {
    background-color: white;
}

/* Content Area */
.menu-and-item-grid {
    display: flex;
    width: 1398px;
    height: 872px;
    background-color: white;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.menu-and-item-grid.edit-mode .sidebar,
.menu-and-item-grid.edit-mode .item-grid-area {
    display: none;
}

.menu-and-item-grid .edit-mode-panel {
    display: none;
    width: 100%;
    height: 100%;
    flex: 1;
    min-width: 0;
}

.menu-and-item-grid.edit-mode .edit-mode-panel {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Jiggle animation for edit mode tiles (iOS-style “draggable” cue); excluded from the element being dragged */
@keyframes edit-mode-jiggle {
    0%, 100% { transform: rotate(-0.8deg); }
    50% { transform: rotate(0.8deg); }
}
.edit-mode-panel .edit-mode-page-item {
    animation: edit-mode-jiggle 0.75s ease-in-out infinite;
}
.edit-mode-panel .edit-mode-page-item.edit-mode-page-item--selected {
    animation: none;
}

/* Edit mode – left sidebar */
.edit-mode-panel .edit-mode-sidebar {
    position: relative;
    width: 450px;
    min-width: 450px;
    height: 100%;
    background-color: white;
    border-right: 2px solid #e7e7e7;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.edit-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 24px 40px;
}

.edit-mode-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    color: var(--color-icon-disabled);
    line-height: 44px;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Reusable: large button (72px tall), tertiary styling – pill, white bg, light border */
.btn-large-tertiary {
    height: 72px;
    min-height: 72px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #191919;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 9999px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-large-tertiary:hover {
    background-color: #f5f5f5;
}

/* Tertiary + destructive: white bg, light gray border, red text (e.g. Delete page) */
.btn-large-tertiary--destructive {
    height: 72px;
    min-height: 72px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
    color: #eb1700;
    background-color: #ffffff;
    border: 2px solid #e7e7e7;
    border-radius: 9999px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-large-tertiary--destructive:hover {
    background-color: #fafafa;
}

.btn-large-tertiary--destructive:disabled {
    color: var(--color-icon-disabled);
    background-color: var(--color-background-disabled);
    border-color: var(--color-border-disabled);
    cursor: default;
    pointer-events: none;
}

/* Reusable: large button (72px tall), primary styling – pill, red bg, white text */
.btn-large-primary {
    height: 72px;
    min-height: 72px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: #eb1700;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-large-primary:hover {
    background-color: #d11400;
}

/* Reusable: large button (72px tall), secondary styling – pill, light gray bg (same font as tertiary via .font-large) */
.btn-large-secondary {
    height: 72px;
    min-height: 72px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #191919;
    background-color: #f1f1f1;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-large-secondary:hover {
    background-color: #e8e8e8;
}

/* Disabled state for large secondary and primary – same muted look for both */
.btn-large-secondary--disabled,
.btn-large-primary--disabled {
    background-color: var(--color-background-disabled);
    color: var(--color-icon-disabled);
    border: none;
    cursor: default;
    pointer-events: none;
}

.btn-large-secondary--disabled:hover,
.btn-large-primary--disabled:hover {
    background-color: var(--color-background-disabled);
}

.edit-mode-add-page {
    width: calc(100% - 48px);
    margin: 0 24px 24px 24px;
    box-sizing: border-box;
}

.edit-mode-add-page:focus,
.edit-mode-add-page:focus-visible {
    outline: none;
    background-color: #ffffff;
}

.edit-mode-add-page:active {
    background-color: #f5f5f5;
}

.edit-mode-pages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 0 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.edit-mode-pages::-webkit-scrollbar {
    display: none;
}

/* Edit-mode custom pages list – 104px height, content vertically centered, same row borders as item-rows; no shrink so list scrolls */
.edit-mode-page-item,
.edit-mode-custom-pages-list .edit-mode-page-item-placeholder {
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
}

.edit-mode-page-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background-color: transparent;
    height: 104px;
    min-height: 104px;
    flex-shrink: 0;
}

.edit-mode-custom-pages-list > .edit-mode-page-item:first-child,
.edit-mode-custom-pages-list > .edit-mode-page-item-placeholder:first-child {
    border-top-width: 2px;
}

.edit-mode-custom-pages-list > .edit-mode-page-item:last-child,
.edit-mode-custom-pages-list > .edit-mode-page-item-placeholder:last-child {
    border-bottom-width: 2px;
}

/* Single page: hide drag handle (reorder only when more than one page) */
.edit-mode-custom-pages-list--single-page .edit-mode-drag-handle {
    display: none;
}

/* Title: .category-item for styling; layout + selected state for row context */
.edit-mode-page-item-title {
    flex: 1;
    min-width: 0;
}

.edit-mode-page-item--selected .edit-mode-page-item-title {
    background-color: #191919;
    color: #ffffff;
}

.edit-mode-drag-handle {
    color: #606060;
    cursor: grab;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-mode-drag-handle svg {
    width: 28px;
    height: 28px;
}

.edit-mode-drag-handle svg path {
    fill: currentColor;
}

.edit-mode-page-item--selected .edit-mode-drag-handle {
    color: #606060;
}

/* Dragging state (long-press reorder): lifted appearance, same bg as list rows */
.edit-mode-page-item--dragging {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 1;
    background-color: #ffffff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    transition: none;
    animation: none;
}

.edit-mode-page-item--dragging .edit-mode-page-item-title {
    border-radius: 9999px;
}

/* Placeholder when drag has left the slot: match empty .edit-mode-slot (slot has only edit-mode-slot + this class; filled/item-image removed in JS) */
.edit-mode-slot--source-hidden {
    background-color: white !important;
    background-image: none !important;
    border: 2px solid #e7e7e7 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    box-sizing: border-box !important;
}
.edit-mode-slot--source-hidden > *:not(.icon-button--secondary) {
    visibility: hidden;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Plus placeholder: visible and centered (slot has no --item-image so base flex center applies) */
.edit-mode-slot--source-hidden > .icon-button--secondary {
    visibility: visible !important;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    z-index: 1;
}

/* When source slot is also the drop target (dragging back over origin), hide the plus like other empty slots */
.edit-mode-slot--source-hidden.edit-mode-slot--drop-target > .icon-button--secondary {
    visibility: hidden !important;
}

/* Empty slot under drag center: show as drop target, hide plus button */
.edit-mode-slot--drop-target {
    background-color: var(--color-background-disabled) !important;
    border: none !important;
}
.edit-mode-slot--drop-target .icon-button {
    visibility: hidden;
}

/* Grid slot clone while dragging (edit mode) */
/* Dragged clone only: stronger shadow while dragging; released tiles keep .edit-mode-slot--filled shadow */
.edit-mode-slot--grid-dragging {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    transition: none;
    animation: none;
}

/* Placeholder row during drag (holds space) */
.edit-mode-page-item-placeholder {
    height: 104px;
    min-height: 104px;
    flex-shrink: 0;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* Edit button in custom pages list – .icon-button--tertiary + row layout */
.edit-mode-edit-btn {
    flex-shrink: 0;
}

.edit-mode-page-item--selected .edit-mode-edit-btn svg {
    fill: var(--color-icon-default);
}

/* ========== Shared modal styling (all modals) ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 24px 0 24px;
    box-sizing: border-box;
}

.modal-dialog {
    width: 924px;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-radius: 0 0 24px 24px;
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 120px;
    min-height: 120px;
    padding: 24px;
    border-bottom: 2px solid #e7e7e7;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 24px 24px 0 0;
}

.modal-title {
    flex: 1;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.01em;
    color: #191919;
    margin: 0;
    margin-right: 24px;
    text-align: left;
}

.modal-scroll {
    flex: 0 0 auto;
    padding-bottom: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: transparent;
}

.modal-scroll.modal-scroll--overflowing {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 24px - 120px);
    padding-bottom: 24px;
    /*border-radius: 0 0 24px 24px;*/
}

.modal-dialog.modal-dialog--scroll-overflowing {
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    align-self: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0px;
}

.modal-scroll::-webkit-scrollbar {
    display: none;
}

/* Edit custom page modal: overlay stops above keyboard; keyboard is outside overlay */
.edit-page-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: calc(1080px - 427px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 48px 48px 48px;
}

.edit-page-modal-overlay[aria-hidden="false"] {
    display: flex;
}

.edit-page-modal {
    width: 920px;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.edit-page-modal-header {
    height: 120px;
    min-height: 120px;
    padding: 24px;
    gap: 24px;
}

.edit-page-modal-title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.01em;
    margin-right: 24px;
    text-align: left;
}


.edit-page-modal-body {
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 0 0 24px 24px;
}

.edit-page-modal-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-page-modal-label {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
    color: #191919;
    display: block;
}

.edit-page-modal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.edit-page-modal-input {
    width: 100%;
    height: 72px;
    padding: 24px;
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #191919;
    background-color: #f7f7f7;
    border: none;
    border-radius: 9999px;
    box-sizing: border-box;
}

.edit-page-modal-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #191919;
}

.edit-page-modal-input::placeholder {
    color: #909090;
}

.edit-page-modal-input-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.edit-page-modal-input-wrap:focus-within .edit-page-modal-input-clear {
    opacity: 1;
    pointer-events: auto;
}

.edit-page-modal-delete-btn {
    width: 100%;
}

/* Keyboard: outside overlay, 1920×427px */
.edit-page-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 427px;
    z-index: 1101;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.edit-page-keyboard-img {
    width: 1920px;
    height: 427px;
    display: block;
    object-fit: fill;
}

/* Categories modal content (shared modal-dialog, modal-header, etc.) */
.categories-modal-dialog {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 48px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 0 0 24px 24px;
}

/* Edit category modal content – Tile preview + Color grid (matches Figma) */
.edit-category-modal-body {
    gap: 48px;
}

.edit-category-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.edit-category-section-divider {
    height: 1px;
    background-color: var(--color-border-default);
    margin: 0 0 24px 0;
}

.edit-category-preview-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 188px;
}

.edit-category-preview-wrap .custom-page-slot--category {
    width: 200px;
    height: 188px;
    min-height: 188px;
    flex-shrink: 0;
}

.edit-category-preview-wrap--light-bg .custom-page-slot--category .custom-page-slot-category-name {
    color: #191919;
}
.edit-category-preview-wrap--light-bg .custom-page-slot--category .custom-page-slot-category-count {
    color: #191919;
    opacity: 0.7;
}

.edit-category-color-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
}

.edit-category-swatch {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--color-swatch, #e7e7e7);
}

.edit-category-swatch:hover {
    opacity: 0.9;
}

.edit-category-swatch.selected {
    border-color: var(--color-icon-default);
}

.edit-category-swatch .edit-category-swatch-check {
    display: none;
    width: 32px;
    height: 32px;
    color: #ffffff;
    pointer-events: none;
}

.edit-category-swatch.selected .edit-category-swatch-check {
    display: block;
}

.categories-modal-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 72px;
    padding: 0 24px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 9999px;
    flex-shrink: 0;
}

.categories-modal-search-wrap:focus-within {
    box-shadow: inset 0 0 0 2px #191919;
}

.categories-modal-search-icon {
    flex-shrink: 0;
}

.categories-modal-search-icon svg {
    width: 28px;
    height: 28px;
}

.categories-modal-search {
    flex: 1;
    min-width: 0;
    height: 72px;
    padding: 0 56px 0 0;
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #191919;
    background: transparent;
    border: none;
    outline: none;
}

.categories-modal-search::placeholder {
    color: #909090;
}

.categories-modal-search-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.categories-modal-search-wrap:focus-within .categories-modal-search-clear {
    opacity: 1;
    pointer-events: auto;
}

.categories-modal-tabs {
    display: flex;
    gap: 0;
    height: 72px;
    padding: 0;
    border-bottom: 2px solid #e7e7e7;
    flex-shrink: 0;
}

.categories-modal-tab {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
    color: #909090;
    background: none;
    border: none;
    cursor: pointer;
}

.categories-modal-tab.active {
    color: #191919;
}

.categories-modal-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background-color: #191919;
    border-radius: 8px 8px 0 0;
}

.categories-modal-list-wrap {
    padding: 0;
}

.categories-modal-list {
    margin: 0;
    padding: 0;
}

/* Row styling (shared with .all-items-row): inset borders as dividers */
.category-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    background-color: #ffffff;
    border: none;
    box-shadow: inset 0 1px 0 0 #e7e7e7, inset 0 -1px 0 0 #e7e7e7;
    cursor: pointer;
}

.category-row:last-child {
    box-shadow: inset 0 1px 0 0 #e7e7e7, inset 0 -2px 0 0 #e7e7e7;
}

/* First row in categories list: 2px top border, bottom inset only (no top inset) */
.categories-modal-list > *:first-child {
    border-top: 2px solid #e7e7e7;
    box-shadow: inset 0 -1px 0 0 #e7e7e7;
}

.categories-modal-list > *:first-child:last-child {
    box-shadow: inset 0 -2px 0 0 #e7e7e7;
}

.category-row:hover {
    background-color: #f5f5f5;
}

.category-row .category-icon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    flex-shrink: 0;
}

.category-row .category-info {
    flex: 1;
    min-width: 0;
}

.category-row .category-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 1.3;
}

.category-row .category-count {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 20px;
    color: #909090;
    line-height: 1.3;
    margin-top: 4px;
}

/* Container for Done editing button – matches Figma: light grey box, rounded corners, border, padding */
.edit-mode-done-container {
    background-color: white;
    border: none;
    border-top: 1px solid var(--color-border-default);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.edit-mode-done-btn {
    width: 100%;
}

/* Edit mode – right grid (4x4 add-item slots) */
.edit-mode-grid-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.edit-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* Edit mode tile: empty slots have no shadow; populated slots get shadow + border (see --filled) */
.edit-mode-slot {
    position: relative;
    min-width: 0;
    min-height: 0;
    background-color: white;
    border: 2px solid #e7e7e7;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.edit-mode-slot--filled {
    animation: edit-mode-jiggle 0.75s ease-in-out infinite;
}

/* Edit mode only: position the icon-button on populated slots; 16px above and 16px right of tile */
.edit-mode-slot-action {
    position: absolute;
    top: -16px;
    right: -16px;
}

/* Slot action popover: positioning only; option/label styles come from shared .menu-switcher-popover rules */
.edit-mode-slot-action-popover {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 200px;
    max-width: 342px;
    max-height: 400px;
}

/* Single visible option: no top/bottom border */
.edit-mode-slot-action-popover.slot-action-popover--single-option .menu-switcher-popover-option {
    border-top: none;
    border-bottom: none;
}

.slot-action-popover-divider {
    height: 1px;
    background-color: var(--color-border-default);
    margin: 0;
}

/* Populated tiles only: 2px border #e7e7e7 + drop shadow */
.edit-mode-slot--filled {
    border: 2px solid #e7e7e7;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
}

/* Ensure item-image, surcharge, discount slots receive pointer events on the slot (like category) so drag works */
.edit-mode-slot--filled.edit-mode-slot--item-image > *:not(.edit-mode-slot-action),
.edit-mode-slot--filled.edit-mode-slot--surcharge > *:not(.edit-mode-slot-action),
.edit-mode-slot--filled.edit-mode-slot--discount > *:not(.edit-mode-slot-action) {
    pointer-events: none;
}

/* Item / surcharge / discount tile in edit mode: same layout and typography (exact duplicate of item tile; surcharge/discount have unique class only) */
.edit-mode-slot--filled.edit-mode-slot--item {
    border: 2px solid #e7e7e7;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 16px 24px;
}

.edit-mode-slot--filled.edit-mode-slot--surcharge,
.edit-mode-slot--filled.edit-mode-slot--discount {
    border: none;
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

.edit-mode-slot--surcharge .item-name,
.edit-mode-slot--discount .item-name {
    padding: 16px 24px;
    flex: 1;
    min-height: 0;
    max-height: none;
    border-top: 2px solid #e7e7e7;
    border-left: 2px solid #e7e7e7;
    border-right: 2px solid #e7e7e7;
    border-radius: 12px 12px 0 0;
}

.edit-mode-slot--item .item-name,
.edit-mode-slot--item .item-price,
.edit-mode-slot--surcharge .item-name,
.edit-mode-slot--discount .item-name {
    letter-spacing: 1%;
}

.edit-mode-slot--item .item-name,
.edit-mode-slot--surcharge .item-name,
.edit-mode-slot--discount .item-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.edit-mode-slot--item .item-name {
    flex: 0 1 auto;
}

.edit-mode-slot--item .item-price {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #DADADA;
    line-height: 32px;
}

.edit-mode-slot--surcharge .item-name,
.edit-mode-slot--discount .item-name {
    max-height: none;
}

/* Category tile in slot (matches Figma: colored bg, white text, name + item count) */
.edit-mode-slot--category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
}

.edit-mode-slot--filled.edit-mode-slot--category {
    border: 2px solid #e7e7e7;
}

.edit-mode-slot--category .edit-mode-slot-category-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #ffffff;
    line-height: 32px;
    letter-spacing: 1%;
    text-align: left;
    margin: 0 0 8px 0;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

/* Item count: matches Figma selected frame – same for edit and non-edit tiles; sits at bottom of tile */
.edit-mode-slot--category .edit-mode-slot-category-count {
    font-family: 'TT Norms', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    margin: 0;
    margin-top: auto;
}

.edit-mode-slot--category.edit-mode-slot--category-light-bg .edit-mode-slot-category-name {
    color: #191919;
}
.edit-mode-slot--category.edit-mode-slot--category-light-bg .edit-mode-slot-category-count {
    color: #191919;
    opacity: 0.7;
}

.item-grid-area {
    width: 948px;
    height: 872px;
    overflow: hidden;
    background-color: white;
    flex-shrink: 0;
}

.menu-items {
    position: relative;
    width: 948px;
    height: 872px;
    padding: 24px;
    background-color: #ffffff;
    overflow-y: auto;
    box-sizing: border-box;
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Custom 16-slot grid: keep 24px padding on all edges */
.menu-items:has(.items-grid--custom-page) {
    padding: 24px;
}

.menu-items::-webkit-scrollbar {
    display: none;
}

/* Single category view (from custom page): fixed header + scrollable list */
.menu-items:has(.category-view) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.category-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    background-color: #ffffff;
}

.category-view-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 120px;
    padding: 24px;
    background-color: #ffffff;
    border-bottom: 2px solid #e7e7e7;
    gap: 16px;
    box-sizing: border-box;
}

.category-view-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
    color: #191919;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.category-view-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 48px;
}

.category-view-scroll::-webkit-scrollbar {
    display: none;
}

.category-view-scroll .all-items-category-section {
    margin-bottom: 0;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(4, 207px);
    gap: 24px;
    justify-content: start;
    width: 100%;
}

/* Custom page view (4x4 grid navigable like a category) */
.items-grid--custom-page {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* Base: empty slots in non-editable custom page – no border, disabled background */
.custom-page-slot {
    min-width: 0;
    min-height: 0;
    background-color: var(--color-background-disabled);
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Category tile: same layout and typography as editable (shadow, border, icon button differ by context) */
.custom-page-slot--category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
    border: none;
}
.custom-page-slot--category .custom-page-slot-category-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #ffffff;
    line-height: 32px;
    letter-spacing: 1%;
    text-align: left;
    margin: 0 0 8px 0;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
.custom-page-slot--category .custom-page-slot-category-count {
    font-family: 'TT Norms', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    margin: 0;
    margin-top: auto;
}

/* Category tile on light (20) color: dark text */
.custom-page-slot--category.custom-page-slot--category-light-bg .custom-page-slot-category-name {
    color: #191919;
}
.custom-page-slot--category.custom-page-slot--category-light-bg .custom-page-slot-category-count {
    color: #191919;
    opacity: 0.7;
}

/* Item tile on custom page (non-edit) */
.custom-page-slot--item {
    cursor: pointer;
    background-color: white;
    border: 2px solid #e7e7e7;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 16px 24px;
}

/* Surcharge / discount tile on custom page: no slot padding; item-name has padding; fee bar matches Figma (dark grey, label + icon) */
.custom-page-slot--surcharge,
.custom-page-slot--discount {
    cursor: pointer;
    background-color: white;
    border: none;
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}
.custom-page-slot--surcharge .item-name,
.custom-page-slot--discount .item-name {
    padding: 16px 24px;
    flex: 1;
    min-height: 0;
    max-height: none;
    border-top: 2px solid #e7e7e7;
    border-left: 2px solid #e7e7e7;
    border-right: 2px solid #e7e7e7;
    border-radius: 12px 12px 0 0;
}
.custom-page-slot-fee-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 8px 24px;
    background-color: #4A4A4A;
    border-radius: 0 0 12px 12px;
}
.custom-page-slot-fee-label {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #D6D6D6;
    line-height: 32px;
}
.custom-page-slot-fee-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.custom-page-slot-fee-icon svg { width: 24px; height: 24px; }
.custom-page-slot-fee-icon svg path { fill: #D6D6D6; }
.custom-page-slot--item .item-name,
.custom-page-slot--item .item-price { letter-spacing: 1%; }
.custom-page-slot--item .item-name,
.custom-page-slot--surcharge .item-name,
.custom-page-slot--discount .item-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 1%;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
.custom-page-slot--item .item-name { flex: 0 1 auto; }
.custom-page-slot--surcharge .item-name,
.custom-page-slot--discount .item-name { max-height: none; }
.custom-page-slot--item .item-price {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #DADADA;
    line-height: 32px;
}

/* Item-with-image tile (custom page): Figma design – full-bleed image, bottom gradient, white name + price */
.custom-page-slot--item-image,
.edit-mode-slot--item-image {
    cursor: pointer;
    position: relative;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #CFCFCF;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
}
.custom-page-slot--item-image .custom-page-slot-item-image-placeholder,
.edit-mode-slot--item-image .custom-page-slot-item-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-16px);
}

.custom-page-slot--item-image .custom-page-slot-gradient,
.edit-mode-slot--item-image .custom-page-slot-gradient {
    position: relative;
    min-height: 0;
    padding: 16px 24px 16px;
    /*background: linear-gradient(to top, rgba(0, 0, 0, ) 0%, rgba(0, 0, 0, 1) 40%, transparent 100%);*/

    background: linear-gradient(180deg, rgba(25, 25, 25, 0.00) 0%, rgba(25, 25, 25, 0.60) 70%);

    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
}
.custom-page-slot--item-image .item-name,
.edit-mode-slot--item-image .item-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #ffffff;
    line-height: 32px;
    letter-spacing: 0.01em;
    margin: 0;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.60);
}
.custom-page-slot--item-image .item-price,
.edit-mode-slot--item-image .item-price {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #E8E8E8;
    line-height: 32px;
    margin: 0;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.60);
}
/* Allow action button to sit outside slot (match other edit-mode slots); do not clip. Border comes from .edit-mode-slot--filled. */
.edit-mode-slot--item-image {
    overflow: visible;
}

/* Non-edit custom page: item-image tile has its own border */
.custom-page-slot--item-image {
    border: none;
}

/* Suggested tile: same as item-image but 4px red border */
.custom-page-slot--suggested {
    box-sizing: border-box;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.custom-page-slot--suggested .suggested-border {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 12px;
    box-sizing: border-box;
}

.suggested-border {

    /*color: #313149;*/
  display: inline-block;
  position: relative;
  /*z-index: 0;*/
 
}

.suggested-border:before {
  content: "";
  position: absolute;
  /*z-index: -1;*/
  inset: 0;
  padding: 4px; /* the border thickness */
  border-radius: 12px;
  background: linear-gradient(-60deg, #EB1700 0.99%, #DF3480 49.79%, #8754DE 98.59%);
  mask: 
   linear-gradient(#000 0 0) exclude, 
   linear-gradient(#000 0 0) content-box;

}

.custom-page-slot--suggested .custom-page-slot-gradient {
    /*border-radius: 8px;*/
}

/* When suggested state is active, dim all slots except the suggested one */
.items-grid--has-suggested .custom-page-slot--suggested-dimmed {
    opacity: 0.2;
    pointer-events: none;
}

/* Suggested tile tooltip – 24px below suggested tile; fixed so it isn't clipped by .menu-items overflow */
.suggested-tile-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    height: 188px;
    /*background: linear-gradient(120deg, #E02646 0%, #7F2FEE 100%);*/
    background: linear-gradient(-60deg, #EB1700 0.99%, #DF3480 49.79%, #8754DE 98.59%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.suggested-tile-tooltip-pointer {
    position: absolute;
    /* left set in JS to center over the suggested tile (tile.width/2 - 16px) */
    top: -11px;
    /*width: 0;*/
    /*height: 0;*/
    /*border-left: 16px solid transparent;*/
    /*border-right: 16px solid transparent;*/
    /*border-bottom: 12px solid #E02646;*/
    /*background: linear-gradient(90deg, #9B4EB6 0%, #A64CAB 100%);*/

    /*background-image: linear-gradient(-60deg, #EB1700 0.99%, #DF3480 49.79%, #8754DE 98.59%);*/
    background: linear-gradient(90deg, #9B4EB6 0%, #A64CAB 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 32px;
    height: 12px;
}
.suggested-tile-tooltip-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.suggested-tile-tooltip-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.suggested-tile-tooltip-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.suggested-tile-tooltip-message {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
/* Tooltip actions – match Figma selected frame (via Figma MCP): white pill + red text primary, white text secondary */
.suggested-tile-tooltip-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}
.suggested-tile-tooltip-btn {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #E02646;
    background-color: #ffffff;
    /*background: linear-gradient(white, black);*/
    border: none;
    border-radius: 9999px;
    height: 56px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
    /* M3/Elevation Light/2 */
    /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);*/
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
}

.popover-button-text-clip {
    background-image: linear-gradient(90deg, #A24CAE 0%, #CE4580 100%);
    color: transparent;
    background-clip: text;

}

.suggested-tile-tooltip-btn:hover {
    background-color: #f5f5f5;
}
.suggested-tile-tooltip-dismiss {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #ffffff;
    background: none;
    border: none;
    height: 56px;
    padding: 16px 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
}
.suggested-tile-tooltip-dismiss:hover {
    opacity: 0.9;
}


/* All Items view: no bottom padding on container */
.menu-items:has(.all-items-view) {
    padding-bottom: 0;
}

/* All Items view: search bar, full-width items, category sub-headers */
.all-items-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.all-items-search {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 72px;
    padding: 0 24px;
    background-color: #f7f7f7;
    border-radius: 9999px;
    box-sizing: border-box;
}

.all-items-search:focus-within {
    box-shadow: inset 0 0 0 2px #191919;
}

.all-items-search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.all-items-search-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.all-items-search-input {
    flex: 1;
    min-width: 0;
    height: 72px;
    padding: 0 56px 0 0;
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #191919;
    background: transparent;
    border: none;
    outline: none;
}

.all-items-search-input::placeholder {
    color: #909090;
}

.all-items-search-clear {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.all-items-search:focus-within .all-items-search-clear {
    opacity: 1;
    pointer-events: auto;
}

.all-items-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background-color: #ffffff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.item-grid-area .all-items-content {
    padding-bottom: 24px;
}

.all-items-content::-webkit-scrollbar {
    display: none;
}

.all-items-category-section {
    margin-bottom: 24px;
}

.all-items-category-section:last-child {
    margin-bottom: 0;
}

.all-items-category-section .items-grid--full-width {
    background-color: transparent;
}

.category-subheader {
    display: flex;
    height: 58px;
    padding: 16px 16px 16px 0;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    font-family: 'TT Norms Regular', sans-serif;
    font-size: 20px;
    color: #555555;
    line-height: 26px;
    letter-spacing: 1%;
    margin: 0;
    background: none;
}

.items-grid--full-width {
    grid-template-columns: 1fr;
    gap: 0;
}

/* First row: 2px top border, bottom inset shadow only (no top inset). Add .items-grid--first-row-bordered to any items-grid--full-width that uses this pattern. */
.items-grid--first-row-bordered > *:first-child,
.items-grid--first-row-bordered .all-items-row:first-child {
    border-top: 2px solid #e7e7e7;
    box-shadow: inset 0 -1px 0 0 #e7e7e7;
}

/* Only child: same as first row (top 2px border + bottom inset only). Higher specificity so it wins over .all-items-category-section .items-grid--full-width .all-items-row:last-child */
.all-items-category-section .items-grid--first-row-bordered > *:first-child:last-child,
.all-items-category-section .items-grid--first-row-bordered .all-items-row:first-child:last-child {
    box-shadow: inset 0 -2px 0 0 #e7e7e7;
}

.items-grid--full-width .all-items-row {
    min-width: 0;
    width: 100%;
}

/* Rows: 1px inset borders so when stacked they read as uniform 2px dividers (same as .category-row) */
.all-items-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 112px;
    padding: 24px 0;
    background-color: #ffffff;
    cursor: pointer;
    border: none;
    box-shadow: inset 0 1px 0 0 #e7e7e7, inset 0 -1px 0 0 #e7e7e7;
}

.all-items-category-section .items-grid--full-width .all-items-row:last-child {
    box-shadow: inset 0 1px 0 0 #e7e7e7, inset 0 -2px 0 0 #e7e7e7;
}


.all-items-row-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.all-items-row-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: #E7E7E7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909090;
    overflow: hidden;
}

.all-items-row-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.all-items-row-thumb svg {
    width: 32px;
    height: 32px;
}

.all-items-row-name {
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: left;
}

.all-items-row-price {
    flex-shrink: 0;
    margin-left: auto;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: right;
}


/* Menu tile (grid card in category views; other tile types may be added to the grid) */
.menu-tile {
    background-color: white;
    border: 2px solid #e7e7e7 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #e7e7e7 !important;
    border-radius: 12px;
    min-width: 200px;
    height: 156px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;
    cursor: pointer;
    /* Force pixel-perfect rendering */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.menu-tile .item-name,
.menu-tile .item-price {
    letter-spacing: 1%;
}

.menu-tile .item-name {
    flex: 0 1 auto;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.item-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    flex: 1;
}

.item-price {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #606060;
    line-height: 32px;
    letter-spacing: 0.01em;
}

/* Order Panel */
.order-panel {
    width: 450px;
    min-width: 450px;
    background-color: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 872px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Order Panel Header */
.order-panel-header {
    width: 450px;
    height: 216px;
    background-color: white;
    border-bottom: 2px solid var(--color-border-default);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    padding: 0 24px 0 32px;
    flex-shrink: 0;
}

.order-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    color: #191919;
    line-height: 44px;
    letter-spacing: 0.01em;
}

.more-options {
    background-color: white;
    border: 2px solid #d6d6d6;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #191919;
    cursor: pointer;
    flex-shrink: 0;
}

.more-options svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.service-type {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}


.service-type::-webkit-scrollbar {
    display: none;
}

.service-btn {
    background-color: #f1f1f1;
    border: none;
    border-radius: 9999px;
    padding: 18px 24px;
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 18px;
    color: #191919;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.01em;
    line-height: 24px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.service-btn.active {
    background-color: #191919;
    color: #ffffff;
}

/* Edit mode: order panel header appears disabled (match edit-mode-title, disabled icon, disabled service buttons) */
.main-container.edit-mode .order-panel .order-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--color-icon-disabled);
    transition: none;
}

.main-container.edit-mode .order-panel .more-options {
    background-color: var(--color-background-disabled);
    border: 2px solid var(--color-border-disabled);
    color: var(--color-icon-disabled);
    cursor: default;
    pointer-events: none;
    transition: none;
}

.main-container.edit-mode .order-panel .more-options svg,
.main-container.edit-mode .order-panel .more-options svg path {
    fill: var(--color-icon-disabled);
    transition: none;
}

.main-container.edit-mode .order-panel .service-btn {
    background-color: #f7f7f7;
    color: #B2B2B2;
    cursor: default;
    pointer-events: none;
    transition: none;
}

.main-container.edit-mode .order-panel .service-btn.active {
    background-color: #e7e7e7;
    color: #ffffff;
    transition: none;
}

/* Cart Items */
.cart-items-container {
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 440px;
    overflow-y: auto;
    /* Hide scrollbars while maintaining scrollability */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.cart-items {
    flex: 1 1 auto;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
}

.cart-items-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari, etc.) */
}

/* Swipe-to-delete cart row wrapper; only .cart-item-swipe-slide has white background */
.cart-item-swipe {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: none;
    margin: 0;
    outline: none;
}

.cart-item-swipe.cart-item-swipe--revealed {
    background-color: #c62828;
}

.cart-item-swipe.cart-item-swipe--deleting {
    background-color: #c62828;
}

/* This div reduces in height and fades out over the course of the collapse animation before the item is removed */
.cart-item-swipe.cart-item-swipe--deleting.cart-item-swipe--collapsing {
    transition: height 0.2s ease-out, opacity 0.2s ease-out;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.cart-item-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 152px; /* 40px + 72px icon button + 40px */
    background-color: #c62828;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.cart-item-swipe-actions .glass-icon-button {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.cart-item-swipe-slide {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    transition: transform 0.2s ease-out;
    border: none;
    box-shadow: none;
    margin: 0;
    outline: none;
    /* Single compositor layer so slide and all descendants move as one */
    will-change: transform;
    isolation: isolate;
    /* Only the slide transforms; contents must not animate or transform separately */
}
.cart-item-swipe-slide .cart-item {
    transition: none !important;
    transform: none !important;
    background: none !important;
}

.cart-item-swipe--deleting .cart-item-swipe-slide .cart-item {
    will-change: auto;
    pointer-events: none;
    background: none !important;
    transition: none !important;
    transform: none !important;
}

.cart-item-swipe--dragging .cart-item-swipe-slide {
    transition: none;
}

.cart-item-swipe--deleting .cart-item-swipe-slide {
    transition: transform 0.2s ease-in;
    /* end transform is set in JS after reflow so the slide animates out to the left */
}

/* Cart Item Styles - Matching Figma Design Exactly; no background – only .cart-item-swipe-slide is white */
.cart-item {
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
}

/* First row only: full-width divider at top (do not use .cart-item:first-child - each item is first child of its slide) */
.cart-item-swipe:first-child .cart-item::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-bottom: 2px solid #e7e7e7;
    box-sizing: border-box;
}
.cart-items-container--scrollable .cart-item-swipe:first-child .cart-item::before {
    display: none;
}

.cart-item-swipe:last-child .cart-item .cart-item-divider {
    padding-left: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.cart-item-swipe:last-child .cart-item .cart-item-divider-line {
    width: 100% !important;
    flex: none !important;
    margin-left: 0 !important;
}

.cart-item-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-item-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.item-quantity {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    width: 36px;
    flex-shrink: 0;
}

.item-name {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    flex: 1;
    min-width: 0;
}

.cart-item .item-price {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: right;
    width: 106px;
    flex-shrink: 0;
}

.cart-item-modifiers {
    padding-left: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.modifier-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.modifier-name {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #606060;
    line-height: 32px;
    letter-spacing: 0.01em;
    flex: 1;
}

.modifier-price {
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #606060;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: right;
    white-space: nowrap;
}

.cart-item-special-instructions {
    padding-left: 44px;
    padding-top: 12px;
    padding-bottom: 4px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.special-instruction {
    background-color: #fff6d4;
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'TT Norms Medium', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #784200;
    line-height: 32px;
    letter-spacing: 0.01em;
}

/* Custom pages edit mode: cart item special instruction uses gray background */
.main-container:has(.menu-and-item-grid.edit-mode) .cart-item-special-instructions .special-instruction {
    background-color: #F7F7F7;
}

/* Cart Item Divider - Positioned at bottom of each item */
.cart-item-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    padding-left: 68px;
    display: flex;
}

.cart-item-divider-line {
    flex: 1;
    /*background-color: #f1f1f1;*/
    border: 2px solid #e7e7e7;
    height: 100%;
    box-sizing: border-box;
}

/* Order Summary Styles */
.order-summary {
    width: 450px;
    background-color: white;
    padding: 16px 24px 16px 24px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking when cart items overflow */
}

.order-summary--hidden {
    display: none;
}

.discount-section {
    padding: 0;
}

.discount-section .total-item {
    padding-bottom: 8px;
}

.discount-section .total-item.total-item--fee {
    padding-bottom: 0;
}

.discount-section .total-item--fee .total-label {
    color: #909090;
}

.discount-item {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
}

.discount-text {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #eb1700;
    line-height: 32px;
    letter-spacing: 0.01em;
    flex: 1;
}

.totals-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.total-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.total-label {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    flex: 1;
}

.total-amount {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-align: right;
}

.total-amount--fee {
    color: #909090;
}

.order-summary-edit-discount {
    display: flex;
    align-items: center;
    height: 64px;
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    color: #eb1700;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.order-summary-edit-discount:hover {
    text-decoration: underline;
}

.order-actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    width: 450px;
    height: 216px;
    padding: 24px;
    background-color: white;
    border-top: 2px solid #e7e7e7;
    border-radius: 0 0 24px 24px;
    box-sizing: border-box;
}

/* Order actions: full-width large buttons; primary needs position:relative for .item-count */
.order-actions .btn-large-secondary,
.order-actions .btn-large-primary {
    width: 100%;
}

.order-actions .btn-large-primary {
    position: relative;
}

.checkout-text {
    flex: 1;
    text-align: center;
}

/* Checkout button item counter – circular badge (matches Figma selected frame) */
.item-count {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-red-80);
    color: #ffffff;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: 9999px;
    box-sizing: border-box;
}

/* Edit mode: order action buttons use disabled styling (same for Save and Check out) */
.main-container:has(.menu-and-item-grid.edit-mode) .order-actions .btn-large-secondary,
.main-container:has(.menu-and-item-grid.edit-mode) .order-actions .btn-large-primary {
    background-color: var(--color-background-disabled);
    color: var(--color-icon-disabled);
    cursor: default;
    pointer-events: none;
}

.main-container:has(.menu-and-item-grid.edit-mode) .order-actions .btn-large-secondary:hover,
.main-container:has(.menu-and-item-grid.edit-mode) .order-actions .btn-large-primary:hover {
    background-color: var(--color-background-disabled);
}

.main-container:has(.menu-and-item-grid.edit-mode) .order-actions .item-count {
    background-color: #D9D9D9;
    color: var(--color-icon-disabled);
}

/* Edit mode: cart items container text muted */
.main-container:has(.menu-and-item-grid.edit-mode) .cart-items-container,
.main-container:has(.menu-and-item-grid.edit-mode) .cart-items-container * {
    color: #B2B2B2;
}

/* Bottom Navigation */
.bottom-nav {
    background-color: white;
    border-top: 2px solid #e7e7e7;
    height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1920px;
    z-index: 1000;
}

.nav-items {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    padding: 0 24px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-top: 16px;
    min-width: 80px;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 6px;
    background-color: #eb1700;
    border-radius: 8px 8px 0 0;
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: #191919;
}

.nav-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.nav-item span {
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
    text-align: center;
    color: #191919;
    white-space: nowrap;
}

.nav-item.active span {
    color: #eb1700;
}

.nav-item.active .nav-icon {
    color: #eb1700;
}

.nav-item.active .nav-icon svg {
    fill: #eb1700;
}

.logout-btn {
    background-color: white;
    border-left: 2px solid #e7e7e7;
    padding: 0 24px;
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 28px;
    color: #eb1700;
    line-height: 36px;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 194px;
}

/* Sheet – full-view item detail (slide up) */
.sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sheet-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.sheet-slide-up {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 25, 25, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sheet-overlay.show .sheet-slide-up {
    transform: translateY(0);
}


/* Sheet main content area */
.sheet-main-content {
    flex: 1;
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    border: none;
}

/* Sheet item header */
.sheet-item-header {
    background-color: white;
    border-bottom: 2px solid #e7e7e7;
    height: 120px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

.sheet-item-header .sheet-remove-item-btn {
    margin-left: auto;
    width: fit-content;
}

.sheet-close {
    background-color: white;
    border: 2px solid #d6d6d6;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #191919;
    cursor: pointer;
}

.sheet-close svg {
    width: 28px;
    height: 28px;
}

.sheet-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sheet-item-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 36px;
    color: #191919;
    line-height: 44px;
    letter-spacing: 0.01em;
    margin: 0;
}

.sheet-item-price {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 20px;
    color: #606060;
    line-height: 26px;
    letter-spacing: 0.01em;
}

/* Sheet content container */
.sheet-content-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    height: 960px; /* 1080px - 120px header */
    max-height: 960px;
}

/* Left side - modifier selection */
.modifier-option-scroll {
    width: 1288px;
    height: 960px;
    padding: 80px 0 80px 0;
    background-color: white;
    border-right: 2px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    /* Hide scrollbar while maintaining scrollability */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.modifier-section {
    padding: 0;
    width: 922px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.modifier-header {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.modifier-title {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 44px;
    color: #191919;
    line-height: 52px;
    letter-spacing: 0.01em;
    margin: 0;
}

.modifier-required {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-shrink: 0;
}

.required-badge {
    display: flex;
    align-items: center;
    gap: 5px;
}

.required-badge span {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #a36500;
    line-height: 32px;
    letter-spacing: 0.01em;
}

/* Required badge satisfied state */
.required-badge.satisfied span {
    color: #00832D;
}

/* Required badge optional state */
.required-badge.optional span {
    font-family: 'TT Norms Medium', sans-serif;
    color: #606060;
}

.required-separator {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #606060;
    line-height: 32px;
    letter-spacing: 0.01em;
}

.required-text {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    color: #606060;
    line-height: 32px;
    letter-spacing: 0.01em;
}

/* Required icon styling */
.required-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Category button icon styling */
.category-required-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modifier-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modifier-options:has(.modifier-option--quantity) {
    gap: 0;
}

/* Special instructions: text input instead of modifier options */
.modifier-special-instructions-wrap {
    width: 100%;
}
.modifier-special-instructions-input {
    width: 100%;
    min-height: 120px;
    padding: 24px;
    font-family: 'TT Norms', sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
    color: #191919;
    background-color: #fff;
    border: 2px solid #e7e7e7;
    border-radius: 12px;
    resize: vertical;
    box-sizing: border-box;
}
.modifier-special-instructions-input::placeholder {
    color: #B2B2B2;
}
.modifier-special-instructions-input:focus {
    outline: none;
    border-color: #191919;
}
.modifier-special-instructions-input.modifier-special-instructions-input--edit {
    background-color: #F7F7F7;
}

/* Nested modifiers: shown when parent option is selected */
/* Parent option that contains nested options: column layout so nested block sits below main row */
.modifier-option.modifier-option--has-nested {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.modifier-option.modifier-option--has-nested.selected {
    padding: 24px 24px 24px 0;
}

/* When nested options are visible, no right padding on option; padding on main row instead */
.modifier-option.modifier-option--has-nested.selected:has(.modifier-nested-options.is-visible) {
    padding-right: 0;
}

.modifier-option-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 24px;
}

.modifier-option.modifier-option--has-nested.selected:has(.modifier-nested-options.is-visible) .modifier-option-main {
    padding-right: 24px;
}

/* Nested options container and items – horizontal scroll within modifier option */
.modifier-nested-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    margin-left: 0;
    margin-top: 16px;
    padding-left: 0;
    padding-bottom: 8px;
    border-left: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modifier-nested-options::-webkit-scrollbar {
    display: none;
}

.modifier-nested-options.is-visible {
    margin-top: 24px;
    padding: 0 24px 0 24px;
}

.modifier-nested-option {
    width: 246px;
    min-width: 246px;
    flex-shrink: 0;
    height: 126px;
    padding: 16px 24px;
    border-radius: 12px;
    background-color: #f1f1f1;
    border: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    font-family: 'TT Norms Bold', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
}

/* Override so nested option name text is 24px / 32px / 1% */
.modifier-nested-options .modifier-nested-option .modifier-option-name {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
    color: #191919;
}

.modifier-nested-option.selected {
    background-color: #1a1a1a;
}

.modifier-nested-option.selected .modifier-option-name {
    color: #ffffff;
}

.modifier-nested-option.selected .modifier-option-price {
    color: #606060;
}

/* Nested option with quantity: label on top, modifier-option-stepper below centered (match Figma) */
.modifier-nested-option.modifier-nested-option--quantity {
    width: 246px;
    min-width: 246px;
    height: auto;
    min-height: 0;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    cursor: default;
}

.modifier-nested-option.modifier-nested-option--quantity .modifier-option-name {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
    color: #191919;
}

.modifier-nested-option.modifier-nested-option--quantity .modifier-option-stepper {
    align-self: center;
}

.modifier-nested-option.modifier-nested-option--quantity.selected .modifier-option-name {
    color: #ffffff;
}

.modifier-nested-option.modifier-nested-option--quantity.selected .modifier-stepper-value {
    color: #191919;
}

/* Hide scrollbar for modifier-option-scroll while keeping it scrollable */
.modifier-option-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.modifier-option-scroll::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari, etc.) */
}

.modifier-option {
    background-color: white;
    border: 2px solid #e7e7e7;
    border-radius: 12px;
    min-height: 116px;
    padding: 24px 32px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}


.modifier-option.selected {
    border-color: #191919;
}

/* Quantity-enabled modifier option: row with label + pill stepper (match Figma) */
.modifier-option.modifier-option--quantity {
    height: 120px;
    min-height: 120px;
    border: none;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 0;
    padding: 24px 0;
    cursor: default;
}

.modifier-option.modifier-option--quantity:first-child {
    border-top-width: 2px;
}

.modifier-option.modifier-option--quantity:last-child {
    border-bottom-width: 2px;
}

.modifier-option.modifier-option--quantity.modifier-option--disabled {
    background-color: #ffffff;
    border: none;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.modifier-option.modifier-option--quantity.modifier-option--disabled:last-child {
    border-bottom-width: 2px;
}

.modifier-option.modifier-option--quantity.modifier-option--disabled .modifier-option-name,
.modifier-option.modifier-option--quantity.modifier-option--disabled .modifier-option-price {
    color: #B2B2B2;
}

.modifier-option.modifier-option--quantity .modifier-option-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
}

/* Full stepper (qty >= 1): matches Figma – single white pill with minus, number, plus */
.modifier-option-stepper {
    width: 198px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 14px 24px;
    gap: 32px;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.20);
    height: 72px;
    min-height: 72px;
}

/* Single add button when quantity is 0: one circular button only (matches Figma frame) */
.modifier-option-stepper--single {
    width: auto;
    background: none;
    padding: 0;
    gap: 0;
    box-shadow: none;
    min-height: 0;
}

.modifier-stepper-btn.modifier-stepper-add {
    width: 72px;
    height: 72px;
}

.modifier-stepper-btn.modifier-stepper-add:disabled {
    background-color: #f7f7f7;
    opacity: 1;
}

.modifier-stepper-btn.modifier-stepper-add:disabled svg path {
    fill: #b2b2b2;
}

/* Minus/plus inside full stepper: 24px to fit 24px SVG (Figma) */
.modifier-option-stepper:not(.modifier-option-stepper--single) .modifier-stepper-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #191919;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.modifier-option-stepper:not(.modifier-option-stepper--single) .modifier-stepper-btn:hover:not(:disabled) {
    background-color: transparent;
    color: #191919;
}

.modifier-option-stepper:not(.modifier-option-stepper--single) .modifier-stepper-btn:active:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.06);
    color: #191919;
}

.modifier-option-stepper:not(.modifier-option-stepper--single) .modifier-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #828282;
}

/* Fallback for minus/plus in other contexts */
.modifier-stepper-btn {
    width: 24px;
    height: 24px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 50%;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 24px;
    color: #000000;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.modifier-stepper-btn:hover:not(:disabled) {
    background-color: #e8e8e8;
    color: #000000;
}

.modifier-stepper-btn:active:not(:disabled) {
    background-color: #e0e0e0;
    color: #000000;
}

.modifier-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #828282;
}

.modifier-stepper-value {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
    min-width: 28px;
    text-align: center;
}

.modifier-option.modifier-option--disabled {
    background-color: #f7f7f7;
    border: none;
    pointer-events: none;
}

.modifier-option.modifier-option--disabled .modifier-option-name,
.modifier-option.modifier-option--disabled .modifier-option-price {
    color: #828282;
}

.modifier-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modifier-option-price {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.01em;
    color: #606060;
}

.modifier-option-name {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
}

.option-checkbox {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-checkbox svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* Right side - category navigation */
.sheet-right-side {
    width: 632px;
    min-width: 300px;
    background-color: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex-shrink: 0;
}

.category-buttons {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.category-buttons::-webkit-scrollbar {
    display: none;
}

.category-button {
    background-color: white;
    border: 2px solid #e7e7e7;
    border-radius: 24px;
    padding: 0;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    height: auto;
    position: relative;
    overflow: hidden; /* Clip layers below */
}

.category-button.active {
    border: 2px solid #191919;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 24px 16px 24px;
    height: auto;
    min-height: auto;
    box-sizing: border-box;
}

/* No margin-bottom needed since padding handles spacing now */

.modifier-pills-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
    padding: 0 24px 24px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto; /* Auto-fit to pill height */
    align-items: center;
    box-sizing: border-box;
    /* Hide scrollbar while maintaining scrollability */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    /* Enable smooth scrolling and overscroll effects */
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Dynamic height and padding are handled by JavaScript */

.modifier-pills-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari, etc.) */
}

.modifier-option-pill {
    background-color: #f1f1f1;
    border: none;
    border-radius: 9999px;
    padding: 12px 24px 12px 32px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modifier-option-pill:hover {
    background-color: #e5e5e5;
}

.modifier-option-pill span {
    font-family: 'TT Norms Medium', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
    flex-grow: 1;
}

.modifier-option-pill svg {
    flex-shrink: 0;
}



.category-header span {
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
}


/* Sheet bottom controls */
.sheet-bottom-controls {
    border-top: 2px solid #e7e7e7;
    border-radius: 0 0 24px 24px;
    padding: 24px;
    display: flex;
    gap: 24px;
    align-items: center;
}

.sheet-bottom-controls .quantity-stepper {
    flex-shrink: 0;
}

.quantity-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qty-btn {
    background-color: white;
    border: 1px solid #d6d6d6;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #191919;
}

.qty-btn svg {
    width: 28px;
    height: 28px;
}

.qty-display {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 18px 16px;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    color: #191919;
    line-height: 36px;
    letter-spacing: 0.01em;
    text-align: center;
    min-width: 80px;
}

.add-to-order-btn {
    flex: 1;
    min-width: 0;
    background-color: #eb1700;
    color: white;
    border: none;
    border-radius: 9999px;
    height: 72px;
    font-family: 'TT Norms Bold', sans-serif;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}