Create style.css

src/style.css

@@ -0,0 +1,217 @@
+/* ===================== COMPACT E-COMMERCE LAYOUT ===================== */
+
+/* Reduce main container padding */
+.block-container {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+    max-width: 100% !important;
+}
+
+/* Header styles */
+.main-header {
+    text-align: center;
+    margin-bottom: 0.5rem;
+}
+
+.main-header h1 {
+    margin-bottom: 0;
+    font-size: 1.8rem;
+}
+
+.main-header p {
+    color: #888;
+    margin-top: 0;
+    font-size: 0.9rem;
+}
+
+/* Compact buttons */
+.stButton > button {
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.stButton > button[kind="primary"] {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Form elements - ensure text is visible */
+.stSelectbox [data-baseweb="select"] {
+    min-height: 44px !important;
+    height: auto !important;
+}
+
+.stSelectbox [data-baseweb="select"] > div {
+    min-height: 44px !important;
+    height: auto !important;
+    display: flex !important;
+    align-items: center !important;
+    padding: 0 12px !important;
+}
+
+.stSelectbox [data-baseweb="select"] > div > div {
+    height: auto !important;
+    line-height: normal !important;
+    padding: 10px 0 !important;
+}
+
+/* Fix for the selected value text */
+[data-baseweb="select"] [data-testid="stMarkdownContainer"],
+[data-baseweb="select"] span,
+[data-baseweb="select"] div[class*="valueContainer"] {
+    overflow: visible !important;
+    text-overflow: unset !important;
+    white-space: nowrap !important;
+    line-height: normal !important;
+    height: auto !important;
+}
+
+.stTextInput > div > div > input {
+    min-height: 44px !important;
+    padding: 8px 12px !important;
+    font-size: 0.95rem !important;
+}
+
+
+/* Product grid - compact cards */
+[data-testid="stVerticalBlock"] > [data-testid="stVerticalBlockBorderWrapper"] {
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* Product card container */
+.stContainer {
+    padding: 0 !important;
+}
+
+/* Product images */
+[data-testid="stImage"] {
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+}
+
+[data-testid="stImage"] img {
+    object-fit: cover;
+    aspect-ratio: 1;
+}
+
+/* Product title */
+.stMarkdown p strong {
+    font-size: 0.85rem;
+    line-height: 1.3;
+    display: block;
+    margin: 8px 0 4px 0;
+}
+
+/* Caption (match score) */
+.stCaption {
+    font-size: 0.75rem !important;
+    margin: 0 !important;
+    padding-bottom: 8px !important;
+}
+
+/* Info boxes (prediction banners) */
+[data-testid="stAlert"] {
+    padding: 10px 15px !important;
+    margin: 10px 0 !important;
+    border-radius: 8px !important;
+}
+
+/* Horizontal divider */
+hr {
+    margin: 10px 0 !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* File uploader - compact */
+[data-testid="stFileUploader"] {
+    padding: 0 !important;
+}
+
+[data-testid="stFileUploader"] section {
+    padding: 10px !important;
+}
+
+[data-testid="stFileUploader"] small {
+    display: none;
+}
+
+/* Audio input - compact */
+[data-testid="stAudioInput"] {
+    padding: 0 !important;
+}
+
+/* Radio buttons - compact horizontal */
+[data-testid="stRadio"] > div {
+    gap: 10px !important;
+}
+
+[data-testid="stRadio"] label {
+    padding: 6px 12px !important;
+    font-size: 0.85rem !important;
+}
+
+/* Empty state */
+.empty-state {
+    text-align: center;
+    padding: 40px;
+    color: #888;
+}
+
+.empty-state h3 {
+    margin-bottom: 10px;
+    font-size: 1.2rem;
+}
+
+.empty-state p {
+    font-size: 0.9rem;
+}
+
+/* Column gaps - tighter */
+[data-testid="column"] {
+    padding: 0 5px !important;
+}
+
+/* Product detail view */
+.product-detail-price {
+    margin: 15px 0;
+}
+
+.product-detail-price .old-price {
+    text-decoration: line-through;
+    color: #888;
+    font-size: 1.2rem;
+}
+
+.product-detail-price .current-price {
+    color: #2ecc71;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-left: 10px;
+}
+
+.product-detail-price .discount-badge {
+    background: #e74c3c;
+    color: white;
+    padding: 4px 10px;
+    border-radius: 5px;
+    margin-left: 10px;
+    font-size: 0.9rem;
+}
+
+/* View details button - smaller */
+.stButton > button[kind="secondary"] {
+    font-size: 0.8rem !important;
+    padding: 5px 10px !important;
+}
+
+/* Hide streamlit branding */
+#MainMenu {visibility: hidden;}
+footer {visibility: hidden;}
+header {visibility: hidden;}
+
+/* Spinner */
+.stSpinner > div {
+    border-color: #667eea !important;
+}