/* Marketplace (/brands/). Built to the design comp: hero band, one toolbar row,
   advanced filters behind a slide-in drawer, and the brand card grid.

   The comp runs a slightly different green from the global tokens, so the few
   values it owns are declared here and scoped to the screen rather than pushed
   into tokens.css where they would leak onto every other page. */

/* On :root, not on .marketplace — the brand card is reused on the home page and
   the profile, and it needs these values wherever it appears. */
:root {
	--mk-tld:         #1F6B4F;   /* the extension, ticks, active state */
	--mk-tint:        #E9F8BC;   /* count badges */
	--mk-glow:        #EDF7D9;   /* hero wash */
	--mk-highlight:   #DCEE9B;   /* headline marker stripe */
	--mk-line:        #EDECE8;
	--mk-line-strong: #E4E3DE;
	--mk-divider:     #EFEFE7;
	--mk-soft:        #93A498;
	--mk-lede:        #4E6158;
	--mk-page:        #F8F7F6;
	--mk-max:         1200px;
}

.marketplace,
body.post-type-archive-brand,
body.tax-brand_industry { background: var(--mk-page); }

/* ------------------------------------------------------------------ hero */

.mk-hero { position: relative; border-block-end: 1px solid var(--mk-line); overflow: hidden; }

.mk-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 150% at 100% 0%, var(--mk-glow) 0%, rgba(248, 247, 246, 0) 62%);
}

.mk-hero__inner {
	position: relative; width: 100%; max-width: var(--mk-max);
	margin-inline: auto; padding: 30px 40px 34px;
}

.mk-crumbs {
	display: flex; align-items: center; gap: 9px;
	font-size: 13.5px; color: var(--mk-soft); margin-block-end: 20px;
}
.mk-crumbs a { color: inherit; }
.mk-crumbs a:hover { color: var(--ink); }
.mk-crumbs__current { color: #22221F; }
/* The slash leans the wrong way once the line reads right to left. */
.mk-crumbs__sep { display: inline-block; }
[dir="rtl"] .mk-crumbs__sep { transform: scaleX(-1); }

.mk-hero__row {
	display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
}

.mk-hero__title {
	font-size: 46px; line-height: 1.14; font-weight: 600; letter-spacing: -0.034em;
	margin: 0 0 16px; text-wrap: balance; color: var(--ink);
}
.mk-hero__title mark {
	background: linear-gradient(transparent 62%, var(--mk-highlight) 62%);
	color: inherit; padding: 0;
}

.mk-hero__lede {
	font-size: 16.5px; line-height: 1.65; font-weight: 400; color: var(--mk-lede);
	margin: 0; max-width: 500px; text-wrap: pretty;
}

/* Platform figures, never the result count — the toolbar owns that number. */
.mk-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 34px; }
.mk-stats__figure { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-block-end: 7px; }
.mk-stats__label { font-size: 12.5px; color: var(--mk-soft); white-space: nowrap; }

.mk-search {
	display: flex; align-items: center; gap: 10px;
	max-width: 620px; margin-block-start: 26px;
	background: var(--surface); border: 1px solid var(--mk-line-strong);
	border-radius: var(--r-full); padding: 6px; padding-inline-start: 20px;
	transition: border-color var(--dur-fast) var(--ease);
}
.mk-search:focus-within { border-color: var(--ink); }
.mk-search__icon { flex-shrink: 0; color: var(--mk-soft); display: flex; }
.mk-search input {
	flex: 1; min-width: 0; border: 0; background: none;
	font: inherit; font-size: 16px; font-weight: 400; padding: 12px 0; color: #0E0E10;
}
.mk-search__submit {
	background: var(--ink); color: var(--on-ink); border: 0;
	font: inherit; font-size: 14.5px; font-weight: 600;
	padding: 13px 28px; border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
	transition: background var(--dur-fast) var(--ease);
}
.mk-search__submit:hover { background: var(--ink-hover); }

/* --------------------------------------------------------------- body */

.mk-body { width: 100%; max-width: var(--mk-max); margin-inline: auto; padding: 26px 40px 120px; }

/* What the free-text query was read as, and one click to drop it. */
.marketplace .understood {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-size: 14px; color: var(--text-muted); margin-block-end: 18px;
}
.marketplace .understood .chip {
	font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--text);
	background: var(--surface); border: 1px solid var(--mk-line-strong);
	border-radius: var(--r-full); padding: 7px 14px;
}
.marketplace .understood .chip:hover { border-color: var(--ink); color: var(--ink); }

