/*
 * The catalog grid.
 *
 * Reference: work/pic7/pic8.jpeg (FWRD) and work/pic7/pic7.jpeg (the "+" tile Michael circled).
 * The product floats on white with room around it. No card, no border, no shadow - the space is
 * what does the work.
 */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--akem-grid-columns), minmax(0, 1fr));
	gap: var(--akem-space-5) var(--akem-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	/* Both references centre the tile text under the image. The "left aligned aesthetic" Michael
	   praised was about the product info column, not the grid - an earlier read of this got it
	   the wrong way round. */
	text-align: center;
}

.woocommerce ul.products li.product a img {
	margin: 0;
	box-shadow: none;
}

/* Media ---------------------------------------------------------------------
   Blocksy renders the image container. We only give it the room the reference
   has and take away its frame. */

.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product .ct-media-container {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--akem-tile-ratio);
	padding: var(--akem-space-4);
	/* The reserved well. With no photograph it is simply this surface and nothing else - see
	   Media_Well for why nothing is drawn inside it. */
	background: var(--akem-well);
	border-radius: 0;
	overflow: hidden;
}

.woocommerce ul.products li.product .ct-media-container img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

/* The "+". Thin strokes, no circle, no fill. It is a real link to the product page, so it gets a
   target big enough to hit and a focus ring, not just a glyph. */
.akem-tile__plus {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: var(--akem-size-title);
	font-weight: 300;
	line-height: 1;
	color: var(--akem-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.akem-tile__plus:hover {
	color: var(--akem-blue);
}

.akem-tile__plus:focus-visible {
	outline: 3px solid var(--akem-blue-focus);
	outline-offset: 2px;
}

/* Michael asked for "hovers over or gets near", so the whole tile arms it, not the glyph. */
li.product:hover .akem-tile__plus,
li.product:focus-within .akem-tile__plus {
	color: var(--akem-blue);
}

/* An empty well still has to hold its shape, or the row collapses to the text height. */
.woocommerce ul.products li.product .ct-media-container:empty,
.woocommerce ul.products li.product figure:empty {
	display: block;
	aspect-ratio: var(--akem-tile-ratio);
	background: var(--akem-well);
}

/* Text --------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: var(--akem-space-3) 0 0;
	padding: 0;
	font-size: var(--akem-size-micro);
	font-weight: 600;
	letter-spacing: var(--akem-tracking-micro);
	line-height: var(--akem-leading-tight);
	text-transform: uppercase;
	color: var(--akem-ink);
}

.akem-tile__strengths {
	margin: var(--akem-space-1) 0 0;
	font-size: var(--akem-size-nano);
	letter-spacing: var(--akem-tracking-micro);
	color: var(--akem-grey);
}

.akem-tile__strengths s {
	text-decoration-thickness: 1px;
	opacity: 0.65;
}

.akem-tile__sep {
	margin: 0 var(--akem-space-1);
	color: var(--akem-line);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: var(--akem-space-1) 0 0;
	font-size: var(--akem-size-nano);
	color: var(--akem-ink);
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

/* Narrower ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.akem-tile__plus {
		transition: none;
	}
}

@media (max-width: 1024px) {
	:root { --akem-grid-columns: 3; }
}

@media (max-width: 782px) {
	:root {
		--akem-grid-columns: 2;
		--akem-grid-gap: var(--akem-space-4);
	}
}

/* The brief: two columns on standard phones only while the labels stay legible, one column on
   narrow devices. */
@media (max-width: 360px) {
	:root {
		--akem-grid-columns: 1;
	}
}