/* Events list view — js/yodel-list-view.js (the events page's default)
   Scoped under .mk-lv so it can't affect the rest of the site. */

.mk-lv {
	--lv-pink: #e11383;
	--lv-ink: #1f2937;
	/* 4.43:1 on the featured rows' pink before; 5.48:1 now. */
	--lv-muted: #5b6472;
	--lv-line: #e5e7eb;
	/* Widest an ad is drawn. The creative is a 300x300 square and the rail is
	   300px, so it runs at native size there and only ever downscales. */
	--lv-ad-size: 300px;
	/* Band labels are 13px: they need 4.5:1, not 3:1. Were 3.33 / 2.70. */
	/* The Featured Events box's blue, so a featured row reads as part of it. */
	--lv-featured: #0f6f97;
	--lv-featured-bg: #e9f4fa;
	--lv-featured-line: #cfe6f2;
	--lv-allday: #475467;   /* slate: no time of day */
	--lv-morning: #17744d;
	--lv-afternoon: #9c5a08;
	--lv-evening: #6b4bd6;

	display: grid;
	/* The events, then the 300px ad column on the right. */
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 26px;
	align-items: start;
	margin: 18px 0 32px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--lv-ink);
}
.mk-lv * { box-sizing: border-box; }
.mk-lv[hidden] { display: none; }

/* The widget still hydrates -- we route to its detail view -- but its grid is
   redundant once we list the events ourselves. The class is toggled from JS off
   the URL rather than from the widget's markup, since the detail view renders
   inside the shadow root where a light-DOM selector can't reach it. */
