/**
 * Mobile-only Reseller Pages (phones, <768px) — Wallet, Invoices,
 * Order Messages, Websites List. Follows the same soho-sparkle design
 * language as reseller-dashboard-mobile.css / create-order-mobile.css
 * (violet #0e56f5→ magenta #c026d3, white cards, pill chips).
 *
 * Scoping model (desktop stays 100% untouched):
 *   .zwm-root  — Wallet mobile partial        (wallet-mobile.php)
 *   .zim-root  — Invoices mobile partial      (reseller/invoices-mobile.php)
 *   Messages   — CSS overrides on the existing AJAX chat DOM, all inside
 *                @media (max-width:767.98px) + driven by body.zmm-chat-open
 *   Websites   — CSS-only table→card transform on .zetlink-sites-catalog,
 *                all inside @media (max-width:767.98px). This stylesheet is
 *                only enqueued on the 4 endpoint pages, so the public
 *                catalog page keeps its current styling.
 *
 * v1.6.0 — Rebuilt against the real WebsitesGrid source: layout order
 * is pure display:contents on the verified wrapper chain (AJAX-proof),
 * cards generated by websites-list-mobile.js as
 * exact prototype markup (.zlmc-*); the styled table remains the no-JS
 * fallback. Toolbar/filters retuned 1:1 to the soho prototype source: segmented
 * source control, pill categories, search-first toolbar, and site cards
 * with metric chips + GENERAL/SPECIAL price footer. (v1.2.0 removed the
 * bottom navigation in favor of the sidebar drawer on every page.)
 */

/* ============================================================
   SHARED TOKENS + PHONE-ONLY GUARDS
   ============================================================ */
.zwm-root,
.zim-root {
	--zpm-primary: #0e56f5;
	--zpm-magenta: #1748e8;
	--zpm-text: #1e1932;
	--zpm-muted: #6b7280;
	--zpm-faint: #94a3b8;
	--zpm-border: #efedf5;
	--zpm-card-border: #ecebf3;
	--zpm-tile-bg: #fdfdff;
	--zpm-red: #e11d48;
	--zpm-green: #16a34a;
	--zpm-amber: #d97706;
	color: var(--zpm-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.zwm-root *, .zim-root * { box-sizing: border-box; }
.zwm-root a, .zim-root a { text-decoration: none; color: inherit; }
.zwm-root a:focus-visible,
.zim-root a:focus-visible { outline: 2px solid var(--zpm-primary); outline-offset: 2px; border-radius: 10px; }

/* Belt & suspenders: never render the mobile layers on desktop even if
   Bootstrap display utilities ever go missing. */
@media (min-width: 768px) {
	.zwm-root, .zim-root, .zlmc-list, .zetlink-wsm-toolbar-search-btn { display: none !important; }
}

/* ============================================================
   iOS INPUT AUTO-ZOOM FIX (phones only, iOS only)
   iOS Safari force-zooms the page when a focused control has a
   computed font-size under 16px — which is what made tapping the
   search box / bulk-search feel like the page "zoomed and froze".
   @supports (-webkit-touch-callout: none) matches only iOS, so
   Android keeps the designed sizes and pinch-zoom stays intact.
   ============================================================ */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 767.98px) {
		body .woocommerce-MyAccount-content input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
		body .woocommerce-MyAccount-content select,
		body .woocommerce-MyAccount-content textarea,
		body .zetlink-sites-catalog input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
		body .zetlink-sites-catalog select,
		body .zetlink-sites-catalog textarea,
		body .rit-popup-wrapper input,
		body .rit-popup-wrapper textarea,
		body .rit-popup-wrapper select {
			font-size: 16px !important;
		}
	}
}


/* ============================================================
   WALLET — .zwm-root (wallet-mobile.php)
   ============================================================ */
.zwm-root {
	padding: 14px 12px 28px;
	max-width: 100%;
}
.zwm-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--zpm-text);
	margin: 2px 2px 14px;
}

/* Gradient balance hero */
.zwm-hero {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 20px 18px 18px;
	background: linear-gradient(135deg, #0e56f5, #a21caf 60%, #c026d3 100%);
	color: #fff;
	box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
	margin-bottom: 12px;
}
.zwm-hero::after {
	content: "";
	position: absolute;
	right: -46px; top: -46px;
	width: 150px; height: 150px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.10);
	pointer-events: none;
}
.zwm-hero-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 8px;
}
.wallet-label.zwm-hero-label{
	color: #222;
}
.zwm-hero-label i { font-size: 13px; }
.zwm-hero-amount,
.zwm-hero-amount .woocommerce-Price-amount {
	display: block;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #fff;
}
.zetlink-wallet-balance-display .woocommerce-Price-amount{
	color: #000;
}
.zwm-hero-amount .woocommerce-Price-amount { display: inline; }
.zwm-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding: 11px 20px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--zpm-primary) !important;
	font-size: 13px;
	font-weight: 700;
	border: none;
	box-shadow: 0 8px 18px rgba(30, 20, 60, 0.18);
	transition: transform 0.15s ease;
	cursor: pointer;
}
.zwm-hero-btn:active { transform: scale(0.97); }
.zwm-hero-btn i { font-size: 15px; }

/* Credit / Debit summary tiles */
.zwm-totals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
.zwm-total {
	display: flex;
	align-items: center;
	gap: 11px;
	background: #ffffff;
	border: 1px solid var(--zpm-card-border);
	border-radius: 18px;
	padding: 13px 13px;
}
.zwm-total-ic {
	width: 38px; height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.zwm-total--credit .zwm-total-ic { background: rgba(22, 163, 74, 0.10); color: var(--zpm-green); }
.zwm-total--debit  .zwm-total-ic { background: rgba(225, 29, 72, 0.08);  color: var(--zpm-red); }
.zwm-total-info { display: flex; flex-direction: column; min-width: 0; }
.zwm-total-info small { font-size: 11px; font-weight: 500; color: var(--zpm-muted); white-space: nowrap; }
.zwm-total-info b,
.zwm-total-info b .woocommerce-Price-amount {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	white-space: nowrap;
}
.zwm-total--credit .zwm-total-info b,
.zwm-total--credit .zwm-total-info b .woocommerce-Price-amount { color: var(--zpm-green); }
.zwm-total--debit .zwm-total-info b,
.zwm-total--debit .zwm-total-info b .woocommerce-Price-amount { color: var(--zpm-red); }

/* Transactions card */
.zwm-card {
	background: #ffffff;
	border: 1px solid var(--zpm-card-border);
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(30, 27, 46, 0.03);
	overflow: hidden;
	margin-bottom: 14px;
}
.zwm-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 10px;
}
.zwm-card-head .zwm-head-ic {
	width: 40px; height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	background: rgba(124, 58, 237, 0.10);
	color: var(--zpm-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.zwm-card-head h3 {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--zpm-text);
}
.zwm-card-head p { font-size: 12px; color: var(--zpm-muted); margin: 2px 0 0; }
.zwm-txns { display: flex; flex-direction: column; gap: 9px; padding: 4px 13px 14px; }
.zwm-txn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--zpm-tile-bg);
	border: 1px solid var(--zpm-border);
	border-radius: 16px;
	padding: 12px 13px;
}
.zwm-txn-ic {
	width: 38px; height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.zwm-txn--credit .zwm-txn-ic { background: rgba(22, 163, 74, 0.10); color: var(--zpm-green); }
.zwm-txn--debit  .zwm-txn-ic { background: rgba(225, 29, 72, 0.08);  color: var(--zpm-red); }
.zwm-txn-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.zwm-txn-reason {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--zpm-text);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.zwm-txn-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--zpm-faint);
}
.zwm-txn-order {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.08);
	border: 1px solid rgba(124, 58, 237, 0.14);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--zpm-primary) !important;
}
.zwm-txn-amt,
.zwm-txn-amt .woocommerce-Price-amount {
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}
.zwm-txn--credit .zwm-txn-amt,
.zwm-txn--credit .zwm-txn-amt .woocommerce-Price-amount { color: var(--zpm-green); }
.zwm-txn--debit .zwm-txn-amt,
.zwm-txn--debit .zwm-txn-amt .woocommerce-Price-amount { color: var(--zpm-red); }
.zwm-empty {
	text-align: center;
	color: var(--zpm-muted);
	font-size: 13px;
	padding: 26px 14px;
}
.zwm-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 2px 0 8px;
}
.zwm-pager a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e6e3f0;
	font-size: 13px;
	font-weight: 600;
	color: #3b3651 !important;
}
.zwm-pager a.is-active {
	background: var(--zpm-primary);
	border-color: var(--zpm-primary);
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}

/* ============================================================
   INVOICES — .zim-root (reseller/invoices-mobile.php)
   ============================================================ */
.zim-root {
	padding: 14px 12px 28px;
	max-width: 100%;
}
.zim-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 2px 14px;
}
.zim-head-ic {
	width: 44px; height: 44px;
	border-radius: 14px;
	flex-shrink: 0;
	background: rgba(124, 58, 237, 0.10);
	color: var(--zpm-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
}
.zim-head-txt { min-width: 0; flex: 1 1 auto; }
.zim-head-txt h1 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.2;
	color: var(--zpm-text);
}
.zim-head-txt p { font-size: 12px; color: var(--zpm-muted); margin: 3px 0 0; }
.zim-new-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 15px;
	border-radius: 999px;
	background: var(--zpm-primary);
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 700;
	box-shadow: 0 7px 16px rgba(124, 58, 237, 0.25);
	transition: transform 0.15s ease;
}
.zim-new-btn:active { transform: scale(0.97); }
.zim-new-btn i { font-size: 15px; }

