/* Search box and count line (Manuals page and category pages). */

.bauer-manuals-search__box {
	margin: 0 0 1em;
}

.bauer-manuals-search__label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.bauer-manuals-search__input {
	box-sizing: border-box;
	width: 100%;
	max-width: 32em;
	padding: 0.6em 0.75em;
	border: 1px solid #767676;
	border-radius: 3px;
	background: #fff;
	color: #222;
	font-size: 1em;
}

.bauer-manuals-search__input:focus-visible {
	outline: 3px solid #111;
	outline-offset: 2px;
}

.bauer-manuals-search__status {
	margin: 0 0 1em;
	font-weight: 600;
}

.bauer-manuals-search__status:empty {
	margin: 0;
}

/* Manual rows. A row's parts sit side by side, and stack on phones. */

.bauer-manuals-list {
	margin: 0 0 2em;
	padding: 0;
	border-top: 1px solid #ddd;
	list-style: none;
}

/*
 * Only rows that are not hidden get a display value. FlyingPress removes CSS it thinks a page does
 * not use, so a separate [hidden] rule might be dropped on live, and a row with display: grid
 * would then stay visible. With :not([hidden]) the browser's own [hidden] rule always wins.
 */
.bauer-manuals-row {
	padding: 0.75em 0;
	border-bottom: 1px solid #ddd;
}

.bauer-manuals-row:not([hidden]) {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	grid-template-areas:
		"image title pdf"
		"image meta pdf";
	column-gap: 1em;
	align-items: center;
}

.bauer-manuals-row__image {
	grid-area: image;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.bauer-manuals-row__title {
	grid-area: title;
	font-weight: 600;
}

.bauer-manuals-row__meta {
	grid-area: meta;
	color: #444;
	font-size: 0.9em;
}

.bauer-manuals-row__pdf {
	grid-area: pdf;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.bauer-manuals-row:not([hidden]) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"image"
			"title"
			"meta"
			"pdf";
		row-gap: 0.4em;
	}

	.bauer-manuals-row__pdf {
		justify-self: start;
	}
}

/* Category tiles. */

.bauer-manuals__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1em;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.bauer-manuals__tiles--small {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.bauer-manuals__tile {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	box-sizing: border-box;
	height: 100%;
	padding: 1em;
	border: 1px solid #ccc;
	background: #f7f7f7;
	color: inherit;
	text-decoration: none;
}

.bauer-manuals__tiles--small .bauer-manuals__tile {
	justify-content: flex-end;
	padding: 0.6em 0.8em;
}

.bauer-manuals__tile-name {
	font-size: 1.1em;
	font-weight: 600;
}

.bauer-manuals__tile:hover .bauer-manuals__tile-name,
.bauer-manuals__tile:focus-visible .bauer-manuals__tile-name {
	text-decoration: underline;
}

.bauer-manuals__tile-count {
	color: #444;
	font-size: 0.9em;
}

/* Main category blocks with their brand links (/manuals/). */

/*
 * Three columns at most: a column is never narrower than 220px or a third of the row, so a
 * fourth never fits. Fewer columns as the space shrinks, and one on a phone.
 */
.bauer-manuals__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, calc((100% - 3em) / 3))), 1fr));
	gap: 1.5em;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.bauer-manuals__group > .bauer-manuals__tile {
	height: auto;
}

.bauer-manuals__brands {
	margin: 0.5em 0 0;
	padding: 0 0 0 1em;
	list-style: none;
}

.bauer-manuals__brands li {
	margin: 0.25em 0;
}

.bauer-manuals__brand-count {
	color: #444;
}

.bauer-manuals__own {
	margin-top: 2em;
}

/* Pictures: a photo frame on Manuals page blocks, a logo area on brand tiles. */

.bauer-manuals__tile--photo {
	padding: 0;
	border: 0;
	background: none;
}

.bauer-manuals__frame {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.4em;
	overflow: hidden;
	border: 5px solid #fa9e1f;
	background: #e6e6e6;
}

.bauer-manuals__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bauer-manuals__tile-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 80px;
	margin-bottom: 0.4em;
	padding: 0.4em;
	background: #fff;
}

.bauer-manuals__tile-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Link trail on category pages. */

.bauer-manuals-trail ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	margin: 0 0 1em;
	padding: 0;
	font-size: 0.9em;
	list-style: none;
}

.bauer-manuals-trail li + li::before {
	content: "\203A";
	margin-right: 0.25em;
	color: #595959;
}

.bauer-manuals__heading {
	margin-top: 0.5em;
}

/* Keyboard focus on every link the plugin prints. */

.bauer-manuals-row__title:focus-visible,
.bauer-manuals-row__pdf:focus-visible,
.bauer-manuals__tile:focus-visible,
.bauer-manuals-trail a:focus-visible,
.bauer-manual__download:focus-visible {
	outline: 3px solid #111;
	outline-offset: 3px;
}

/* A manual's own page. */

.bauer-manual__facts {
	font-weight: 600;
}

.bauer-manual__download {
	display: inline-block;
}

.bauer-manual__forsale {
	margin-left: 1.25em;
}

.bauer-manual__picture {
	margin-bottom: 1.5em;
}

.bauer-manual__picture img {
	height: auto;
	max-width: 100%;
}

.bauer-manual__back {
	margin-bottom: 1em;
}

/*
 * A video's click-to-load player: a 16:9 box holding a link with the poster and a play icon.
 * video.js swaps the link for YouTube's player and sizes that itself, because FlyingPress may drop
 * CSS for an element that is not in the cached page.
 */
.bauer-manual__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.5em;
	background: #222;
}

.bauer-manual__video-play {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
}

.bauer-manual__video-play:focus-visible {
	outline: 3px solid #111;
	outline-offset: 3px;
}

.bauer-manual__video-poster {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bauer-manual__video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background: #c4302b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bauer-manual__video-icon::after {
	content: "";
	position: absolute;
	top: 13px;
	left: 27px;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid #fff;
}

.bauer-manual__video-play:hover .bauer-manual__video-icon,
.bauer-manual__video-play:focus-visible .bauer-manual__video-icon {
	background: #e00;
}

/* A category's logo, beside its title. */

.bauer-manuals__header--logo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
}

.bauer-manuals__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80px;
}