/* ------------------------------------------------------------ toolbar */

.mk-toolbar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 26px;
}
.mk-toolbar__label { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.mk-toolbar__spacer { flex: 1; }

.mk-pill {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid #DDE0D4; background: var(--surface);
	border-radius: var(--r-full); padding: 9px 18px; cursor: pointer;
	font: inherit; font-size: 14px; color: var(--text-muted); min-height: var(--touch);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mk-pill:hover { border-color: var(--ink); }
.mk-count {
	font-size: 12px; font-weight: 600; line-height: 18px;
	color: var(--ink); background: var(--mk-tint);
	border-radius: var(--r-full); padding: 2px 9px;
}

.mk-cat { position: relative; }
.mk-cat__trigger { font-weight: 600; color: var(--text); padding-inline-end: 14px; }
.mk-cat__chevron { display: inline-flex; color: #657A6F; transition: transform var(--dur-fast) var(--ease); }
.mk-cat__trigger[aria-expanded="true"] .mk-cat__chevron { transform: rotate(180deg); }

.mk-cat__menu {
	position: absolute; top: 50px; inset-inline-start: 0; z-index: var(--z-menu);
	min-width: 250px; max-height: 340px; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 14px; padding: 8px; margin: 0; list-style: none;
	box-shadow: 0 18px 46px -22px rgba(11, 59, 46, 0.28);
	animation: mk-rise 250ms var(--ease) both;
}
.mk-cat__menu li { margin: 0; }
.mk-cat__option {
	display: flex; align-items: center; gap: 10px; width: 100%;
	font-size: 14px; color: var(--text); text-align: start; text-decoration: none;
	border-radius: 11px; padding: 11px 14px; min-height: var(--touch);
}
.mk-cat__option:hover { background: var(--tint); }
.mk-cat__option[aria-selected="true"] { font-weight: 600; color: var(--ink); background: #F4FBDD; }
.mk-cat__option-label { flex: 1; }
.mk-cat__option-count {
	font-size: 12px; font-weight: 600; line-height: 18px;
	color: rgba(0, 0, 0, 0.45); background: var(--tint);
	border-radius: var(--r-full); padding: 2px 9px;
}
.mk-cat__option[aria-selected="true"] .mk-cat__option-count { color: var(--ink); background: var(--mk-highlight); }

/* Filters trigger. The badge exists so nobody ever filters blind. */
.mk-filters-trigger.is-active {
	border-color: var(--ink); color: var(--text); font-weight: 600;
}

.mk-results { display: flex; align-items: center; gap: 16px; }
.mk-results__count { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.mk-results__rule { width: 1px; height: 16px; background: var(--line); }
.mk-sort { display: flex; align-items: center; gap: 16px; }
.mk-sort__option {
	font-size: 14px; text-decoration: none;
	white-space: nowrap; color: var(--mk-soft);
}
.mk-sort__option[aria-pressed="true"] { color: #0E0E10; font-weight: 500; }
.mk-sort__option:hover { color: var(--ink); }

/* --------------------------------------------------------------- drawer */

.mk-drawer { display: none; }
.mk-drawer.is-open {
	display: flex; flex-direction: column;
	position: fixed; inset-inline-start: 0; top: 0; bottom: 0;
	z-index: 109; width: 92vw; max-width: 360px;
	background: var(--surface);
	box-shadow: 20px 0 60px -20px rgba(11, 59, 46, 0.3);
	animation: mk-slide 280ms var(--ease) both;
}
/* Anchored on the logical edge, so it enters correctly in both directions. */
[dir="ltr"] .mk-drawer.is-open { box-shadow: 20px 0 60px -20px rgba(11, 59, 46, 0.3); }
[dir="rtl"] .mk-drawer.is-open { box-shadow: -20px 0 60px -20px rgba(11, 59, 46, 0.3); }

.mk-scrim {
	position: fixed; inset: 0; z-index: 108;
	background: var(--scrim); backdrop-filter: blur(2px);
	border: 0; padding: 0; animation: mk-fade var(--dur-fast) ease both;
}
.mk-scrim[hidden] { display: none; }

.mk-drawer__head {
	position: sticky; top: 0; z-index: 2;
	display: flex; align-items: center; gap: 12px;
	padding: 18px 20px; border-block-end: 1px solid var(--mk-line); background: var(--surface);
}
.mk-drawer__title { font-size: 16px; font-weight: 600; color: var(--text); }
.mk-drawer__clear {
	font-size: 14px; font-weight: 400; color: var(--text-muted);
	text-decoration: none; padding: 4px;
}
.mk-drawer__clear:hover { color: var(--ink); }
.mk-drawer__close {
	width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: #657A6F; background: none; border: 1px solid var(--mk-line-strong); cursor: pointer;
}
.mk-drawer__close:hover { border-color: var(--ink); color: var(--ink); }

.mk-drawer__body { flex: 1; overflow-y: auto; padding: 4px 20px 8px; }

.mk-group { padding: 18px 0; border-block-start: 1px solid var(--mk-line); border-width: 1px 0 0; margin: 0; min-width: 0; }
.mk-group__label {
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--mk-soft); margin-block-end: 14px; padding: 0;
}
.mk-group--lead .mk-group__label { color: #0E0E10; }
.mk-group__opts { display: flex; flex-wrap: wrap; gap: 8px; }

.mk-chip {
	display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--mk-line-strong); background: var(--surface); color: var(--text);
	border-radius: var(--r-full); padding: 9px 15px;
	transition: all var(--dur-fast) var(--ease);
}
.mk-chip:hover { border-color: var(--ink); color: var(--text); }
.mk-chip[aria-pressed="true"],
.mk-chip[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.mk-check {
	display: flex; align-items: center; gap: 10px; min-height: 42px;
	font-size: 14px; color: var(--text); cursor: pointer; text-decoration: none;
}
.mk-check:hover { color: var(--ink); }
.mk-check__box {
	width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
	border: 1px solid #D8D7D2; background: var(--surface);
	transition: all var(--dur-fast) var(--ease);
}
.mk-check__box.is-on {
	border-color: #0E0E10; background: #0E0E10; box-shadow: inset 0 0 0 3.5px #0E0E10;
}

/* The apply button states the outcome, so nobody commits blind either. */
.mk-drawer__foot {
	position: sticky; bottom: 0; z-index: 2;
	padding: 14px 20px 18px; border-block-start: 1px solid var(--mk-line); background: var(--footer-bg);
}
.mk-drawer__apply {
	display: block; width: 100%; font-size: 15px; font-weight: 600; text-decoration: none;
	background: var(--ink); color: var(--on-ink);
	border-radius: var(--r-md); padding: 14px; text-align: center;
	transition: background var(--dur-fast) var(--ease);
}
.mk-drawer__apply:hover { background: var(--ink-hover); color: var(--on-ink); }

/* Fieldsets carry the group semantics; they must not carry the browser's frame. */
.mk-group { border: 0; }

/* ----------------------------------------------------------------- grid */

.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Equal heights come from the grid — never set a card height. */

.mk-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 20px; overflow: hidden;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) ease;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -24px rgba(11, 59, 46, 0.24); }

/* The wordmark well: each listing reads as its own mark, not a table row. */
.mk-card__well {
	position: relative; height: 150px; display: flex;
	align-items: center; justify-content: center; overflow: hidden;
	background: var(--ink); text-decoration: none;
}
.mk-card__well::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(115deg, rgba(200, 241, 53, 0.10) 0 1px, transparent 1px 20px);
}
.mk-card__wordmark {
	position: relative; z-index: 1; color: var(--footer-bg); line-height: 1; white-space: nowrap;
	max-width: 86%; overflow: hidden; text-overflow: ellipsis;
}
.mk-card__well img { position: relative; max-width: 78%; max-height: 76%; object-fit: contain; }

.mk-card__flag {
	position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1;
	font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--lime);
	border-radius: var(--r-full); padding: 5px 12px;
}
.mk-card__save {
	position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
	width: 32px; height: 32px; border-radius: 50%; border: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface); color: var(--ink); cursor: pointer;
	transition: transform var(--dur-fast) var(--ease);
}
.mk-card__save:hover { transform: scale(1.08); }
.mk-card__save[aria-pressed="true"] svg { fill: currentColor; }

.mk-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }

