/* =========================================================
 * HOBIS — Mizzle theme overlay (MINIMÁLNÍ)
 * Jen barvy + brand badge + header gradient.
 * Vše ostatní řeší Mizzle CSS (Bootstrap 5 utility classy).
 * =========================================================
 */

:root {
	/* Mizzle green primary (CTA, links) */
	--bs-primary: #10b981;
	--bs-primary-rgb: 16, 185, 129;
	--bs-link-color: #10b981;
	--bs-link-hover-color: #047857;
	/* Graphite — header background */
	--mizzle-graphite: #1f2937;
	--mizzle-graphite-dark: #111827;
	/* HOBIS orange — jen pro brand badge HOBIS */
	--hobis-orange: #e87b00;
	--hobis-orange-dark: #b85f00;
	--officepro-blue: #0056b3;
}

/* ==========================================================
 * BOOTSTRAP PRIMARY OVERRIDE → Mizzle zelená
 * ========================================================== */
.btn-primary {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--bs-link-hover-color);
	border-color: var(--bs-link-hover-color);
}
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

/* ==========================================================
 * HEADER (navbar — grafit gradient)
 * ========================================================== */
.navbar-hobis {
	background: linear-gradient(135deg, var(--mizzle-graphite) 0%, var(--mizzle-graphite-dark) 100%);
}
.navbar-hobis .navbar-brand,
.navbar-hobis .nav-link {
	color: #fff;
}
.navbar-hobis .nav-link:hover {
	color: var(--bs-primary);
}
/* Mobilní rozbalené menu (<1200px = navbar-expand-xl breakpoint):
   rozbalí se mimo tmavý navbar pruh, proto mu dáme grafit pozadí,
   jinak je bílý text na bílém pozadí stránky neviditelný. */
@media (max-width: 1199.98px) {
	.navbar-hobis .navbar-collapse {
		background: linear-gradient(135deg, var(--mizzle-graphite) 0%, var(--mizzle-graphite-dark) 100%);
		margin-top: 0.75rem;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
	}
	.navbar-hobis .navbar-collapse .nav-link {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.navbar-hobis .navbar-collapse .nav-item:last-child .nav-link {
		border-bottom: none;
	}
}

/* ==========================================================
 * BRAND BADGE (HOBIS oranžová / OFFICE PRO modrá)
 * ========================================================== */
.brand-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	border-radius: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.brand-badge.brand-hobis {
	background-color: var(--hobis-orange);
}
.brand-badge.brand-officepro {
	background-color: var(--officepro-blue);
}

/* ==========================================================
 * AKTIVNÍ THUMB / SWATCH (zelený border místo defaultu)
 * Jen úprava barvy — vše ostatní řeší Mizzle/Bootstrap utility.
 * ========================================================== */
.hobis-thumb-item.active,
.hobis-color-swatch.is-active {
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}
.hobis-thumb-item:hover,
.hobis-color-swatch:hover {
	border-color: var(--bs-primary) !important;
}
/* Bootstrap btn:focus může přepsat border-color šedou — explicitně chráním aktivní stav */
.hobis-color-swatch:focus,
.hobis-color-swatch:focus-visible {
	border-color: rgb(220, 224, 229) !important;
	box-shadow: none !important;
}
.hobis-color-swatch.is-active:focus,
.hobis-color-swatch.is-active:focus-visible {
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

/* Breadcrumb override (my.css má staré 20px padding) — méně mezery */
.breadcrumb {
	padding: 0.25rem 0 !important;
	margin: 0 0 0.5rem 0 !important;
}

/* Mizzle defaultní `section { padding: 120px 0 }` je MOC pro produkt/list/kategorii.
 * Override na minimum pro všechny shop sekce. */
section.product-detail-mizzle,
section.shop-grid-mizzle,
section.hobis-product-info-tabs {
	padding-top: 0 !important;
	padding-bottom: 1rem !important;
}

/* ==========================================================
 * HOMEPAGE — Hero swiper + category tiles (Mizzle styl)
 * ========================================================== */
.hobis-hero-swiper {
	border-radius: 0.5rem;
	overflow: hidden;
}
.hobis-hero-card {
	min-height: 400px;
	height: 400px;
}
@media (max-width: 767.98px) {
	.hobis-hero-card { min-height: 280px; height: 280px; }
	.hobis-hero-card h1 { font-size: 1.5rem; }
	.hobis-hero-card .lead { font-size: 0.9rem; }
}
/* Category tiles — čtvercové dlaždice s hover scale */
.hobis-category-tile {
	transition: transform 0.2s, box-shadow 0.2s;
	background: #fff;
}
.hobis-category-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}
.hobis-category-tile-img {
	background: #f8f9fa;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hobis-category-tile-img img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	padding: 1rem;
}
.hobis-category-tile .card-title {
	font-size: 0.95rem;
	font-weight: 600;
}
.text-success-hover:hover { color: var(--bs-primary) !important; }

/* Hover overlay s šipkou pro category tile */
.hobis-tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(16, 185, 129, 0.95) 100%);
	opacity: 0;
	transition: opacity 0.3s;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 1rem;
}
.hobis-category-tile:hover .hobis-tile-overlay {
	opacity: 1;
}
.hobis-category-tile .card-title {
	transition: color 0.2s;
}
.hobis-category-tile:hover .card-title {
	color: var(--bs-primary) !important;
}

/* Brand cards na homepage — Hobis = teplá oranžová, OFFICE PRO = modrá */
.hobis-brand-card-officepro {
	background-color: rgba(0, 86, 179, 0.08);
}