wineater-bot 3.9.4 → 4.0.0-beta.3

package/docs/SVELTE.md

@@ -0,0 +1,146 @@
+# ADR: Migrating the Widget to Svelte
+
+**Date:** 23.11.2025  
+**PR:** https://github.com/Wineater/wineater-bot/pull/1
+
+## Context
+
+Historically, the Wineater widget was written in plain JavaScript. The code was rewritten multiple times while product hypotheses were being tested. As a result:
+
+- The widget became hard to maintain: the business logic was obscured by a large amount of DOM‑manipulation boilerplate.
+- The codebase contained a lot of legacy, unused code.
+- Making changes required deep knowledge of implementation details, raising the onboarding cost for new developers.
+
+To reduce project-specific knowledge and simplify maintenance, we decided to move to a framework with:
+
+- Clear documentation,
+- Declarative UI,
+- Built-in reactivity.
+
+At the time of the decision:
+
+- The widget must be embeddable on client sites (as a script) and stay very small in terms of JS bundle size.
+- We need to be able to quickly experiment with UI and business logic without accumulating more low-level DOM boilerplate.
+- Migration of services from JS to TS had already started, and a clear separation between business logic and the framework was important.
+
+Changes made as part of this migration:
+
+1. Removed unused code that was not referenced anywhere.
+2. Improved the “wine” entity handling:
+   - Previously, the instant/search APIs returned different shapes (e.g. instant: `ID`, `Title`; search: `id`, `title`), which caused many conditional checks and branches in the code.
+   - Introduced deserialization in the data access layer, so the UI layer always works with a consistent wine entity.
+3. Language switching no longer reloads the page; state is managed via a global store and Svelte reactivity.
+4. Currency formatting is now done via the standard browser `Intl` API, reducing custom code and localization bugs.
+5. All services were migrated from JS to TypeScript and rewritten to not depend on the framework (Svelte is used only at the UI layer).
+6. Introduced the global `app-store` for API‑loaded config and helper methods to access it.
+
+Current limitations / technical debt:
+
+- `App.svelte` is too large and holds too many responsibilities.
+- Popup translations and some animations (search placeholder) still manipulate the DOM directly instead of using Svelte’s reactive state.
+- A significant amount of code was migrated “as is” from the old codebase to avoid blocking the migration; it still needs structural refactoring.
+
+## Alternatives
+
+Framework options considered:
+
+1. **React**
+   - Pros:
+     - Already used in other products of the startup.
+     - Large ecosystem and community.
+   - Cons:
+     - Relatively heavy runtime and bundle size for a small embedded widget.
+     - DX (as of 2025) is not ideal for a lightweight embeddable widget.
+     - Typically requires more wiring (hooks, context, styling solutions), which leads to additional boilerplate.
+
+2. **Vue**
+   - Pros:
+     - Good DX, relatively low learning curve.
+     - Lighter and faster than React at runtime.
+   - Cons:
+     - Still relatively heavy for a very small, embeddable widget.
+     - Keeps a runtime library in the bundle, increasing overall JS size.
+
+3. **Svelte** (chosen)
+   - Pros:
+     - Compiles to “plain” JS and effectively disappears as a framework at runtime (no heavy runtime library).
+     - Much smaller JS payload, which is critical for a widget.
+     - Built-in reactivity, templating, and styling support, which reduces external boilerplate.
+     - Helps separate business logic (services, store) from the presentation layer.
+   - Cons:
+     - Smaller ecosystem compared to React/Vue.
+     - Fewer developers on the market with Svelte experience.
+
+4. **Stay on plain JS** (status quo)
+   - Pros:
+     - No framework dependency.
+     - Maximum control over DOM and the bundle.
+   - Cons:
+     - High volume of DOM‑manipulation boilerplate.
+     - Hard to maintain, high cost of change.
+     - Low readability of business logic.
+
+## Decision
+
+We decided to rewrite the widget’s client-side code using **Svelte**, while keeping:
+
+- Type‑safe business logic and services in TypeScript, independent from the framework.
+- A lightweight, compiled UI layer without a heavy runtime.
+
+Key aspects of the decision:
+
+- **Framework:** Svelte is chosen as the best compromise between DX, performance, and bundle size for an embeddable widget.
+- **Architecture:**
+  - Introduce a global `app-store` to keep config and shared state.
+  - Keep services (API calls, deserialization, etc.) outside of the UI layer and independent of Svelte.
+- **Compatibility:**
+  - We still generate a UMD bundle for historical reasons. If UMD is no longer used in the future, this format can be removed from the build configuration.
+- **Functional changes within this migration:**
+  - Unified wine data model.
+  - Language switching without full page reload.
+  - Currency formatting via `Intl`.
+
+## Expectations
+
+High-level expectations from this decision:
+
+1. **Simpler maintenance and onboarding**
+   - Business logic is easier to understand thanks to declarative Svelte UI and reactivity.
+   - New developers can rely on framework documentation instead of project-specific DOM patterns.
+
+2. **Smaller bundle and better performance for an embeddable widget**
+   - Svelte compiles away, reducing runtime overhead compared to heavier frameworks.
+   - Unified data model and removal of unused code reduce complexity and runtime branching.
+
+3. **Faster and safer product experimentation**
+   - Clear separation between services, store, and UI makes it easier to iterate on features without destabilizing the widget.
+   - Shared architecture across clients enables more customized UIs with controlled complexity.
+
+## Technical Debt and Planned Improvements
+
+The following items are explicitly acknowledged as technical debt or future improvement areas, not as part of the initial migration scope:
+
+1. **UI structure and DOM usage**
+   - `App.svelte` is too large and should be decomposed into smaller, focused components.
+   - Remaining direct DOM manipulations (popup translations, search placeholder animations, etc.) should be replaced with reactive Svelte patterns.
+
+2. **State management**
+   - Reduce coupling between the global state and other modules.
+   - Split the single global store into several domain-specific stores (e.g., language, config, session, search results).
+
+3. **Testing and typing**
+   - Increase end-to-end (E2E) test coverage for critical flows (embedding, search, language switching, recommendations).
+   - Gradually improve TypeScript typings at boundaries between services and UI to catch more issues at compile time.
+
+4. **Localization**
+   - Implement a translation mechanism that does not require passing the locale explicitly through every call, relying instead on a centralized locale context/store.
+
+5. **Logging and observability**
+   - Improve the logger so that events from local development do not pollute production analytics/logs (environment-aware logging).
+
+6. **Configuration and deployment hygiene**
+   - Move hardcoded `CLIENT_TOKEN` into environment variables, so credentials are not hardcoded in the HTML files.
+   - Introduce project/environment configurations and store `WIDGET_TYPE` and similar parameters there instead of hardcoding them in HTML/JS.
+   - Remove per-environment HTML files currently added for each Vercel environment and replace them with a single entry point plus configuration-driven behavior.
+
+These items should be addressed iteratively in follow-up work, once the Svelte migration is stable and validated in production.