.mk-card__row { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 10px; }
.mk-card__name {
	flex: 1; min-width: 0; text-decoration: none;
	font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.015em;
}
.mk-card__name:hover { color: var(--ink); }
/* nuwa + .com reads as one object, with the extension visually secondary. */
.mk-card__tld { font-weight: 400; color: var(--mk-tld); }
.mk-card__price { flex-shrink: 0; text-align: end; }
.mk-card__price b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.mk-card__price span { font-size: 12px; font-weight: 400; line-height: 18px; color: var(--text-muted); }

/* Short taglines must not make a card shorter than its neighbours. */
.mk-card__tagline {
	font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted);
	margin: 0 0 16px; min-height: 40px; text-wrap: pretty;
}

.mk-card__bar { height: 4px; border-radius: var(--r-full); background: linear-gradient(90deg, #0B3B2E, #1F6B4F, #C8F135); }

.mk-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 18px; padding: 0; list-style: none; }
.mk-card__tag {
	font-size: 12.5px; font-weight: 400; color: var(--text-muted);
	border: 1px solid var(--line); border-radius: var(--r-full); padding: 5px 12px; white-space: nowrap;
}

/* At four columns a card is ~285px, so the footer wraps as two whole rows
   rather than breaking either label mid-phrase. */
.mk-card__foot {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 10px;
	margin-block-start: auto;
	padding-block-start: 16px; border-block-start: 1px solid var(--mk-divider);
}
.mk-card__kit {
	display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
	font-size: 13px; font-weight: 400; color: var(--text-muted);
}
.mk-card__kit svg { color: var(--mk-tld); flex-shrink: 0; }
.mk-card__view {
	margin-inline-start: auto;
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
	white-space: nowrap;
	font-size: 13.5px; font-weight: 600; color: var(--text);
	border: 1px solid #DDE0D4; background: var(--surface);
	border-radius: 11px; padding: 9px 16px;
	transition: all var(--dur-fast) var(--ease);
}
.mk-card__view:hover { border-color: var(--ink); color: var(--ink); }
/* The arrow points the way the language runs. */
.mk-card__view svg { flex-shrink: 0; }
[dir="rtl"] .mk-card__view svg { transform: scaleX(-1); }

/* ---------------------------------------------------------- empty state */

.mk-empty {
	border: 1px dashed #DDE0D4; border-radius: 20px;
	padding: 64px 32px; text-align: center;
}
.mk-empty__title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.mk-empty__body { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted); margin: 0 0 22px; }
.mk-empty__cta {
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	font-size: 14px; font-weight: 600; background: var(--ink); color: var(--on-ink);
	border-radius: var(--r-md); padding: 13px 24px;
}
.mk-empty__cta:hover { background: var(--ink-hover); color: var(--on-ink); }

