/**
 * Kiwwwi Discounts — layout primitives.
 *
 * A module picks one with `'layout' => '<name>'` and gets the class
 * `kwd-layout--<name>`. The markup never changes — only the arrangement.
 * Colour, weight and accents stay in each module's own module.css, so two
 * modules can share a layout and still look different.
 *
 * grid       default cards in a responsive grid
 * bundle     "A + B + C" — cards joined by plus signs, like a package
 * strip      one horizontal scroll-snap row
 * list       thumb | text | button rows, hairline separated
 * mini       ultra-compact rows, price leading, tiny thumbs
 * checklist  rows whose add button reads as a tick-box
 * spotlight  first card large, the rest small beside it
 * inline     text-only chips, images hidden
 */

/* ── card-image ceiling ────────────────────────────────────────────────────
   Card layouts stretch to their container. In a full-width row a square
   thumbnail becomes a 450px slab and the block stops reading as a compact
   offer, so every card-style layout caps the media and crops instead. */
.kwd-layout--grid .kwd-card__media img,
.kwd-layout--bundle .kwd-card__media img,
.kwd-layout--strip .kwd-card__media img,
.kwd-layout--spotlight .kwd-card:first-child .kwd-card__media img {
	width: 100%;
	height: 132px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 6px;
}

.kwd-layout--spotlight .kwd-card:first-child .kwd-card__media img {
	height: 170px;
}

/* ── grid ──────────────────────────────────────────────────────────────── */
.kwd-layout--grid .kwd-block__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

/* ── slider (Swiper) ───────────────────────────────────────────────────────
   Markup differs from the other layouts: cards sit inside .swiper-slide,
   kwd.js runs `new Swiper()` (same engine as the product gallery), arrows +
   pagination come from render.php. slidesPerView is 'auto', so the slide
   WIDTH below decides how many cards show — override it in module.css. */
.kwd-layout--slider {
	position: relative;
}

/* The container also carries .kwd-block__items, whose base rule is a grid —
   that would trap the swiper-wrapper in one grid column and shrink every
   percentage slide width. The slider container must be a plain block. */
.kwd-layout--slider .kwd-block__items {
	display: block;
	grid-template-columns: none;
	gap: 0;
}

.kwd-layout--slider .kwd-swiper {
	overflow: hidden;
}

.kwd-layout--slider .swiper-slide {
	width: clamp(150px, 40%, 220px);
	height: auto;
	display: flex;
}

.kwd-layout--slider .kwd-card {
	width: 100%;
}

.kwd-layout--slider .kwd-card__media img {
	width: 100%;
	height: 132px;
	object-fit: cover;
	border-radius: 6px;
}

/* ── bundle ────────────────────────────────────────────────────────────── */
.kwd-layout--bundle .kwd-block__items {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}

.kwd-layout--bundle .kwd-card {
	flex: 1 1 0;
	min-width: 130px;
}

/* The plus sign that makes it read as a package rather than a list. */
.kwd-layout--bundle .kwd-card + .kwd-card::before {
	content: "+";
	position: absolute;
	left: -14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--kw-ink-muted, #6a7282);
	background: #fff;
	border-radius: 50%;
	z-index: 2;
}

.kwd-layout--bundle .kwd-card {
	position: relative;
	margin-left: 14px;
}

.kwd-layout--bundle .kwd-card:first-child {
	margin-left: 0;
}

