/* Polaris does the rest; this only lays out the photo grids. */
body {
	margin: 0;
	background: #f1f1f1;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-block-start: 16px;
}

.center {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}

.frame {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
	background: #f7f7f7;
}

/* Sized before it loads, or a lazy image of 0×0 never starts loading. */
.frame img,
.frame canvas {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Shows which parts of a photo are transparent. */
.frame.checker {
	background-color: #fff;
	background-image: conic-gradient(#e3e3e3 25%, transparent 0 50%, #e3e3e3 0 75%, transparent 0);
	background-size: 16px 16px;
}

.product .title {
	display: block;
	margin-block-start: 8px;
	font-weight: 600;
}

/* A preview takes a whole row: the detail before and after, side by side and as large as
   the row allows, up to about its real size. */
.card.is-preview {
	grid-column: 1 / -1;
}

.card.is-preview .compare {
	max-width: 920px;
}

.footer {
	margin-block-start: 16px;
	text-align: center;
}

.compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.compare figure {
	margin: 0;
}

.compare figcaption {
	margin-block-start: 6px;
}

/* A working card: the spinner stays on the left and the text wraps next to it in a narrow card. */
.status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}

.status-body {
	display: grid;
	gap: 6px;
}

.status progress {
	appearance: none;
	width: 100%;
	height: 6px;
	border: 0;
	border-radius: 3px;
	background: #e3e3e3;
	overflow: hidden;
}

.status progress[hidden] {
	display: none;
}

.status progress::-webkit-progress-bar {
	background: #e3e3e3;
}

.status progress::-webkit-progress-value {
	background: #303030;
	transition: width 0.3s;
}

.status progress::-moz-progress-bar {
	background: #303030;
}