/* Core Components */
                            .hero-stage, .feature-one-stage, .feature-two-stage, .feature-three-stage{
                /* Spacing */
--dimen-spacing-tiny: 0.08749999850988388rem;
--dimen-spacing-small: 0.17499999701976776rem;
--dimen-spacing-medium: 0.3499999940395355rem;
--dimen-spacing-medium-large: 0.5249999761581421rem;
--dimen-spacing-large: 0.699999988079071rem;
--dimen-spacing-larger: 0.875rem;
--dimen-spacing-extra-large: 1.0499999523162842rem;

/* Corners & Borders */
--dimen-corner-tiny: 0.125rem;
--dimen-corner-small: 0.5rem;
--dimen-corner-standard: 0.75rem;
--dimen-corner-large: 1.0rem;
--dimen-image-corner: 0.5rem;

/* Component Sizes */
--dimen-min-touch-target: 2.0999999046325684rem;
--dimen-row-button-size: 1.3125rem;
--dimen-icon-size: 0.918749988079071rem;
--dimen-min-stepper-qty-width: 1.5625rem;

/* Specific Screen Layouts */
--dimen-inventory-row-vert: 0.25rem;
--dimen-inventory-row-horz: 0.25rem;
--dimen-shopping-row-vert: 0.25rem;
--dimen-divider: 1.0px; 

--dimen-top-bar-size: 2.1875rem;
--dimen-top-bar-padding: 0.25rem;
--dimen-top-bar-end-padding: 0.375rem;
--dimen-top-bar-button-size: 1.3125rem;
--dimen-top-bar-icon-size: 1.3125rem;


--dimen-dropdown-size: 2.625rem;
--dimen-leading-trailing-icon-horizontal-padding: 0.25rem;

--dimen-fab-button-size: 3.75rem;
--dimen-fab-icon-size: 3.625rem;

--dimen-dynamic-header-indent-one: 1.0rem;

--dimen-reorderable-list-vert-padding: 0.3499999940395355rem;
--dimen-reorderable-list-horz-padding: 0.5249999761581421rem;
--dimen-reorderable-uncategorized-height: 2.0999999046325684rem;
--dimen-reorderable-list-vert-spacing: 0.699999988079071rem;
--dimen-reorderable-list-horz-spacing: 0.699999988079071rem;
                --font-label-small-size: 0.48125rem;
--font-label-small-weight: 500;
--font-label-medium-size: 0.525rem;
--font-label-medium-weight: 500;
--font-label-large-size: 0.6125rem;
--font-label-large-weight: 500;
--font-body-small-size: 0.525rem;
--font-body-small-weight: 400;
--font-body-medium-size: 0.6125rem;
--font-body-medium-weight: 400;
--font-body-large-size: 0.7rem;
--font-body-large-weight: 400;
--font-title-small-size: 0.6125rem;
--font-title-small-weight: 400;
--font-title-medium-size: 0.7rem;
--font-title-medium-weight: 500;
--font-title-large-size: 0.9625rem;
--font-title-large-weight: 500;
--font-headline-small-size: 1.05rem;
--font-headline-small-weight: 400;
--font-headline-medium-size: 1.225rem;
--font-headline-medium-weight: 400;
--font-headline-large-size: 1.4rem;
--font-headline-large-weight: 400;
--font-display-small-size: 1.5749999rem;
--font-display-small-weight: 400;
--font-display-medium-size: 1.96875rem;
--font-display-medium-weight: 400;
--font-display-large-size: 2.4937499rem;
--font-display-large-weight: 400;
            }            
                .mock-header-trailing-icon {
    width: var(--dimen-icon-size);
    height: var(--dimen-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mock-header-leading-icon {
    width: var(--dimen-icon-size);
    height: var(--dimen-icon-size);
    fill: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-icon-wrapper svg, .dropdown-chevron svg, .mock-icon-button, .mock-header-leading-icon svg, .mock-header-trailing-icon svg {
    width: var(--dimen-icon-size);
    height: var(--dimen-icon-size);
    fill: currentColor;
}
                /* The 3D Stage */
.hero-stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1500px;
    margin: 0 auto;
}
                                        /* --- Dropdown Menu Surface --- */
            .mock-dropdown-surface {
                position: absolute;
                top: 15%; /* Sits just below the topbar */
                right: 2%; /* Standard end padding */
                background-color: var(--app-surface-elevation-low);
                border-radius: var(--dimen-spacing-small);
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                padding: var(--dimen-spacing-small)  var(--dimen-spacing-medium)  var(--dimen-spacing-small) 0;
                display: flex;
                flex-direction: column;
                min-width: 50%;
                z-index: 200;
                
                /* GSAP initial state */
                opacity: 0;
                transform: scale(0.9) translateY(-10px);
                transform-origin: top right;
                will-change: transform, opacity;
            }

            /* --- Dropdown Items --- */
            .mock-dropdown-item {
                display: flex;
                align-items: center;
                padding: 0 var(--dimen-spacing-medium);
                height: 48px; /* Standard M3 dropdown item height */
                gap: var(--dimen-spacing-medium);
            }

            .mock-dropdown-icon {
                width: 24px;
                height: 24px;
                fill: var(--app-on-surface-variant);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mock-dropdown-text {
                flex: 1;
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                color: var(--app-on-surface);
                white-space: nowrap;
            }

            .mock-dropdown-divider {
                height: 1px;
                background-color: var(--app-outline-variant);
                margin: var(--dimen-spacing-small) 0;
            }

            /* --- M3 Switch Component --- */
            .mock-switch-track {
                width: 52px;
                height: 32px;
                border-radius: 16px;
                background-color: var(--app-surface-elevation-highest);
                border: 2px solid var(--app-outline);
                position: relative;
                display: flex;
                align-items: center;
                box-sizing: border-box;
            }

            .mock-switch-thumb {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background-color: var(--app-outline);
                position: absolute;
                left: 6px;
                /* GSAP handles the transition smoothly */
                will-change: left, width, height, background-color; 
                transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
            }

            /* Switch 'Checked' State (Apply via GSAP className or JS) */
            .mock-switch-track.is-checked {
                background-color: var(--primary-brand);
                border-color: var(--primary-brand);
            }

            .mock-switch-track.is-checked .mock-switch-thumb {
                background-color: var(--header-text);
                width: 24px;
                height: 24px;
                left: 24px;
            }
            /* The Base Screen Layout (AppScreenLayout) */
            .mock-screen {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: var(--dimen-corner-standard);
                background-color: var(--app-surface);
                color: var(--app-on-surface);
                font-family: 'Roboto', sans-serif;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                transform-style: preserve-3d;
                backface-visibility: hidden;
                will-change: transform, opacity;
            }
            
            /* Content Area */
            .mock-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                position: relative;
            }
            
                        /* Topbar Styles */
            .mock-topbar {
                display: flex;
                align-items: center;
                height: var(--dimen-top-bar-size);
                padding-left: var(--dimen-top-bar-padding);
                padding-right: var(--dimen-top-bar-end-padding);
                background-color: var(--primary-brand);
                color: var(--header-text);
                z-index: 10;
            }
            
            .mock-topbar-title {
                font-family: 'Roboto';
font-size: var(--font-title-large-size);
font-weight: var(--font-title-large-weight);
                flex: 1;
                padding-left: var(--dimen-top-bar-padding);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: left;
            }
            
            .mock-topbar-actions {
                display: flex;
                gap: var(--dimen-spacing-tiny)
            }
            
            .mock-icon-button {
                width: var(--dimen-min-touch-target);
                height: var(--dimen-min-touch-target);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                fill: var(--header-text);
            }
            
            .mock-icon-button svg {
                width: var(--dimen-top-bar-icon-size);
                height: var(--dimen-top-bar-icon-size);
            }
                /* --- App Modal Sheet Base --- */
.app-modal-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top-left-radius: var(--dimen-corner-large);
    border-top-right-radius: var(--dimen-corner-large);
    background-color: var(--app-surface-elevation-low);
    border-radius: var(--dimen-corner-large) var(--dimen-corner-large) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transform: translateY(100%); /* Hidden by default for GSAP to animate */
}

.app-modal-sheet-drag-handle {
    width: 32px;
    height: 4px;
    background-color: var(--app-on-surface);
    border-radius: 2px;
    margin: var(--dimen-spacing-extra-large) auto 0 auto;
}

.app-modal-sheet-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
                                
                /* Screen Specific Components */
                /* --- Inventory Components --- */
.mock-fab {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: var(--dimen-fab-button-size);
    height: var(--dimen-fab-button-size);
    border-radius: 500px;
    background-color: var(--primary-brand);
    color: var(--header-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

                            .mock-storage-header {
                font-family: 'Roboto';
font-size: var(--font-title-large-size);
font-weight: var(--font-title-large-weight);
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: var(--primary-brand);
                color: var(--header-text);
                padding: var(--dimen-spacing-medium) var(--dimen-spacing-medium) var(--dimen-spacing-small) var(--dimen-spacing-medium);
            }
            .mock-storage-name {
                flex: 1;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-right: 16px; /* Prevents text from touching the icon */
            }
            
            
                                .mock-stepper-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .mock-stepper {
                display: flex;
                align-items: center;
                background-color: var(--app-surface-elevation-one);
                border-radius: 50px; /* Pill shape */
                height: var(--dimen-row-button-size);
            }
            
            .mock-stepper-label {
                font-family: 'Roboto';
font-size: var(--font-label-small-size);
font-weight: var(--font-label-small-weight);
                color: var(--app-on-surface);
                margin-bottom: var(--dimen-spacing-tiny);
                white-space: nowrap;
            }

            .mock-stepper-btn {
                width: var(--dimen-row-button-size);
                height: var(--dimen-row-button-size);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--primary-brand); 
                border: var(--dimen-spacing-tiny) solid var(--primary-brand);
                border-radius: 100px;
                transform-origin: center; 
            }

            .mock-stepper-btn svg {
                width: var(--dimen-icon-size);
                height: var(--dimen-icon-size);
            }

            .mock-stepper-qty {
                min-width: var(--dimen-min-stepper-qty-width);
                text-align: center;
                font-family: 'Roboto';
font-size: var(--font-title-medium-size);
font-weight: var(--font-title-medium-weight);
                color: var(--app-on-surface-variant);
            }
            
   
                    .mock-price-summary {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: var(--dimen-spacing-small);
                min-width: 4rem;
            }
            .mock-price-line {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
            }

            .mock-price-main {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                text-align: left;
                color: var(--app-on-surface);
            }

            .mock-price-sub {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                text-align: right;
                color: var(--app-on-surface-variant);
            }
            /* ... stepper controls, trailing actions, etc ... */
      
   
            .mock-inventory-row {
                display: flex;
                align-items: center;
                padding: var(--dimen-spacing-medium) var(--dimen-spacing-medium);
                background-color: var(--app-surface-elevation-one);
                border-radius: var(--dimen-corner-small);
                gap: var(--dimen-spacing-medium);
            }
            .mock-name-cell {
                flex: 1;
                font-family: 'Roboto';
font-size: var(--font-body-medium-size);
font-weight: var(--font-body-medium-weight);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: left;
            }
          
            
             .mock-trailing-actions {
    display: flex;
    align-items: center;
    gap: var(--dimen-spacing-large);
    margin-left: auto; /* pushes the actions to the far right */
}

.mock-action-btn {
    width: var(--dimen-row-button-size);
    height: var(--dimen-row-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
}
                            /* --- Shopping Components --- */

            .mock-scroll-area {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            
                        /* Mimics SectionHeader (Store Level) */
                .mock-store-header {
                font-family: 'Roboto';
font-size: var(--font-headline-medium-size);
font-weight: var(--font-headline-medium-weight);
                background-color: var(--header-text);
                color: var(--app-on-surface);
                padding: var(--dimen-spacing-medium) var(--dimen-spacing-medium) var(--dimen-spacing-small);
                text-align: left;
                opacity: 0;
                height: 0;
                will-change: height, opacity, margin;
            }

            /* Mimics SectionHeader (Section Level) */
            .mock-section-header {
                font-family: 'Roboto';
font-size: var(--font-title-large-size);
font-weight: var(--font-title-large-weight);
                background-color: var(--primary-brand);
                color: var(--header-text);
                padding: var(--dimen-spacing-small) var(--dimen-spacing-medium);
                text-align: left;
                opacity: 0;
                height: 0;
                will-change: height, opacity, margin;
            }
            
 
        
        

            /* Mimics StoreRow */
            .mock-store-row {
                display: flex;
                align-items: center;
                gap: var(--dimen-spacing-large);
                padding: var(--dimen-spacing-medium) var(--dimen-spacing-medium);
                background-color: var(--app-surface-elevation-one);
                border-radius: var(--dimen-corner-small);
                overflow: hidden;
                flex-shrink: 0;
                opacity: 0;
                height: 0;
                will-change: height, opacity, margin;
            }

            /* Mimics ItemInfo */
            .mock-item-info {
                display: flex;
                flex-direction: column;
                flex: 1;
                margin-right: var(--dimen-spacing-small);
            }

                        
            .mock-item-subtext {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface-variant);
                margin-top: 2px;
                text-align: left;
            }

            
            /* Mimics ActionControls */
            .mock-action-controls {
                display: flex;
                align-items: center;
                gap: var(--dimen-spacing-large);
            }

            /* Specific styling for the Cart Button to make it pop */
            .mock-cart-btn {
                width: var(--dimen-row-button-size);
                height: var(--dimen-row-button-size);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100px;
                color: var(--header-text);
                background-color: var(--primary-brand);
                fill: var(--header-text);
                transform-origin: center;
            }
            
            .mock-cart-btn svg {
                width: calc(var(--dimen-icon-size));
                height: calc(var(--dimen-icon-size));
                flex-shrink: 0;                
                align-items: center;
                justify-content: center;
            }
        
                .mock-lazy-list-section {
    display: flex;
    flex-direction: column;
    gap: var(--dimen-inventory-row-vert);
    height: 100%;
    overflow: hidden;
}

.mock-lazy-list-section.is-hidden {
    height: 0%;
}
                        .mock-shopping-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--dimen-spacing-large) var(--dimen-spacing-medium);
            background-color: var(--app-surface);
            color: var(--app-on-surface);
            font-family: 'Roboto';
font-size: var(--font-headline-medium-size);
font-weight: var(--font-headline-medium-weight);
        }
                                        
            /* The expanding accordion area */
            .mock-cart-content {
                height: 0px; 
                overflow: hidden;
                display: flex;
                flex-direction: column;
                gap: var(--dimen-shopping-row-vert);
                /* Initial padding is 0, GSAP animates this open */
                padding: 0 var(--dimen-spacing-medium);
            }

            .mock-checkout-button-container {
                position: absolute;
                bottom: var(--dimen-spacing-large);
                left: var(--dimen-spacing-medium);
                right: var(--dimen-spacing-medium);
                background-color: transparent;
                align-items: center;
                justify-content: center;
                display: flex; 
                z-index: 10;
            }

            .mock-btn-checkout {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: var(--dimen-spacing-small);
                width: 95%;
                padding: var(--dimen-spacing-medium);
                border-radius: 100px;
                background-color: var(--app-disabled-button);
                color: var(--app-disabled-button-content);
                font-family: 'Roboto';
font-size: var(--font-title-small-size);
font-weight: var(--font-title-small-weight);
            }
                        /* Mimics CartRow */
            .mock-cart-row {
                display: flex;
                align-items: center;
                gap: var(--dimen-spacing-tiny);
                background-color: var(--app-surface-elevation-one);
                padding: var(--dimen-spacing-tiny) var(--dimen-spacing-medium);
                border-radius: var(--dimen-corner-small);
                /* Hidden initially, GSAP animates height/opacity when added to cart */
                height: 0;
                opacity: 0;
                margin: 0;
                overflow: hidden;
                will-change: height, opacity, margin;
            }

            .mock-cart-row-name {
                flex: 1;
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
                text-decoration: line-through; 
                opacity: 0.7;
            }

            .mock-cart-row-price {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
            }
            

                
                    /* --- Dialog & Overlay Components --- */
            .mock-dialog-scrim {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.4); /* Standard scrim dimming */
                z-index: 50; /* Needs to sit above the TopBar */
                display: flex;
                align-items: center;
                justify-content: center;
                
                /* GSAP hidden state */
                opacity: 0;
                pointer-events: none;
                will-change: opacity;
            }

            /* Mimics AppDialog / BasicAlertDialog */
            .mock-dialog-surface {
                width: 280px;
                background-color: var(--app-dialog-surface);
                border-radius: var(--dimen-corner-large);
                padding: var(--dimen-spacing-extra-large);
                display: flex;
                flex-direction: column;
                gap: var(--dimen-spacing-medium);
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                
                /* GSAP will animate this scale to create a "pop-in" effect */
                transform: scale(0.9); 
                will-change: transform;
            }
            
            .mock-dialog-title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--dimen-spacing-medium);
            }
            
            .mock-dialog-title {
                font-family: 'Roboto';
font-size: var(--font-headline-small-size);
font-weight: var(--font-headline-small-weight);
                color: var(--app-on-surface);
                flex: 1;
                align-items: center;
                justify-content: space-between;
            }
                                    .mock-btn-text {
                display: flex;
                align-items: center;
                gap: 8px;
                line-height: 1;
                color: var(--primary-brand);
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                padding: 10px 12px;
                border-radius: 100px;
            }
                         /* Mimics AppButton (Filled) */
            .mock-btn-primary {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--dimen-spacing-small);
                background-color: var(--primary-brand);
                color: var(--header-text);
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                padding: var(--dimen-spacing-medium) var(--dimen-spacing-extra-large) var(--dimen-spacing-medium) var(--dimen-spacing-extra-large);
                border-radius: 100px;
                height: var(--dimen-row-button-size);
            }


            /* Mimics a LazyColumn of ReceiptItemRows */
            .mock-receipt-list {
                display: flex;
                flex-direction: column;
                max-height: 250px;
                overflow-y: auto;
                overflow-x: hidden;
            }
            
            .mock-receipt-list-title {
                font-family: 'Roboto';
font-size: var(--font-title-medium-size);
font-weight: 700;
                color: var(--app-on-surface);
                padding: var(--dimen-spacing-medium) 0;
            }
            
            .mock-receipt-store-header {
                font-family: 'Roboto';
font-size: var(--font-title-small-size);
font-weight: var(--font-title-small-weight);
                color: var(--primary-brand);
                padding: var(--dimen-spacing-small) 0;
            }
            
            .mock-receipt-section-header {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: 600;
                color: var(--app-on-surface);
                padding-inline-start: var(--dimen-spacing-medium);
                padding-top: var(--dimen-spacing-small);
            }

            /* Mimics ReceiptItemRow */
            .mock-receipt-row {
                display: flex;
                justify-content: space-between;
                line-height: 1.2;
                padding-inline-start: var(--dimen-spacing-large);
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
            }
            
            .mock-receipt-divider {
                height: 2px;
                background-color: var(--app-outline-variant);
                margin: var(--dimen-spacing-small) 0;
            }
            
            .mock-receipt-totals-column {
                display: flex;
                flex-direction: column;
            }
            
            .mock-receipt-subline {
                display: flex;
                justify-content: space-between;
                line-height: 1.2;
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
                padding: 0 0 0 0;
            }

            /* Mimics ReceiptTotalRow */
            .mock-checkout-grand-total {
                display: flex;
                justify-content: space-between;
                font-family: 'Roboto';
font-size: var(--font-title-small-size);
font-weight: 700;
                color: var(--app-on-surface);
            }
            
            .mock-checkout-message {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
                margin-bottom: var(--dimen-spacing-small);
            }

            .mock-dialog-actions {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                gap: var(--dimen-spacing-small);
                margin-top: var(--dimen-spacing-small);
            }
            
            .mock-dialog-actions .mock-btn-text,
            .mock-dialog-actions .mock-btn-primary {
                display: flex;
                align-items: center;
                gap: var(--dimen-spacing-small);
            }
                             /* --- Reports Screen Components --- */
            .mock-report-container {
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
            }
            
                        .mock-report-viewer {
                background-color: var(--app-surface);
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                opacity: 0;
                z-index: 1;
                transform: translateZ(-200px);
                position: absolute;
                inset: 0;
                box-sizing: border-box;
                padding-top: var(--dimen-spacing-medium);
                padding-left: var(--dimen-spacing-large);
                padding-right: var(--dimen-spacing-large);
            }
            
             /* --- Report Data Layout --- */
        
            
            /* Grouped Cards */
            .report-group-card {
                background-color: var(--app-surface);
                overflow: hidden;
            }
            
            .report-indent-1 { padding-left: var(--dimen-dynamic-header-indent-one); }
            .report-indent-2 { padding-left: calc(var(--dimen-dynamic-header-indent-one) * 2); }
            .report-indent-3 { padding-left: calc(var(--dimen-dynamic-header-indent-one) * 3); }
            
            .mock-report-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: var(--dimen-spacing-medium);
                padding-bottom: var(--dimen-spacing-medium);
            }
            
            .mock-report-header-left {
                display: flex;
                flex-direction: column;
            }
            
            .mock-report-month-title {
                font-family: 'Roboto';
font-size: var(--font-title-large-size);
font-weight: 700;
                color: var(--app-on-surface);
                text-transform: capitalize;
                line-height: 1;
            }
            
            .mock-report-total {
                font-family: 'Roboto';
font-size: var(--font-body-large-size);
font-weight: var(--font-body-large-weight);
                color: var(--app-on-surface);
                margin-top: var(--dimen-spacing-medium);
                line-height: 1.1;
            }
            
            .mock-report-item-list {
                display: flex;
                flex-direction: column;
                gap: var(--dimen-spacing-medium);
            }
                        .mock-report-item-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: var(--dimen-spacing-small);
                padding-bottom: var(--dimen-spacing-small);
                padding-right: var(--dimen-spacing-small);
            }
            
            .mock-report-item-left {
                display: flex;
                flex-direction: column;
            }
            
            
            /* Columns for Name/Subtext and Price/Qty */
       

            .item-trailing-col {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }
            
            .mock-report-item-name {
                font-family: 'Roboto';
font-size: var(--font-body-medium-size);
font-weight: 700;
                color: var(--app-on-surface);                
                line-height: 1.4;
            }
            
            .mock-report-item-subtext {
                display: flex;
                gap: var(--dimen-spacing-large);
                align-items: center;
                margin-top: var(--dimen-spacing-small);              
                line-height: 1.4;
            }
            
            .report-item-date {
                font-family: 'Roboto';
font-size: var(--font-label-small-size);
font-weight: var(--font-label-small-weight);
                color: var(--app-on-surface);
            }
            
            .mock-report-item-store {
               font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface-variant);
            }
            
            .mock-report-item-price {
                font-family: 'Roboto';
font-size: var(--font-body-medium-size);
font-weight: 700;
                color: var(--app-on-surface);
            }
            
            .mock-report-item-qty {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--app-on-surface);
            }
                        /* --- Report Config Sheet Specifics --- */
                        
            .report-config-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: var(--dimen-spacing-extra-large);                
                gap: var(--dimen-spacing-medium);
                color: var(--app-on-surface);
            }
            
            .app-tab-row {
                display: flex;
                width: 100%;
                background-color: var(--app-surface);
                border-bottom: 1px solid var(--app-outline-variant);
                justify-content: space-between;
            }
            
            .app-tab {
                flex: 1;
                padding: var(--dimen-spacing-medium-large) var(--dimen-spacing-small);
                margin-right: var(--dimen-spacing-medium);
                text-align: center;
                justify-content: center;
            }
            
            .app-tab.active {
            
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--primary-brand);
                border-bottom: 2px solid var(--primary-brand);
            }
            
            .app-tab.inactive {
                font-family: 'Roboto';
font-size: var(--font-body-small-size);
font-weight: var(--font-body-small-weight);
                color: var(--primary-brand);
            }
            
            .report-config-body {
                height: "auto";
                display: flex;
                flex-direction: column;
                padding: var(--dimen-spacing-extra-large) var(--dimen-spacing-extra-large);
                
                gap: var(--dimen-spacing-small);
                position: relative; /* For dropdown absolute positioning */
            }
       

            .editable-rules-container {
                height: "auto";
                display: flex;
                flex-direction: column;
                width: 100%;
                align-items: center;
                gap: var(--dimen-spacing-medium);
            }
            
            .editable-rule-row {
                display: flex;
                width: 100%;
                align-items: center;
                gap: var(--dimen-spacing-medium);
            }
            
            .rule-index {
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                color: var(--app-on-surface);
                width: 24px;
            }

            .app-small-dropdown {            
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                display: flex;
                align-items: center;
                color: var(--primary-brand);
                background-color: var(--app-surface-elevation-low);
            }

            .spacer { flex-grow: 1; }
            
            .mock-chip-list {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;                
                box-sizing: border-box;
                column-gap: var(--dimen-spacing-medium);
                row-gap: var(--dimen-spacing-small);
                width: 100%;
                align-items: flex-start;
                align-content: flex-start;
            }
            
            .mock-chip {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: var(--dimen-row-button-size);
                padding: 0 var(--dimen-spacing-medium);
                border-radius: var(--dimen-spacing-small);
                font-family: 'Roboto';
font-size: var(--font-label-large-size);
font-weight: var(--font-label-large-weight);
                transition: all 0.2s ease-in-out;
                box-sizing: border-box;
                width: max-content;
                white-space: nowrap;
                flex: 0 0 auto;
            }
            
            .mock-chip.inactive {
                background-color: transparent;
                color: var(--app-on-surface-variant);
                border: 1px solid var(--app-outline-variant);
            }
            
            .mock-chip.active {
                /* Mimics the selected state of M3 FilterChip */
                background-color: var(--app-secondary);
                color: var(--app-on-secondary);
                border: 1px solid transparent;
            }            
                /* The Cropped Window */