.mk-more { display: flex; justify-content: center; margin-block-start: 40px; }

/* ------------------------------------------------------------ responsive */

@media (min-width: 1400px) { .mk-grid { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 1199px) {
	.mk-hero__inner { padding-inline: var(--gutter-tablet); }
	.mk-body { padding-inline: var(--gutter-tablet); }
}

@media (max-width: 1024px) {
	.mk-grid { grid-template-columns: repeat(2, 1fr); }
	.mk-hero__row { grid-template-columns: 1fr; gap: 26px; align-items: start; }
	.mk-stats { justify-content: start; }
}

@media (max-width: 700px) {
	.mk-hero__inner { padding: 22px 18px 26px; }
	.mk-hero__title { font-size: 34px; }
	.mk-stats { gap: 22px; }
	.mk-body { padding: 20px 18px 90px; }
	.mk-grid { grid-template-columns: 1fr; }
	.mk-cat, .mk-cat__trigger, .mk-filters-trigger { width: 100%; }
	.mk-cat__trigger { justify-content: space-between; }
	.mk-filters-trigger { justify-content: center; }
	.mk-results { width: 100%; flex-wrap: wrap; gap: 14px; row-gap: 6px; }
	/* Sort drops to its own line rather than scrolling sideways — a clipped
	   sort option is a sort option nobody finds. */
	.mk-results__count { flex-basis: 100%; }
	.mk-results__rule { display: none; }
	.mk-search input { font-size: 16px; }
}

@media (max-width: 400px) {
	.mk-hero__inner { padding-inline: 14px; }
	.mk-body { padding-inline: 14px; }
}

@keyframes mk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .mk-drawer.is-open { animation-name: mk-slide-rtl; }
@keyframes mk-slide-rtl { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.mk-drawer.is-open, .mk-scrim, .mk-cat__menu { animation: none; }
	.mk-card:hover { transform: none; }
}