/* MC Wear — Product card, Theme 2 ("Editorial")
 *
 * The alternate card design chosen in Customize → MC Wear — Product Cards.
 * Loaded only while Theme 2 is the active style, so Theme 1 pages carry none
 * of this weight.
 *
 * Shape (Figma "Card version 3 — With fill IMG"): the photograph is the card.
 * It runs edge to edge in a tile of its own with nothing printed over it, and
 * the words sit underneath on the page's white — title, price, colorways. The
 * grid closes to a 4px hairline so the photographs read as one contact sheet
 * rather than six separate boxes.
 *
 * Markup comes from includes/class-product-card.php, so one rule set styles
 * the shop grid, the homepage sliders and the related-products row alike.
 */

:root {
	/* The hairline the grids close to. Declared at the root as well as on the
	 * card, because the grid containers are outside any card. */
	--mcw-card2-gap: 4px;
}

.mcw-card2 {
	--mcw-card2-ratio: 424 / 484;
	--mcw-card2-ink: #000000;
	--mcw-card2-ink-soft: #3b3e40;
	--mcw-card2-ground: #f2f2f2;

	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	position: relative;
}

.mcw-card2 *,
.mcw-card2 *::before,
.mcw-card2 *::after {
	box-sizing: border-box;
}

/* ---------- Photo tile ---------- */
.mcw-card2 .mcw-card2__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mcw-card2-ratio);
	background: var(--mcw-card2-ground);
	overflow: hidden;
}

.mcw-card2 .mcw-card2__media {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

.mcw-card2 .mcw-card2__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transition: transform 0.6s ease;
}

.mcw-card2:hover .mcw-card2__img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.mcw-card2 .mcw-card2__img {
		transition: none;
	}

	.mcw-card2:hover .mcw-card2__img {
		transform: none;
	}
}

/* ---------- Name, price, colorways ---------- */
.mcw-card2 .mcw-card2__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
}

.mcw-card2 .mcw-card2__title {
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mcw-card2-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mcw-card2 .mcw-card2__title:hover,
.mcw-card2 .mcw-card2__title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mcw-card2 .mcw-card2__price {
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mcw-card2-ink-soft);
}

.mcw-card2 .mcw-card2__price .amount {
	color: inherit;
}

/* Colorway squares: a 16px white chip with a 2.4px gutter, so the fill inside
 * reads as a swatch card rather than a dot. The hairline keeps a white or
 * cream colorway visible against the page. */
.mcw-card2 .mcw-card2__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mcw-card2-gap);
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.mcw-card2 .mcw-card2__swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 2.4px;
	background: #ffffff;
}

.mcw-card2 .mcw-card2__swatch-fill {
	display: block;
	flex: 1 0 0;
	min-width: 0;
	height: 100%;
	border: 0.2px solid rgba(0, 0, 0, 0.12);
}

.mcw-card2 .mcw-card2__swatch-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * Grid geometry
 * The cards are one uniform shape now, so the Theme 1 layouts (mixed
 * aspect ratios in the shop, a mosaic with tall spans in Featured) give
 * way to one even grid everywhere: three across on desktop, two from
 * tablet down, closed to the design's 4px hairline. Every widget that
 * shows a product grid follows the same rule, so a row of cards reads
 * the same on the shop page as on the homepage.
 *
 * Scoped to the body class the Customizer setting prints, so Theme 1
 * keeps its own layouts untouched.
 * ===================================================================== */

body.mcw-cardstyle-theme-2 .mcw-pc.mcw-pc .mcw-pc__grid,
body.mcw-cardstyle-theme-2 .mcw-featured.mcw-featured .mcw-featured__grid,
body.mcw-cardstyle-theme-2 .mcw-summer.mcw-summer .mcw-summer__grid,
body.mcw-cardstyle-theme-2 .mcw-psc.mcw-psc .mcw-psc__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto;
	gap: var(--mcw-card2-gap, 4px);
	/* Stretch, not start: every card in a row takes the row's height, so the
	 * meta block can grow and the colorway squares (margin-top: auto) settle
	 * on one shared baseline however many lines the title runs to. */
	align-items: stretch;
}

/* Three of these widgets stack their cards inside column wrappers — the
 * staggered two-column silhouette Theme 1 is built around. A wrapper would cap
 * the row at however many wrappers there are (two), whatever the grid asks
 * for, so Theme 2 prints every card into a single wrapper and dissolves it
 * here: the cards become grid items themselves, in catalogue order. */
body.mcw-cardstyle-theme-2 .mcw-pc.mcw-pc .mcw-pc__col,
body.mcw-cardstyle-theme-2 .mcw-summer.mcw-summer .mcw-summer__col,
body.mcw-cardstyle-theme-2 .mcw-psc.mcw-psc .mcw-psc__col {
	display: contents;
}

/* Tablet and phone: two across. */
@media screen and (max-width: 1024px) {
	body.mcw-cardstyle-theme-2 .mcw-pc.mcw-pc .mcw-pc__grid,
	body.mcw-cardstyle-theme-2 .mcw-featured.mcw-featured .mcw-featured__grid,
	body.mcw-cardstyle-theme-2 .mcw-summer.mcw-summer .mcw-summer__grid,
	body.mcw-cardstyle-theme-2 .mcw-psc.mcw-psc .mcw-psc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Two cards to a phone screen leaves each one about 180px wide, so the block
 * under the photo tightens to match. */
@media screen and (max-width: 767px) {
	body.mcw-cardstyle-theme-2 .mcw-card2 .mcw-card2__meta {
		padding: 12px 8px 24px;
		gap: 8px;
	}

	body.mcw-cardstyle-theme-2 .mcw-card2 .mcw-card2__title {
		font-size: 14px;
		line-height: 22px;
	}

	body.mcw-cardstyle-theme-2 .mcw-card2 .mcw-card2__price {
		font-size: 13px;
		line-height: 20px;
	}
}

/* Swiper sizes a slide by its tallest card; the meta block under the photo
 * varies with title length, so let every slide stretch to the row height and
 * keep the photo tiles aligned. */
body.mcw-cardstyle-theme-2 .swiper-slide .mcw-card2 {
	height: 100%;
}