Act as a senior mobile product designer tasked with creating a modern, intuitive, mobile-first Shop Grid screen for a medical cannabis ecommerce app. The design should prioritize clarity, usability, and aesthetic appeal, optimized for a screen width of 390px.

🧭 Project Context
This is part of a cannabis ecommerce platform where users browse and explore available medical cannabis products. The UI should support quick scanning, filtering, and easy switching between list and grid views.

🧩 Core Features & UI Elements
Product card layout (Grid view) showing 2 products per row on 390px mobile screen

Each product card must display:
Product name
Type (Indica / Sativa / Hybrid)
Price
THC/CBD percentage
Availability status (“Sofort verfügbar”)

🎛️ Control UI (above or sticky)
Display total number of products
Search field (clear icon inside input field)
Toggle to switch between list view and grid view
Filters dropdown panel, with the following options:
Availability
Sort (by name, price, THC %)
Terpene type
Producer Form (e.g. flower, extract, capsule)
A prominent “Reset filters” button
A “Sort by” button (may open modal or dropdown)

✨ Visual & UX Guidelines
Follow a contemporary, reduced visual language — clear typography, conscious spacing, modern iconography
Maintain strong visual hierarchy and tappable UI targets Include subtle animations (e.g. hover states, image fades, filter transitions)
Use consistent visual elements and spacing across product cards and control bar
Include placeholder areas for logos or signets

📱 Device & Layout
Design for mobile-first experience at 390px width
Use Auto Layout and responsive constraints to support future scaling

✅ Success Criteria
Clean, easy-to-scan layout with legible data and intuitive interactions
Filtering and sorting should feel lightweight and easy to reset
Product grid should support quick product discovery and comparison