.feature-one-stage {
    position: relative;
    width: 100%;
    max-width: 800px; 
    height: 480px; 
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden; 
    display: flex;
    justify-content: flex-start;
}

/* The Scaler */
.mock-side-by-side-container {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    transform-origin: top center;
}

/* The Rigid Phone Bounds */
.mock-phone-frame {
    position: relative;
    box-sizing: border-box;
    width: 398px;
    height: 840px;
    
    border: 8px solid var(--border-color);
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    background-color: var(--app-surface); 
    transform: translateZ(0); 
}

/* Overrides for side-by-side screens */
.mock-phone-frame .mock-screen {
    position: relative;
    
    box-shadow: none;
    border-radius: 0;
    z-index: 1 !important;
    opacity: 1 !important;
}

@media (max-width: 880px) {
    .feature-one-stage {
        justify-content: flex-start; 
        height: 380px; 
    }
    
    .mock-side-by-side-container {
        display: flex;
        gap: 32px;
        margin-top: 32px;
    }
}

@media (max-width: 500px) {
     .feature-one-stage {
        height: 250px; 
    }
}


                .mock-entity-overview {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    height: 100%;
}

.mock-reorderable-list {
    display: flex;
    flex-direction: column;
    gap: var(--dimen-reorderable-list-vert-spacing);
    padding-top: var(--dimen-spacing-large);
    padding-bottom: 80px; /* Space for FAB */
}

