/* Kategorinavigering på produktarkiv, se functions/category-nav.php och assets/scripts/category-nav.js */

/* Den gamla raden från westiro-snippeten ersätts av .knockout-category-nav */
.westiro-mobile-category-nav {
	display: none !important;
}

/* Brödsmula och rubrik överst på arkivet */
.knockout-archive-title {
	display: flex;
	align-items: center;
	height: 75px;
}

.knockout-archive-title__text {
	flex: 1;
	font-size: 32px;
}

/* Tilläggs-CSS:en sätter font-weight 600 !important på alla brödsmulor */
.knockout-archive-breadcrumbs .woocommerce-breadcrumb,
.knockout-archive-breadcrumbs .woocommerce-breadcrumb a {
	font-weight: 400 !important;
}

@media (max-width: 1024px) {
	.knockout-archive-breadcrumbs,
	.knockout-archive-title {
		text-align: left;
		padding-left: 10px;
	}

	.knockout-archive-title {
		height: 50px;
		margin-bottom: 10px;
	}

	/* Den extra brödsmulan och kategoribilden visas inte på surfplatta/mobil */
	.shop-breadcrumbs,
	.category-headimage {
		display: none !important;
	}
}

/* Rubriken: pil + rubrik är en länk ett steg upp */
.knockout-archive-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none !important;
}

.knockout-archive-back:hover,
.knockout-archive-back:focus {
	color: inherit;
}

.knockout-archive-back__icon {
	flex: 0 0 auto;
	margin-left: -4px;
	transition: transform 0.15s ease;
}

.knockout-archive-back:hover .knockout-archive-back__icon,
.knockout-archive-back:focus .knockout-archive-back__icon {
	transform: translateX(-3px);
}

/* Filterknappen på rubrikraden, högerställd (döljs på desktop av tilläggs-CSS:en) */
.knockout-archive-title .westiro-filter-button {
	flex: 0 0 auto;
	margin-left: auto;
}

.knockout-category-nav {
	position: relative;
	margin-bottom: 24px;
}

/* En rad, radbryts aldrig */
.knockout-category-nav__scroll {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.knockout-category-nav__scroll::-webkit-scrollbar {
	display: none;
}

.knockout-category-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 6px 12px;
	border: 0;
	border-radius: 0;
	background: #f5f5f5;
	color: #222;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.knockout-category-nav__link:hover {
	background: #e8e8e8;
	color: #222;
}

.knockout-category-nav__link.is-active {
	background: #333;
	color: #fff;
	font-weight: 500;
}

/* Pilar, visas bara på desktop när raden inte får plats */
.knockout-category-nav__arrow {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	align-items: center;
	width: 44px;
	padding: 0;
	border: 0;
	color: #222;
	cursor: pointer;
}

.knockout-category-nav__arrow--prev {
	left: 0;
	justify-content: flex-start;
	background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0));
}

.knockout-category-nav__arrow--next {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0));
}

@media (min-width: 1025px) {
	.knockout-category-nav__arrow.is-visible {
		display: flex;
	}
}

/* Surfplatta/mobil: scroll i sidled, kant till kant */
@media (max-width: 1024px) {
	.knockout-category-nav {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-bottom: 18px;
	}

	.knockout-category-nav__scroll {
		padding: 2px 10px;
	}

	/* Bara scroll på surfplatta/mobil, aldrig pilar */
	.knockout-category-nav__arrow {
		display: none !important;
	}
}