/* Listing */
#distributors {
	margin-top: 4rem;
	margin-bottom: 4rem;
  padding-block: 2rem;
}

#distributors > header {
	margin-bottom: 2.5rem;
}

#distributors > header > h2 {
	margin: 0 0 1rem;
}

#distributors > header > :last-child {
	margin-bottom: 0;
}

#distributors > dl {
	column-count: 1;
	gap: 2rem;
}

#distributors > dl > div {
	break-inside: avoid;
	margin-bottom: 2rem;
}

#distributors > dl dt {
	font-weight: normal;
	margin: 0 0 0.25rem;
}

#distributors > dl dd {
	margin: 0 0 0.125rem;
}

#distributors > dl dd a {
	color: currentColor;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

#distributors > dl dd a:not(:hover) {
	text-decoration-color: transparent;
}

/* Low res */
@media (min-width: 580px) {
	#distributors > dl {
		column-count: 2;
	}
}

/* Medium res */
@media (min-width: 768px) {
	#distributors > dl {
		column-count: 3;
	}
}

/* High res */
@media (min-width: 1200px) {
	#distributors > dl {
		column-count: 4;
	}
}

/* Dialog style */
#distributor-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem 5rem;
	align-items: center;
}

#distributor-dialog::after {
	background-color: #e9e9e9;
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	grid-row: 2;
	grid-column: 1;
}

#distributor-dialog > figure {
	text-align: center;
	margin: 0;
}

#distributor-dialog > figure img {
	max-width: 20rem;
	width: 100%;
}

#distributor-dialog > figure figcaption {
	margin-top: 1.5rem;
}

#distributor-dialog > figure figcaption a {
    color: currentColor;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

#distributor-dialog > figure figcaption > :last-child {
	margin: 0;
}

#distributor-dialog > div > h2 {
	margin-top: 0;
}

#distributor-dialog > div > dl {
	margin: 0;
}

#distributor-dialog > div > dl dt {
	font-size: 1.25em;
	font-weight: normal;
	margin: 0 0 0.2rem;
}

#distributor-dialog > div > dl dt:not(:first-child) {
	margin-top: 2rem;
}

#distributor-dialog > div > dl dd {
	margin: 0 0 0.125rem;
}

#distributor-dialog > div > dl dd a {
	color: currentColor;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* High res */
@media (min-width: 1080px) {
	#distributor-dialog {
		grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
	}

	#distributor-dialog::after {
		width: 2px;
		height: 100%;
		grid-row: 1;
		grid-column: 2;
	}

	#distributor-dialog > div {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* Dialog functionality */ 
#distributor-dialog {
	background-color: #FFF;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1001;
	width: 75rem;
	height: auto;
	max-width: 90%;
	max-height: 90%;
	padding: 3rem;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%);
	transition: opacity .25s ease, visibility 0s .25s linear;
}

@media (max-width: 600px) {
	#distributor-dialog {
		padding-top: 4rem;
	}
}

#distributor-dialog [data-distributor-close],
#distributor-dialog [data-distributor-copy]  {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 1em;
	height: 1em;
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
}

#distributor-dialog [data-distributor-copy] {
	right: 4rem;

	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h140.1l67.9 67.9V320c0 8.8-7.2 16-16 16zm-192 48h192c35.3 0 64-28.7 64-64V115.9A48 48 0 0 0 433.9 82l-67.8-67.9A48 48 0 0 0 332.2 0H192c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64h192c35.3 0 64-28.7 64-64v-32h-48v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16h32v-48H64z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 50%;
	mask-position: center center;
}

#distributor-dialog + .distributor-dialog--backdrop {
	background-color: var(--overlay-color, #000);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s .25s linear;
}

#distributor-dialog.open {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s 0s linear;
}

#distributor-dialog.open + .distributor-dialog--backdrop {
	opacity: 0.75;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s 0s linear;
}

html.distributor-dialog--open {
	touch-action: none;
	overflow: hidden;
}


{# NOTE: NESTED CSS  /* Listing */
#distributors {
	margin-top: 4rem;
	margin-bottom: 4rem;
	
	& > header {
		margin-bottom: 2.5rem;
		
	    & > h2 {
		    margin: 0 0 1rem;	
		}
		
		& >:last-child {
			margin-bottom: 0;
		}
	}
	
	& > dl {
		column-count: 1;
		gap: 2rem;
		
		& > div {
			break-inside: avoid;
			margin-bottom: 2rem;
		}
		
		& dt {
			font-weight: normal;
			margin: 0 0 0.25rem;
		}
		
		& dd {
			margin: 0 0 .125rem;	
			
			& a {
				color: currentColor;
				text-decoration: underline;
				text-decoration-thickness: 1px;
				
				&:not(:hover) {
					text-decoration-color: transparent;
				}
			}
		}
	}
	
	/* Low res */
	@media (min-width: 580px) {
		& > dl {
			column-count: 2;
		}
	}

	/* Medium res */
	@media (min-width: 768px) {
		& > dl {
			column-count: 3;
		}
	}

	/* High res */
	@media (min-width: 1200px) {
		& > dl {
			column-count: 4;
		}
	}
}

/* Dialog style */
#distributor-dialog {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem 5rem;
	align-items: center;
	
	&::after {
		background-color: #e9e9e9;
		
		content: '';
		display: block;
		
		width: 100%;
		height: 2px;
		
		grid-row: 2;
		grid-column: 1;
	}
	
	& > figure {
		text-align: center;
		margin: 0;
		
		& figcaption {
			margin-top: 1.5rem;			
		}
	}
	
	& > div {
		& > h2 {
			margin-top: 0;	
		}
		
		& > dl {
			margin: 0;
			
			& dt {
				font-size: 1.25em;
				font-weight: normal;
				
				margin: 0 0 0.2rem;
				
				&:not(:first-child) {
					margin-top: 2rem;	
				}
			}
			
			& dd {
				margin: 0 0 .125rem;
				
				& a {
					color: currentColor;
					text-decoration: underline;
					text-decoration-thickness: 1px;
				}
			}
		}
	}
	
	/* High res */
	@media (min-width: 1080px) {
		grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
		
		&::after {
			width: 2px;
			height: 100%;

			grid-row: 1;
			grid-column: 2;
		}
		
		& > div {
			padding-top: 1rem;
			padding-bottom: 1rem;
		}
	}
}

/* Dialog functionality */ 
#distributor-dialog {
	background-color: #FFF;
	
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1001;
	
	width: 75rem;
	height: auto;
	max-width: 90%;
	max-height: 90%;
	
	padding: 3rem;
	overflow: auto;
	
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%);
	
	transition: opacity .25s ease,
				visibility 0s .25s linear;
	
	& [data-distributor-close] {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		
		width: 1em;
		height: 1em;
		
		cursor: pointer;
		
		font-size: 2rem;
		line-height: 1;
		text-align: center;
		vertical-align: middle;
	}
	
	& + .distributor-dialog--backdrop {
		background-color: var(--overlay-color, #000);
		
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
			
		opacity: 0;
		visibility: hidden;
		
		transition: opacity .25s ease,
					visibility 0s .25s linear;
	}
	
	&.open {
		opacity: 1;
		visibility: visible;
		
		transition: opacity .25s ease,
					visibility 0s 0s linear;
		
		& + .distributor-dialog--backdrop {
			opacity: 0.75;
			visibility: visible;
			
			transition: opacity .25s ease,
						visibility 0s 0s linear;
		}
	}
}

html.distributor-dialog--open {
	touch-action: none;
	overflow: hidden;
} #}