package/e2e/demo.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});

package/eslint.config.js

@@ -0,0 +1,41 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

package/index.html

@@ -1,14 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
-    <script>window.wineaterData = {CLIENT_TOKEN: 'l3yovIe7qdAkOCO9ZJMb0sOZLWJArwQkHkeC5Fj7IBox5GPGJoaL32dC4WRQ4Yli', WIDGET_TYPE: 'bar'};</script>
-        <!-- <script type="module" src="./dist/wineater-chatbot.umd.js"></script> -->
+    <!-- TODO: replace later with __WINEATER_WIDGET_DATA__ -->
+    <script>window.wineaterData = { CLIENT_TOKEN: 'l3yovIe7qdAkOCO9ZJMb0sOZLWJArwQkHkeC5Fj7IBox5GPGJoaL32dC4WRQ4Yli', WIDGET_TYPE: 'bar' };</script>
+    <!-- Production checks -->
+    <!-- <script type="module" src="./dist/wineater-chatbot.mjs"></script>
+    <link rel="stylesheet" href="./dist/wineater-chatbot.css"> -->
+
+    <!-- Local development -->
     <script type="module" src="./src/index.js"></script>
 </head>
+
 <body style="margin: 0;">
-    <div id="wineater-widget-conteiner"></div> <!-- Контейнер для виджета -->
+    <div id="wineater-widget-conteiner"></div>
 </body>
+
 </html>

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "wineater-bot",
-  "version": "3.9.4",
+  "version": "4.0.0-beta.3",
   "description": "",