.yodelEventsContainer.mk-lv-hidden {
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* main.css styles bare headings under .template-* at (0,1,1); every heading rule
   here is prefixed with .mk-lv to reach (0,2,0) and win on specificity rather
   than on stylesheet order. */
.mk-lv .mk-lv__heading,
.mk-lv .mk-lv__dayhead,
.mk-lv .mk-lv__title,
.mk-lv .mk-lv__sub,
.mk-lv .mk-lv__metaline,
.mk-lv .mk-lv__desc,
.mk-lv .mk-lv__tz,
.mk-lv .mk-lv__empty {
	background: none;
	text-transform: none;
	letter-spacing: normal;
	padding: 0;
	border: 0;
	margin: 0;
}

/* ---------- ad column ---------- */
.mk-lv__rail { display: flex; flex-direction: column; gap: 18px; }

.mk-lv__cal {
	border: 1px solid var(--lv-line);
	border-radius: 12px;
	padding: 16px;
	background: #fff;
}

.mk-lv__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.mk-lv__cal-title { font-size: 15px; font-weight: 600; }
.mk-lv__cal-nav {
	width: 28px; height: 28px;
	border: 0; border-radius: 50%;
	background: none; color: var(--lv-ink);
	font-size: 19px; line-height: 1; cursor: pointer;
}
.mk-lv__cal-nav:hover { background: #f3f4f6; }

.mk-lv__cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}
.mk-lv__cal-dow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--lv-muted);
	padding-bottom: 6px;
}
.mk-lv__cal-day {
	position: relative;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--lv-ink);
	cursor: pointer;
}
.mk-lv__cal-day:hover { background: #fdf2f8; }
.mk-lv__cal-day.is-outside { color: #cbd5e1; }
.mk-lv__cal-day.is-past { color: #b8bfca; }
.mk-lv__cal-day.is-past:hover { background: #f3f4f6; }
.mk-lv__cal-day.is-today { font-weight: 700; }
.mk-lv__cal-day.is-selected {
	background: var(--lv-pink);
	color: #fff;
	font-weight: 600;
}

/* Broadstreet zones size themselves; the slot just centres them in the rail.
   Local partner ads show the 600x500 upload at rail width, as in the legacy
   sidebar, and their 1x1 impression pixel takes no room. */
.mk-lv__railad { width: 100%; display: flex; justify-content: center; }
.mk-lv__partners { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mk-lv__partners:empty,
.mk-lv__portal:empty { display: none; }
.mk-lv__partners a { display: block; line-height: 0; }
.mk-lv__partners a img { width: 100%; max-width: var(--lv-ad-size); height: auto; }
.mk-lv__partners img.pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk-lv__portal { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Portal ads, stacked down the rail beside the list. */
.mk-lv__railads {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.mk-lv__railads:empty { display: none; }
.mk-lv__railads-label {
	align-self: stretch;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #667085;
	text-align: center;
}

/* ---------- right column ---------- */
.mk-lv__mainhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mk-lv .mk-lv__heading { font-size: 26px; font-weight: 700; color: #123a63; }
/* Export and Boost share the right-hand end of the heading row. */
.mk-lv__mainacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-lv .mk-lv__sub { font-size: 14px; color: var(--lv-muted); margin: 4px 0 18px; font-style: italic; }
.mk-lv__export {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--lv-pink);
	background: #fff;
	border: 1px solid var(--lv-pink);
	border-radius: 8px;
	padding: 9px 16px;
	cursor: pointer;
	white-space: nowrap;
}
.mk-lv__export:hover { background: #fdf2f8; }

/* A day is a block of its own (renderDay()). Its heading sticks to the top of
   the screen while the day scrolls past, until the next day's pushes it off:
   just under the header main.css pins on a town site (.header.sticky, 60px),
   at the very top on national, which pins none. White behind it so rows
   scroll out of sight underneath. */
.mk-lv__daygroup { margin-top: 16px; }
.mk-lv__daygroup--one { margin-top: 0; }   /* a single day: no gap above it, as before */
.mk-lv .mk-lv__dayhead {
	position: sticky;
	top: 60px;
	z-index: 3;   /* over the rows and their buttons (z-index 1) */
	font-size: 17px;
	font-weight: 700;
	color: #123a63;
	margin: 0;
	padding: 10px 0 8px;
	background: #fff;
}
.isNational-true .mk-lv .mk-lv__dayhead { top: 0; }
/* While pinned (watchStickyHeads() in the script): a soft shadow under it,
   so it reads as a bar over the rows rather than one of them. */
.mk-lv .mk-lv__dayhead.is-stuck { box-shadow: 0 8px 8px -8px rgba(17, 24, 39, .25); }
/* A single chosen day's heading (renderDay()'s pinOnly): the date is already
   the list's big title, so this one takes no room (its negative margin lets
   the list start where it does) and stays invisible until it's pinned --
   when the title has scrolled away -- then shows as the same bar. Fixed
   height, so the margin cancels it exactly. */
.mk-lv .mk-lv__dayhead--pin {
	height: 42px;
	margin-bottom: -42px;
	padding: 10px 0;
	line-height: 22px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.mk-lv .mk-lv__dayhead--pin.is-stuck { opacity: 1; pointer-events: auto; }

/* time-of-day band heading: label plus a rule running to the right edge */
.mk-lv__band {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0 6px;
}
.mk-lv__band::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: .45;
}
.mk-lv__band-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.mk-lv__band--allday { color: var(--lv-allday); }
.mk-lv__band--morning { color: var(--lv-morning); }
.mk-lv__band--afternoon { color: var(--lv-afternoon); }
.mk-lv__band--evening { color: var(--lv-evening); }

/* ---------- row ---------- */
/* Thumbnails are 1.91:1, the shape of a Facebook event image, which is what
   most events carry and what their detail view shows; the column width sets
   the size. */
.mk-lv__row {
	position: relative;   /* for the title link's full-row layer */
	display: grid;
	grid-template-columns: 92px 138px minmax(0, 1fr) var(--lv-row-end, 22px);
	align-items: center;
	gap: 16px;
	padding: 14px 8px;
	border-bottom: 1px solid var(--lv-line);
	text-decoration: none;
	color: inherit;
	transition: background .15s ease;
}
.mk-lv__row:hover { background: #fafbfc; }

.mk-lv__time { text-align: right; line-height: 1.3; }
.mk-lv__time-start { display: block; font-size: 15px; font-weight: 700; }
.mk-lv__time-end { display: block; font-size: 12px; color: var(--lv-muted); }

.mk-lv__thumb {
	position: relative;
	aspect-ratio: 1.91 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #e5e7eb;
}
.mk-lv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The row's one link is the title; its ::after covers the whole row, so a
   click anywhere opens the event. The buttons below sit above that layer.
   Two classes: main.css styles links under .template-* at (0,1,1). */
.mk-lv .mk-lv__link,
.mk-lv .mk-lv__link:hover,
.mk-lv .mk-lv__link:focus { color: inherit; text-decoration: none; }
.mk-lv .mk-lv__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.mk-lv .mk-lv__link:focus-visible { outline: none; }
.mk-lv .mk-lv__link:focus-visible::after { outline: 2px solid var(--lv-pink); outline-offset: -2px; }

/* Add to Calendar and Share (js/yodel-event-actions.js): a column of their
   own between the details and the caret, stacked, so they share the height
   of the title and details rather than adding a line under them. */
.mk-lv__row--acts { grid-template-columns: 92px 138px minmax(0, 1fr) auto var(--lv-row-end, 22px); }
.mk-lv__row--featured.mk-lv__row--acts { grid-template-columns: 92px 210px minmax(0, 1fr) auto var(--lv-row-end, 22px); }
.mk-lv .mk-lv__acts {
	position: relative;
	z-index: 1;   /* above the row's link layer, and its menu above later rows */
	display: flex;
	flex-direction: column;
	align-items: stretch;   /* both buttons as wide as the wider one */
	gap: 6px;
}
.mk-lv .mk-lv__calwrap { display: flex; flex-direction: column; }
.mk-lv .mk-lv__act {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	white-space: nowrap;
	padding: 4px 11px;
	border: 1px solid var(--lv-line);
	border-radius: 999px;
	background: #fff;
	color: var(--lv-pink);
	cursor: pointer;
}
.mk-lv .mk-lv__act:hover { border-color: var(--lv-pink); }
.mk-lv .mk-lv__act-ico { display: inline-flex; }
.mk-lv .mk-lv__calwrap { position: relative; }
.mk-lv .mk-lv__calmenu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;   /* the column sits at the row's right edge */
	min-width: 230px;
	display: flex;
	flex-direction: column;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--lv-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(17, 24, 39, .14);
}
.mk-lv .mk-lv__calmenu[hidden] { display: none; }
.mk-lv .mk-lv__calopt {
	font: inherit;
	font-size: 13px;
	text-align: left;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--lv-ink);
	text-decoration: none;
	cursor: pointer;
}
.mk-lv .mk-lv__calopt:hover { background: #f3f4f6; color: var(--lv-ink); text-decoration: none; }
/* "Link copied", on the page rather than in the row. */
.mk-lv__toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 1000;
	max-width: calc(100vw - 32px);
	padding: 10px 18px;
	border-radius: 999px;
	background: #1f2937;
	color: #fff;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.mk-lv .mk-lv__title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
/* Dot picks up the band colour from the row's own class. */
.mk-lv__dot {
	flex: 0 0 auto;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--lv-muted);
}
.mk-lv__row[data-band="allday"] .mk-lv__dot { background: var(--lv-allday); }
.mk-lv__row[data-band="morning"] .mk-lv__dot { background: var(--lv-morning); }
.mk-lv__row[data-band="afternoon"] .mk-lv__dot { background: var(--lv-afternoon); }
.mk-lv__row[data-band="evening"] .mk-lv__dot { background: var(--lv-evening); }

/* Organizer / address / time. A fixed icon column keeps all three texts on the
   same left edge instead of each line indenting to its own icon width. */
.mk-lv__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 6px;
}
.mk-lv .mk-lv__metaline {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 7px;
	align-items: start;
	font-size: 13px;
	line-height: 1.45;
	color: var(--lv-muted);
}
/* Up to two lines, so a venue or street address is readable rather than
   cut to a few words; anything longer still ends in an ellipsis. */
.mk-lv .mk-lv__metaline > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.mk-lv__ico {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--lv-pink);
	flex: 0 0 auto;
}
/* Desktop shows the time in its own column, so this line is for phones only. */
.mk-lv .mk-lv__metaline--time { display: none; }
.mk-lv__chev { color: #667085; font-size: 20px; text-align: center; }

/* ---------- "Multiple Organizations": the listings ---------- */
/* toggleListings(): opened under a row (or inside a card), one line per
   organizer's listing of the event, each going to its own detail. */
.mk-lv__row.is-open .mk-lv__chev { transform: rotate(90deg); }
.mk-lv__chev { transition: transform .15s ease; }
.mk-lv .mk-lv__listings {
	margin: 10px 0 12px 116px;   /* under the thumbnail and text, past the time column */
	padding: 10px 12px;
	border: 1px solid var(--lv-line);
	border-radius: 10px;
	background: #f8fafc;
}
.mk-lv .mk-lv__listings-head { margin: 0 0 6px; font-size: 13px; color: var(--lv-muted); }
.mk-lv .mk-lv__listing {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	color: var(--lv-ink);
	text-decoration: none;
}
.mk-lv .mk-lv__listing + .mk-lv__listing { border-top: 1px solid var(--lv-line); border-radius: 0 0 8px 8px; }
.mk-lv .mk-lv__listing:hover { background: #fff; color: var(--lv-ink); text-decoration: none; }
.mk-lv .mk-lv__listing-img {
	display: block;
	aspect-ratio: 1.91 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: #e5e7eb;
}
.mk-lv .mk-lv__listing-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-lv .mk-lv__listing .mk-lv__listing-org { font-size: 14px; color: var(--lv-ink); }
.mk-lv .mk-lv__listing-go { font-size: 13px; font-weight: 600; color: var(--lv-pink); white-space: nowrap; }

/* ---------- card view ---------- */
/* A day's events as cards (renderCard()) after its featured rows: the
   picture across the top, when, the title, organizer and place, and Add to
   Calendar / Share as icons at the foot. */
.mk-lv__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 10px 0 6px;
}
.mk-lv__card {
	position: relative;   /* for the title link's full-card layer */
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lv-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease;
}
.mk-lv__card:hover { border-color: var(--lv-pink); }
/* Not overflow: hidden on the card -- the calendar menu opens past its edge. */
.mk-lv__cardimg {
	aspect-ratio: 1.91 / 1;
	border-radius: 11px 11px 0 0;
	overflow: hidden;
	background: #e5e7eb;
}
.mk-lv__cardimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-lv__cardbody {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px 12px;
}
.mk-lv .mk-lv__cardtime { font-size: 13px; font-weight: 600; color: var(--lv-pink); }
.mk-lv__card .mk-lv__title { font-size: 15px; }
.mk-lv__card .mk-lv__acts { flex-direction: row; justify-content: flex-end; margin-top: auto; padding-top: 8px; }
.mk-lv__card .mk-lv__act { width: 32px; height: 32px; padding: 0; }
.mk-lv__card .mk-lv__act-text { display: none; }
.mk-lv__card.is-open { border-color: var(--lv-pink); }
.mk-lv__card .mk-lv__listings { margin: 0 10px 10px; }
.mk-lv__card .mk-lv__listing { grid-template-columns: minmax(0, 1fr) auto; }
.mk-lv__card .mk-lv__listing-img { display: none; }

/* List / Cards, by the heading. */
.mk-lv__layout { display: inline-flex; gap: 6px; }
.mk-lv .mk-lv__layout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--lv-line);
	border-radius: 999px;
	background: #fff;
	color: var(--lv-muted);
	cursor: pointer;
}
.mk-lv .mk-lv__layout-btn.is-active { border-color: #123a63; color: #123a63; }
.mk-lv .mk-lv__layout-btn:focus-visible { outline: 2px solid var(--lv-pink); outline-offset: 2px; }

/* ---------- featured row ---------- */
/* The same row, given more room: the Featured Events box's blue ground, a
   bigger thumbnail and title, and the blurb that ordinary rows leave out. */
.mk-lv__row--featured {
	grid-template-columns: 92px 210px minmax(0, 1fr) var(--lv-row-end, 22px);
	background: var(--lv-featured-bg);
	border: 1px solid var(--lv-featured-line);
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 16px 12px;
}
.mk-lv__row--featured:hover { background: #ddedf7; }
.mk-lv__row--featured .mk-lv__title { font-size: 19px; }
.mk-lv__flag {
	position: absolute;
	top: 8px; left: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	border-radius: 0 6px 6px 0;
	background: var(--lv-featured);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
}
.mk-lv .mk-lv__desc {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--lv-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Advertise With Us: header or ad column ---------- */
/* Two copies of the button, exactly one visible. On desktop with the list up,
   the one heading the ad column, where it reads as selling what's below it.
   Otherwise -- phones, where that column sits below the whole list, and any
   time the list isn't showing -- the header copy. mk-lv-on on <html> is set by
   js/yodel-list-view.js only while the list is on screen. */
.mk-lv .mk-lv__rail-cta { display: flex; width: 100%; justify-content: center; margin-bottom: 14px; }
/* Advertising off for this town: the ad column's copy goes too. */
.mk-ads-off .mk-lv .mk-lv__rail-cta { display: none; }
@media (min-width: 1001px) {
	.mk-lv-on .mk-events-actions .mk-cta--promote { display: none; }
}
@media (max-width: 1000px) {
	.mk-lv .mk-lv__rail-cta { display: none; }
}

/* Add an Event follows the same rule: the copy beside Boost in the list
   heading on desktop while the list is up, the header copy otherwise. */
@media (min-width: 1001px) {
	.mk-lv-on .mk-events-actions .mk-cta--add { display: none; }
}
@media (max-width: 1000px) {
	.mk-lv .mk-lv__head-add { display: none; }
}

/* ---------- boost ---------- */
/* Armed state for "Boost Your Event": the rows stop opening events and start
   buying a boost for one, so the list says so plainly and offers a way out. */
.mk-lv__boostbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	/* Clear of the heading row, whose Boost button wears a 3px ring while armed. */
	margin: 16px 0 18px;
	padding: 12px 16px;
	border: 1px solid #6366f1;
	border-radius: 10px;
	background: #eef2ff;
}
.mk-lv .mk-lv__boostbar-text { font-size: 14px; font-weight: 600; color: #3730a3; }
.mk-lv__boostbar-cancel {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	flex: 0 0 auto;
	padding: 7px 16px;
	border: 1px solid #6366f1;
	border-radius: 999px;
	background: #fff;
	color: #4338ca;
	cursor: pointer;
}
.mk-lv__boostbar-cancel:hover { background: #6366f1; color: #fff; }
/* Full width under the instruction and Cancel, so it wraps onto its own line. */
.mk-lv .mk-lv__boostbar-missing { flex: 1 0 100%; margin: 0; font-size: 13px; color: #4338ca; }
.mk-lv .mk-lv__boostbar-missing a { color: #4338ca; font-weight: 600; text-decoration: underline; }
/* Replaces the row chevron while armed. */
.mk-lv__boostpick {
	flex: 0 0 auto;
	align-self: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
}
.mk-lv.is-boosting .mk-lv__row:hover { border-color: #6366f1; background: #f5f3ff; }
.mk-lv.is-boosting .mk-lv__row.is-picked { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; }
.mk-lv__row.is-picked .mk-lv__boostpick { background: #fff; color: #4338ca; box-shadow: inset 0 0 0 1.5px #6366f1; }

/* Floating checkout, following you down the list like Yodel's own. */
.mk-lv__cart {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
}
.mk-lv__cart[hidden] { display: none; }
.mk-lv__cart-go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px 12px 20px;
	border-radius: 999px;
	background: linear-gradient(100deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(79, 70, 229, .35);
}
.mk-lv__cart-go:hover { color: #fff; filter: brightness(1.06); }
.mk-lv__cart-count {
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: #fff;
	color: #4338ca;
	font-size: 13px;
	line-height: 24px;
	text-align: center;
}
.mk-lv__cart-exit {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #4b5563;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
/* The row's last column is sized for the chevron, which the pill is far wider
   than. Only that track changes, so the two row templates keep their own
   thumbnail widths. */
.mk-lv.is-boosting { --lv-row-end: auto; }
.mk-lv__boostpick { white-space: nowrap; }

/* ---------- ad ---------- */
/* Our own call to action where Yodel's unsold-zone placeholder used to sit.
   The file is 600x180 for retina and draws at half that, so it takes a tenth
   of the rail the 300x300 square did. */
.mk-lv__house {
	display: block;
	width: 100%;
	max-width: var(--lv-ad-size);
	margin: 0 auto;
	line-height: 0;
}
.mk-lv__house img { width: 100%; height: auto; border-radius: 8px; }

/* The creative is a 300x300 square, drawn at the rail's width. */
.mk-lv__ad { width: 100%; display: flex; justify-content: center; }
/* Marks the next rail slot; its ad is requested only as it nears the viewport. */
.mk-lv__ad-sentinel { height: 1px; }
.mk-lv__ad-link {
	display: block;
	width: 100%;
	max-width: var(--lv-ad-size);
	line-height: 0;
}
.mk-lv__ad img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 8px;
}

.mk-lv .mk-lv__empty { padding: 28px 0; color: var(--lv-muted); font-size: 15px; }
.mk-lv .mk-lv__tz { margin-top: 18px; font-size: 12px; color: var(--lv-muted); font-style: italic; }
.mk-lv__more {
	display: block;
	width: 100%;
	margin-top: 20px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--lv-pink);
	background: #fff;
	border: 1px solid var(--lv-pink);
	border-radius: 999px;
	padding: 11px;
	cursor: pointer;
}
.mk-lv__more:hover { background: #fdf2f8; }

/* ---------- events already over today (markEnded() in the script) ----------
   Grayed rather than faded: the text stays readable (opacity would drop it
   under 4.5:1) and the row still opens the event. The "Ended" tag says it
   in words too, not by color alone. */
.mk-lv .is-ended .mk-lv__title,
.mk-lv .is-ended .mk-lv__time-start { color: #5b6472; }
.mk-lv .is-ended .mk-lv__dot { background: #9aa1ab; }
.mk-lv .is-ended .mk-lv__thumb img,
.mk-lv .is-ended .mk-lv__cardimg img { filter: grayscale(1); opacity: .7; }
.mk-lv .mk-lv__ended {
	display: inline-block;
	margin: 4px 0 0;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f1f3f5;
	color: #4b5563;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.6;
}
.mk-lv .mk-lv__metaline--time .mk-lv__ended,
.mk-lv .mk-lv__cardtime .mk-lv__ended { margin: 0 0 0 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
	/* One column: the ad column follows the list (it comes after it in the
	   page) rather than pushing it off the first screen. */
	.mk-lv { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
	/* The row leads with the thumbnail; the time leaves its own column and
	   becomes the third icon line, so all three share one left edge. */
	.mk-lv__row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
	.mk-lv__row--featured { grid-template-columns: 150px minmax(0, 1fr); }
	.mk-lv__time { display: none; }
	.mk-lv .mk-lv__metaline--time { display: grid; }
	/* Square on a phone (agreed 2026-10-20): beside a title that wraps to
	   two or three lines and its meta lines, the wide desktop shape left
	   a gap under the photo. */
	.mk-lv__thumb { align-self: start; aspect-ratio: 1; }
	.mk-lv .mk-lv__listings { margin-left: 0; }
	.mk-lv .mk-lv__listing { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
	/* Still beside the text, stacked, but icons only: the words would take
	   the text column's width. */
	.mk-lv__row--acts { grid-template-columns: 112px minmax(0, 1fr) auto; }
	.mk-lv__row--featured.mk-lv__row--acts { grid-template-columns: 150px minmax(0, 1fr) auto; }
	.mk-lv .mk-lv__acts { align-self: start; }
	.mk-lv .mk-lv__act { width: 32px; height: 32px; padding: 0; }
	.mk-lv .mk-lv__act-text { display: none; }
	.mk-lv__chev { display: none; }
	/* Under a heading that wraps, Boost read as an afterthought wedged between
	   the title and the list; above it, it reads as the page action it is. */
	.mk-lv__mainacts { order: -1; width: 100%; justify-content: flex-end; }
	/* Two columns here, so the pill rides under the text rather than opening a
	   column of its own. */
	.mk-lv.is-boosting .mk-lv__row { grid-template-columns: 112px minmax(0, 1fr); }
	.mk-lv.is-boosting .mk-lv__row--featured { grid-template-columns: 150px minmax(0, 1fr); }
	.mk-lv__boostpick { justify-self: start; margin-top: 6px; }
	/* Export Day is low-value on a phone and takes a full row of its own, since
	   the head wraps at this width. The space is earmarked for the leaderboard
	   banner once ads roll out. */
	.mk-lv__export { display: none; }
	/* Stacked, but as a flex column rather than a block: order only applies to
	   flex and grid children, so on a block the Boost reordering above silently
	   did nothing and it stayed under the heading. */
	.mk-lv__mainhead { flex-direction: column; align-items: stretch; gap: 14px; }
	.mk-lv .mk-lv__title { font-size: 15px; }
	.mk-lv .mk-lv__metaline { font-size: 12px; }
	.mk-lv .mk-lv__heading { font-size: 21px; }
}

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