/* Date range chip scroller */
.zim-range-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zpm-muted);
	margin: 0 2px 8px;
}
.zim-range {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 2px 4px;
	margin-bottom: 10px;
}
.zim-range::-webkit-scrollbar { display: none; }
.zim-range a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e6e3f0;
	font-size: 12px;
	font-weight: 600;
	color: #3b3651 !important;
	white-space: nowrap;
	transition: transform 0.15s ease;
}
.zim-range a:active { transform: scale(0.97); }
.zim-range a.is-active {
	background: var(--zpm-text);
	border-color: var(--zpm-text);
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(30, 25, 50, 0.22);
}
.zim-custom {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	align-items: end;
	margin: 0 0 12px;
}
.zim-custom label {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--zpm-muted);
	margin: 0 0 4px 4px;
}
.zim-custom input[type="date"] {
	width: 100%;
	height: 40px;
	border-radius: 12px;
	border: 1px solid #e6e3f0;
	background: #fff;
	padding: 0 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zpm-text);
}
.zim-custom button {
	height: 40px;
	padding: 0 16px;
	border-radius: 12px;
	border: none;
	background: var(--zpm-primary);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

/* 2×2 stat cards */
.zim-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}
.zim-stat {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid var(--zpm-card-border);
	border-radius: 18px;
	padding: 13px 13px 12px;
	overflow: hidden;
	transition: transform 0.15s ease;
}
.zim-stat:active { transform: scale(0.98); }
.zim-stat-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.zim-stat-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--zpm-muted);
}
.zim-stat-ic {
	width: 30px; height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.zim-stat--all       .zim-stat-ic { background: rgba(99, 102, 241, 0.12);  color: #6366f1; }
.zim-stat--paid      .zim-stat-ic { background: rgba(34, 197, 94, 0.12);   color: #22c55e; }
.zim-stat--unpaid    .zim-stat-ic { background: rgba(245, 158, 11, 0.14);  color: #d97706; }
.zim-stat--cancelled .zim-stat-ic { background: rgba(148, 163, 184, 0.2);  color: #64748b; }
.zim-stat-num {
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	color: var(--zpm-text);
	letter-spacing: -0.01em;
}
.zim-stat-sub,
.zim-stat-sub .woocommerce-Price-amount {
	font-size: 12px;
	font-weight: 600;
	color: var(--zpm-muted);
	margin-top: 4px;
	display: inline-block;
}
/* Active fills — mirror the desktop invoice cards */
.zim-stat--all.is-active       { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border-color: transparent; box-shadow: 0 10px 24px rgba(99, 102, 241, 0.32); }
.zim-stat--paid.is-active      { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border-color: transparent; box-shadow: 0 10px 24px rgba(34, 197, 94, 0.28); }
.zim-stat--unpaid.is-active    { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-color: transparent; box-shadow: 0 10px 24px rgba(245, 158, 11, 0.28); }
.zim-stat--cancelled.is-active { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); border-color: transparent; box-shadow: 0 10px 22px rgba(100, 116, 139, 0.26); }
.zim-stat.is-active .zim-stat-label,
.zim-stat.is-active .zim-stat-sub,
.zim-stat.is-active .zim-stat-sub .woocommerce-Price-amount,
.zim-stat.is-active .zim-stat-num { color: #fff; }
.zim-stat.is-active .zim-stat-ic { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Pending due / overdue wide cards */
.zim-wide {
	display: block;
	position: relative;
	border-radius: 20px;
	border: 1px solid;
	padding: 15px 15px 14px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: transform 0.15s ease;
}
.zim-wide:active { transform: scale(0.99); }
.zim-wide--due {
	background: linear-gradient(135deg, #fff9f0 0%, #fff4e2 100%);
	border-color: #fde5c0;
}
.zim-wide--overdue {
	background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
	border-color: #fbd2d2;
}
.zim-wide.is-active { box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18); }
.zim-wide--overdue.is-active { box-shadow: 0 10px 24px rgba(239, 68, 68, 0.16); }
.zim-wide-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}
.zim-wide-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.zim-wide--due .zim-wide-label { color: #b45309; }
.zim-wide--overdue .zim-wide-label { color: #b91c1c; }
.zim-wide-ic {
	width: 38px; height: 38px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}
.zim-wide--due .zim-wide-ic { background: rgba(245, 158, 11, 0.16); color: #d97706; }
.zim-wide--overdue .zim-wide-ic { background: rgba(239, 68, 68, 0.13); color: #dc2626; }
.zim-wide-num,
.zim-wide-num .woocommerce-Price-amount {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.zim-wide--due .zim-wide-num,
.zim-wide--due .zim-wide-num .woocommerce-Price-amount { color: #c2410c; }
.zim-wide--overdue .zim-wide-num { color: #b91c1c; }
.zim-wide-sub { font-size: 12px; font-weight: 500; margin-top: 3px; }
.zim-wide--due .zim-wide-sub { color: #9a5b21; }
.zim-wide--overdue .zim-wide-sub { color: #a13d3d; }
.zim-progress {
	height: 6px;
	background: rgba(245, 158, 11, 0.2);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 10px;
}
.zim-progress span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #fb923c, #f59e0b);
}
.zim-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.zim-chip {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid;
	background: #fff;
	line-height: 1.2;
}
.zim-chip--amber { color: #c2410c; border-color: #fdba74; }
.zim-chip--red   { color: #b91c1c; border-color: #fca5a5; }

/* Invoice list card */
.zim-card {
	background: #fff;
	border: 1px solid var(--zpm-card-border);
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(30, 27, 46, 0.03);
	overflow: hidden;
	margin-bottom: 14px;
}
.zim-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 16px 6px;
}
.zim-card-head h3 {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--zpm-text);
	flex: 1 1 auto;
	min-width: 0;
}
.zim-count-pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: #f4f2fa;
	border: 1px solid #e9e6f3;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #514b68;
	white-space: nowrap;
}
.zim-search {
	display: flex;
	gap: 8px;
	padding: 8px 14px 12px;
}
.zim-search-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.zim-search-wrap i {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--zpm-faint);
	pointer-events: none;
}
.zim-search input[type="text"] {
	width: 100%;
	height: 40px;
	border-radius: 999px;
	border: 1px solid #e6e3f0;
	background: #fbfaff;
	padding: 0 14px 0 36px;
	font-size: 13px;
	font-weight: 500;
	color: var(--zpm-text);
}
.zim-search input[type="text"]::placeholder { color: var(--zpm-faint); }
.zim-search button {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--zpm-text);
	color: #fff;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.zim-list { display: flex; flex-direction: column; gap: 10px; padding: 2px 13px 14px; }
.zim-inv {
	background: var(--zpm-tile-bg);
	border: 1px solid var(--zpm-border);
	border-radius: 18px;
	overflow: hidden;
}
.zim-inv-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px 0;
}
.zim-inv-idwrap { display: flex; flex-direction: column; min-width: 0; }
.zim-inv-idwrap b { font-size: 15px; font-weight: 700; color: var(--zpm-primary); line-height: 1.3; }
.zim-inv-idwrap small { font-size: 11px; font-weight: 500; color: var(--zpm-faint); margin-top: 2px; }
.zim-status {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}
.zim-status::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.zim-status--paid      { background: #d1fae5; color: #065f46; }
.zim-status--unpaid    { background: #fef3c7; color: #92400e; }
.zim-status--cancelled { background: #f3f4f6; color: #6b7280; }
.zim-inv-mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px 11px;
}
.zim-domains {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
	flex: 1 1 auto;
}
.zim-domain {
	display: inline-flex;
	align-items: center;
	max-width: 46vw;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f4f2fa;
	border: 1px solid #e9e6f3;
	font-size: 10.5px;
	font-weight: 600;
	color: #514b68;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zim-domain--more { color: var(--zpm-faint); background: transparent; border-color: transparent; padding-left: 2px; padding-right: 2px; }
.zim-inv-amt,
.zim-inv-amt .woocommerce-Price-amount {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--zpm-text);
	white-space: nowrap;
	flex-shrink: 0;
}
.zim-inv-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	padding: 10px 12px;
	border-top: 1px solid #f1eff7;
	background: #fbfaff;
}
.zim-btn-view,
.zim-btn-pay,
.zim-btn-pdf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	transition: transform 0.15s ease;
	white-space: nowrap;
}
.zim-btn-view { background: var(--zpm-primary); color: #fff !important; box-shadow: 0 5px 12px rgba(124, 58, 237, 0.22); }
.zim-btn-pay  { background: var(--zpm-green);   color: #fff !important; box-shadow: 0 5px 12px rgba(22, 163, 74, 0.22); }
.zim-btn-pdf  { background: #fff; border: 1px solid #e6e3f0; color: #3b3651 !important; padding: 8px 12px; }
.zim-btn-view:active, .zim-btn-pay:active, .zim-btn-pdf:active { transform: scale(0.96); }
.zim-btn-view i, .zim-btn-pay i, .zim-btn-pdf i { font-size: 14px; }
.zim-empty {
	text-align: center;
	padding: 30px 16px;
	color: var(--zpm-muted);
}
.zim-empty i { font-size: 38px; opacity: 0.28; display: block; margin-bottom: 8px; }
.zim-empty b { display: block; font-size: 14px; color: var(--zpm-text); margin-bottom: 3px; }
.zim-empty span { font-size: 12px; }

/* ============================================================
   ORDER MESSAGES — mobile overrides on the existing AJAX chat DOM
   (order-messages.php). List-first; the chat pane becomes a
   full-screen overlay when body.zmm-chat-open is set by
   reseller-messages-mobile.js. Desktop (>=768px) untouched.
   ============================================================ */
@media (max-width: 767.98px) {
	body .support-channels-container {
		background: #ffffff !important;
		min-height: 60vh !important;
		padding: 14px 12px 28px !important;
	}
	/* Header: compact title, hide the Documentation button column */
	body .support-channels-container > .row.align-items-center.mb-4 { margin-bottom: 12px !important; }
	body .support-channels-container > .row.align-items-center.mb-4 .col-md-6.text-end { display: none !important; }
	body .support-channels-container > .row.align-items-center.mb-4 h1 {
		font-size: 22px !important;
		letter-spacing: -0.02em;
		margin-bottom: 2px !important;
	}
	body .support-channels-container > .row.align-items-center.mb-4 p { font-size: 12px !important; }

	/* Injected Order Chats / Support Chats mode tabs → segmented control */
	body .support-channels-container .zsc-mode-tabs {
		display: flex !important;
		gap: 4px;
		background: #f4f2fa;
		border: 1px solid #ebe8f4;
		border-radius: 999px;
		padding: 4px;
		margin-top: 12px !important;
	}
	body .support-channels-container .zsc-mode-tabs button {
		flex: 1 1 0;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border: none;
		background: transparent;
		border-radius: 999px;
		padding: 9px 6px;
		font-size: 12px;
		font-weight: 700;
		color: #6b7280;
		white-space: nowrap;
	}
	body .support-channels-container .zsc-mode-tabs button.active {
		background: #ffffff;
		color: #0e56f5;
		box-shadow: 0 3px 10px rgba(30, 25, 50, 0.10);
	}
	body .support-channels-container .zsc-mode-tabs button i { font-size: 14px; }

	/* 3-pane theater → single list pane.
	   IMPORTANT: display is only forced where it cannot fight the page
	   JS — setMode() toggles inline display (flex/none) on .theater-row
	   and #zscp-section, so inline "none" must always stay hidden and
	   only inline "flex" is flattened to block. */
	body .support-channels-container .theater-row,
	body .support-channels-container #zscp-section {
		height: auto !important;
		min-height: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}
	body .support-channels-container .theater-row { display: block !important; }
	body .support-channels-container .theater-row[style*="none"] { display: none !important; }
	body .support-channels-container #zscp-section[style*="flex"] { display: block !important; }

	body .support-channels-container .theater-row > .col-12.col-md-4,
	body .support-channels-container #zscp-section > .col-12.col-md-4 {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		display: block !important;
		height: auto !important;
		border: 0 !important;
		background: transparent !important;
	}
	/* Hide the middle (chat) and right (context) panes in list view */
	body .support-channels-container .theater-row > .col-12.col-md-5,
	body .support-channels-container .theater-row > .col-12.col-md-3,
	body .support-channels-container #zscp-section > .col-12.col-md-5,
	body .support-channels-container #zscp-section > .col-12.col-md-3 {
		display: none !important;
	}

	/* List header block (search + read filters) */
	body .support-channels-container .theater-row .p-4.pb-3,
	body .support-channels-container #zscp-section .p-4.pb-3 {
		padding: 0 0 10px !important;
		background: transparent !important;
		border: 0 !important;
	}
	body .support-channels-container .theater-row .input-group,
	body .support-channels-container #zscp-section .input-group {
		border-radius: 999px !important;
		border: 1px solid #e6e3f0 !important;
		background: #fbfaff !important;
		margin-bottom: 10px !important;
	}
	body .support-channels-container .zetlink-msg-thread-filter,
	body .support-channels-container .zscp-filters {
		background: transparent !important;
		padding: 0 !important;
		gap: 8px !important;
		justify-content: flex-start;
	}
	body .support-channels-container .zetlink-msg-thread-filter .nav-link,
	body .support-channels-container .zscp-filters .nav-link {
		flex: 0 0 auto !important;
		background: #fff;
		border: 1px solid #e6e3f0 !important;
		border-radius: 999px !important;
		color: #3b3651;
		padding: 7px 15px !important;
		font-size: 11.5px !important;
		text-transform: capitalize;
	}
	body .support-channels-container .zetlink-msg-thread-filter .nav-link.active,
	body .support-channels-container .zscp-filters .nav-link.active {
		background: #1e1932 !important;
		border-color: #1e1932 !important;
		color: #fff !important;
	}

	/* Conversation cards */
	body .support-channels-container #zetlink-msg-conversations,
	body .support-channels-container #zscp-thread-list {
		padding: 0 !important;
		overflow: visible !important;
		flex: none !important;
	}
	body #zetlink-msg-conversations .zetlink-msg-conv {
		background: #ffffff !important;
		border: 1px solid #ecebf3 !important;
		border-radius: 18px !important;
		margin: 0 0 10px !important;
		padding: 13px 14px !important;
	}
	body #zetlink-msg-conversations .zetlink-msg-conv.active { border-color: #d9ccf7 !important; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.10) !important; }
	body #zetlink-msg-conversations .zetlink-msg-conv .bg-primary.rounded-circle {
		width: 44px !important;
		height: 44px !important;
		background: linear-gradient(135deg, #0e56f5, #1748e8) !important;
		box-shadow: 0 5px 12px rgba(124, 58, 237, 0.24) !important;
	}
	body #zetlink-msg-conversations .zetlink-msg-conv .conv-title,
	body #zetlink-msg-conversations .zetlink-msg-conv strong { font-size: 13.5px !important; color: #1e1932 !important; }
	body #zetlink-msg-conversations .zetlink-msg-conv .conv-preview,
	body #zetlink-msg-conversations .zetlink-msg-conv .text-truncate.fs-12 { font-size: 12px !important; color: #6b7280 !important; }
	body #zscp-thread-list .zscp-thread-item {
		background: #ffffff !important;
		border: 1px solid #ecebf3 !important;
		border-radius: 18px !important;
		margin: 0 0 10px !important;
	}

	/* ---------- Full-screen chat overlay (body.zmm-chat-open) ---------- */
	body.zmm-chat-open { overflow: hidden !important; }
	body.zmm-chat-open .support-channels-container .theater-row > .col-12.col-md-5,
	body.zmm-chat-open .support-channels-container #zscp-section > .col-12.col-md-5 {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 4000 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		background: #ffffff !important;
		overflow: hidden !important;
	}
	/* In order mode the support section is display:none — its overlay column
	   stays hidden with it, so only the active mode's chat can cover the
	   screen. Placeholders never show inside the overlay. */
	body.zmm-chat-open #zetlink-msg-chat-placeholder,
	body.zmm-chat-open #zscp-empty { display: none !important; }
	body.zmm-chat-open #zetlink-msg-chat-panel:not(.d-none) { display: flex !important; }
	body.zmm-chat-open #zscp-chat-panel:not(.d-none) { display: flex !important; }

	/* Overlay chat header */
	body.zmm-chat-open #zetlink-msg-chat-panel > .p-3,
	body.zmm-chat-open #zscp-chat-panel > .p-3 {
		padding: 10px 12px !important;
	}
	/* Injected back button (hidden on desktop) */
	.zmm-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: 1px solid #eceaf4;
		background: #f8f6fd;
		color: #1e1932;
		font-size: 18px;
		flex-shrink: 0;
		cursor: pointer;
	}
	/* Messages area + composer inside the overlay */
	body.zmm-chat-open #zetlink-msg-messages,
	body.zmm-chat-open #zscp-messages {
		padding: 14px 12px !important;
	}
	body.zmm-chat-open .msg-bubble { max-width: 86% !important; }
	body.zmm-chat-open #zetlink-msg-chat-panel > .p-4.bg-white.border-top,
	body.zmm-chat-open #zscp-composer {
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
	}
	body.zmm-chat-open #zetlink-msg-chat-panel .mt-3.d-flex.flex-wrap,
	body.zmm-chat-open #zscp-composer .mt-3.d-flex.flex-wrap {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-top: 8px !important;
	}
	body.zmm-chat-open #zetlink-msg-chat-panel .mt-3.d-flex.flex-wrap::-webkit-scrollbar,
	body.zmm-chat-open #zscp-composer .mt-3.d-flex.flex-wrap::-webkit-scrollbar { display: none; }
	body.zmm-chat-open .btn-xs-premium { flex: 0 0 auto; white-space: nowrap; }
	body.zmm-chat-open #zetlink-msg-chat-search-wrap input { width: 110px !important; }
}
/* Desktop safety: the injected back/info buttons must never appear >=768px */
@media (min-width: 768px) {
	.zmm-back,
	.zmm-info,
	.zmm-info-close { display: none !important; }
}