-  "main": "dist/index.js",
+  "main": "dist/wineater-chatbot.umd.js",
   "module": "src/index.js",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",
-    "release:major": "npm version major && npm publish"
+    "release:major": "npm version major && npm publish",
+    "release:beta": "npm version prerelease --preid=beta && npm run build && npm publish --tag beta",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test:e2e": "playwright test"
   },
   "keywords": [],
   "author": "",
@@ -17,9 +24,27 @@
   "dependencies": {
     "@openreplay/tracker": "^14.0.4",
     "flagsmith": "^7.0.2",
-    "vite": "^5.2.9"
+    "vite": "^5.2.9",
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "rollup-plugin-postcss": "^4.0.2"
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.36.0",
+    "@playwright/test": "^1.55.1",
+    "@types/node": "^22",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.12.4",
+    "globals": "^16.4.0",
+    "playwright": "^1.55.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript-eslint": "^8.44.1",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vitest": "^3.2.4",
+    "vitest-browser-svelte": "^1.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0"
   }
 }

package/playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'e2e'
+});

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

package/src/App.svelte

@@ -0,0 +1,394 @@
+<script lang="ts">
+	import { setCookie, setUniqueUserCookie, trackWidgetEvent } from './services/analytics/analytics';
+	import Tracker from '@openreplay/tracker';
+	import type { RecommendedWine, Wine, WineId } from './services/api/api';
+	import { wineaterApi } from './services/api/api';
+	import { onMount } from 'svelte';
+	import { WIDGET_EVENTS } from './services/analytics/constants';
+	import Header from './components/Header.svelte';
+	import Footer from './components/Footer.svelte';
+	import Search from './components/Search.svelte';
+	import Loader from './components/Loader.svelte';
+	import WineTile from './components/WineTile.svelte';
+	import { appStore } from './services/store/app-store.svelte';
+	import { getTranslation, translateTexts } from './services/i18n/i18n';
+
+	function initCookies() {
+		setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
+		setUniqueUserCookie();
+	}
+
+	const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
+	const tracker = new Tracker({ projectKey: 'PA8j9fAi49i6g2QnvpNs', __DISABLE_SECURE_MODE: true });
+	tracker.start();
+	initCookies();
+
+	const widgetType = window?.wineaterData?.WIDGET_TYPE || 'store';
+	const countryCode = window?.wineaterData?.COUNTRY_CODE || null;
+	const widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner';
+
+	let initialized = $state(false);
+	let isLoading = $state(false);
+	let results = $state<RecommendedWine[] | Wine[]>([]);
+	let selectedWineId = $state<WineId>(null);
+	let searchQuery = $state('');
+	let errorMessage = $state(null);
+	let isAnimating = $state(false);
+	let hoveredWineId = $state(null);
+	let translatedPopups = $state([]);
+	let appLanguage = $derived(appStore.getAppLanguage());
+	let storeLanguage = $derived(appStore.getStoreLanguage());
+	let apiKey = $derived(appStore.getApiKey());
+	let storeId = $derived(appStore.getStoreId());
+	let isStoreInitialized = $derived(appStore.isInitialized());
+
+	function setSearchError() {
+		errorMessage = getTranslation({ key: 'errorMessage', lang: appLanguage });
+	}
+
+	const clearError = () => (errorMessage = null);
+
+	// Returns an array of translated fields for each wine
+	async function translatePopupContent(wines: RecommendedWine[] | Wine[]) {
+		if (appLanguage === storeLanguage || widgetType !== 'bar') {
+			return wines.map(() => ({}));
+		}
+
+		const possibleFields = ['shortDescription', 'reason', 'pairingRecommendation', 'tags'];
+		const firstWine = wines[0];
+		if (!firstWine) return wines.map(() => ({}));
+		const fieldsToTranslate = possibleFields.filter((field) => field in firstWine);
+		const batchSize = 4;
+		const translatedResults = [];
+
+		for (let i = 0; i < wines.length; i += batchSize) {
+			const batch = wines.slice(i, i + batchSize);
+			const translationPromises = batch.map(async (wine: Wine | RecommendedWine) => {
+				const entries = fieldsToTranslate
+					.map((field) => {
+						const val = wine[field] || wine[field.toLowerCase()];
+						if (!val) return null;
+						return {
+							key: field,
+							text: Array.isArray(val) ? val.join(', ') : val
+						};
+					})
+					.filter(Boolean);
+
+				if (entries.length === 0) return {};
+
+				const translated = await translateTexts({
+					sourceLang: storeLanguage,
+					targetLang: appLanguage,
+					texts: Object.fromEntries(entries.map((entry) => [entry.key, entry.text])),
+					apiKey: apiKey
+				});
+				return translated;
+			});
+			const batchTranslations = await Promise.all(translationPromises);
+			translatedResults.push(...batchTranslations);
+		}
+		return translatedResults;
+	}
+
+	async function loadInstantRecommendations() {
+		isLoading = true;
+		try {
+			results = await wineaterApi.getInstantRecommendations();
+		} catch (error) {
+			setSearchError();
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	// Простая функция-анимация: поднимаем карточки и ждём
+	function animateClearAll(duration = 220): Promise<void> {
+		if (!results || results.length === 0) return Promise.resolve();
+		isAnimating = true;
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				resolve();
+			}, duration);
+		});
+	}
+
+	async function handleSearch(event) {
+		event.preventDefault();
+
+		let query = '';
+		try {
+			isLoading = true;
+			clearError();
+
+			// шаг 1: плавно поднять карточки
+			await animateClearAll(220);
+
+			// шаг 2: очистить список и сбросить флаг
+			results = [];
+			isAnimating = false;
+
+			query = searchQuery.trim() + ';';
+			try {
+				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
+			} catch (error) {
+				console.error('Error tracking search event:', error);
+			}
+
+			const searchResults = await wineaterApi.getWineRecommendationsSearch(query);
+
+			if (!searchResults || searchResults.length === 0) {
+				results = [];
+				translatedPopups = [];
+				errorMessage = getTranslation({ key: 'noResultsMessage', lang: appLanguage });
+
+				trackWidgetEvent(WIDGET_EVENTS.NO_RESULTS_FOUND, storeId, { query });
+			} else {
+				results = searchResults;
+				trackWidgetEvent(WIDGET_EVENTS.SEARCH_RESULTS_DISPLAYED, storeId, {
+					results_count: searchResults.length,
+					results: searchResults,
+					query
+				});
+			}
+		} catch (error) {
+			results = [];
+			trackWidgetEvent(WIDGET_EVENTS.ERROR_OCCURRED, storeId, {
+				error_message: error?.message,
+				query
+			});
+			setSearchError();
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$effect(async () => {
+		// whenever results change, recompute translatedPopups asynchronously
+		if (!results || results.length === 0) {
+			translatedPopups = [];
+			return;
+		}
+		// run translation in background; ignore errors but keep latest mapping
+		try {
+			const translated = await translatePopupContent(results);
+			// guard against results having changed again while we awaited
+			if (results && results.length > 0) {
+				translatedPopups = translated;
+			}
+		} catch (e) {
+			console.error('translatePopupContent failed', e);
+		}
+	});
+
+	function handleBuyBtnClick(wine: Wine | RecommendedWine, index: number) {
+		// Close all other popups
+		if (selectedWineId && selectedWineId !== wine.id) {
+			selectedWineId = null;
+		}
+
+		selectedWineId = wine.id;
+
+		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_VIEWED, storeId, {
+			wine_id: wine.id,
+			wine_title: wine.title,
+			is_mobile: window.innerWidth <= 768
+		});
+	}
+
+	function closePopup() {
+		const wine = results.find((w) => w.id === selectedWineId);
+		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_CLOSED, storeId, {
+			wine_id: selectedWineId,
+			wine_title: wine.title
+		});
+		selectedWineId = null;
+	}
+
+	function hasHoverPopupContent(wine: Wine | RecommendedWine) {
+		return !!(wine.reason || wine.shortDescription || wine.tags);
+	}
+
+	function onTileEnter(wine: Wine | RecommendedWine) {
+		if (widgetType === 'store' && hasHoverPopupContent(wine)) {
+			hoveredWineId = wine.id;
+			trackWidgetEvent(WIDGET_EVENTS.WINE_CARD_HOVER, storeId, {
+				wine_id: wine.id,
+				wine_title: wine.title
+			});
+		}
+	}
+
+	function onTileLeave(wine: Wine | RecommendedWine) {
+		if (widgetType === 'store' && hoveredWineId === wine.id) hoveredWineId = null;
+	}
+
+	function onTileClick(event, wine: Wine | RecommendedWine) {
+		// Don't track clicks on buy buttons or close buttons
+		if (event.target.closest('.buy-btn') || event.target.closest('.card-popup-close')) {
+			return;
+		}
+
+		trackWidgetEvent(WIDGET_EVENTS.WINE_CARD_CLICK, storeId, {
+			wine_id: wine.id,
+			wine_title: wine.title
+		});
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		const isInsidePopup = target.closest('.card-popup') || target.closest('.buy-btn');
+
+		if (!isInsidePopup) {
+			selectedWineId = null;
+		}
+	}
+
+	onMount(async () => {
+		// initialize store first
+		await appStore.initializeStore();
+		if (!isStoreInitialized) return;
+
+		// Set dynamic color variable from widget data
+		const customColor = window?.wineaterData?.COLOR || '#7B2BEB';
+		document.documentElement.style.setProperty('--wineater-color', customColor);
+
+		await loadInstantRecommendations();
+		trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
+		initialized = true;
+
+		// Add global click listener for closing popups
+		document.addEventListener('click', handleClickOutside);
+
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+</script>
+
+{#if isStoreInitialized}
+	<div id="wine-widget-container" class="svelte-wineater-widget-container">
+		<div class="wine-widget-wrapper">
+			<Header />
+
+			<Search bind:searchQuery onSubmit={handleSearch} {initialized} />
+
+			{#if isLoading}
+				<Loader />
+			{/if}
+
+			<div id="wine-widget-right">
+				{#if errorMessage}
+					<div class="error-message">
+						<p>{errorMessage}</p>
+					</div>
+				{:else if results && results.length > 0}
+					<div id="wine-placeholder">
+						{#each results as wine, index}
+							<WineTile
+								{wine}
+								{index}
+								{hoveredWineId}
+								{selectedWineId}
+								{isAnimating}
+								translatedPopup={translatedPopups[index]}
+								onBuyClick={handleBuyBtnClick}
+								onPopupClose={closePopup}
+								{onTileEnter}
+								{onTileLeave}
+								{onTileClick}
+							/>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<Footer {countryCode} />
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* ===================== 0) Font Import ===================== */
+	@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
+
+	/* ===================== 1) CSS Variables ===================== */
+	:global(:root) {
+		--wineater-corp-color: #0044ff;
+		--wineater-color: #7b2beb;
+	}
+
+	/* ===================== 2) Global Styles ===================== */
+	:global(*) {
+		box-sizing: border-box;
+	}
+
+	:global(.hidden) {
+		display: none;
+	}
+
+	/* ===================== 3) Widget Container ===================== */
+	#wine-widget-container {
+		display: flex;
+		gap: 24px;
+		font-family: 'Bricolage Grotesque', sans-serif;
+		padding: 12px 12px 0px;
+		border-radius: 16px;
+		background-color: #fff;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+		max-width: 1024px;
+		min-width: 1024px;
+		min-height: 500px;
+		margin: 40px auto;
+		position: relative;
+		box-sizing: border-box;
+	}
+
+	#wine-widget-container :global([class^='icon-']),
+	#wine-widget-container :global([class*=' icon-']) {
+		font-family: 'Bricolage Grotesque', sans-serif !important;
+	}
+
+	.wine-widget-wrapper {
+		width: 100%;
+	}
+
+	#wine-widget-right {
+		position: relative;
+		min-height: 300px;
+	}
+
+	#wine-placeholder {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 0;
+		align-items: stretch;
+		margin-bottom: 0;
+	}
+
+	/* ===================== 12) Error Message ===================== */
+	.error-message {
+		text-align: center;
+		padding: 24px;
+		color: #666;
+	}
+
+	/* ===================== 13) Mobile Styles ===================== */
+	@media screen and (max-width: 768px) {
+		#wine-widget-container {
+			flex-direction: column;
+			padding: 0px 16px;
+			min-width: 100vw;
+		}
+
+		#wine-placeholder {
+			display: flex;
+			gap: 8px;
+			overflow-x: auto;
+			scroll-snap-type: x mandatory;
+			padding: 8px 0;
+			width: calc(100vw - 32px);
+			min-width: calc(100vw - 32px);
+		}
+	}
+</style>