@media (max-width: 600px) {
    #product-container.mobile-tiles {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: min-content;
        gap: 10px;
        padding: 10px 2px;
        width: 100%;
    }
    .tile-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius: 12px;
        background: #f6f7fa;
		color: #222;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.07);
        padding: 7px 2px 2px 2px;   /* <- smaller bottom padding */
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        width: 100%;
        cursor: pointer;
        transition: box-shadow 0.18s;
    }
    .tile-mobile:active {
        box-shadow: 0 4px 18px 0 rgba(0,0,0,0.12);
    }
    .tile-img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        background: #f3f3f6;
        border-radius: 7px;
        margin-bottom: 1px; /* Less space below */
        margin-top: 1px;    /* Less space above */
        display: block;
    }
    .tile-info {
        width: 100%;
        text-align: center;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.05;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .tile-title {
        font-size: 0.97em;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 96%;
        margin: 0 0 2px 0;
        line-height: 1.08;
    }
    .tile-price-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        width: 100%;
        margin-bottom: 1px;
        font-size: clamp(0.84em, 2vw, 1em);
    }
    .tile-msrp {
        color: #e85757 !important;
        text-decoration: line-through;
        font-size: .97em;
        margin-right: 5px;
        font-weight: 400;
        line-height: 1;
        flex-shrink: 0;
    }
    .tile-price {
        color: #19bb39 !important;
        font-weight: bold;
        font-size: 1.13em;
        flex-shrink: 1;
        line-height: 1;
    }
    .tile-stock {
        font-size: .78em;
        color: #222;
        margin-top: 2px;
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
	body.dark-mode .tile-mobile {
		background: #222428;
		color: #eee;
	}
	body.dark-mode .tile-stock {
		color: #eee; 
	}	
}

/* ===== Responsive Product Grid ===== */
@media (max-width: 768px) {
    .product-container,
    .grid-view {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;  /* 2 tiles per row, adjust to 3 if you prefer */
        gap: 10px !important;
        padding: 10px !important;
        max-width: 100vw !important;
    }
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 170px !important;           /* Short height for tiles */
        min-height: unset !important;
        margin: 0 !important;
        border-radius: 12px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .card {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .card-img-top {
        height: 64px !important;
        width: auto !important;
        max-width: 80px !important;
        object-fit: contain !important;
        margin-bottom: 4px;
        display: block;
    }
    .card-body {
        padding: 0 !important;
        font-size: 0.95em;
        width: 100%;
        text-align: center;
    }
    .card-title, .brand-text, .category, .aisle-info, .bay-info, .desc-info, .flip-button, .add-to-cart, .store-info-wrapper, .check-all-stores-link, .amazon-search-link, .ebay-sold-link, .barcode-canvas, .card-text:not(.card-price):not([data-show]) {
        display: none !important; /* Hide all but price/stock */
    }
    .card-price {
        display: block !important;
        margin: 0;
        font-size: 1.15em;
        font-weight: bold;
        color: #19bb39;
        text-align: center;
    }
    .card-price span {
        display: inline;
        max-width: unset;
        text-overflow: unset;
        white-space: normal;
    }
    /* Show stock info if you want */
    .stock-info-tile {
        font-size: 0.9em;
        color: #333;
        margin-top: 2px;
    }
}

@media (max-width: 600px) {
    .modal-product-card,
    .modal-product-card .card,
    .modal-product-card .card-img-top,
    .modal-product-card .card-body {
        /* Reset overrides */
        width: auto !important;
        max-width: 95vw !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        border-radius: 12px !important;
        background: #222 !important;
        box-shadow: 0 2px 22px 0 rgba(0,0,0,0.25) !important;
        padding: 10px !important;
        margin: 0 auto !important;
    }
    .modal-product-card .card-img-top {
        max-height: 180px !important;
        width: 100% !important;
        margin: 0 auto 10px auto !important;
        object-fit: contain !important;
    }
    .modal-product-card .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    #mobile-full-card-modal,
    #mobile-full-card-modal * {
        font-size: 1em !important;
        line-height: 1.17 !important;
    }
    #mobile-full-card-modal .modal-product-details {
        padding: 8px !important;
        max-width: 97vw !important;
        width: 325px !important;
    }
    #mobile-full-card-modal img {
        max-height: 120px !important;
        margin-bottom: 8px !important;
    }
    #mobile-full-card-modal .modal-barcode-canvas {
        height: 50px !important;
        margin: 9px auto 8px auto !important;
    }
    #mobile-full-card-modal button {
        padding: 8px 0 !important;
        font-size: 1em !important;
    }
	#mobile-full-card-modal .modal-barcode-canvas {
        height: 74px !important;          /* Was 50px, now noticeably larger */
        max-width: 96% !important;
        margin: 14px auto 12px auto !important;
        display: block;
    }
}