/* ============================================================
   WEBSITES LIST — mobile v1.4 (exact soho-sparkle spec)
   Values transcribed 1:1 from the prototype source (Tailwind scale):
   neutral borders #e5e5e5, 12px card/input radius, 44px search,
   32px action buttons, 24px metric chips, sky DA/DR, emerald prices,
   amber INSTANT. Ordering is pinned with !important and arranged by
   websites-list-mobile.js; desktop + public catalog stay untouched.
   ============================================================ */
@media (max-width: 767.98px) {
	/* ---------- Shell ---------- */
	body .zetlink-sites-catalog { padding: 0 16px 24px !important; background: #fafafa !important; }
	/* The dashboard's websites_list endpoint has no page title of its own and
	   already hides .zl-hero unconditionally (see the .woocommerce-MyAccount-content
	   .zl-hero rule in sites-catalog-layout.php), so it needs a stand-in "Websites"
	   heading here. The public /sites page has its own Hero (headline, description,
	   trust badges, CTA buttons, stats, Featured Site card) and is NOT wrapped in
	   .woocommerce-MyAccount-content — scoping both rules to that wrapper keeps this
	   dashboard-only stand-in from hiding the public page's real Hero content. */
	body .woocommerce-MyAccount-content .zetlink-sites-catalog::before {
		content: "Websites";
		display: block;
		font-size: 18px;
		font-weight: 800;
		color: #171717;
		letter-spacing: -0.01em;
		padding: 2px 2px 10px;
	}
	body .woocommerce-MyAccount-content .zetlink-sites-catalog .zl-hero { display: none !important; }
	/* The white band above "Websites" and the extra side gutters come from
	   the page chrome around the catalog (header margin + content-container
	   padding). Neutralized only when this page is present — :has() keeps
	   every other dashboard page untouched (progressive enhancement). */
	body:has(.zetlink-sites-catalog) .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
	body:has(.zetlink-sites-catalog) .header-area {
		margin-bottom: 8px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	body:has(.zetlink-sites-catalog) .main-content,
	body:has(.zetlink-sites-catalog) .main-content .inner-main-content {
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body:has(.zetlink-sites-catalog) .woocommerce-MyAccount-content {
		margin-top: 0 !important;
		padding: 0 !important;
		max-width: 100% !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__card,
	body .zetlink-sites-catalog .zetlink-sites-catalog__card-body,
	body .zetlink-sites-catalog .wsm-websites-grid .__inner-wrap.card {
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		overflow: visible !important;
	}

	/* ---------- Source tabs (3-up segmented, spec: p-1 / r-12 / r-8) ---------- */
	body .zetlink-sites-catalog .zl-toggle-bar {
		background: #ffffff !important;
		border: 1px solid #e5e5e5 !important;
		border-radius: 12px !important;
		box-shadow: none !important;
		padding: 10px !important;
		margin: 0 0 16px !important;
		gap: 0 !important;
	}
	body .zetlink-sites-catalog .zl-toggle-bar__label { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle {
		display: flex !important;
		width: 100% !important;
		gap: 8px !important;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 1px !important;
		padding: 8px 4px !important;
		border-radius: 8px !important;
		background: transparent !important;
		border: 0 !important;
		color: #525252 !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		text-align: center !important;
		white-space: nowrap !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt .zl-toggle-icon-mini { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt .badge {
		order: 2;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		color: inherit !important;
		opacity: 0.7 !important;
		line-height: 1.1 !important;
	}
	/* Active: RIF (2nd) purple, All/Marketplace near-black — like the spec */
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt--active {
		background: #171717 !important;
		color: #ffffff !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt--active:nth-child(2) { background: #0e56f5!important; }
	body .zetlink-sites-catalog .zetlink-wsm-catalog-toggle__opt--active .badge { opacity: 0.9 !important; }

	/* ---------- Browse by Category ---------- */
	body .zetlink-sites-catalog .zl-categories { margin-bottom: 16px !important; }
	body .zetlink-sites-catalog .zl-categories__head {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin-bottom: 8px !important;
		padding: 0 2px !important;
	}
	body .zetlink-sites-catalog .zl-categories__title { font-size: 13px !important; font-weight: 600 !important; color: #262626 !important; }
	body .zetlink-sites-catalog .zl-categories__title-icon { display: none !important; }
	body .zetlink-sites-catalog .zlm-see-all {
		font-size: 11px !important;
		font-weight: 500 !important;
		color: #0e56f5!important;
		text-decoration: none !important;
		flex: 0 0 auto !important;
		padding: 4px 2px !important;
	}
	body .zetlink-sites-catalog.zlm-cats-open .zetlink-sites-catalog__category-tabs {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		margin: 0 !important;
		padding: 2px 0 4px !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-card {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		gap: 8px !important;
		margin: 0 -16px !important;
		padding: 2px 16px 4px !important; /* edge-to-edge scroll like the spec */
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs::-webkit-scrollbar { display: none !important; }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-item { flex: 0 0 auto !important; width: auto !important; }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-link {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		min-height: 0 !important;
		height: 32px !important;
		padding: 0 12px !important;
		border-radius: 999px !important;
		background: #ffffff !important;
		border: 1px solid #e5e5e5 !important;
		font-size: 11.5px !important;
		font-weight: 500 !important;
		color: #404040 !important;
		white-space: nowrap !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .zetlink-cat-icon {
		width: 14px !important; height: 14px !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: inherit !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .zetlink-cat-icon svg { width: 14px !important; height: 14px !important; }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .zetlink-cat-label { font-size: 13.5px !important; }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-link .badge {
		background: #f5f5f5 !important;
		color: #262626 !important;
		border-radius: 999px !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		padding: 2px 6px !important;
	}
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-link.active {
        background: linear-gradient(120deg, #2563eb 0%, #4f46e5 45%, #7c3aed 100%) !important;
        border-color: #f5ac3e !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-link.active .zetlink-cat-icon { background: transparent !important; color: #ffffff !important; }
	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .nav-link.active .badge { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }

	/* ---------- Layout order (source-verified, AJAX-proof) ----------
	   Real structure: form > __row > [ __websites > __dynamic > (toolbar,
	   table-card, pagination) ] + [ __filter > .__body > (quick filters,
	   traffic bar, filter grid) ]. The plugin's AJAX replaces everything
	   inside __dynamic, so nothing may be moved across these wrappers.
	   Instead every wrapper below __row is flattened (display:contents)
	   and the pieces are flex-ordered on __row itself — the classes
	   re-apply to each fresh AJAX payload automatically. */
	body .zetlink-sites-catalog .wsm-websites-grid__row {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body .zetlink-sites-catalog .wsm-websites-grid__websites,
	body .zetlink-sites-catalog .wsm-websites-grid__dynamic,
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar,
	body .zetlink-sites-catalog .wsm-websites-grid__filter,
	body .zetlink-sites-catalog .wsm-websites-grid__filter > .__body { display: contents !important; }
	body .zetlink-sites-catalog .wsm-websites-grid__row > * { order: 8 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__center { order: 1 !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-filter-grid { order: 2 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-quick-filters { display: none !important; } /* USA quick filter duplicates the category chip + Country select */
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar { order: 4 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__summary { order: 5 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-bulk-search-btn { order: 6 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__right { order: 7 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-table-card { order: 10 !important; }
	body .zetlink-sites-catalog .zlmc-list { order: 10 !important; }
	body .zetlink-sites-catalog .wsm-sites__pagination--grid { order: 11 !important; }

	/* Min-traffic range — compact card (unique function, kept) */
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar {
		background: #ffffff !important;
		border: 1px solid #e5e5e5 !important;
		border-radius: 12px !important;
		padding: 10px 12px !important;
		margin: 0 0 12px !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar__label {
		display: flex !important;
		justify-content: space-between !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		color: #525252 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar__value { color: #0e56f5!important; }
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar__range { width: 100% !important; margin: 6px 0 2px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-traffic-bar__ticks {
		display: flex !important;
		justify-content: space-between !important;
		font-size: 9px !important;
		color: #a3a3a3 !important;
	}

	/* ---------- Search (spec: 44px, r-12, 32px purple sliders button) ---------- */
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap {
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: 44px !important;
		background: #ffffff !important;
		background-image: none !important;
		border: 1px solid #e5e5e5 !important;
		border-radius: 12px !important;
		padding: 0 6px 0 12px !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-icon { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap::after { content: none !important; display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap::before {
		content: "\f002" !important;
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		font-size: 14px !important;
		line-height: 1 !important;
		color: #a3a3a3 !important;
		position: static !important;
		transform: none !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap input {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		border: 0 !important;
		background: transparent !important;
		background-image: none !important;
		padding: 0 !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		height: 100% !important;
		box-shadow: none !important;
		-webkit-appearance: none !important;
		appearance: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap input::-webkit-search-decoration,
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-btn {
		flex: 0 0 auto !important;
		width: 32px !important;
		height: 32px !important;
		min-width: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 8px !important;
		background: #0e56f5!important;
		color: #ffffff !important;
		font-size: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-btn > * { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-btn::before { display: none !important; }
	/* Injected by websites-list-mobile.js as a real type=submit in the form */
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-btn::after {
		content: "\f1de";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 14px;
		line-height: 1;
	}

	/* ---------- Filter chips (spec: 32px pills, edge-to-edge scroll) ---------- */
	body .zetlink-sites-catalog .zl-mobile-filter-toggle { display: none !important; }
	/* Purple sliders (search submit) button removed — Enter/keyboard search still works */
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-btn { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap { padding: 0 12px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-filter-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		gap: 8px !important;
		margin: 0 -16px 12px !important;
		padding: 0 16px 4px !important;
		border: 0 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-filter-grid::-webkit-scrollbar { display: none !important; }
	body .zetlink-sites-catalog .wsm-filter__input-wrap {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	body .zetlink-sites-catalog .wsm-filter__input-wrap select {
		height: 32px !important;
		border-radius: 999px !important;
		border: 1px solid #e5e5e5 !important;
		background-color: #ffffff !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		color: #404040 !important;
		padding: 0 24px 0 12px !important;
	}
	body .zetlink-sites-catalog .wsm-filter__input-wrap input {
		height: 32px !important;
		width: 88px !important;
		border-radius: 999px !important;
		border: 1px solid #e5e5e5 !important;
		background-color: #ffffff !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		padding: 0 12px !important;
	}

	/* ---------- Result count + sort + (per-page / bulk kept functional) ---------- */
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__summary {
		text-align: left !important;
		font-size: 0 !important; /* hides "Showing" / raw text nodes */
		color: #525252 !important;
		padding: 0 2px 10px !important;
		margin: 0 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__range::after { content: " of "; font-weight: 400; color: #525252; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__summary::after { content: "\00a0results"; font-size: 12px; font-weight: 400; color: #525252; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__range,
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__total { color: #171717 !important; font-weight: 600 !important; font-size: 12px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__total { color: #525252 !important; font-weight: 400 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__right {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		overflow-x: auto !important;
		scrollbar-width: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__right::-webkit-scrollbar { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-results-toolbar__selects { display: flex !important; flex: 1 1 auto !important; width: 100% !important; flex-wrap: nowrap !important; gap: 8px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-per-page,
	body .zetlink-sites-catalog .zetlink-wsm-toolbar-sort {
		width: auto !important;
		min-width: 0 !important;
		flex: 1 1 0 !important;
		height: 32px !important;
		border-radius: 999px !important;
		border: 1px solid #e5e5e5 !important;
		background-color: #ffffff !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		color: #404040 !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-bulk-search-btn {
		flex: 0 0 auto !important;
		width: 100% !important;
		justify-content: center !important;
		margin: 0 0 12px !important;
		min-height: 0 !important;
		height: 32px !important;
		padding: 0 12px !important;
		border-radius: 999px !important;
		font-size: 11px !important;
		letter-spacing: 0.02em !important;
		text-transform: none !important;
		background: #ffffff !important;
		background-image: none !important;
		color: #0e56f5!important;
		border: 1px solid #e5e5e5 !important;
		font-weight: 600 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-bulk-search-btn::before { display: none !important; }

	/* ---------- Cards (spec: r-12, p-12, #e5e5e5) ---------- */
	body .zetlink-sites-catalog .zetlink-wsm-table-card { overflow: visible !important; background: transparent !important; padding: 0 0 4px !important; width: 100% !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table { display: block !important; width: 100% !important; min-width: 0 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table thead { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody { display: flex !important; flex-direction: column !important; gap: 10px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody tr {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 6px 6px !important;
		background: #ffffff !important;
		border: 1px solid #e5e5e5 !important;
		border-radius: 12px !important;
		padding: 12px !important;
		box-shadow: none !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody tr:hover { background: #ffffff !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td {
		display: flex !important;
		align-items: center !important;
		width: auto !important;
		min-width: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		white-space: normal !important;
		text-align: left !important;
		order: 13 !important; /* unknown/future columns still render, at the end */
	}

	/* Row 1 — domain (+ NEW) left, View Rules right */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website {
		order: 1 !important;
		flex: 1 1 auto !important;
		align-self: flex-start !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website .zl-site-favicon { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website .zl-site-row { gap: 0 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website .zl-site-meta {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 3px 6px !important;
		padding: 0 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website .zetlink-wsm-domain-link {
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #0e56f5!important;
		line-height: 1.25 !important;
		word-break: break-all !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td .zetlink-wsm-new-badge {
		background: #fef3c7 !important;
		color: #b45309 !important;
		font-size: 9px !important;
		font-weight: 700 !important;
		padding: 2px 6px !important;
		border-radius: 4px !important;
		margin: 0 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-rules {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
		align-self: flex-start !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-rules .zetlink-wsm-view-rules {
		height: 28px !important;
		padding: 0 10px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		background: rgba(124, 58, 237, 0.10) !important;
		color: #0e56f5!important;
	}

	/* Row 2 — metric chips (spec: h-24 pills; sky DA/DR) */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-da      { order: 3 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-dr      { order: 4 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic { order: 5 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-links   { order: 6 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish { order: 7 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td .zetlink-wsm-metric-badge {
		height: 24px !important;
		min-width: 0 !important;
		padding: 0 8px !important;
		border-radius: 999px !important;
		background: #f0f9ff !important;
		color: #0c4a6e !important;
		font-size: 11px !important;
		font-weight: 700 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-da .zetlink-wsm-metric-badge::before,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-dr .zetlink-wsm-metric-badge::before {
		font-weight: 600;
		color: #0369a1;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-da .zetlink-wsm-metric-badge::before { content: "DA\00a0"; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-dr .zetlink-wsm-metric-badge::before { content: "DR\00a0"; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic {
		height: 24px !important;
		background: #f5f5f5 !important;
		border-radius: 999px !important;
		padding: 0 8px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		color: #262626 !important;
		gap: 4px !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic img,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic svg,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic .zl-flag { width: 14px !important; height: auto !important; }
	/* Links: gray chip, bold count, small green DOFOLLOW sub-badge (spec) */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-links {
		height: 24px !important;
		background: #f5f5f5 !important;
		border-radius: 999px !important;
		padding: 0 8px !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		color: #171717 !important;
		gap: 4px !important;
		white-space: nowrap !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-links span {
		font-size: 9px !important;
		font-weight: 700 !important;
		padding: 2px 4px !important;
		border-radius: 4px !important;
		margin: 0 !important;
		letter-spacing: 0.03em !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish { align-items: center !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish span {
		height: 24px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		padding: 0 8px !important;
		border-radius: 999px !important;
		background: #fffbeb !important;
		color: #b45309 !important;
	}
	body .zetlink-sites-catalog .zl-publish-icon { font-size: 10px !important; }
	/* Non-instant delivery reads calm gray, like the spec (progressive, :has) */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish:has(.fa-calendar) span,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish:has(.fa-clock) span {
		background: #f5f5f5 !important;
		color: #404040 !important;
	}

	/* Row 3 — niche pills (spec: h-20, primary/5) */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-niche { order: 8 !important; flex: 1 1 100% !important; min-width: 100% !important; flex-wrap: wrap !important; gap: 4px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-niche a {
		display: inline-flex !important;
		align-items: center !important;
		height: 20px !important;
		padding: 0 8px !important;
		border-radius: 999px !important;
		background: rgba(124, 58, 237, 0.05) !important;
		border: 0 !important;
		font-size: 10px !important;
		font-weight: 500 !important;
		color: rgba(14, 86, 245, 0.8) !important;
		white-space: nowrap !important;
	}

	/* Divider before the price footer */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody tr::after {
		content: "";
		order: 9 !important;
		flex-basis: 100% !important;
		height: 1px;
		background: #f5f5f5;
		margin: 4px 0 2px;
	}

	/* Footer — GENERAL | SPECIAL prices left, Add To Cart right */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 1px !important;
		line-height: 1.2 !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #059669 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price { order: 10 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special {
		order: 11 !important;
		margin-left: 12px !important;
		padding-left: 12px !important;
		border-left: 1px solid #e5e5e5 !important; /* the spec's thin divider */
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price::before { content: "GENERAL"; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special::before { content: "SPECIAL"; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price::before,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special::before {
		font-size: 9px;
		font-weight: 600;
		letter-spacing: 0.05em;
		color: #737373;
		line-height: 1;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price .woocommerce-Price-amount,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special .woocommerce-Price-amount {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #059669 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price del,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price del .woocommerce-Price-amount {
		font-size: 10px !important;
		font-weight: 500 !important;
		color: #a3a3a3 !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions {
		order: 12 !important;
		flex: 0 0 auto !important;
		margin-left: auto !important;
		justify-content: flex-end !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0 !important;
		height: 32px !important;
		background: #0e56f5!important;
		border-radius: 999px !important;
		padding: 0 12px !important;
		font-size: 0 !important; /* hide the plugin's own label text */
		font-weight: 600 !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn > * { display: none !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn::before {
		content: "\f07a";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 12px;
		line-height: 1;
		color: #ffffff;
		margin-right: 6px;
	}
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn::after {
		content: "Add To Cart";
		font-size: 11.5px;
		font-weight: 600;
		color: #ffffff;
		letter-spacing: 0.01em;
	}

	/* ---------- Pagination ---------- */
	body .zetlink-sites-catalog .wsm-sites__pagination--grid { padding: 12px 0 !important; }
	body .zetlink-sites-catalog .wsm-sites__pagination__item,
	body .zetlink-sites-catalog .wsm-sites__pagination__nav-btn {
		min-width: 36px !important;
		height: 32px !important;
		border-radius: 999px !important;
	}
	
	/* ---------- Generated prototype cards (.zlmc-*, built by JS) ----------
	   v2.0 — restyled to the RIF "site card" mock: domain + NEW | View Rules,
	   AS/DA/DR ring hero with a divider and the top-country share list,
	   link-disc + "N Do Follow" + INSTANT chip | niche pills, dual traffic
	   tiles (white icon disc, big value, full-width area sparkline over a
	   dashed baseline), then GENERAL | SPECIAL prices + Buy Now.
	   When the script succeeds it adds .zlmc-on and the plugin table is
	   swapped for these cards; without JS the styled table above remains. */
	body .zetlink-sites-catalog.zlmc-on .zetlink-wsm-table-card { display: none !important; }
	body .zetlink-sites-catalog .zlmc-list { display: none; }
	body .zetlink-sites-catalog.zlmc-on .zlmc-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 2px 0 6px;
		width: 100% !important;
	}
	body .zetlink-sites-catalog .zlmc-card {
		background: #ffffff;
		border: 1px solid #edeff3;
		border-radius: 22px;
		padding: 13px 16px 14px;
		box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	}

	/* ── Row 1: domain + NEW | View Rules ── */
	body .zetlink-sites-catalog .zlmc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	body .zetlink-sites-catalog .zlmc-name-wrap { min-width: 0; flex: 1 1 auto; }
	body .zetlink-sites-catalog .zlmc-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
	body .zetlink-sites-catalog .zlmc-domain::first-letter { text-transform: uppercase; }
	body .zetlink-sites-catalog .zlmc-domain {
		font-size: 18px !important;
		font-weight: 800 !important;
		letter-spacing: -0.02em;
		color: #101828 !important;
		line-height: 1.25;
		word-break: normal;
		overflow-wrap: break-word;
		text-decoration: none !important;
	}
	body .zetlink-sites-catalog .zlmc-new {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		padding: 3px 8px;
		border-radius: 6px;
		background: #fdeec9;
		color: #b45309;
	}
	body .zetlink-sites-catalog .zlmc-rules {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		height: 32px;
		padding: 0 16px;
		border-radius: 999px;
		border: 1px solid #dcdcfd;
		background: #f4f3ff;
		color: #1d4ed8;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
	}
	body .zetlink-sites-catalog .zlmc-rules::after { content: none; }

	/* ── Row 2: AS / DA / DR rings | divider | top traffic countries ──
	   The rings are the desktop conic-gradient badges cloned as-is; they are
	   upscaled here (34px → 54px, thicker 5px track) and recolored to the
	   mock's coral / sky / orange. Re-declaring `background` still reads the
	   inline --score custom property, so the fill amount stays live. */
	body .zetlink-sites-catalog .zlmc-hero {
		margin-top: 5px;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
		min-width: 0;
	}
	body .zetlink-sites-catalog .zlmc-metrics { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
	/* ring size in one place: --ring / --ring-track / --ring-font scale
	   together per breakpoint (68px wide phones → 56px ≤430 → 48px ≤374) */
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 68px;
		--ring-track: 6px;
		--ring-font: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 7px;
	}
	body .zetlink-sites-catalog .zlmc-metric__label {
		font-size: 11px;
		font-weight: 700;
		color: #6b7280;
		text-transform: uppercase;
		letter-spacing: 0.09em;
	}
	body .zetlink-sites-catalog .zlmc-metric .zl-as,
	body .zetlink-sites-catalog .zlmc-metric .zetlink-wsm-metric-badge--da,
	body .zetlink-sites-catalog .zlmc-metric .zetlink-wsm-metric-badge--dr {
		width: var(--ring) !important;
		height: var(--ring) !important;
		min-width: var(--ring) !important;
		padding: 0 !important;
		border-radius: 50% !important;
		font-size: var(--ring-font) !important;
		font-weight: 800 !important;
	}
	body .zetlink-sites-catalog .zlmc-metric .zl-as {
		color: #f4502c !important;
		background:
			radial-gradient(closest-side, #fff calc(100% - var(--ring-track)), transparent calc(100% - var(--ring-track))),
			conic-gradient(#ff5a36 calc(var(--score) * 1%), #e7eaf0 0) !important;
	}
	body .zetlink-sites-catalog .zlmc-metric .zetlink-wsm-metric-badge--da {
		color: #14263f !important;
		background:
			radial-gradient(closest-side, #fff calc(100% - var(--ring-track)), transparent calc(100% - var(--ring-track))),
			conic-gradient(#2ba3e8 calc(var(--score, 0) * 1%), #e7eaf0 0) !important;
	}
	body .zetlink-sites-catalog .zlmc-metric .zetlink-wsm-metric-badge--dr {
		color: #f57c0c !important;
		background:
			radial-gradient(closest-side, #fff calc(100% - var(--ring-track)), transparent calc(100% - var(--ring-track))),
			conic-gradient(#f59723 calc(var(--score, 0) * 1%), #e7eaf0 0) !important;
	}
	
	
	
	body .zetlink-sites-catalog .zlmc-hero__div { width: 1px; align-self: stretch; min-height: 48px; background: #e9ebf1; flex: 0 0 auto; }
	body .zetlink-sites-catalog .zlmc-countries { flex: 1 1 auto; min-width: 0; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list li {
		display: flex !important;
		align-items: center;
		justify-content: flex-start !important;
		gap: 9px;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1;
		white-space: nowrap;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { width: auto !important; max-width: 100%; margin: 0 !important; padding: 0 !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { margin-left: 0 !important; }
	body .zetlink-sites-catalog .zlmc-countries .country-flag { width: auto !important; height: auto !important; flex: 0 0 auto; }
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji {
		width: 32px !important;
		height: 22px !important;
		object-fit: cover;
		border-radius: 3px !important;
		box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
	}
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct {
		font-size: 16px !important;
		font-weight: 800 !important;
		color: #0f172a !important;
		font-variant-numeric: tabular-nums;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct--code { font-size: 12px !important; font-weight: 700 !important; color: #64748b !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-country-more { display: none; }

	/* ── Row 3: link disc + "N Do Follow" + INSTANT | niche pills ──
	   Single line like the mock: the row never wraps. The niche pills sit
	   right-aligned and scroll sideways (scrollbar hidden) when a narrow
	   phone runs out of room, so the link info and the pills always share
	   one line. Hard width guards on the cloned .zl-delivery-links-stack
	   keep any desktop width:100% styling from stretching it full-row. */
	body .zetlink-sites-catalog .zlmc-meta {
		margin-top: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 12px;
		min-width: 0;
	}
	body .zetlink-sites-catalog .zlmc-linkline {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		flex: 0 0 auto;
		max-width: 100%;
	}
	body .zetlink-sites-catalog .zlmc-linkline__ic {
		width: 30px;
		height: 30px;
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #eef2ff;
		color: #2563eb;
		font-size: 13px;
	}
	body .zetlink-sites-catalog .zlmc-linkline__ic svg,
	body .zetlink-sites-catalog .zlmc-linkline__ic i { width: 13px; height: 13px; }
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: nowrap;
		gap: 9px !important;
		margin: 0 !important;
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto;
	}
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips > * { width: auto !important; max-width: none !important; }
	/* links pill → plain bold text (mock: "1 Do Follow"), delivery pill stays a chip */
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips > *:not(.zl-pill--delivery),
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-links-txt {
		order: 1;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		color: #101828 !important;
		letter-spacing: -0.01em;
		text-transform: none !important;
		white-space: nowrap;
	}
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips > *:not(.zl-pill--delivery) *,
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-links-txt * {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		color: inherit !important;
		letter-spacing: inherit !important;
		text-transform: none !important;
	}
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips > *:not(.zl-pill--delivery) i,
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-links-txt i { display: none !important; }
	body .zetlink-sites-catalog .zlmc-linkline .zl-pill--delivery,
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-delivery-chip {
		order: 2;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		background: #fdeec9 !important;
		color: #b45309 !important;
		border-radius: 8px !important;
		padding: 4px 10px !important;
		font-size: 10px !important;
		font-weight: 800 !important;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		line-height: 1.2;
		white-space: nowrap;
	}
	body .zetlink-sites-catalog .zlmc-niches {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 7px;
		justify-content: flex-start;
		margin-left: auto;
		flex: 0 1 auto;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body .zetlink-sites-catalog .zlmc-niches::-webkit-scrollbar { display: none; }
	body .zetlink-sites-catalog .zlmc-niche {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		height: 30px;
		padding: 0 13px;
		border-radius: 999px;
		border: 0;
		background: #f1edfd;
		color: #7c3aed;
		font-size: 12.5px;
		font-weight: 600;
		cursor: pointer;
		white-space: nowrap;
	}

	/* ── Row 4: Ahrefs / Semrush traffic tiles ── */
	body .zetlink-sites-catalog .zlmc-traffic-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	body .zetlink-sites-catalog .zlmc-traffic-grid--single { grid-template-columns: 1fr; }
	body .zetlink-sites-catalog .zlmc-tb {
		background: #f2f5f9;
		border-radius: 16px;
		padding: 10px 10px 6px;
		min-width: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	body .zetlink-sites-catalog .zlmc-tb__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
	body .zetlink-sites-catalog .zlmc-tb__ic {
		width: 38px;
		height: 38px;
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #ffffff;
		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
		font-size: 15px;
	}
	body .zetlink-sites-catalog .zlmc-tb__ic svg,
	body .zetlink-sites-catalog .zlmc-tb__ic i { width: 16px; height: 16px; }
	body .zetlink-sites-catalog .zlmc-tb--ahrefs .zlmc-tb__ic { color: #2563eb; }
	body .zetlink-sites-catalog .zlmc-tb--semrush .zlmc-tb__ic { color: #f97316; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start !important;
		line-height: 1.25;
		min-width: 0;
	}
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b {
		font-size: 18px !important;
		font-weight: 800 !important;
		color: #101828 !important;
		letter-spacing: -0.02em;
	}
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small { font-size: 11.5px !important; font-weight: 600; color: #6b7280 !important; margin-top: 1px; }
	body .zetlink-sites-catalog .zlmc-tb .zl-trend { font-size: 11.5px !important; font-weight: 800; margin-top: 1px; }
	body .zetlink-sites-catalog .zlmc-tb__spark {
		margin-top: 10px;
		height: 40px;
		border-bottom: 1px dashed #d4dae3;
		display: flex;
		align-items: flex-end;
	}
	body .zetlink-sites-catalog .zlmc-tb__spark .zl-spark { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
	body .zetlink-sites-catalog .zlmc-tb__spark svg { display: block; width: 100% !important; height: 100% !important; }
	/* recolor the cloned sparkline to the tile accent (line first, fill after
	   so the area shape's stroke is cleared even when it is a <path fill>) */
	body .zetlink-sites-catalog .zlmc-tb--ahrefs .zlmc-tb__spark path,
	body .zetlink-sites-catalog .zlmc-tb--ahrefs .zlmc-tb__spark polyline { stroke: #2f6bff; }
	body .zetlink-sites-catalog .zlmc-tb--ahrefs .zlmc-tb__spark polygon,
	body .zetlink-sites-catalog .zlmc-tb--ahrefs .zlmc-tb__spark path[fill]:not([fill="none"]) { fill: rgba(47, 107, 255, 0.16); stroke: none; }
	body .zetlink-sites-catalog .zlmc-tb--semrush .zlmc-tb__spark path,
	body .zetlink-sites-catalog .zlmc-tb--semrush .zlmc-tb__spark polyline { stroke: #f97316; }
	body .zetlink-sites-catalog .zlmc-tb--semrush .zlmc-tb__spark polygon,
	body .zetlink-sites-catalog .zlmc-tb--semrush .zlmc-tb__spark path[fill]:not([fill="none"]) { fill: rgba(249, 115, 22, 0.16); stroke: none; }
	/* legacy fallback tile (old plugin markup cloned wholesale) */
	body .zetlink-sites-catalog .zlmc-tb--legacy { padding: 10px 12px; }
	body .zetlink-sites-catalog .zlmc-tb--legacy .zl-spark { width: 44px !important; height: auto !important; }

	/* ── Row 5: GENERAL | SPECIAL prices + Buy Now ── */
	body .zetlink-sites-catalog .zlmc-foot {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #eef0f4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px 12px;
	}
	body .zetlink-sites-catalog .zlmc-prices { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
	body .zetlink-sites-catalog .zlmc-price { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
	body .zetlink-sites-catalog .zlmc-price__label {
		font-size: 11px;
		font-weight: 800;
		color: #6b7280;
		text-transform: uppercase;
		letter-spacing: 0.09em;
	}
	body .zetlink-sites-catalog .zlmc-price__val,
	body .zetlink-sites-catalog .zlmc-price__val * { font-size: 21px !important; font-weight: 800 !important; color: #0e9f6e !important; letter-spacing: -0.02em; }
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val del * { font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important; }
	body .zetlink-sites-catalog .zlmc-price__val del { margin-right: 5px; }
	body .zetlink-sites-catalog .zlmc-vdiv { width: 1px; height: 30px; background: #e8eaf0; flex: 0 0 auto; }
	body .zetlink-sites-catalog .zlmc-cart {
		flex: 0 0 auto;
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		height: 46px;
		padding: 0 26px;
		border-radius: 999px;
		border: 0;
		background: #1c4ff2;
		color: #ffffff !important;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none !important;
		box-shadow: 0 8px 18px rgba(28, 79, 242, 0.30);
		cursor: pointer;
		white-space: nowrap;
	}
	body .zetlink-sites-catalog .zlmc-cart i { font-size: 14px; }
	body .zetlink-sites-catalog .zlmc-cart:active { transform: scale(0.97); }
	body .zetlink-sites-catalog .zlmc-cart.is-in-cart { background: #0e9f6e; box-shadow: 0 8px 18px rgba(14, 159, 110, 0.28); }

	/* guest catalog: the price cell holds the plugin's lock + "Member Price"
	   link instead of numbers — drop the GENERAL/SPECIAL caption and size the
	   pill down so the footer stays one compact row */
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-price__label { display: none; }
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-price__val,
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-price__val * { font-size: 14.5px !important; font-weight: 700 !important; }
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-foot { margin-top: 8px; padding-top: 9px; justify-content: flex-end; }

		/* typical phones: one size down so rings + countries still share a line */
	@media (max-width: 430.98px) {
		body .zetlink-sites-catalog .zlmc-metrics { gap: 12px; }
				body .zetlink-sites-catalog .zlmc-metric {
			--ring: 50px;
			--ring-track: 4px;
			--ring-font: 16px;
		}
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 26px !important; height: 18px !important; }
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 15px !important; }
		/* phone: domain on one line beside View Rules; tile head text one line */
		body .zetlink-sites-catalog .zlmc-domain { font-size: 16px !important; }
		body .zetlink-sites-catalog .zlmc-rules { height: 30px; padding: 0 13px; font-size: 12.5px; }
		body .zetlink-sites-catalog .zlmc-tb__ic { width: 30px; height: 30px; }
		body .zetlink-sites-catalog .zlmc-tb__ic svg,
		body .zetlink-sites-catalog .zlmc-tb__ic i { width: 13px; height: 13px; }
		body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 14px !important; }
		body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small,
		body .zetlink-sites-catalog .zlmc-tb .zl-trend { font-size: 9.5px !important; }
		/* NEW badge stays beside the domain: the name row never wraps; a too-long
		   domain ellipsizes instead of pushing NEW to its own line */
		body .zetlink-sites-catalog .zlmc-name-row { flex-wrap: nowrap; }
		body .zetlink-sites-catalog .zlmc-domain { font-size: 15px !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		body .zetlink-sites-catalog .zlmc-new { flex: 0 0 auto; font-size: 9px; padding: 2px 6px; }
		body .zetlink-sites-catalog .zlmc-rules { padding: 0 11px; font-size: 12px; }
		/* tighter tile heads */
		body .zetlink-sites-catalog .zlmc-tb { padding: 5px 6px 3px; }
		body .zetlink-sites-catalog .zlmc-tb__head { gap: 7px; }
		body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body { flex-direction: row !important; flex-wrap: wrap; align-items: baseline !important; column-gap: 7px; row-gap: 0; line-height: 1.15; }
		body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small,
		body .zetlink-sites-catalog .zlmc-tb .zl-trend { margin-top: 0 !important; }
		body .zetlink-sites-catalog .zlmc-tb__spark { margin-top: 5px; }
	}
	/* very narrow phones: drop the hero divider and shrink one more step */
	@media (max-width: 374.98px) {
		body .zetlink-sites-catalog .zlmc-hero__div { display: none; }
		body .zetlink-sites-catalog .zlmc-domain { font-size: 15px !important; }
		body .zetlink-sites-catalog .zlmc-metrics { gap: 10px; }
				body .zetlink-sites-catalog .zlmc-metric {
			--ring: 44px;
			--ring-font: 14px;
		}
	}



	/* View Rules — bottom sheet (filled by websites-list-mobile.js) */
	.zlmc-rm-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.5);
		z-index: 4200;
		display: none;
		align-items: flex-end;
		justify-content: center;
		padding: 12px;
	}
	.zlmc-rm-overlay.is-open { display: flex; }
	.zlmc-rm {
		background: #ffffff;
		border-radius: 16px;
		width: 100%;
		max-width: 520px;
		max-height: 72vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
	}
	.zlmc-rm__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 14px 16px;
		border-bottom: 1px solid #f5f5f5;
		font-size: 15px;
		font-weight: 700;
		color: #171717;
	}
	.zlmc-rm__close {
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 8px;
		background: #f5f5f5;
		color: #404040;
		font-size: 13px;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.zlmc-rm__body {
		padding: 4px 16px 14px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 12.5px;
		color: #404040;
		line-height: 1.5;
	}
	.zlmc-rm__item { padding: 9px 0; border-bottom: 1px solid #f5f5f5; }
	.zlmc-rm__item:last-child { border-bottom: 0; }

/* ============================================================
   FUNCTION-PARITY ADDITIONS (v1.1.0)
   1. Invoices: merge-select checkboxes + select-all + status filter,
      shared #inv-merge-bar repositioned for phone screens.
   2. Messages: Contextual Info / Customer Details pane as a
      full-screen panel (body.zmm-info-open) + injected buttons.
   ============================================================ */

/* ---------- Invoices: merge selection ---------- */
.zim-check,
.zim-selectall {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.zim-check { flex-shrink: 0; margin: 2px 2px 0 0; }
.zim-check input,
.zim-selectall input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.zim-check-box {
	width: 22px; height: 22px;
	flex-shrink: 0;
	border-radius: 7px;
	border: 2px solid #d8d4e6;
	background: #ffffff;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.zim-check-box::after {
	content: "";
	position: absolute;
	left: 6px; top: 2px;
	width: 6px; height: 11px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.15s ease;
}
.zim-check input:checked + .zim-check-box,
.zim-selectall input:checked + .zim-check-box {
	background: linear-gradient(135deg, #0e56f5, #1748e8);
	border-color: transparent;
	box-shadow: 0 4px 10px rgba(124, 58, 237, 0.28);
}
.zim-check input:checked + .zim-check-box::after,
.zim-selectall input:checked + .zim-check-box::after { transform: rotate(45deg) scale(1); }
.zim-selectall {
	margin: 0 14px 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: #f8f6fd;
	border: 1px dashed #ddd2f5;
}
.zim-selectall-txt {
	font-size: 12px;
	font-weight: 600;
	color: #514b68;
	line-height: 1.35;
}
.zim-inv--selectable .zim-inv-top { align-items: flex-start; }
/* Selected-card highlight (mirrors the desktop row tint; :has() is
   progressive enhancement - older browsers simply skip it). */
.zim-inv:has(.zim-merge-cb:checked) {
	border-color: #d9ccf7;
	background: #faf8ff;
	box-shadow: 0 6px 16px rgba(124, 58, 237, 0.10);
}

/* ---------- Invoices: status filter select ---------- */
.zim-status-select {
	flex: 0 0 auto;
	max-width: 128px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid #e6e3f0;
	background-color: #fbfaff;
	padding: 0 26px 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: #3b3651;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}
.zim-search { flex-wrap: wrap; }

/* ---------- Shared merge bar on phones ---------- */
@media (max-width: 767.98px) {
	body #inv-merge-bar {
		left: 12px !important;
		right: 12px !important;
		transform: none !important;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
		min-width: 0 !important;
		max-width: none !important;
		z-index: 3995 !important;
		padding: 12px 14px !important;
		border-radius: 16px !important;
		gap: 10px !important;
	}
	body #inv-merge-bar #inv-merge-pay-btn { padding: 9px 14px !important; font-size: 12px !important; }
}

/* ---------- Messages: injected info toggle + info-panel close ---------- */
@media (max-width: 767.98px) {
	.zmm-info,
	.zmm-info-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		border: 1px solid #eceaf4;
		background: #f8f6fd;
		color: #1e1932;
		font-size: 18px;
		flex-shrink: 0;
		cursor: pointer;
	}
	.zmm-info-close { margin-left: auto; }

	/* The context column (Contextual Info / Customer Details) opens as its
	   own full-screen panel above the chat overlay. Which one shows is
	   governed by its parent section visibility, exactly like the chat
	   columns - so order mode and support mode can never overlap. */
	body.zmm-chat-open.zmm-info-open .support-channels-container .theater-row > .col-12.col-md-3,
	body.zmm-chat-open.zmm-info-open .support-channels-container #zscp-section > .col-12.col-md-3 {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 4010 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		background: #ffffff !important;
		border: 0 !important;
		overflow: hidden !important;
	}
}
	/* ============================================================
   WEBSITES LIST — MOBILE FONT BUMP (v1.1.1)
   ============================================================ */
@media (max-width: 767.98px) {
		/* --- JS cards: (v1.1.1 bumps removed) the v2.0 mock card above sets
	   its own sizes; the old bumps for the retired chip-card layout came
	   later in the cascade with equal specificity + !important, so they
	   were shrinking the new card's domain / prices / pills / Buy Now. --- */
	.zlmc-rm__head { font-size: 16px !important; }
	.zlmc-rm__body { font-size: 13.5px !important; }

	/* --- CSS-only fallback table (same look with JS off) --- */
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-website .zetlink-wsm-domain-link { font-size: 15px !important; line-height: 1.3 !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td .zetlink-wsm-new-badge { font-size: 10px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-rules .zetlink-wsm-view-rules { font-size: 12px !important; height: 30px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td .zetlink-wsm-metric-badge { font-size: 12px !important; height: 26px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-traffic { font-size: 12px !important; height: 26px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-links { font-size: 12px !important; height: 26px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-links span { font-size: 10px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-publish span { font-size: 11px !important; height: 26px !important; }
	body .zetlink-sites-catalog .zl-publish-icon { font-size: 11px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-niche a { font-size: 11px !important; height: 22px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special { font-size: 16px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price::before,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special::before { font-size: 10px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price .woocommerce-Price-amount,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-special .woocommerce-Price-amount { font-size: 16px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price del,
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-price del .woocommerce-Price-amount { font-size: 11px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn { height: 30px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn::before { font-size: 13px !important; }
	body .zetlink-sites-catalog .zetlink-wsm-websites-table tbody td.zetlink-wsm-col-actions .zetlink-wsm-order-btn::after { font-size: 12.5px !important; }
	.zetlink-sites-catalog .zl-hero{
	    margin-top: 30px;
	}
}
}
/* ^ Closes the "WEBSITES LIST — mobile v1.4" @media (max-width: 767.98px) block
   opened above (~line 1065) — it was missing its closing brace, which had left
   every section after it (Shared merge bar, Messages info-panel, MOBILE FONT
   BUMP) nested one level inside it instead of sitting as siblings. Harmless
   visually (same condition nested = same condition), but invalid/fragile CSS. */

/* ============================================================================
   PHONE OVERFLOW-CLAMP PASS (2026-08-31)
   Three bugs found on real phone screenshots:
   a) Category chip row: the public redesign adds an extra
      .zetlink-cat-subtitle span ("All Verified Sites") INSIDE each chip,
      doubling its width and breaking the scroll row. Subtitle hidden here.
   b) Right edge of the card clipped (View Rules / niche chips): the
      v9/responsive negative margins (-0.5rem / -0.25rem) on
      .zetlink-sites-catalog still applied on phones, shifting the whole
      catalog right; and .zlmc-linkline / .zlmc-name-row could not shrink
      (flex-basis auto + min-width:auto), so a long domain made the card
      itself wider than the viewport.
   c) max-width + overflow clamp on .zlmc-card: inner scroll rows now cut
      cleanly at the card's rounded edge instead of at the screen edge.
============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog { margin: 0 !important; }

	body .zetlink-sites-catalog .zetlink-sites-catalog__category-tabs .zetlink-cat-subtitle { display: none !important; }

	body .zetlink-sites-catalog .zlmc-card { max-width: 100%; overflow: hidden; }
	body .zetlink-sites-catalog .zlmc-top { min-width: 0; }
	body .zetlink-sites-catalog .zlmc-name-row { min-width: 0; flex-wrap: nowrap; }
	body .zetlink-sites-catalog .zlmc-domain {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	body .zetlink-sites-catalog .zlmc-linkline { flex: 0 1 auto; min-width: 0; }
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden; }
	body .zetlink-sites-catalog .zlmc-meta > .zlmc-niches { flex: 0 1 auto; min-width: 0; }
}

/* ============================================================================
   PHONE COMPACT PASS (2026-09-01)
   The whole .zlmc site card one size down on mobile: padding, rings, fonts,
   flags, chips, tiles, buttons. Placed at the end of the file so its
   same-specificity rules win the cascade; declarations that were !important
   earlier stay !important here.
   Also flips the shrink priority on the link line: the card clamp above
   already stops the page from blowing out, so "1 Do Follow" + INSTANT are
   always fully visible and the NICHE pills shrink/scroll instead.
============================================================================ */
@media (max-width: 767.98px) {
	/* card shell */
	body .zetlink-sites-catalog .zlmc-list { gap: 10px; }
	body .zetlink-sites-catalog .zlmc-card { border-radius: 16px; padding: 10px 12px 11px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); }

	/* row 1 */
	body .zetlink-sites-catalog .zlmc-domain { font-size: 15px !important; }
	body .zetlink-sites-catalog .zlmc-new { font-size: 9px; padding: 2px 6px; }
	body .zetlink-sites-catalog .zlmc-rules { height: 28px; padding: 0 12px; font-size: 12px; }

	/* row 2: rings + countries */
	body .zetlink-sites-catalog .zlmc-hero { gap: 10px; }
	body .zetlink-sites-catalog .zlmc-metrics { gap: 10px; }
	body .zetlink-sites-catalog .zlmc-metric { --ring: 50px; --ring-track: 4px; --ring-font: 15px; gap: 4px; }
	body .zetlink-sites-catalog .zlmc-metric__label { font-size: 9.5px; letter-spacing: 0.07em; }
	body .zetlink-sites-catalog .zlmc-hero__div { min-height: 40px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { gap: 5px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list li { gap: 7px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 24px !important; height: 17px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 13px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct--code { font-size: 10.5px !important; }

	/* row 3: linkline + niches — priority flip */
	body .zetlink-sites-catalog .zlmc-meta { margin-top: 9px; gap: 8px; }
	body .zetlink-sites-catalog .zlmc-linkline { flex: 0 0 auto; max-width: 100%; overflow: hidden; gap: 7px; }
	body .zetlink-sites-catalog .zlmc-linkline__ic { width: 24px; height: 24px; font-size: 11px; }
	body .zetlink-sites-catalog .zlmc-linkline__ic svg,
	body .zetlink-sites-catalog .zlmc-linkline__ic i { width: 11px; height: 11px; }
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips { gap: 7px !important; }
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-chips > *:not(.zl-pill--delivery),
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-links-txt { font-size: 12.5px !important; }
	body .zetlink-sites-catalog .zlmc-linkline .zl-pill--delivery,
	body .zetlink-sites-catalog .zlmc-linkline .zlmc-delivery-chip { font-size: 9px !important; padding: 3px 8px !important; }
	body .zetlink-sites-catalog .zlmc-niches { gap: 5px; }
	body .zetlink-sites-catalog .zlmc-niche { height: 24px; padding: 0 10px; font-size: 11px; }

	/* row 4: traffic tiles */
	body .zetlink-sites-catalog .zlmc-traffic-grid { margin-top: 8px; gap: 8px; }
	body .zetlink-sites-catalog .zlmc-tb { border-radius: 12px; padding: 6px 8px 4px; }
	body .zetlink-sites-catalog .zlmc-tb__head { gap: 7px; }
	body .zetlink-sites-catalog .zlmc-tb__ic { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 1px 5px rgba(15, 23, 42, 0.10); }
	body .zetlink-sites-catalog .zlmc-tb__ic svg,
	body .zetlink-sites-catalog .zlmc-tb__ic i { width: 12px; height: 12px; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 13.5px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small,
	body .zetlink-sites-catalog .zlmc-tb .zl-trend { font-size: 9.5px !important; }
	body .zetlink-sites-catalog .zlmc-tb__spark { margin-top: 5px; height: 26px; }

	/* row 5: prices + cart */
	body .zetlink-sites-catalog .zlmc-foot { margin-top: 8px; padding-top: 8px; gap: 8px 10px; }
	body .zetlink-sites-catalog .zlmc-prices { gap: 12px; }
	body .zetlink-sites-catalog .zlmc-price { gap: 2px; }
	body .zetlink-sites-catalog .zlmc-price__label { font-size: 9.5px; letter-spacing: 0.07em; }
	body .zetlink-sites-catalog .zlmc-price__val,
	body .zetlink-sites-catalog .zlmc-price__val * { font-size: 16px !important; }
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val del * { font-size: 10.5px !important; }
	body .zetlink-sites-catalog .zlmc-vdiv { height: 24px; }
	body .zetlink-sites-catalog .zlmc-cart { height: 36px; padding: 0 16px; font-size: 13px; gap: 6px; box-shadow: 0 5px 12px rgba(28, 79, 242, 0.24); }
	body .zetlink-sites-catalog .zlmc-cart i { font-size: 12px; }
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-price__val,
	body:not(.logged-in) .zetlink-sites-catalog .zlmc-price__val * { font-size: 13px !important; }

	/* small phones: one more step down (same specificity as the old ≤430
	   rules, later in the cascade, so these values win) */
	@media (max-width: 430.98px) {
		body .zetlink-sites-catalog .zlmc-metric { --ring: 44px; --ring-track: 4px; --ring-font: 13.5px; }
		body .zetlink-sites-catalog .zlmc-metrics { gap: 8px; }
		body .zetlink-sites-catalog .zlmc-domain { font-size: 14px !important; }
		body .zetlink-sites-catalog .zlmc-rules { height: 26px; padding: 0 10px; font-size: 11px; }
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 20px !important; height: 14px !important; }
		body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 12px !important; }
		body .zetlink-sites-catalog .zlmc-tb__ic { width: 22px; height: 22px; }
		body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 12px !important; }
		body .zetlink-sites-catalog .zlmc-cart { height: 33px; padding: 0 13px; font-size: 12px; }
		body .zetlink-sites-catalog .zlmc-price__val,
		body .zetlink-sites-catalog .zlmc-price__val * { font-size: 14.5px !important; }
	}
	@media (max-width: 374.98px) {
		body .zetlink-sites-catalog .zlmc-metric { --ring: 40px; --ring-font: 12.5px; }
	}
}

/* ============================================================================
   HERO ROW EXTRA SHRINK (2026-09-01)
   AS/DA/DR rings + flag row one extra step smaller. IMPORTANT: this block
   only works when it sits AFTER the COMPACT PASS — placed earlier, the
   compact pass's --ring: 50px comes later in the cascade and overrides it,
   leaving the whole block dead (exactly what had happened on the live file
   when it sat in the middle). Keep this as the LAST block; append anything
   new BELOW it, never above.
============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-metric { --ring: 42px; --ring-track: 3px; --ring-font: 13px; gap: 3px; }
	body .zetlink-sites-catalog .zlmc-metrics { gap: 8px; }
	body .zetlink-sites-catalog .zlmc-metric__label { font-size: 8.5px; }
	body .zetlink-sites-catalog .zlmc-hero__div { min-height: 32px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 19px !important; height: 13px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 11.5px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { gap: 4px !important; }
	/* very narrow phones: one more notch so the size steps stay gradual */
	@media (max-width: 374.98px) {
		body .zetlink-sites-catalog .zlmc-metric { --ring: 38px; --ring-font: 12px; }
	}
}

/* ============================================================================
   RIF CARD MOCK v2.1 - HERO PARITY OVERRIDES (appended; later rules win)
   Matches the approved mock exactly:
   1. Country share sits in its own bordered box beside the AS/DA/DR rings
      (no hairline divider).
   2. Ahrefs + Semrush become ONE bordered stat box directly under the rings
      (small icon disc + value + keywords), sparklines and grey tiles removed.
   3. Card section order: header -> rings+countries -> stat box ->
      "Do Follow"/INSTANT/niches -> prices footer.
   ============================================================================ */
@media (max-width: 767.98px) {

	/* section order like the mock (traffic box moves up, meta drops below) */
	body .zetlink-sites-catalog .zlmc-card { display: flex; flex-direction: column; }
	body .zetlink-sites-catalog .zlmc-top { order: 1; }
	body .zetlink-sites-catalog .zlmc-hero { order: 2; }
	body .zetlink-sites-catalog .zlmc-traffic-grid { order: 3; }
	body .zetlink-sites-catalog .zlmc-meta { order: 4; margin-top: 13px; }
	body .zetlink-sites-catalog .zlmc-foot { order: 5; }

	/* hero: rings left, boxed country share right, no divider line */
	body .zetlink-sites-catalog .zlmc-hero { margin-top: 10px; gap: 12px; }
	body .zetlink-sites-catalog .zlmc-hero__div { display: none !important; }
	body .zetlink-sites-catalog .zlmc-countries {
		flex: 0 1 auto !important;
		margin-left: auto;
		border: 1px solid #e9ecf3;
		border-radius: 14px;
		padding: 10px 12px;
		background: #ffffff;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { gap: 7px !important; }

	/* traffic: one bordered stat box, entries stacked, mock style */
	body .zetlink-sites-catalog .zlmc-traffic-grid {
		margin-top: 12px;
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		border: 1px solid #e9ecf3;
		border-radius: 14px;
		padding: 2px 12px;
		background: #ffffff;
	}
	body .zetlink-sites-catalog .zlmc-tb {
		background: transparent !important;
		border-radius: 0 !important;
		padding: 9px 0 !important;
		flex-direction: row !important;
		align-items: center;
		overflow: visible !important;
	}
	body .zetlink-sites-catalog .zlmc-tb + .zlmc-tb { border-top: 1px solid #eef0f4; }
	body .zetlink-sites-catalog .zlmc-tb__spark { display: none !important; }
	body .zetlink-sites-catalog .zlmc-tb__head { gap: 10px; }
	body .zetlink-sites-catalog .zlmc-tb__ic {
		width: 34px !important;
		height: 34px !important;
		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
	}
	body .zetlink-sites-catalog .zlmc-tb__ic svg,
	body .zetlink-sites-catalog .zlmc-tb__ic i { width: 14px !important; height: 14px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 16px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small { font-size: 11px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-trend { font-size: 11px !important; }
	/* legacy single-value tiles keep the same row look */
	body .zetlink-sites-catalog .zlmc-tb--legacy { padding: 9px 0 !important; }
	body .zetlink-sites-catalog .zlmc-tb--legacy .zl-spark { display: none !important; }
}

/* small phones: keep rings + country box on one line, then let it drop */
@media (max-width: 430.98px) {
	body .zetlink-sites-catalog .zlmc-countries { padding: 8px 10px; }
	body .zetlink-sites-catalog .zlmc-tb__ic { width: 30px !important; height: 30px !important; }
	body .zetlink-sites-catalog .zlmc-tb__ic svg,
	body .zetlink-sites-catalog .zlmc-tb__ic i { width: 12px !important; height: 12px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 14.5px !important; }
}
@media (max-width: 373.98px) {
	body .zetlink-sites-catalog .zlmc-hero { flex-wrap: wrap !important; }
	body .zetlink-sites-catalog .zlmc-countries { margin-left: 0; width: 100%; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { flex-direction: row !important; flex-wrap: wrap; gap: 6px 14px !important; }
}


/* ============================================================================
   RIF CARD MOCK v2.2 - PRICE + STAT-BOX TEXT POLISH (appended; later wins)
   1. GENERAL/SPECIAL: old + new price STACKED, both green, no strikethrough,
      near-equal size - exactly like the approved mock.
   2. Stat box line order per entry: value -> keywords -> trend.
   ============================================================================ */
@media (max-width: 767.98px) {

	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was-row {
		display: block !important;
		margin: 0 0 2px 0 !important;
		justify-content: flex-start !important;
		line-height: 1.15 !important;
	}
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val del *,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was * {
		font-size: 20px !important;
		font-weight: 800 !important;
		color: #0e9f6e !important;
		letter-spacing: -0.02em !important;
		text-decoration: none !important;
	}
	body .zetlink-sites-catalog .zlmc-price__val { line-height: 1.15 !important; }
	body .zetlink-sites-catalog .zlmc-price { gap: 2px; }

	/* stat box entry: value on top, keywords next, trend last (mock order) */
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { order: 1; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small { order: 2; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body .zl-trend { order: 3; }
}


/* ============================================================================
   RIF CARD MOCK v2.3 - FINAL PIXEL POLISH (appended; later wins)
   1. Country row = flag | code (US/UK, injected by JS) | share pushed right.
   2. DA ring number is blue like the mock (was near-black).
   3. Rings one step bigger on typical phones.
   ============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-countries { min-width: 138px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list li { width: 100% !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-cc {
		font-size: 13px;
		font-weight: 700;
		color: #1f2937;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { margin-left: auto !important; }
	body .zetlink-sites-catalog .zlmc-metric .zetlink-wsm-metric-badge--da { color: #2196d9 !important; }
}
@media (max-width: 430.98px) {
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 54px;
		--ring-track: 5px;
		--ring-font: 17px;
	}
	body .zetlink-sites-catalog .zlmc-metrics { gap: 10px; }
	body .zetlink-sites-catalog .zlmc-countries { min-width: 128px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-cc { font-size: 12px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 28px !important; height: 19px !important; }
}


/* ============================================================================
   RIF CARD MOCK v2.4 - COUNTRY BOX + STAT BOX SIDE BY SIDE (marked area)
   The mock's red-marked section: the two bordered boxes sit NEXT TO each
   other. Phone width can't fit rings + both boxes on one line, so: rings get
   their own line, and directly under them the country box and the stat box
   share one row, half/half - exactly the marked pairing.
   Trick: .zlmc-hero becomes display:contents so its inner country box can be
   grid-placed beside the sibling traffic box on the card's own grid.
   ============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-card {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zrings"
			"zcountries ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
		column-gap: 12px;
		align-items: stretch;
	}
	body .zetlink-sites-catalog .zlmc-top { grid-area: ztop; }
	body .zetlink-sites-catalog .zlmc-hero { display: contents !important; }
	body .zetlink-sites-catalog .zlmc-metrics {
		grid-area: zrings;
		margin-top: 12px;
		gap: 14px;
	}
	body .zetlink-sites-catalog .zlmc-countries {
		grid-area: zcountries;
		margin-left: 0 !important;
		margin-top: 12px;
		min-width: 0 !important;
		display: flex;
		align-items: center;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { width: 100% !important; }
	body .zetlink-sites-catalog .zlmc-traffic-grid { grid-area: ztraffic; margin-top: 12px; }
	body .zetlink-sites-catalog .zlmc-meta { grid-area: zmeta; }
	body .zetlink-sites-catalog .zlmc-foot { grid-area: zfoot; }
	/* one box missing -> the other spans the whole row */
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-traffic-grid)) .zlmc-countries { grid-column: 1 / -1; }
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-countries)) .zlmc-traffic-grid { grid-column: 1 / -1; }

	/* both boxes tuned for half width */
	body .zetlink-sites-catalog .zlmc-countries { padding: 10px 11px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-cc { font-size: 12px; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 24px !important; height: 16.5px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 13px !important; }
	body .zetlink-sites-catalog .zlmc-tb__head { gap: 8px; }
	body .zetlink-sites-catalog .zlmc-tb__ic { width: 30px !important; height: 30px !important; }
	body .zetlink-sites-catalog .zlmc-tb__ic svg,
	body .zetlink-sites-catalog .zlmc-tb__ic i { width: 12px !important; height: 12px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { font-size: 14.5px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small,
	body .zetlink-sites-catalog .zlmc-tb .zl-trend { font-size: 10.5px !important; }
}
@media (max-width: 359.98px) {
	/* ultra-narrow phones: the two boxes stack so nothing squeezes */
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-areas:
			"ztop ztop"
			"zrings zrings"
			"zcountries zcountries"
			"ztraffic ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
}


/* ============================================================================
   RIF CARD MOCK v2.5 - RINGS BESIDE THE BOXES + SMALLER PRICES
   1. Hero is one band like the mock: rings sit in the LEFT column, and the
      country box + stat box stack in the RIGHT column beside them - no more
      empty space to the right of the rings.
   2. GENERAL/SPECIAL prices sized down (were dominating the footer).
   ============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: max-content minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zcountries"
			"zrings ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-metrics {
		align-self: center;
		margin-top: 12px;
		gap: 9px;
	}
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 48px;
		--ring-track: 4.5px;
		--ring-font: 15px;
		gap: 5px;
	}
	body .zetlink-sites-catalog .zlmc-metric__label { font-size: 10px; }
	body .zetlink-sites-catalog .zlmc-countries { margin-top: 12px; }
	body .zetlink-sites-catalog .zlmc-traffic-grid { margin-top: 8px; }
	/* re-assert placement so the old missing-box spans can't break the band */
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-traffic-grid)) .zlmc-countries { grid-area: zcountries; }
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-countries)) .zlmc-traffic-grid { grid-area: ztraffic; }

	/* prices: mock-size, both lines equal green */
	body .zetlink-sites-catalog .zlmc-price__label { font-size: 9.5px; }
	body .zetlink-sites-catalog .zlmc-price { gap: 1px; }
	body .zetlink-sites-catalog .zlmc-price__val,
	body .zetlink-sites-catalog .zlmc-price__val *,
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val del *,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was * {
		font-size: 15.5px !important;
		font-weight: 800 !important;
	}
	body .zetlink-sites-catalog .zlmc-vdiv { height: 26px; }
	body .zetlink-sites-catalog .zlmc-prices { gap: 14px; }
	body .zetlink-sites-catalog .zlmc-cart { height: 42px; padding: 0 22px; font-size: 14px; }
}
@media (max-width: 359.98px) {
	/* ultra-narrow: whole hero stacks, boxes half/half */
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zrings"
			"zcountries ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-metrics { justify-content: flex-start; }
}


/* ============================================================================
   RIF CARD MOCK v2.6 - FINAL LOCK (keep as the LAST block in this file)
   The file has many older passes (COMPACT PASS, HERO EXTRA SHRINK, nested
   <=430 tweaks). The cascade already resolves to the approved mock, but two
   buried rules could still resurface on some breakpoints. This block pins
   every card-defining value one final time so nothing earlier can ever win:
   - stat box text always STACKED (a <=430 rule was flipping it to a row)
   - ring 48 / flags 24x16.5 / share 13 / prices 15.5 at every phone width
   ============================================================================ */
@media (max-width: 767.98px) {
	/* stat entries: icon left, text stacked (value / keywords / trend) */
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		line-height: 1.25 !important;
	}
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body b { order: 1; font-size: 14.5px !important; margin: 0 !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body small { order: 2; font-size: 10.5px !important; margin-top: 1px !important; }
	body .zetlink-sites-catalog .zlmc-tb .zl-traffic__body .zl-trend { order: 3; font-size: 10.5px !important; margin-top: 1px !important; }
	body .zetlink-sites-catalog .zlmc-tb__spark { display: none !important; }

	/* rings + country box: one size at every phone width */
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 48px !important;
		--ring-track: 4.5px !important;
		--ring-font: 15px !important;
	}
	body .zetlink-sites-catalog .zlmc-metric__label { font-size: 10px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 24px !important; height: 16.5px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct { font-size: 13px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-cc { font-size: 12px !important; }

	/* prices: both lines green 15.5, stacked */
	body .zetlink-sites-catalog .zlmc-price__val,
	body .zetlink-sites-catalog .zlmc-price__val *,
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val del *,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was * {
		font-size: 15.5px !important;
		font-weight: 800 !important;
		color: #0e9f6e !important;
		text-decoration: none !important;
	}
}


/* ============================================================================
   RIF CARD MOCK v2.7 - COMPACT HERO BAND (supersedes v2.5/v2.6 layout pins)
   Problem on real phones: the right column (country box + stat box stacked)
   was much taller than the rings, leaving big empty space beside them.
   New band, mock-dense:
     row A: rings (left) | country box (right)  - similar heights, no gaps
     row B: ONE stat box full width, its two entries SIDE BY SIDE
   ============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: max-content minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zcountries"
			"ztraffic ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-metrics {
		grid-area: zrings;
		align-self: center;
		margin-top: 12px;
		gap: 10px;
	}
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 52px !important;
		--ring-track: 5px !important;
		--ring-font: 16px !important;
	}
	body .zetlink-sites-catalog .zlmc-countries { grid-area: zcountries; margin-top: 12px; align-self: center; }
	body .zetlink-sites-catalog .zlmc-traffic-grid { grid-area: ztraffic; margin-top: 10px; }
	/* no countries on a row -> rings take the full width */
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-countries)) .zlmc-metrics { grid-column: 1 / -1; }

	/* stat box: one bordered box, two entries side by side with a divider */
	body .zetlink-sites-catalog .zlmc-traffic-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 0 !important;
		padding: 4px 0 !important;
	}
	body .zetlink-sites-catalog .zlmc-traffic-grid--single { grid-template-columns: 1fr !important; }
	body .zetlink-sites-catalog .zlmc-tb { padding: 7px 12px !important; }
	body .zetlink-sites-catalog .zlmc-tb + .zlmc-tb {
		border-top: 0 !important;
		border-left: 1px solid #eef0f4;
	}
}
@media (max-width: 359.98px) {
	/* ultra-narrow: country box drops under the rings, stat entries stack */
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zrings"
			"zcountries zcountries"
			"ztraffic ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-traffic-grid { grid-template-columns: 1fr !important; }
	body .zetlink-sites-catalog .zlmc-tb + .zlmc-tb {
		border-left: 0 !important;
		border-top: 1px solid #eef0f4 !important;
	}
}


/* ============================================================================
   RIF CARD MOCK v2.8 - CARD-1 LAYOUT FROM THE APPROVED DEVICE MOCK
   (supersedes v2.7's band; keep as the last layout block)
     row A: rings (left)            | stat box (right, spans A+B,
     row B: country STRIP under     |   two entries stacked)
            the rings - 3 countries side by side, flag+code over share
     then:  Do Follow line, single-line GENERAL | SPECIAL prices + Buy Now
   ============================================================================ */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: max-content minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings ztraffic"
			"zcountries ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-metrics {
		grid-area: zrings;
		align-self: center;
		justify-self: start;
		margin-top: 12px;
		gap: 12px;
	}
	body .zetlink-sites-catalog .zlmc-metric {
		--ring: 52px !important;
		--ring-track: 5px !important;
		--ring-font: 16px !important;
	}

	/* country strip: one small bordered box under the rings,
	   countries side by side, flag+code on top and the share below */
	body .zetlink-sites-catalog .zlmc-countries {
		grid-area: zcountries;
		align-self: start;
		justify-self: start;
		margin-top: 10px;
		padding: 8px 10px;
		display: block;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 14px !important;
		width: auto !important;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list li {
		width: auto !important;
		flex: 0 0 auto !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		column-gap: 5px !important;
		row-gap: 2px !important;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list .zl-pct {
		flex-basis: 100% !important;
		margin-left: 0 !important;
		font-size: 11.5px !important;
		font-weight: 700 !important;
		color: #475569 !important;
	}
	body .zetlink-sites-catalog .zlmc-countries .zl-cc { font-size: 12px !important; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list img.emoji { width: 22px !important; height: 15px !important; }

	/* stat box: right side, spans both rows, entries stacked again */
	body .zetlink-sites-catalog .zlmc-traffic-grid {
		grid-area: ztraffic;
		align-self: stretch;
		margin-top: 12px;
		grid-template-columns: 1fr !important;
		align-content: center;
		gap: 0 !important;
		padding: 4px 12px !important;
	}
	body .zetlink-sites-catalog .zlmc-tb { padding: 8px 0 !important; }
	body .zetlink-sites-catalog .zlmc-tb + .zlmc-tb {
		border-left: 0 !important;
		border-top: 1px solid #eef0f4 !important;
	}
	/* fallbacks when a box is missing */
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-traffic-grid)) .zlmc-metrics,
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-traffic-grid)) .zlmc-countries { grid-column: 1 / -1; justify-self: stretch; }
	body .zetlink-sites-catalog .zlmc-card:not(:has(.zlmc-countries)) .zlmc-metrics { grid-row: zrings / zcountries; }

	/* prices: single line like the mock (hide the second/was line) */
	body .zetlink-sites-catalog .zlmc-price__val del,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was-row,
	body .zetlink-sites-catalog .zlmc-price__val .wsm-price-was { display: none !important; }
	body .zetlink-sites-catalog .zlmc-price__val,
	body .zetlink-sites-catalog .zlmc-price__val > .woocommerce-Price-amount,
	body .zetlink-sites-catalog .zlmc-price__val > .woocommerce-Price-amount * {
		font-size: 17px !important;
		font-weight: 800 !important;
		color: #0e9f6e !important;
	}
	body .zetlink-sites-catalog .zlmc-price__label { font-size: 10px; }
}
@media (max-width: 359.98px) {
	body .zetlink-sites-catalog .zlmc-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"ztop ztop"
			"zrings zrings"
			"zcountries zcountries"
			"ztraffic ztraffic"
			"zmeta zmeta"
			"zfoot zfoot";
	}
	body .zetlink-sites-catalog .zlmc-countries { justify-self: stretch; }
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list { flex-wrap: wrap !important; }
}

/* RIF CARD MOCK v3.0 - top-2 countries only on the phone card */
@media (max-width: 767.98px) {
	body .zetlink-sites-catalog .zlmc-countries .zl-flag-list li:nth-child(n+3) { display: none !important; }
}/* RIF FILTERS v3.1 - Price Range normalize + bigger filter font */
@media (max-width: 767.98px) {
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid > * {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid select,
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid button,
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid summary {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		height: 46px !important;
		min-height: 0 !important;
		border: 1px solid #e5e7eb !important;
		border-radius: 12px !important;
		background-color: #ffffff !important;
		background-image: none !important;
		box-shadow: none !important;
		padding: 0 14px !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		color: #374151 !important;
		text-align: left !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid > *:not(:has(select)):not(:has(input)):not(:has(button)) {
		display: flex !important;
		align-items: center !important;
		height: 46px !important;
		border: 1px solid #e5e7eb !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		padding: 0 14px !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		color: #374151 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid > *:not(:has(select)):not(:has(input)):not(:has(button)) * {
		font-size: 16px !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-toolbar-search-wrap input {
		font-size: 16px !important;
		font-weight: 500 !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-toolbar-per-page,
	html body .zetlink-sites-catalog .zetlink-wsm-toolbar-sort {
		height: 44px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
	}
	html body .zetlink-sites-catalog .zetlink-wsm-bulk-search-btn { font-size: 13px !important; }
}/* Price Range label - same font as the other filters */
@media (max-width: 767.98px) {
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid > *:not(:has(select)):not(:has(input)):not(:has(button)),
	html body .zetlink-sites-catalog .zetlink-wsm-filter-grid > *:not(:has(select)):not(:has(input)):not(:has(button)) * {
		font-family: inherit !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		color: #374151 !important;
	}
}