/* =========================================================
   Oneiric Webshop - Brand Theme
   Colors sampled directly from the official logo:
   navy blue ~ rgb(0,77,129), orange ~ rgb(249,110,5)
   ========================================================= */
:root {
	--brand-blue: #004d81;
	--brand-blue-dark: #00355a;
	--brand-blue-light: #e8f1f8;
	--brand-orange: #f2701a;
	--brand-orange-dark: #d65f0e;
	--brand-orange-light: #fef1e6;
	--text-dark: #22303f;
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--text-dark);
	overflow-x: hidden;
}

.top-bar {
	background-color: var(--brand-blue-dark);
	color: #fff;
	padding: 6px 0;
	font-size: 0.85rem;
}

.text-primary-brand {
	color: var(--brand-blue) !important;
}

.btn-brand {
	background-color: var(--brand-orange);
	border-color: var(--brand-orange);
	color: #fff;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn-brand:hover,
.btn-brand:focus {
	background-color: var(--brand-orange-dark);
	border-color: var(--brand-orange-dark);
	color: #fff;
}
.btn-brand:active {
	transform: translateY(1px);
}

.btn-outline-primary {
	color: var(--brand-blue);
	border-color: var(--brand-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background-color: var(--brand-blue);
	border-color: var(--brand-blue);
}

/* Navbar */
.navbar {
	border-bottom: 1px solid #eef1f4;
}
.navbar-nav .nav-link {
	color: var(--text-dark);
	font-weight: 500;
}
.navbar-nav .nav-link:hover {
	color: var(--brand-blue);
}
.dropdown-item:active,
.dropdown-item.active {
	background-color: var(--brand-blue-light);
	color: var(--brand-blue);
}

.hero-banner {
	background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark) 65%, #012640);
	position: relative;
	overflow: hidden;
}
.hero-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(242,112,26,0.25), transparent 55%);
	pointer-events: none;
}

.category-card:hover .card {
	transform: translateY(-4px);
	transition: 0.2s ease;
	box-shadow: 0 8px 20px rgba(0,77,129,0.12) !important;
}
.category-card .card {
	transition: 0.2s ease;
	border-top: 3px solid transparent;
}
.category-card:hover .card {
	border-top-color: var(--brand-orange);
}

.product-card {
	transition: 0.2s ease;
	border: 1px solid #eef1f4;
}
.product-card:hover {
	box-shadow: 0 10px 24px rgba(0,77,129,0.12) !important;
	transform: translateY(-3px);
}
.product-card .product-img {
	height: 180px;
	object-fit: contain;
	padding: 15px;
	background: #fafbfc;
}
.product-img-placeholder,
.product-img-placeholder-lg {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-blue-light);
	color: #9db8ca;
	font-size: 2.5rem;
	border-radius: 6px;
}
.product-img-placeholder-lg {
	height: 320px;
	font-size: 4rem;
}

.badge.bg-light {
	border: 1px solid #e3e8ec;
}

.site-footer {
	background-color: var(--brand-blue-dark);
}
.text-light-50 {
	color: rgba(255,255,255,0.7);
}
.footer-link {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
}
.footer-link:hover {
	color: var(--brand-orange);
}

/* Search autocomplete */
.search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 48px;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
	max-height: 360px;
	overflow-y: auto;
	z-index: 1050;
	margin-top: 4px;
}
.search-suggestion-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	text-decoration: none;
	color: #212529;
	border-bottom: 1px solid #f1f1f1;
}
.search-suggestion-item:last-child {
	border-bottom: none;
}
.search-suggestion-item:hover {
	background: var(--brand-blue-light);
}
.search-suggestion-item img,
.search-suggestion-noimg {
	width: 36px;
	height: 36px;
	object-fit: contain;
	background: #f8f9fa;
	border-radius: 4px;
	flex-shrink: 0;
}
.search-suggestion-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
}
.search-suggestion-name {
	font-size: 0.85rem;
	font-weight: 600;
}
.search-suggestion-meta {
	font-size: 0.75rem;
	color: #6c757d;
}

/* =========================================================
   Mobile responsiveness
   ========================================================= */
@media (max-width: 767.98px) {
	.hero-banner h1 { font-size: 1.6rem; }
	.hero-banner .lead { font-size: 0.95rem; }
	.top-bar { font-size: 0.72rem; }
	.top-bar .container { flex-direction: column; gap: 2px; text-align: center; }

	.search-suggestions { right: 0; left: 0; }

	.product-card .product-img,
	.product-img-placeholder { height: 140px; }

	table.table-sm td, table.table-sm th { font-size: 0.8rem; }

	.navbar-brand img { height: 36px !important; }
}

/* Every table gets the same row-hover highlight Bootstrap's .table-hover
   gives, project-wide, without needing that class added to each one. */
.table:not(.table-hover) > tbody > tr:hover > * {
	--bs-table-color-state: var(--bs-table-hover-color);
	--bs-table-bg-state: var(--bs-table-hover-bg);
}