.product-view { width: 100%; max-width: 48rem; margin: 0 auto; padding: 1rem var(--margin-main) 2rem; animation: fadeInUp 0.3s ease-out; } .back-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; margin-bottom: 1rem; background: none; border: none; color: var(--primary, #2563eb); font-size: 0.875rem; font-weight: 500; cursor: pointer; } .back-btn:hover { opacity: 0.8; } .product-loading, .product-error { text-align: center; padding: 3rem 1rem; color: var(--on-surface-variant, #6b7280); font-size: 1rem; } .product-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; } .product-image { width: 120px; height: 120px; object-fit: contain; border-radius: var(--radius-md, 0.75rem); margin-bottom: 1rem; } .source-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; color: white; font-size: 0.75rem; font-weight: 600; } .product-name { font-size: 1.5rem; font-weight: 700; color: var(--on-surface); text-align: center; margin-bottom: 0.25rem; } .product-brand { font-size: 1rem; color: var(--on-surface-variant, #6b7280); text-align: center; margin-bottom: 1.5rem; } .product-details { background: var(--surface-container-lowest, #f9fafb); border-radius: var(--radius-md, 0.75rem); padding: 1rem; } .detail-row { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--outline-variant, #e5e7eb); } .detail-row:last-child { border-bottom: none; } .detail-label { font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant, #9ca3af); text-transform: uppercase; } .detail-value { font-size: 0.9375rem; color: var(--on-surface); } .product-pharmacies { margin-top: 2rem; } .pharmacies-loading { text-align: center; padding: 2rem 1rem; color: var(--on-surface-variant, #6b7280); font-size: 0.875rem; } .pharmacies-title { font-size: 1.125rem; font-weight: 600; color: var(--on-surface); margin-bottom: 1rem; } .pharmacies-grid { display: flex; flex-direction: column; gap: 0.75rem; } .product-pharmacy-card { background: var(--surface-container-lowest, #f9fafb); border-radius: var(--radius-md, 0.75rem); padding: 1rem; } .product-pharmacy-name { font-size: 0.9375rem; font-weight: 600; color: var(--on-surface); margin-bottom: 0.25rem; } .product-pharmacy-address { font-size: 0.8125rem; color: var(--on-surface-variant, #6b7280); margin-bottom: 0.25rem; } .product-pharmacy-phone { font-size: 0.8125rem; color: var(--on-surface-variant, #6b7280); margin-bottom: 0.5rem; } .product-pharmacy-status { display: flex; align-items: center; gap: 0.75rem; } .product-pharmacy-price { font-size: 0.9375rem; font-weight: 600; color: var(--primary, #2563eb); } .product-pharmacy-stock { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 9999px; } .product-pharmacy-stock.in-stock { background: #dcfce7; color: #166534; } .product-pharmacy-stock.low-stock { background: #fef9c3; color: #854d0e; } .product-pharmacy-stock.out-of-stock { background: #fee2e2; color: #991b1b; }