/* 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;
}

/* The shelf's photograph standing in for an article that has none. It is dimmed and carries the
   shelf's name across it, because the one thing it must not do is read as a photograph OF the
   article: a buyer looking at a helmet's card has to know that is the shelf, not the helmet. */
.article-shelf {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.article-shelf img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.55);
	opacity: .55;
}

.article-shelf-name {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text);
	background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* The stand-in for an article with no photograph. Same box as the picture it replaces, so the
   grid keeps one rhythm, and drawn only in the site's own tokens — a tint of the accent over
   the surface, which reads as "deliberately plain" on a pale site and on a dark one alike. */
.article-photo-none {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	color: var(--muted);
	font-family: var(--font-display);
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 1rem;
}

.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. The
   picture takes the larger share — it is what somebody is here to look at — and the column
   beside it is held to a readable measure instead of stretching across the page. */
.article-page {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

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

.article-detail {
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.article-detail h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
}

/* The shelf, above the name and in the accent: what this is, before what it is called. */
.article-shelf-link {
	align-self: start;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

.article-shelf-link:hover {
	text-decoration: underline;
	text-underline-offset: .25rem;
}

.article-lede {
	margin: 0;
	color: var(--muted);
	font-size: 1.05rem;
}

.article-text {
	margin: .75rem 0 0;
	line-height: 1.65;
}

.article-stock {
	margin: 0;
	font-size: .9rem;
}

.article-stock--low { color: var(--warn); }
.article-stock--out { color: var(--bad); }

/* The quantity and the decision on one line: a number box the width of a number, and the
   button beside it. Stacked full-width they read as two separate steps, which buying one cap
   is not. */
.article-buy {
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.article-qty {
	flex: 0 0 auto;
	margin: 0;
}

.article-qty input {
	width: 5.5rem;
}

.article-buy .button {
	flex: 1 1 12rem;
}

.article-back {
	margin-top: 1.5rem;
	font-size: .9rem;
}

.article-back a {
	color: var(--muted);
}

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

/* On the article's own page the stand-in is bigger and rounded like the photograph it stands
   in for, so the two columns keep their balance whether the article has been shot or not. */
.article-shelf--big {
	border-radius: var(--radius);
	aspect-ratio: 3 / 2;
}

/* 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;
}