/* Storefront MVP — mobile-first styles */

/* Base */
body {
    background-color: #f8f9fa;
    -webkit-text-size-adjust: 100%;
}

/* Touch-friendly tap targets */
button, a, .mantine-Button-root, .mantine-ActionIcon-root {
    min-height: 44px;
    min-width: 44px;
}

/* Offer cards */
.offer-card {
    border-left: 4px solid #228be6;
}

/* Save button heart animation */
.bi-heart-fill {
    color: #e03131;
}

/* Store page hero */
.store-hero {
    border-radius: 12px;
    overflow: hidden;
}
.store-hero img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Charts: prevent overflow on mobile */
.js-plotly-plot, .plotly {
    width: 100% !important;
}
.js-plotly-plot .plotly .main-svg {
    width: 100% !important;
}

/* AG Grid: horizontal scroll on mobile */
.ag-root-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* QR code centered on mobile */
.qr-container {
    text-align: center;
}
.qr-container img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

/* Compact padding on small screens */
@media (max-width: 768px) {
    .mantine-Container-root {
        padding-left: 12px;
        padding-right: 12px;
    }
    .mantine-Card-root {
        padding: 12px !important;
    }
    .mantine-AppShell-main {
        padding-left: 8px;
        padding-right: 8px;
    }
}