/* Base styles */
:root {
	--bg: #0b0f14;
	--card: #141a22;
	--text: #e9eef5;
	--muted: #aab4c3;
	--primary: #ff4d4f;
	--primary-700: #d63f41;
	--border: #263042;
	--accent: #1e2633;
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: linear-gradient(180deg, #0b0f14 0%, #0e1420 100%);
	color: var(--text);
}

body.modal-open .site-header { display: none; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(11, 15, 20, 0.8);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px;
}
.site-header h1 {
	font-size: 20px;
	margin: 0;
}
.site-header .actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* Inputs */
input[type="search"], select {
	background: var(--card);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 12px;
	border-radius: 10px;
	outline: none;
	min-width: 220px;
}
input[type="search"]::placeholder { color: var(--muted); }

/* Toolbar */
.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0;
	flex-wrap: nowrap;
}
.toolbar .left { display: inline-flex; gap: 8px; align-items: center; }
.toolbar .right { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }

.btn {
	background: var(--accent);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
}
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-700); border-color: var(--primary-700); }
.btn-secondary { background: transparent; }
.btn-icon { width: 40px; height: 40px; display: grid; place-items: center; }
.btn-icon.active { outline: 2px solid var(--primary); }

/* Products grid */
.products.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 80px;
}
.products.list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 80px;
}

.product-card {
	background: linear-gradient(180deg, #121824, #0d121b);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
	transition: transform .15s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: var(--primary); }

.product-media {
	position: relative;
	aspect-ratio: 4/3;
	background: #0b0f14;
	overflow: hidden;
}
.product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-body {
	padding: 12px;
	display: grid;
	gap: 4px;
}
.product-name { font-weight: 600; }
.product-brand { color: var(--muted); font-size: 12px; }
.product-price { color: #ffd166; font-weight: 600; margin-top: 4px; }

.product-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.qty-controls {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.qty-controls .btn-icon { width: 32px; height: 32px; }
.qty-value { min-width: 24px; text-align: center; font-weight: 600; }

.select-toggle {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text);
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
}
.select-toggle.selected {
	background: rgba(255,77,79,0.15);
	border-color: var(--primary);
	color: #fff;
}

/* Selection bar */
.selection-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: rgba(20, 26, 34, 0.95);
	border-top: 1px solid var(--border);
	backdrop-filter: blur(8px);
}
.selection-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
}
.summary { color: var(--muted); }
.summary .divider { margin: 0 8px; color: var(--border); }

/* Modal */
.modal[hidden] { display: none; }
.modal .modal-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,0.6);
}
.modal .modal-dialog {
	position: fixed; inset: 0; margin: 48px auto; width: min(720px, 92vw);
	max-height: calc(100vh - 96px);
	background: #0f1520; border: 1px solid var(--border); border-radius: 16px;
	box-shadow: 0 12px 36px rgba(0,0,0,0.4);
	overflow: hidden;
}
.modal-header, .modal-footer { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); border-bottom: none; display: flex; align-items: center; justify-content: space-between; }
.modal-body { max-height: min(60vh, 520px); overflow: auto; padding: 12px 16px; }
.selection-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.selection-list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: #0c111a; border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.selection-list img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; }
.selection-list .title { font-weight: 600; }
.selection-list .meta { color: var(--muted); font-size: 12px; }

/* List view overrides */
.products.list .product-card { display: grid; grid-template-columns: 160px 1fr auto; align-items: stretch; }
.products.list .product-media { aspect-ratio: auto; height: 100%; }
.products.list .product-body { padding: 16px; }
.products.list .product-actions { align-self: center; padding: 0 12px 12px 0; }

/* Small screens */
@media (max-width: 640px) {
	.site-header .actions { flex-wrap: wrap; }
	input[type="search"], select { min-width: 0; width: 100%; }
	.products.list .product-card { grid-template-columns: 120px 1fr; }
	.products.list .product-actions { grid-column: 1 / -1; padding: 0 12px 12px 12px; }
}