diff --git a/arma/client/addons/store/ui/_site/index.html b/arma/client/addons/store/ui/_site/index.html index dfa4c5c..33ad3e4 100644 --- a/arma/client/addons/store/ui/_site/index.html +++ b/arma/client/addons/store/ui/_site/index.html @@ -1,149 +1,61 @@ + + + + FORGE Supply Exchange + - + return fetch(path).then((response) => { + if (!response.ok) { + throw new Error("Failed to load " + path); + } - -
- -
- -
-

Supply Store

-

Equipment & Resources

-
-
- Available Funds - $45,750 -
-
- - -
-
+ return response.text(); + }); + } - -
- -
-
-

Categories

-
-
-
- - - - - -
-
-
+ function appendStyle(css) { + const style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); + } - -
-
-

Available Items

-
- -
-
-
-
- -
-
-
+ function appendScript(js) { + const script = document.createElement("script"); + script.text = js; + document.head.appendChild(script); + } - - -
-
- - - + Promise.all(styleFiles.map(requestText)) + .then((styles) => { + styles.forEach(appendStyle); + return Promise.all(scriptFiles.map(requestText)); + }) + .then((scripts) => { + scripts.forEach(appendScript); + }) + .catch((error) => { + console.error( + "[Store UI] Failed to load site assets.", + error, + ); + }); + + + +
+ diff --git a/arma/client/addons/store/ui/_site/script.js b/arma/client/addons/store/ui/_site/script.js index b2d0ee6..6a109a2 100644 --- a/arma/client/addons/store/ui/_site/script.js +++ b/arma/client/addons/store/ui/_site/script.js @@ -1,337 +1,758 @@ -/** - * Store Interface - * Handles item browsing, cart management, and purchases - */ - -// Mock data -const mockData = { - balance: 45750, - items: [ - // Weapons - { id: 1, name: "Assault Rifle", category: "weapons", image: "", price: 2500 }, - { id: 2, name: "Sniper Rifle", category: "weapons", image: "", price: 4500 }, - { id: 3, name: "SMG", category: "weapons", image: "", price: 1800 }, - { id: 4, name: "Pistol", category: "weapons", image: "", price: 800 }, - { id: 5, name: "Shotgun", category: "weapons", image: "", price: 1500 }, - { id: 6, name: "LMG", category: "weapons", image: "", price: 3500 }, - { id: 7, name: "Grenade Launcher", category: "weapons", image: "", price: 5000 }, - { id: 8, name: "Rocket Launcher", category: "weapons", image: "", price: 8000 }, - - // Equipment - { id: 9, name: "Body Armor", category: "equipment", image: "", price: 3000 }, - { id: 10, name: "Helmet", category: "equipment", image: "", price: 1200 }, - { id: 11, name: "Night Vision", category: "equipment", image: "", price: 2500 }, - { id: 12, name: "GPS Device", category: "equipment", image: "", price: 800 }, - { id: 13, name: "Radio", category: "equipment", image: "", price: 600 }, - { id: 14, name: "Backpack", category: "equipment", image: "", price: 500 }, - - // Medical - { id: 15, name: "First Aid Kit", category: "medical", image: "", price: 400 }, - { id: 16, name: "Med Kit", category: "medical", image: "", price: 1000 }, - { id: 17, name: "Bandages", category: "medical", image: "", price: 150 }, - { id: 18, name: "Morphine", category: "medical", image: "", price: 300 }, - { id: 19, name: "Blood Bag", category: "medical", image: "", price: 500 }, - - // Supplies - { id: 20, name: "Ammunition Box", category: "supplies", image: "", price: 800 }, - { id: 21, name: "Explosive Charges", category: "supplies", image: "", price: 1500 }, - { id: 22, name: "Toolkit", category: "supplies", image: "", price: 600 }, - { id: 23, name: "Food Rations", category: "supplies", image: "", price: 200 }, - { id: 24, name: "Water Canteen", category: "supplies", image: "", price: 150 } - ] -}; - -// State -let cart = []; -let selectedCategory = 'all'; -let searchQuery = ''; - -// Initialize -function initStore() { - console.log('Store interface initializing...'); - - setupEventHandlers(); - renderItems(); - updateBalance(); - - console.log('Store interface initialized'); -} - -// Event Handlers -function setupEventHandlers() { - // Close button - const closeBtn = document.querySelector('.close-btn'); - if (closeBtn) { - closeBtn.addEventListener('click', () => { - console.log('Closing store...'); - sendEvent('store::close', {}); - }); - } - - // Cart toggle - const cartToggle = document.getElementById('cartToggle'); - const cartPanel = document.getElementById('cartPanel'); - const storeContent = document.querySelector('.store-content'); - - if (cartToggle && cartPanel) { - cartToggle.addEventListener('click', () => { - const isOpen = cartPanel.style.display !== 'none'; - cartPanel.style.display = isOpen ? 'none' : 'flex'; - storeContent.classList.toggle('cart-open', !isOpen); - }); - } - - // Category filters - const categoryItems = document.querySelectorAll('.category-item'); - categoryItems.forEach(item => { - item.addEventListener('click', () => { - categoryItems.forEach(c => c.classList.remove('active')); - item.classList.add('active'); - selectedCategory = item.dataset.category; - renderItems(); - }); - }); - - // Search - const searchInput = document.getElementById('searchInput'); - if (searchInput) { - searchInput.addEventListener('input', (e) => { - searchQuery = e.target.value.toLowerCase(); - renderItems(); - }); - } - - // Clear cart - const clearCartBtn = document.getElementById('clearCart'); - if (clearCartBtn) { - clearCartBtn.addEventListener('click', () => { - if (confirm('Clear all items from cart?')) { - cart = []; - renderCart(); - updateCartCount(); - } - }); - } - - // Checkout - const checkoutBtn = document.getElementById('checkoutBtn'); - if (checkoutBtn) { - checkoutBtn.addEventListener('click', handleCheckout); - } -} - -// Render items -function renderItems() { - const itemsGrid = document.getElementById('itemsGrid'); - if (!itemsGrid) return; - - itemsGrid.innerHTML = ''; - - // Filter items - let filteredItems = mockData.items; - - if (selectedCategory !== 'all') { - filteredItems = filteredItems.filter(item => item.category === selectedCategory); - } - - if (searchQuery) { - filteredItems = filteredItems.filter(item => - item.name.toLowerCase().includes(searchQuery) - ); - } - - // Render filtered items - filteredItems.forEach(item => { - const card = document.createElement('div'); - card.className = 'item-card'; - - card.innerHTML = ` -
${item.name}
-
${item.name}
-
$${item.price.toLocaleString()}
-
- -
- `; - - const addBtn = card.querySelector('.add-to-cart-btn'); - addBtn.addEventListener('click', (e) => { - e.stopPropagation(); - addToCart(item); - }); - - itemsGrid.appendChild(card); - }); - - console.log(`Rendered ${filteredItems.length} items`); -} - -// Cart functions -function addToCart(item) { - const existingItem = cart.find(c => c.id === item.id); - - if (existingItem) { - existingItem.quantity++; - } else { - cart.push({ ...item, quantity: 1 }); - } - - renderCart(); - updateCartCount(); - - // Show cart panel if not visible - const cartPanel = document.getElementById('cartPanel'); - const storeContent = document.querySelector('.store-content'); - if (cartPanel.style.display === 'none') { - cartPanel.style.display = 'flex'; - storeContent.classList.add('cart-open'); - } - - console.log('Added to cart:', item.name); -} - -function removeFromCart(itemId) { - cart = cart.filter(item => item.id !== itemId); - renderCart(); - updateCartCount(); -} - -function renderCart() { - const cartItems = document.getElementById('cartItems'); - if (!cartItems) return; - - cartItems.innerHTML = ''; - - if (cart.length === 0) { - cartItems.innerHTML = ` -
- - Your cart is empty -
- `; - } else { - cart.forEach(item => { - const cartItem = document.createElement('div'); - cartItem.className = 'cart-item'; - - cartItem.innerHTML = ` -
- ${item.name} - -
-
- Qty: ${item.quantity} - $${(item.price * item.quantity).toLocaleString()} -
- `; - - const removeBtn = cartItem.querySelector('.cart-item-remove'); - removeBtn.addEventListener('click', () => removeFromCart(item.id)); - - cartItems.appendChild(cartItem); - }); - } - - updateCartSummary(); -} - -function updateCartCount() { - const cartCount = document.querySelector('.cart-count'); - if (cartCount) { - const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); - cartCount.textContent = totalItems; - } -} - -function updateCartSummary() { - const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); - const tax = subtotal * 0.05; - const total = subtotal + tax; - - document.getElementById('cartSubtotal').textContent = `$${subtotal.toLocaleString()}`; - document.getElementById('cartTax').textContent = `$${tax.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; - document.getElementById('cartTotal').textContent = `$${total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; - - const checkoutBtn = document.getElementById('checkoutBtn'); - if (checkoutBtn) { - checkoutBtn.disabled = cart.length === 0 || total > mockData.balance; - } -} - -function handleCheckout() { - const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); - const tax = total * 0.05; - const grandTotal = total + tax; - - if (grandTotal > mockData.balance) { - // alert('Insufficient funds!'); - return; - } - - const purchaseData = { - items: cart.map(item => ({ - id: item.id, - name: item.name, - quantity: item.quantity, - price: item.price - })), - subtotal: total, - tax: tax, - total: grandTotal +(function () { + const state = { + view: "categories", + selectedCategory: "", + selectedWeaponSlot: "", + cartOpen: false, }; - console.log('Purchase request:', purchaseData); - sendEvent('store::purchase', purchaseData); + const categoryCards = [ + { id: "uniforms", label: "Uniforms" }, + { id: "headgear", label: "Headgear" }, + { id: "facewear", label: "Facewear" }, + { id: "vests", label: "Vests" }, + { id: "weapons", label: "Weapons" }, + { id: "ammo", label: "Ammo" }, + { id: "items", label: "Items" }, + ]; - // Clear cart after purchase - cart = []; - renderCart(); - updateCartCount(); + const weaponCards = [ + { id: "primary", label: "Primary" }, + { id: "secondary", label: "Secondary" }, + { id: "handgun", label: "Handgun" }, + ]; - // Update balance (this would normally come from server) - mockData.balance -= grandTotal; - updateBalance(); -} + const previewItems = { + uniforms: [ + { + code: "UNF-102", + name: "Field Uniform", + description: + "Standard issue apparel block reserved for mission-ready clothing sets.", + price: "$1,250", + }, + { + code: "UNF-214", + name: "Combat Uniform", + description: + "Hardened kit placeholder for armored and specialized duty loadouts.", + price: "$1,980", + }, + { + code: "UNF-330", + name: "Duty Uniform", + description: + "Administrative and garrison wear preview for storefront layout validation.", + price: "$890", + }, + ], + headgear: [ + { + code: "HDG-044", + name: "Patrol Helmet", + description: + "Protective headgear module with placeholder image frame and pricing slot.", + price: "$640", + }, + { + code: "HDG-107", + name: "Operator Cap", + description: + "Soft headwear entry for non-armored and low-profile equipment sets.", + price: "$120", + }, + { + code: "HDG-221", + name: "Boonie Hat", + description: + "Terrain-adapted headwear card for storefront presentation.", + price: "$95", + }, + ], + facewear: [ + { + code: "FAC-015", + name: "Protective Goggles", + description: + "Facewear module placeholder aligned to the shared supply exchange layout.", + price: "$220", + }, + { + code: "FAC-028", + name: "Balaclava", + description: + "Low-profile face covering preview card for catalog expansion.", + price: "$74", + }, + { + code: "FAC-091", + name: "Respirator Mask", + description: + "Filtered facewear placeholder for hazard and industrial kit sets.", + price: "$410", + }, + ], + vests: [ + { + code: "VST-311", + name: "Carrier Rig", + description: + "Plate carrier preview item with a reserved image zone and pricing footer.", + price: "$2,430", + }, + { + code: "VST-414", + name: "Patrol Vest", + description: + "Mid-weight vest card intended for security and checkpoint loadouts.", + price: "$1,320", + }, + { + code: "VST-558", + name: "Utility Harness", + description: + "Storage-focused chest rig placeholder for non-ballistic kit sets.", + price: "$760", + }, + ], + ammo: [ + { + code: "AMM-556", + name: "5.56 Cartridge Pack", + description: + "Grouped ammunition supply card with placeholder product art.", + price: "$180", + }, + { + code: "AMM-762", + name: "7.62 Cartridge Pack", + description: + "Extended-caliber ammunition block for rifle and marksman loadouts.", + price: "$220", + }, + { + code: "AMM-9MM", + name: "9mm Cartridge Pack", + description: + "Compact sidearm ammunition placeholder entry for layout review.", + price: "$70", + }, + ], + items: [ + { + code: "ITM-004", + name: "First Aid Kit", + description: + "Support item placeholder designed to preview general utility inventory cards.", + price: "$65", + }, + { + code: "ITM-089", + name: "Radio Module", + description: + "Communications item block with the same product card treatment as all categories.", + price: "$330", + }, + { + code: "ITM-217", + name: "Tool Kit", + description: + "Repair and engineering support module placeholder for store browsing.", + price: "$145", + }, + ], + primary: [ + { + code: "WPN-PRI-01", + name: "Primary Platform A", + description: + "Primary weapon slot placeholder card for mock store review.", + price: "$3,250", + }, + { + code: "WPN-PRI-02", + name: "Primary Platform B", + description: + "Alternate long-arm placeholder with image frame and metadata treatment.", + price: "$3,980", + }, + { + code: "WPN-PRI-03", + name: "Primary Platform C", + description: + "General-purpose primary slot preview for future catalog wiring.", + price: "$2,890", + }, + ], + secondary: [ + { + code: "WPN-SEC-01", + name: "Secondary Launcher A", + description: + "Secondary slot placeholder card for support and utility weapon systems.", + price: "$5,600", + }, + { + code: "WPN-SEC-02", + name: "Secondary Launcher B", + description: + "Compact shoulder-fired placeholder entry in the shared product style.", + price: "$4,950", + }, + { + code: "WPN-SEC-03", + name: "Secondary Launcher C", + description: + "Reserved card for extended secondary inventory logic tomorrow.", + price: "$6,120", + }, + ], + handgun: [ + { + code: "WPN-HND-01", + name: "Sidearm A", + description: + "Handgun slot placeholder card with shared visual language.", + price: "$780", + }, + { + code: "WPN-HND-02", + name: "Sidearm B", + description: + "Secondary sidearm preview block for storefront evaluation.", + price: "$920", + }, + { + code: "WPN-HND-03", + name: "Sidearm C", + description: + "Compact sidearm placeholder with the same product framing.", + price: "$860", + }, + ], + }; -function updateBalance() { - const balanceAmount = document.querySelector('.balance-amount'); - if (balanceAmount) { - balanceAmount.textContent = `$${mockData.balance.toLocaleString()}`; - } -} + function sendEvent(event, data) { + if ( + typeof A3API !== "undefined" && + typeof A3API.SendAlert === "function" + ) { + A3API.SendAlert( + JSON.stringify({ + event, + data, + }), + ); + return; + } -// Update store data from external source -function updateStoreData(data) { - if (data.balance !== undefined) { - mockData.balance = data.balance; - updateBalance(); + console.log("[Store UI]", event, data); } - if (data.items) { - mockData.items = data.items; - renderItems(); + function closeStore() { + sendEvent("store::close", {}); } -} -// Send event to Arma -function sendEvent(event, data) { - if (typeof A3API !== 'undefined') { - A3API.SendAlert(JSON.stringify({ - event: event, - data: data - })); + function toggleCart() { + state.cartOpen = !state.cartOpen; + renderApp(); + } + + function closeCart() { + if (!state.cartOpen) { + return; + } + + state.cartOpen = false; + renderApp(); + } + + function createCategoryCard(category) { + return ` + + `; + } + + function createWeaponCard(category) { + return ` + + `; + } + + function createProductCard(item) { + return ` +
+
Image Placeholder
+
+ ${item.code} + ${item.name} +
+

${item.description}

+
+ ${item.price} + +
+
+ `; + } + + function getWorkspaceHeader() { + if (state.view === "weapons") { + return { + eyebrow: "Weapons Division", + title: "Weapon Categories", + copy: "Select a weapon slot to open the next supply tier. Primary, secondary, and handgun are scaffolded for tomorrow's item wiring.", + badge: "3 Slots", + ribbon: "Category Routing Active", + }; + } + + if (state.view === "items") { + const label = + state.selectedWeaponSlot || state.selectedCategory || "catalog"; + return { + eyebrow: "Catalog Preview", + title: formatTitle(label), + copy: "Mock product cards with placeholder imagery sized for future filtering, search, and cart logic.", + badge: "Preview Items", + ribbon: "Selection Locked", + }; + } + + return { + eyebrow: "Supply Categories", + title: "Procurement Dashboard", + copy: "Choose a category to enter the exchange. Weapons opens a second tier, while the other departments display placeholder product inventory.", + badge: "7 Categories", + ribbon: "Mock Layout", + }; + } + + function formatTitle(value) { + return String(value || "") + .split(/\s+/) + .filter(Boolean) + .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) + .join(" "); + } + + function renderWorkspaceBody() { + if (state.view === "weapons") { + return ` +
+ ${weaponCards.map(createWeaponCard).join("")} +
+ `; + } + + if (state.view === "items") { + const key = state.selectedWeaponSlot || state.selectedCategory; + const items = previewItems[key] || []; + + return ` +
+ ${items.map(createProductCard).join("")} +
+ `; + } + + return ` +
+ ${categoryCards.map(createCategoryCard).join("")} +
+ `; + } + + function renderCartPanel() { + return ` +
+ + + +
+ `; + } + + function getBreadcrumbItems() { + const items = [{ id: "categories", label: "Supply Exchange" }]; + + if (state.view === "weapons") { + items.push({ id: "weapons", label: "Weapons" }); + return items; + } + + if (state.view === "items") { + if (state.selectedWeaponSlot) { + items.push({ id: "weapons", label: "Weapons" }); + items.push({ + id: "weapon-slot", + label: formatTitle(state.selectedWeaponSlot), + }); + return items; + } + + if (state.selectedCategory) { + items.push({ + id: "category", + label: formatTitle(state.selectedCategory), + }); + } + } + + return items; + } + + function renderWorkspaceBreadcrumbs() { + const items = getBreadcrumbItems(); + + return ` +
+ ${items + .map((item, index) => { + const isCurrent = index === items.length - 1; + + if (isCurrent) { + return ` + ${item.label} + `; + } + + return ` + + `; + }) + .join('/')} +
+ `; + } + + function renderWorkspaceCartToggle() { + return ` + + `; + } + + function renderWorkspaceNavbar() { + return ` + + `; + } + + function navigateToBreadcrumb(target) { + switch (target) { + case "categories": + state.view = "categories"; + state.selectedCategory = ""; + state.selectedWeaponSlot = ""; + break; + case "weapons": + state.view = "weapons"; + state.selectedCategory = "weapons"; + state.selectedWeaponSlot = ""; + break; + default: + return; + } + + renderApp(); + } + + function renderApp() { + const header = getWorkspaceHeader(); + + document.getElementById("app").innerHTML = ` +
+
+
+ FORGE Logistics + Supply Exchange +
+
+ + + +
+
+ +
+ + +
+
+ ${renderWorkspaceNavbar()} +
+
+ ${header.eyebrow} +

${header.title}

+
+ ${header.badge} +
+
+

${header.copy}

+ ${header.ribbon} +
+ ${renderWorkspaceBody()} +
+ + ${renderCartPanel()} +
+
+ + +
+ `; + + bindEvents(); + } + + function bindEvents() { + const closeBtn = document.getElementById("store-close-btn"); + if (closeBtn) { + closeBtn.addEventListener("click", closeStore); + } + + const cartToggleBtn = document.getElementById("store-cart-toggle-btn"); + if (cartToggleBtn) { + cartToggleBtn.addEventListener("click", toggleCart); + } + + const cartCloseBtn = document.getElementById("store-cart-close-btn"); + if (cartCloseBtn) { + cartCloseBtn.addEventListener("click", closeCart); + } + + const cartBackdrop = document.getElementById("store-cart-backdrop"); + if (cartBackdrop) { + cartBackdrop.addEventListener("click", closeCart); + } + + document + .querySelectorAll("[data-breadcrumb-target]") + .forEach((button) => { + button.addEventListener("click", () => { + navigateToBreadcrumb( + button.getAttribute("data-breadcrumb-target"), + ); + }); + }); + + document.querySelectorAll("[data-category]").forEach((button) => { + button.addEventListener("click", () => { + const category = button.getAttribute("data-category"); + state.selectedCategory = category; + state.selectedWeaponSlot = ""; + + if (category === "weapons") { + state.view = "weapons"; + } else { + state.view = "items"; + } + + renderApp(); + }); + }); + + document.querySelectorAll("[data-weapon-slot]").forEach((button) => { + button.addEventListener("click", () => { + state.selectedWeaponSlot = + button.getAttribute("data-weapon-slot"); + state.view = "items"; + renderApp(); + }); + }); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", renderApp); } else { - console.log('Event:', event, 'Data:', data); + renderApp(); } -} - -// Auto-initialize -if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', initStore); -} else { - initStore(); -} - -// Expose functions globally -window.updateStoreData = updateStoreData; -window.addToCart = addToCart; +})(); diff --git a/arma/client/addons/store/ui/_site/style.css b/arma/client/addons/store/ui/_site/style.css index 9db24a7..f066df2 100644 --- a/arma/client/addons/store/ui/_site/style.css +++ b/arma/client/addons/store/ui/_site/style.css @@ -1,569 +1,802 @@ +:root { + --titlebar-bg: linear-gradient(180deg, #173a63 0%, #0e2c4f 100%); + --titlebar-border: rgba(161, 190, 224, 0.18); + --shell-bg: #e4e3df; + --surface: #f5f3ef; + --surface-alt: #ece8e2; + --surface-strong: #ffffff; + --surface-muted: #dfe5eb; + --border: rgba(74, 91, 110, 0.2); + --border-strong: rgba(20, 46, 79, 0.2); + --text-main: #1f2d3d; + --text-muted: #6a7787; + --text-subtle: #8792a0; + --accent: #12365d; + --accent-soft: #dbe7f3; + --accent-line: rgba(18, 54, 93, 0.12); + --success: #2f7d5b; + --danger: #8a3d3d; + --shadow-lg: 0 18px 48px rgb(14 32 54 / 0.12); + --shadow-md: 0 10px 26px rgb(17 35 59 / 0.08); + --radius-xl: 22px; + --radius-lg: 16px; + --radius-md: 12px; + --radius-sm: 9px; +} + * { - margin: 0; - padding: 0; box-sizing: border-box; } +html, body { - height: 100vh; - width: 100vw; - background: rgba(0, 0, 0, 0.7); - font-family: Arial, sans-serif; - color: rgba(200, 220, 240, 0.95); + width: 100%; + height: 100%; + margin: 0; overflow: hidden; } -.store-container { - height: 100vh; - width: 100vw; - padding: 2rem; - display: flex; - flex-direction: column; - gap: 1.5rem; +body { + font-family: "Segoe UI", "Trebuchet MS", sans-serif; + color: var(--text-main); + background: var(--shell-bg); } -/* Header Section */ -.store-header { - display: flex; - align-items: center; - gap: 1.5rem; - padding: 1.25rem 1.5rem; - background: rgba(15, 20, 30, 0.9); - border: 1px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; - box-shadow: - 0 0 20px rgba(100, 150, 200, 0.15), - 0 4px 16px rgba(0, 0, 0, 0.8); +button, +input, +select { + font: inherit; } -.store-logo { - width: 60px; - height: 60px; - background: rgba(20, 30, 45, 0.8); - border: 2px solid rgba(100, 150, 200, 0.5); - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; -} - -.logo-icon { - font-size: 2rem; -} - -.store-info { - flex: 1; -} - -.store-title { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: 0.5px; - text-transform: uppercase; - color: rgba(200, 220, 255, 1); - margin-bottom: 0.25rem; -} - -.store-subtitle { - font-size: 0.875rem; - color: rgba(140, 160, 180, 0.8); - letter-spacing: 0.5px; -} - -.balance-display { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 0.25rem; - padding: 0.75rem 1.25rem; - background: rgba(20, 30, 45, 0.7); - border: 1px solid rgba(100, 200, 150, 0.4); - border-radius: 4px; -} - -.balance-label { - font-size: 0.7rem; - text-transform: uppercase; - letter-spacing: 0.5px; - color: rgba(140, 160, 180, 0.8); -} - -.balance-amount { - font-size: 1.25rem; - font-weight: 600; - color: rgba(100, 200, 150, 1); -} - -.header-actions { - display: flex; - gap: 0.75rem; -} - -.action-btn { - padding: 0.625rem 1.25rem; - background: rgba(20, 30, 45, 0.7); - border: 1px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; - color: rgba(200, 220, 240, 0.95); - font-size: 0.875rem; - text-transform: uppercase; - letter-spacing: 0.5px; +button { cursor: pointer; - transition: all 0.15s ease; } -.action-btn:hover { - background: rgba(30, 45, 70, 0.9); - border-color: rgba(150, 200, 255, 0.7); - box-shadow: - 0 0 15px rgba(100, 150, 200, 0.2), - inset 0 0 20px rgba(100, 150, 200, 0.05); +#app { + width: 100%; + height: 100%; } -.cart-btn { +.store-shell { display: flex; - align-items: center; - gap: 0.5rem; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; + background: var(--shell-bg); +} + +.window-titlebar { position: relative; -} - -.cart-icon { - font-size: 1rem; -} - -.cart-count { - min-width: 24px; - height: 24px; - padding: 0 0.5rem; - background: rgba(100, 150, 200, 0.3); - border: 1px solid rgba(100, 150, 200, 0.5); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.75rem; - font-weight: 600; -} - -.close-btn { - border-color: rgba(200, 100, 100, 0.4); -} - -.close-btn:hover { - border-color: rgba(255, 100, 100, 0.7); - box-shadow: - 0 0 15px rgba(200, 100, 100, 0.2), - inset 0 0 20px rgba(200, 100, 100, 0.05); -} - -/* Main Content */ -.store-content { - flex: 1; - display: grid; - grid-template-columns: 250px 1fr; - gap: 1.5rem; - overflow: hidden; -} - -.store-content.cart-open { - grid-template-columns: 250px 1fr 350px; -} - -/* Panels */ -.store-panel { - background: rgba(15, 20, 30, 0.9); - border: 1px solid rgba(100, 150, 200, 0.4); - border-left: 3px solid rgba(100, 150, 200, 0.5); - border-radius: 4px; - display: flex; - flex-direction: column; - box-shadow: - 0 0 20px rgba(100, 150, 200, 0.1), - 0 4px 16px rgba(0, 0, 0, 0.6); -} - -.panel-header { - padding: 1.25rem 1.5rem; - border-bottom: 1px solid rgba(100, 150, 200, 0.2); + z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; + padding: 0.9rem 1rem 0.95rem 1.2rem; + background: var(--titlebar-bg); + color: #f4f8fd; + border-bottom: 1px solid var(--titlebar-border); } -.panel-title { - font-size: 1rem; - font-weight: 600; +.window-titlebar-brand { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.window-titlebar-kicker { + font-size: 0.65rem; + letter-spacing: 0.22em; text-transform: uppercase; - letter-spacing: 0.5px; - color: rgba(200, 220, 255, 1); + color: rgb(214 227 241 / 0.72); + font-weight: 700; } -.panel-content { - flex: 1; - padding: 1.5rem; +.window-titlebar-title { + font-size: 1.12rem; + font-weight: 700; + letter-spacing: -0.03em; } -/* Custom Scrollbar */ -.panel-content::-webkit-scrollbar { - width: 8px; -} - -.panel-content::-webkit-scrollbar-track { - background: rgba(15, 20, 30, 0.5); - border-radius: 4px; -} - -.panel-content::-webkit-scrollbar-thumb { - background: rgba(100, 150, 200, 0.3); - border-radius: 4px; -} - -.panel-content::-webkit-scrollbar-thumb:hover { - background: rgba(100, 150, 200, 0.5); -} - -/* Search Box */ -.search-box { - flex: 1; - max-width: 300px; -} - -.search-input { - width: 100%; - padding: 0.625rem 1rem; - background: rgba(20, 30, 45, 0.7); - border: 1px solid rgba(100, 150, 200, 0.3); - border-radius: 4px; - color: rgba(200, 220, 240, 0.95); - font-size: 0.875rem; - transition: all 0.15s ease; -} - -.search-input:focus { - outline: none; - border-color: rgba(150, 200, 255, 0.6); - box-shadow: - 0 0 15px rgba(100, 150, 200, 0.15), - inset 0 0 20px rgba(100, 150, 200, 0.05); -} - -.search-input::placeholder { - color: rgba(100, 120, 140, 0.6); -} - -/* Category List */ -.category-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.category-item { +.window-titlebar-controls { display: flex; align-items: center; - gap: 0.75rem; - padding: 1rem; - background: rgba(20, 30, 45, 0.6); - border: 1px solid rgba(100, 150, 200, 0.3); - border-left: 3px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; - color: rgba(200, 220, 240, 0.95); - cursor: pointer; - transition: all 0.15s ease; - text-align: left; + gap: 0.7rem; } -.category-item:hover { - background: rgba(30, 45, 70, 0.7); - border-left-color: rgba(150, 200, 255, 0.7); +.cart-toggle-icon { + position: relative; + width: 0.95rem; + height: 0.8rem; + border: 1.5px solid currentcolor; + border-radius: 0.16rem 0.16rem 0.24rem 0.24rem; } -.category-item.active { - background: rgba(30, 45, 70, 0.8); - border-left-color: rgba(100, 200, 150, 0.8); - box-shadow: - 0 0 15px rgba(100, 200, 150, 0.15), - inset 0 0 20px rgba(100, 200, 150, 0.05); +.cart-toggle-icon::before { + content: ""; + position: absolute; + top: -0.34rem; + left: 0.2rem; + width: 0.5rem; + height: 0.3rem; + border: 1.5px solid currentcolor; + border-bottom: 0; + border-radius: 0.35rem 0.35rem 0 0; } -.category-icon { - font-size: 1.5rem; +.window-control-btn { + min-width: 2rem; + height: 2rem; + padding: 0 0.7rem; + border-radius: 7px; + border: 1px solid rgb(197 220 243 / 0.16); + background: rgb(255 255 255 / 0.04); + color: rgb(237 244 251 / 0.88); } -.category-name { - flex: 1; - font-size: 0.875rem; - font-weight: 500; -} - -.category-count { - padding: 0.25rem 0.5rem; - background: rgba(100, 150, 200, 0.2); - border: 1px solid rgba(100, 150, 200, 0.3); - border-radius: 3px; - font-size: 0.75rem; - font-weight: 600; -} - -/* Items Grid */ -.items-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1rem; - overflow-y: auto; - height: 590px; -} - -.item-card { - background: rgba(20, 30, 45, 0.6); - border: 1px solid rgba(100, 150, 200, 0.3); - border-left: 3px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; - padding: 1.25rem; - cursor: pointer; - transition: all 0.15s ease; - display: flex; - flex-direction: column; - gap: 0.5rem; - height: 300px !important; -} - -.item-card:hover { - background: rgba(30, 45, 70, 0.7); - border-left-color: rgba(150, 200, 255, 0.7); - box-shadow: - 0 0 15px rgba(100, 150, 200, 0.15), - inset 0 0 20px rgba(100, 150, 200, 0.05); -} - -.item-image { - height: 256px; - text-align: center; -} - -.item-name { - font-size: 0.95rem; - font-weight: 600; - color: rgba(200, 220, 255, 1); - text-align: center; -} - -.item-description { - font-size: 0.75rem; - color: rgba(140, 160, 180, 0.85); - text-align: center; - line-height: 1.3; - min-height: 2.6rem; -} - -.item-price { - font-size: 1.125rem; - font-weight: 600; - color: rgba(100, 200, 150, 1); - text-align: center; - margin-top: auto; -} - -.item-actions { - display: flex; - gap: 0.5rem; - margin-top: 0.5rem; -} - -.add-to-cart-btn { - flex: 1; - padding: 0.625rem; - background: rgba(100, 150, 200, 0.2); - border: 1px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; - color: rgba(200, 220, 240, 0.95); - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.5px; - cursor: pointer; - transition: all 0.15s ease; -} - -.add-to-cart-btn:hover { - background: rgba(100, 150, 200, 0.3); - border-color: rgba(150, 200, 255, 0.6); -} - -/* Cart Panel */ -.cart-items { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-bottom: 1.5rem; -} - -.empty-cart { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - padding: 3rem 1rem; -} - -.empty-icon { - font-size: 3rem; - opacity: 0.3; -} - -.empty-text { - font-size: 0.875rem; - color: rgba(140, 160, 180, 0.7); -} - -.cart-item { - padding: 1rem; - background: rgba(20, 30, 45, 0.6); - border: 1px solid rgba(100, 150, 200, 0.3); - border-left: 3px solid rgba(100, 150, 200, 0.4); - border-radius: 4px; -} - -.cart-item-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -.cart-item-name { - font-size: 0.875rem; - font-weight: 600; - color: rgba(200, 220, 255, 1); -} - -.cart-item-remove { - padding: 0.25rem 0.5rem; - background: rgba(200, 100, 100, 0.2); - border: 1px solid rgba(200, 100, 100, 0.4); - border-radius: 3px; - color: rgba(255, 150, 150, 0.9); - font-size: 0.7rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.cart-item-remove:hover { - background: rgba(200, 100, 100, 0.3); -} - -.cart-item-details { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.8rem; - color: rgba(160, 180, 200, 0.85); -} - -.cart-item-price { - color: rgba(100, 200, 150, 1); - font-weight: 600; -} - -.clear-cart-btn { - padding: 0.5rem 0.75rem; - background: rgba(200, 100, 100, 0.2); - border: 1px solid rgba(200, 100, 100, 0.4); - border-radius: 4px; - color: rgba(255, 150, 150, 0.9); - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.5px; - cursor: pointer; - transition: all 0.15s ease; -} - -.clear-cart-btn:hover { - background: rgba(200, 100, 100, 0.3); -} - -/* Cart Summary */ -.cart-summary { - padding-top: 1.5rem; - border-top: 1px solid rgba(100, 150, 200, 0.2); -} - -.summary-row { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.75rem; -} - -.summary-label { - font-size: 0.875rem; - color: rgba(160, 180, 200, 0.85); -} - -.summary-value { - font-size: 0.95rem; - font-weight: 600; - color: rgba(200, 220, 240, 0.95); -} - -.summary-total { - padding-top: 0.75rem; - border-top: 1px solid rgba(100, 150, 200, 0.2); - margin-top: 0.5rem; -} - -.summary-total .summary-label { - font-size: 1rem; - font-weight: 600; - color: rgba(200, 220, 255, 1); -} - -.summary-total .summary-value { - font-size: 1.25rem; - color: rgba(100, 200, 150, 1); -} - -.action-btn-primary { - width: 100%; - padding: 0.875rem; - margin-top: 1rem; - background: rgba(100, 150, 200, 0.2); - border: 1px solid rgba(100, 150, 200, 0.5); -} - -.action-btn-primary:hover { - background: rgba(100, 150, 200, 0.3); - border-color: rgba(150, 200, 255, 0.7); -} - -.checkout-btn:disabled { +.window-control-btn:disabled { opacity: 0.5; cursor: not-allowed; } -.checkout-btn:disabled:hover { - background: rgba(100, 150, 200, 0.2); - border-color: rgba(100, 150, 200, 0.5); - box-shadow: none; +.window-control-btn.is-close { + background: rgb(255 255 255 / 0.1); } -/* Responsive adjustments */ -@media (max-width: 1400px) { - .items-grid { - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); +.window-control-btn.is-close:hover { + background: rgb(185 67 67 / 0.9); + border-color: rgb(255 222 222 / 0.45); +} + +.store-app { + flex: 1; + min-height: 0; + width: min(100%, 1613px); + margin: 0 auto; + display: grid; + grid-template-columns: 308px minmax(0, 1fr); + gap: 1.25rem; + padding: 1.25rem; +} + +.store-footer { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + padding: 0.95rem 1.25rem 1.15rem; + border-top: 1px solid rgb(18 54 93 / 0.1); + background: transparent; +} + +.footer-block { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.footer-title { + font-size: 0.68rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--text-subtle); + font-weight: 700; +} + +.footer-copy { + font-size: 0.84rem; + color: var(--text-muted); + line-height: 1.4; +} + +.store-sidebar, +.store-main { + min-height: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.store-main { + position: relative; + overflow: hidden; +} + +.module-card, +.workspace-card, +.cart-card { + background: linear-gradient( + 180deg, + var(--surface) 0%, + var(--surface-alt) 100% + ); + border: 1px solid var(--border); + border-radius: var(--radius-xl); +} + +.module-card, +.cart-card { + padding: 1rem; +} + +.workspace-card { + min-height: 0; + flex: 1 1 auto; + display: flex; + flex-direction: column; + width: min(100%, 1280px); + overflow: hidden; +} + +.workspace-navbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.9rem 1rem; + margin-bottom: 0.95rem; + border-bottom: 1px solid var(--accent-line); + background: + linear-gradient(180deg, rgb(255 255 255 / 0.52) 0%, transparent 100%), + linear-gradient( + 180deg, + rgb(236 241 246 / 0.52) 0%, + rgb(245 243 239 / 0.2) 100% + ); +} + +.workspace-breadcrumbs { + display: flex; + align-items: center; + gap: 0.55rem; + min-width: 0; + flex-wrap: wrap; +} + +.breadcrumb-link, +.breadcrumb-current, +.breadcrumb-separator { + font-size: 0.78rem; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: 700; +} + +.breadcrumb-link { + padding: 0; + border: 0; + background: transparent; + color: var(--text-subtle); +} + +.breadcrumb-link:hover { + color: var(--accent); +} + +.breadcrumb-current { + color: var(--accent); +} + +.breadcrumb-separator { + color: rgb(124 138 155 / 0.72); +} + +.workspace-cart-btn { + width: 2.5rem; + height: 2.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + border-radius: 10px; + border: 1px solid var(--border-strong); + background: rgb(255 255 255 / 0.68); + color: var(--accent); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75); +} + +.workspace-cart-btn:hover { + background: rgb(219 231 243 / 0.88); +} + +.module-header, +.workspace-header, +.cart-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.module-header { + margin-bottom: 0.85rem; +} + +.workspace-header, +.cart-header { + padding: 1rem 1rem 0; +} + +.eyebrow { + display: block; + margin-bottom: 0.25rem; + font-size: 0.68rem; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--text-subtle); + font-weight: 700; +} + +.section-title { + font-size: 1.1rem; + font-weight: 700; + letter-spacing: -0.02em; +} + +.section-copy { + margin: 0.2rem 0 0; + font-size: 0.9rem; + line-height: 1.45; + color: var(--text-muted); +} + +.pill { + padding: 0.48rem 0.8rem; + border-radius: 999px; + background: var(--accent-soft); + color: var(--accent); + font-size: 0.74rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.search-module { + display: flex; + flex-direction: column; + gap: 0.8rem; +} + +.search-input { + width: 100%; + height: 2.9rem; + padding: 0 0.95rem; + border-radius: var(--radius-md); + border: 1px solid var(--border); + background: rgb(255 255 255 / 0.75); + color: var(--text-main); +} + +.search-input::placeholder { + color: var(--text-subtle); +} + +.quick-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.quick-tag { + padding: 0.55rem 0.72rem; + border-radius: 999px; + border: 1px solid var(--border); + background: rgb(255 255 255 / 0.52); + color: var(--text-muted); + font-size: 0.75rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.filter-stack { + display: grid; + gap: 0.85rem; +} + +.filter-group { + padding: 0.95rem; + border-radius: var(--radius-md); + background: rgb(255 255 255 / 0.48); + border: 1px solid var(--border); +} + +.filter-label { + display: block; + margin-bottom: 0.55rem; + font-size: 0.72rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-subtle); + font-weight: 700; +} + +.filter-value { + display: flex; + align-items: center; + justify-content: space-between; + color: var(--text-main); + font-size: 0.92rem; + font-weight: 600; +} + +.filter-placeholder { + color: var(--text-muted); + font-weight: 500; +} + +.workspace-intro { + padding: 0 1rem 1rem; + border-bottom: 1px solid var(--accent-line); +} + +.workspace-grid { + flex: 1; + min-height: 0; + padding: 1rem; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-content: start; + gap: 1rem; + overflow: auto; +} + +.workspace-grid.is-wide { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.workspace-grid.is-products { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.nav-btn, +.cart-btn, +.action-btn { + border: 1px solid var(--border-strong); + border-radius: var(--radius-md); + background: rgb(255 255 255 / 0.68); + color: var(--accent); + font-size: 0.82rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.nav-btn, +.cart-btn { + height: 2.8rem; + padding: 0 1rem; +} + +.action-btn { + min-height: 2.8rem; + padding: 0.8rem 1rem; +} + +.nav-btn:hover, +.cart-btn:hover, +.action-btn:hover { + background: rgb(219 231 243 / 0.88); +} + +.card-button { + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: + linear-gradient( + 180deg, + rgb(255 255 255 / 0.7) 0%, + rgb(226 233 239 / 0.88) 100% + ), + var(--surface-strong); + color: var(--accent); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75); + transition: + transform 120ms ease, + box-shadow 120ms ease, + border-color 120ms ease; +} + +.card-button:hover { + transform: translateY(-2px); + border-color: rgb(18 54 93 / 0.28); + box-shadow: + 0 14px 28px rgb(19 37 60 / 0.1), + inset 0 1px 0 rgb(255 255 255 / 0.85); +} + +.category-card, +.subcategory-card { + min-height: 12.5rem; + display: flex; + align-items: center; + justify-content: center; + padding: 1.25rem; +} + +.card-label { + text-align: center; + font-size: 1.08rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.product-card { + min-height: 20rem; + padding: 0.95rem; + display: flex; + flex-direction: column; + gap: 0.9rem; +} + +.product-image { + height: 9.5rem; + border-radius: var(--radius-md); + border: 1px dashed rgb(18 54 93 / 0.24); + background: linear-gradient( + 135deg, + rgb(235 240 245) 0%, + rgb(221 228 235) 100% + ); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-subtle); + font-size: 0.78rem; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.product-meta { + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.product-name { + font-size: 1rem; + font-weight: 700; +} + +.product-code { + font-size: 0.72rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-subtle); +} + +.product-copy { + margin: 0; + min-height: 2.8rem; + color: var(--text-muted); + font-size: 0.88rem; + line-height: 1.45; +} + +.product-footer { + margin-top: auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} + +.product-price { + font-size: 1rem; + font-weight: 700; + color: var(--success); +} + +.cart-card { + min-height: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.cart-panel-close { + flex: 0 0 auto; +} + +.cart-overlay { + position: absolute; + inset: 0; + z-index: 4; + pointer-events: none; +} + +.cart-overlay.is-open { + pointer-events: auto; +} + +.cart-overlay-backdrop { + position: absolute; + inset: 0; + border: 0; + background: transparent; + opacity: 1; +} + +.store-cart-panel { + position: absolute; + top: 0.5rem; + right: 0.5rem; + bottom: 0.5rem; + width: min(22rem, calc(100% - 1rem)); + transform: translateX(calc(100% + 1rem)); + transition: transform 180ms ease; +} + +.cart-overlay.is-open .store-cart-panel { + transform: translateX(0); +} + +.store-cart-panel .cart-card { + height: 100%; + border-radius: 1.5rem; + box-shadow: + 0 18px 40px rgb(11 27 46 / 0.16), + 0 4px 12px rgb(11 27 46 / 0.08); +} + +.cart-status { + padding: 1rem; + border-radius: var(--radius-md); + background: rgb(255 255 255 / 0.6); + border: 1px solid var(--border); +} + +.cart-kpi { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.75rem; +} + +.cart-kpi-card { + padding: 0.85rem; + border-radius: var(--radius-md); + background: rgb(255 255 255 / 0.5); + border: 1px solid var(--border); +} + +.kpi-label { + display: block; + margin-bottom: 0.3rem; + font-size: 0.68rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--text-subtle); + font-weight: 700; +} + +.kpi-value { + font-size: 1rem; + font-weight: 700; +} + +.cart-lines { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.cart-line { + padding: 0.95rem; + border-radius: var(--radius-md); + background: rgb(255 255 255 / 0.56); + border: 1px solid var(--border); +} + +.cart-line-title { + font-size: 0.92rem; + font-weight: 700; +} + +.cart-line-meta { + margin-top: 0.3rem; + font-size: 0.8rem; + color: var(--text-muted); +} + +.cart-summary { + padding-top: 0.25rem; + border-top: 1px solid var(--accent-line); + display: grid; + gap: 0.7rem; +} + +.summary-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + font-size: 0.9rem; +} + +.summary-row.total { + font-size: 1rem; + font-weight: 700; +} + +.summary-label { + color: var(--text-muted); +} + +.summary-value { + font-weight: 700; +} + +.summary-actions { + display: grid; + gap: 0.65rem; +} + +.muted-btn { + background: rgb(255 255 255 / 0.42); + color: var(--text-muted); +} + +.inventory-ribbon { + display: inline-flex; + align-items: center; + gap: 0.55rem; + padding: 0.5rem 0.8rem; + border-radius: 999px; + background: rgb(255 255 255 / 0.56); + border: 1px solid var(--border); + color: var(--text-muted); + font-size: 0.76rem; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: 700; +} + +@media (max-width: 1440px) { + .store-app { + grid-template-columns: 284px minmax(0, 1fr); + } + + .workspace-grid, + .workspace-grid.is-products { + grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 1200px) { - .store-content { +@media (max-width: 1120px) { + .store-app { + grid-template-columns: 1fr; + overflow: auto; + } + + .store-sidebar, + .store-main { + min-height: auto; + } + + .workspace-grid, + .workspace-grid.is-wide, + .workspace-grid.is-products { grid-template-columns: 1fr; } - .store-content.cart-open { - grid-template-columns: 1fr 350px; + .store-footer { + grid-template-columns: 1fr; } - .categories-panel { - display: none; + .store-main { + overflow: visible; + } + + .workspace-navbar { + align-items: flex-start; + } + + .store-cart-panel { + top: 0; + right: 0; + bottom: 0; + width: min(24rem, 100%); } }