#product_video {
	width: 95%;
	height: auto;
	aspect-ratio: 560/315;
	justify-self: center;
	max-width: 800px;
}

.card_holder {
	display: flex;
	gap: clamp(1rem, .25rem + 5vw, 4rem);
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	isolation: isolate;
	padding: 4rem 0;
}

.card_holder > * {
	flex: 1 1 250px;
}

.card_holder::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: hsla(var(--brand-color-hsl), .1);
	z-index: -1;
	width: 100vw;
}

.card {
	--_padding: 1.5em;

	border: 1px solid var(--brand-color-400);
	border-radius: var(--size-200);
	overflow: hidden;
	padding: var(--_padding);
	display: grid;
	align-content: start;
	align-items: center;
	color: var(--text-color);
	gap: 1em;
	background-color: var(--bg-color);
	grid-auto-flow: column;
}

a.card {
	--_padding: .5em;
	font-size: .9em;
}

.card > h3 {
	font-size: clamp(1.05em, 1.05em + 1vw, 1.4em);
	line-height: 1.1;
}

.card img {
	border: 1px solid var(--brand-color-500);
	border-radius: var(--size-200);
	object-fit: contain;
	height: auto;
	max-width: 120px;
}

@media (min-width: 600px) {
	.card_holder > * {
		flex: 1 1 190px;
	}

	.card {
		grid-auto-flow: row;
		align-content: start;
		max-width: 266px;
		gap: 0;
	}

	a.card {
		background-color: hsla(var(--bg-color-hsl), .5);
		opacity: .9;
		transition: box-shadow 200ms ease-in-out,
								transform 200ms ease-in-out,
								background-color 200ms ease-in-out,
								opacity 200ms ease-in-out;
	}

	a.card > :not(:first-child) {
		padding: calc(var(--_padding) * 2);
	}

	a.card:hover,
	a.card:focus {
		outline: none;
		text-decoration: none;
		box-shadow: 0px 0px .5rem 0px var(--brand-color-500);
		transform: scale(1.02, 1.02);
		background-color: var(--bg-color);
		opacity: 1;
	}

	a.card img {
		max-width: 100%;
		opacity: .8;
		transition: opacity 200ms ease-in-out;
	}

	a.card:hover img,
	a.card:focus img {
		opacity: 1;
	}
}


.category + .category {
	margin-top: var(--size-600);
}

.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	gap: 2em 4em;
}

.product {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1em;
}

/* .product > :not(:first-child) {
	margin-left: .25em;
} */

.product__name {
	font-size: 1.05em;
	/* font-weight: var(--fw-bold); */
}

.product__description {
	font-size: .8em;
}

.product__link {
	font-size: .75em;
	line-height: 1;
}

.product__link[rel~=external]::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .3em;
	background: transparent url('/images/icons/external-link.svg') 0 2px no-repeat;
	opacity: .75;
}

.product__size,
.product__price {
	font-size: .85em;
}

.product__size {
	letter-spacing: 1px;
}

.product__price {
	letter-spacing: 2px;
}

.product__info {
	display: grid;
	grid-auto-flow: row;
	gap: .5em;
	align-content: start;
}

.product__image {
	min-width: 64px;
	min-height: 192px;
	position: relative;
	align-self: baseline;
}

.product__image img {
	font-size: .75rem;
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid hsl(var(--brand-color-hsl-500));
	transition: box-shadow 100ms ease-in-out,
							transform 100ms ease-in-out;
}

.product__image .icon {
	position: absolute;
	width: 32px;
	height: 32px;
	color: white;
	bottom: 0;
	right: 0;
	background-color: hsla(var(--brand-color-hsl-500), .5);
	padding: 4px;
	border-radius: 4px;
}

.product__image[data-detail-image]:hover {
	cursor: pointer;
}

.product__image[data-detail-image]:hover img {
	box-shadow: 0 0 8px 1px hsla(var(--brand-color-hsl-500), .75);
	transform: scale(1.05, 1.05);
}

.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background-color: hsla(0, 0%, 0%, .75);
	z-index: 9999;
	padding: 2rem;
}

.lightbox.open {
	display: block;
}

.lightbox img {
	object-fit: contain;
	margin: auto;
	height: 100%;
}


/* price page */

.category .table {
	--row-padding: 1.75em;

	border-collapse: collapse;
	border: 0;
	table-layout: auto;
  width: 100%;
	font-size: clamp(.7em, .7em + .5vw, 1em);
	margin-top: 1rem;
	position: relative;
}

@media (min-width: 700px) {
	.category .table {
		table-layout: fixed;
	}
}

.category .table caption {
	font-weight: var(--fw-bold);
	font-size: var(--fs-600);
	text-align: left;
	margin-bottom: var(--size-500);
}

.category .table th,
.category .table td {
	vertical-align: top;
	text-align: start;
	font-weight: normal;
}

.category .table thead th {
	font-size: 75%;
	font-weight: var(--fw-bold);
	opacity: .9;
}

.category .table thead th:first-of-type {
	width: 50%;
}

.category .table tbody th {
	padding-right: 1.5em;
	padding-top: var(--row-padding);
	line-height: 1;
}

.category .table tbody th ~ td {
	padding-top: calc(var(--row-padding) + .25em);
}

.category .table tbody {
	/* must be sticky for safari to render ::before correctly */
	position: sticky;
}

.category .table tbody::before {
	content: '';
	position: absolute;
	top: calc(var(--row-padding) / 2);
	width: 100%;
	height: 1px;
	background-color: hsla(var(--brand-color-hsl-300), .8);
}

nav.toc {
	display: grid;
	grid-auto-flow: column;
	justify-content: space-around;
	gap: 1rem;
	position: relative;
	z-index: 1;
	font-size: clamp(var(--fs-100), .6em + .5vw, var(--fs-300));
	padding: .75em;
	overflow: hidden;
	position: sticky;
	top: calc(var(--nav-height) + 1rem);
	font-weight: var(--fw-bold);
	box-shadow: inset 0 0 5px 0px hsla(var(--brand-color-hsl-500), .75);
	border-radius: var(--size-100);
	background-color: var(--bg-color);
	margin-inline: -.5rem;
}

nav.toc::before {
	content: '';
	position: absolute;
	background-color: hsla(var(--brand-color-hsl-500), .125);
	inset: 0;
	z-index: -1;
}

.category:target,
.table:target {
	scroll-margin-top: calc(var(--nav-height) + 4.5rem);
}