/* The shop's own layout. Everything it PAINTS with comes from the site's contract — the four
   tokens and the ones base.css derives — so the same catalogue reads correctly on a dark site
   and on a pale one without a line of this file changing. There is not a single colour literal
   here on purpose: one hex and the page stops being the tenant's. */

.shelves {
	margin-bottom: 1.5rem;
}

.grid.articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.25rem;
}

.card.article {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

.card.article:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.card.article:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.card.article img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.article-body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.article-body h2 {
	margin: 0;
	font-size: 1.05rem;
}

.price {
	font-weight: 600;
	color: var(--accent);
	margin: 0;
}

.price--big {
	font-size: 1.5rem;
	font-family: var(--font-display);
}

/* The article's own page: the photograph beside what it is, and one column on a phone. */
.article-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 48rem) {
	.article-page {
		grid-template-columns: minmax(0, 1fr);
	}
}

.article-photo {
	width: 100%;
	border-radius: var(--radius);
	display: block;
}

/* A line of the cart or of the order: what it is on the left, what it costs on the right, the
   same shape base.css already gives a summary. */
.line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--line);
}

.line:last-child {
	border-bottom: none;
}

.line-what {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.line-name {
	font-weight: 500;
}

.line-qty {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.line-qty input {
	width: 4.5rem;
}