/* ── strip ─────────────────────────────────────────────────────────────── */
.kwd-layout--strip .kwd-block__items {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.kwd-layout--strip .kwd-card {
	flex: 0 0 clamp(130px, 22%, 170px);
	scroll-snap-align: start;
}

/* ── list ──────────────────────────────────────────────────────────────── */
.kwd-layout--list .kwd-block__items {
	display: block;
}

.kwd-layout--list .kwd-card {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.kwd-layout--list .kwd-card + .kwd-card {
	border-top: 1px solid var(--kw-line, rgba(0, 0, 0, 0.08));
}

.kwd-layout--list .kwd-card__media {
	flex: 0 0 44px;
}

.kwd-layout--list .kwd-card__media img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}

.kwd-layout--list .kwd-card__body {
	flex: 1 1 auto;
	gap: 2px;
}

/* ── mini ──────────────────────────────────────────────────────────────── */
.kwd-layout--mini .kwd-block__items {
	display: block;
}

.kwd-layout--mini .kwd-card {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.kwd-layout--mini .kwd-card__media {
	flex: 0 0 32px;
}

.kwd-layout--mini .kwd-card__media img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 4px;
}

.kwd-layout--mini .kwd-card__body {
	flex: 1 1 auto;
	gap: 0;
}

/* Price leads, name is the quiet second line. */
.kwd-layout--mini .kwd-card__body {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}

.kwd-layout--mini .kwd-card__name {
	font-size: 11px;
	line-height: 1.25;
}

.kwd-layout--mini .kwd-card__price {
	font-size: 13px;
	font-weight: 600;
}

.kwd-layout--mini .kwd-add {
	order: 2;
	align-self: center;
	margin-left: auto;
}

/* ── checklist ─────────────────────────────────────────────────────────── */
.kwd-layout--checklist .kwd-block__items {
	display: block;
}

.kwd-layout--checklist .kwd-card {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.kwd-layout--checklist .kwd-card + .kwd-card {
	border-top: 1px dashed var(--kw-line, rgba(0, 0, 0, 0.12));
}

.kwd-layout--checklist .kwd-card__media {
	flex: 0 0 38px;
}

.kwd-layout--checklist .kwd-card__media img {
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 6px;
}

.kwd-layout--checklist .kwd-card__body {
	flex: 1 1 auto;
	gap: 1px;
}

/* Name on its own line, price and tick sharing the next one — the button is
   inside .kwd-card__body, so the row is built here rather than on the card. */
.kwd-layout--checklist .kwd-card__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}

.kwd-layout--checklist .kwd-card__name {
	flex: 1 1 100%;
}

/* Add button reads as a tick-box you are ticking on. */
.kwd-layout--checklist .kwd-add {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kwd-layout--checklist .kwd-add::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	flex-shrink: 0;
	opacity: 0.6;
}

/* ── spotlight ─────────────────────────────────────────────────────────── */
.kwd-layout--spotlight .kwd-block__items {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 10px;
	align-items: stretch;
}

.kwd-layout--spotlight .kwd-card:first-child {
	grid-row: span 2;
}

.kwd-layout--spotlight .kwd-card:not(:first-child) {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 8px;
}

.kwd-layout--spotlight .kwd-card:not(:first-child) .kwd-card__media {
	flex: 0 0 40px;
}

.kwd-layout--spotlight .kwd-card:not(:first-child) .kwd-card__media img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 5px;
}

.kwd-layout--spotlight .kwd-card:not(:first-child) .kwd-card__body {
	flex: 1 1 auto;
	gap: 1px;
}

@media (max-width: 849px) {
	.kwd-layout--spotlight .kwd-block__items {
		grid-template-columns: 1fr;
	}

	.kwd-layout--spotlight .kwd-card:first-child {
		grid-row: auto;
	}
}

/* ── inline ────────────────────────────────────────────────────────────── */
.kwd-layout--inline .kwd-block__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kwd-layout--inline .kwd-card {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--kw-line, rgba(0, 0, 0, 0.1));
}

/* Chips are text-only — the thumbnail would dominate at this size. */
.kwd-layout--inline .kwd-card__media {
	display: none;
}

.kwd-layout--inline .kwd-card__body {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.kwd-layout--inline .kwd-card__name {
	font-size: 12px;
	white-space: nowrap;
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwd-layout--inline .kwd-card__price {
	font-size: 12px;
}

/* ── shared: keep every layout usable on phones ────────────────────────── */
@media (max-width: 549px) {
	.kwd-layout--bundle .kwd-block__items,
	.kwd-layout--spotlight .kwd-block__items {
		grid-template-columns: 1fr;
		display: grid;
	}

	.kwd-layout--bundle .kwd-card {
		margin-left: 0;
	}

	.kwd-layout--bundle .kwd-card + .kwd-card::before {
		display: none;
	}
}

/* ── variation picker ──────────────────────────────────────────────────────
   A full-width <select> dominates a card and dwarfs the add button next to
   it, so every layout keeps it compact. */
.kwd-block .kwd-card__attr {
	max-width: 110px;
	height: auto;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.3;
	margin: 0;
}

.kwd-layout--mini .kwd-card__attr,
.kwd-layout--inline .kwd-card__attr {
	max-width: 78px;
	padding: 3px 6px;
	font-size: 11px;
}