/*
 * Albanfaust produkter – kompletterar temat Sydney.
 * Knapparna använder Sydneys .roll-button och rutnätet Sydneys Bootstrap-kolumner.
 */

/*
 * Pluginets sidor (produktsidor, produktlistan, beställningssidan) får samma halvgenomskinliga
 * vita ruta som SiteOrigin-sidorna, t.ex. Till salu, så att texten går att läsa mot bakgrundsbilden.
 */
.albanfaust-sida #primary > .site-main,
.albanfaust-sida #primary > .post-wrap {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 30px;
}

@media (max-width: 767px) {
	.albanfaust-sida #primary > .site-main,
	.albanfaust-sida #primary > .post-wrap {
		padding: 20px;
	}
}

/* Produktsidan */
.albanfaust-prisruta {
	margin: 0 0 30px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.albanfaust-pris {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 15px;
}

.albanfaust-pris-skiljetecken {
	opacity: 0.5;
	padding: 0 4px;
}

.albanfaust-tillbaka {
	margin-top: 30px;
}

/* Produktlistan */
.albanfaust-kategorinav {
	margin: 0 0 30px;
}

.albanfaust-kategorinav a {
	display: inline-block;
	margin: 0 20px 10px 0;
}

.albanfaust-kategori {
	margin-bottom: 30px;
	scroll-margin-top: 120px; /* under Sydneys fasta sidhuvud vid hopp till #kategori-… */
}

.albanfaust-kategori-rubrik {
	margin-bottom: 20px;
}

/* Lika höga kort. Bootstraps clearfix-pseudoelement stör flex-raden. */
.albanfaust-produkter .row {
	display: flex;
	flex-wrap: wrap;
}

.albanfaust-produkter .row::before,
.albanfaust-produkter .row::after {
	display: none;
}

.albanfaust-kort-kolumn {
	display: flex;
	margin-bottom: 30px;
}

.albanfaust-kort {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.albanfaust-kort-bild {
	display: block;
	margin-bottom: 15px;
	background: #f5f5f5;
}

/* Hela instrumentet syns: bilden beskärs inte. */
.albanfaust-kort-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.albanfaust-kort-titel {
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 8px;
}

.albanfaust-kort .albanfaust-pris {
	font-size: 16px;
	margin-bottom: 15px;
}

.albanfaust-kort-knappar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: auto 0 0;
}

@media (max-width: 767px) {
	.albanfaust-kort-kolumn {
		width: 100%;
	}
}