.mock-entity-row {
    display: flex;
    align-items: center;
    padding: var(--dimen-reorderable-list-vert-padding) var(--dimen-reorderable-list-horz-padding);
    background-color: var(--app-surface-elevation-one);
    min-height: var(--dimen-reorderable-uncategorized-height);
    gap: var(--dimen-reorderable-list-horz-spacing);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Specific padding for static rows since they don't have a drag handle */
.mock-static-row {
    padding-left: calc(var(--dimen-row-button-size) +  var(--dimen-reorderable-list-horz-padding) *2.5) ; 
}      

.mock-entity-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

/* Style applied by GSAP when actively dragging */
.is-dragging {
    background-color: var(--app-secondary);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}/* --- Feature Two (Reports) Stage --- */
.feature-two-stage {
    position: relative;
    width: 100%;
    /* Narrowed the max-width so the grocery list doesn't stretch too far horizontally */
    max-width: 420px; 
    height: 520px; /* Slight bump in height to give the list room to breathe */
    margin: 0 auto;
    border-radius: var(--dimen-corner-large);
    overflow: hidden;
    background-color: var(--app-surface);
    /* Add a nice soft drop shadow and subtle border so it pops off the page */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--outline-variant);
    padding-top: var(--dimen-spacing-large);
    padding-left: var(--dimen-spacing-large);
    padding-right: var(--dimen-spacing-large);
}

            /* The Feature Three Stage */
            .feature-three-stage {
                position: relative;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 24px;
            }

            /* Partial Phone Frame */
            .mock-partial-phone-frame {
                position: relative;
                box-sizing: border-box;
                width: 398px; 
                border: 8px solid var(--border-color);
                border-radius: 36px 36px 0 0;
                overflow: hidden;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
                background-color: var(--app-surface);
                transform: translateZ(0);
            }
            
            /* Override for inner screen inside a partial frame */
            .mock-partial-phone-frame .mock-screen {
                position: relative;
                box-shadow: none;
                border-radius: 0;
                z-index: 1 !important;
                opacity: 1 !important;
            }
            
            /* --- The Magnifier Lens --- */
            .mock-magnifier-lens {
                position: absolute;
                top: 15%;
                right: 55%;
                width: 35%;
                height: 41%;
                border-radius: 50%;
                border: 4px solid var(--app-on-surface);
                background-color: var(--app-surface-elevation-two);
                z-index: 100;
                display: flex;
                align-items: center;
                justify-content: center;
                /* GSAP initial hidden state */
                opacity: 0;
                transform: scale(0.5);
                pointer-events: none;
                will-change: transform, opacity;
            }
            
            .mock-magnifier-content {
                transform: scale(1.6);
                display: flex;
                flex-direction: column;
                color: var(--app-on-surface);
                align-items: center;
                width: max-content;
            }
            
            
            .mock-target-ring {
                position: absolute;
                /* You will need to tweak these to sit exactly over your stepper */
                top: 30.5%;
                right: 13.5%;
                width: 21%;
                height: 25%;
                border: 2px solid var(--app-on-surface);
                border-radius: 50%;
                z-index: 100;
                opacity: 0;
                transform: scale(0.5);
                pointer-events: none;
                will-change: transform, opacity;
            }

            /* --- The Connecting Lines --- */
            .mock-callout-lines {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 99; /* Sit just below the lens and ring */
                pointer-events: none;
                opacity: 0;
                will-change: opacity;
            }
            
            .mock-callout-lines line {
                stroke: var(--app-on-surface);
                stroke-width: 1.5;
                opacity: 0.6;
            }
            
            /* --- Target Editor Bottom Sheet --- */
            .mock-target-editor-sheet {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: var(--app-dialog-surface);
                padding: var(--dimen-spacing-small) var(--dimen-spacing-large) 7.5% var(--dimen-spacing-large);
                box-sizing: border-box;
                z-index: 210;
                
                /* GSAP Initial State: Hidden below the frame */
                transform: translateY(100%);
                will-change: transform;
            }

            .mock-editor-desc {
                font-family: 'Roboto';
font-size: var(--font-body-medium-size);
font-weight: var(--font-body-medium-weight);
                color: var(--app-on-surface-variant);
                margin-bottom: var(--dimen-spacing-medium);
                text-align: left;
            }
            
                    
        .mock-outlined-textfield {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: var(--dimen-dropdown-size);
                border: 1px solid var(--app-outline);
                border-radius: 4px;
                background-color: transparent;
                box-sizing: border-box;
            }

            .mock-textfield-label {
                position: absolute;
                top: -12%;
                left: 2.5%;
                background-color: var(--app-dialog-surface);
                padding: 0 4px;
                font-family: 'Roboto';
font-size: var(--font-label-small-size);
font-weight: var(--font-label-small-weight);
                color: var(--app-outline);
                line-height: 1;
                z-index: 1;
            }

            .mock-textfield-leading-icon {
                width: var(--dimen-icon-size);
                height: var(--dimen-icon-size);
                margin-left: var(--dimen-leading-trailing-icon-horizontal-padding);
                margin-right: var(--dimen-leading-trailing-icon-horizontal-padding);
                fill: var(--app-on-surface-variant);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mock-textfield-value {
                font-family: 'Roboto';
font-size: var(--font-body-large-size);
font-weight: var(--font-body-large-weight);
                color: var(--app-on-surface);
                flex: 1;
                text-align: left;
                scale: 1.0;
            }