/* ModusTech product listing pages. Colours match the product pages (modustech-product-fields) and the blog. */
.mt-list {
	--mt-navy: #1A1A2E;
	--mt-text: #3A3E52;
	--mt-muted: #4A4E63;
	--mt-teal: #008A94;
	--mt-teal-dark: #00727A;
	--mt-tint: #F1F7F9;
	--mt-line: #DCE6EA;
	--mt-amber: #F59E0B;
	--mt-font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--mt-font);
	color: var(--mt-navy);
}
.mt-list *, .mt-list *::before, .mt-list *::after { box-sizing: border-box; }
.mt-list a:focus-visible { outline: 3px solid var(--mt-teal); outline-offset: 3px; border-radius: 6px; }
.mt-list .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mt-list .elementor-widget { margin: 0 !important; }
/* The site header scrolls away on listing pages too (same as the product and blog pages), so it never covers
   the title or the cards. The hero keeps its own space for it at the top. Not on the homepage, which also shows
   cards but keeps its own header behaviour. */
body:not(.home) .elementor-location-header [data-settings*='"position":"fixed"'] { position: absolute !important; }
.mt-list-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
/* Homepage: the cards line up with the homepage section heading above them. */
.home .mt-list .mt-list-wrap { max-width: none; padding: 0; }
.home .mt-list .mt-cards-row { padding: 0 !important; }

/* Section spacing. !important because a theme rule sets every <section> here to 20px top / 0 bottom. */
.mt-list .mt-list-head { padding: 40px 0 44px !important; }
.mt-list .mt-list-grid-wrap { padding: 56px 0 88px !important; }
.mt-list .mt-help { padding: 80px 0 88px !important; }
.mt-list .mt-trustrow { padding: 48px 0 !important; }
@media (max-width: 767px) {
	.mt-list .mt-list-head { padding: 28px 0 32px !important; }
	.mt-list .mt-list-grid-wrap { padding: 32px 0 56px !important; }
	.mt-list .mt-help { padding: 56px 0 64px !important; }
	.mt-list .mt-trustrow { padding: 36px 0 !important; }
}

/* Header: breadcrumb, title, count, category buttons */
.mt-list-head { background: var(--mt-tint); }
.mt-list .mt-list-crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--mt-muted); }
.mt-list .mt-list-crumbs li { margin: 0; padding: 0; }
.mt-list-crumbs li + li::before { content: "/"; margin: 0 6px 0 2px; }
.mt-list .mt-list-crumbs a { color: var(--mt-muted); text-decoration: none; }
.mt-list .mt-list-crumbs a:hover { color: var(--mt-teal-dark); text-decoration: underline; }
.mt-list-head__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
.mt-list .mt-list-head__title h1 { margin: 0; font-family: var(--mt-font); font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--mt-navy); letter-spacing: 0; text-transform: none; }
.mt-list-count { font-size: 16px; color: var(--mt-muted); }
.mt-list-desc { margin: -6px 0 18px; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--mt-text); }
.mt-list-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-list .mt-list-pill {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
	border: 1px solid #C7D5DA; background: #FFFFFF; color: var(--mt-navy); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mt-list .mt-list-pill:hover { border-color: var(--mt-teal); }
.mt-list .mt-list-pill[aria-current="page"] { background: var(--mt-navy); border-color: var(--mt-navy); color: #FFFFFF; }
.mt-list-pill__n { font-size: 13px; color: var(--mt-muted); }
.mt-list-pill[aria-current="page"] .mt-list-pill__n { color: #C9CCD8; }

/* Product cards */

.mt-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mt-card { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--mt-line); border-radius: 18px; overflow: hidden; }
.mt-card:hover { border-color: var(--mt-teal); }
.mt-card:focus-within { outline: 3px solid var(--mt-teal); outline-offset: 3px; }
.mt-card__img { position: relative; background: var(--mt-tint); }
.mt-list .mt-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.mt-card__badge { position: absolute; top: 14px; left: 14px; background: var(--mt-amber); color: var(--mt-navy); font-size: 13px; font-weight: 600; line-height: 1; padding: 7px 10px; border-radius: 999px; }
.mt-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mt-list .mt-card__type { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mt-muted); font-weight: 600; }
.mt-list .mt-card__name { margin: 0; font-family: var(--mt-font); font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mt-list .mt-card__name a { color: var(--mt-navy); text-decoration: none; font: inherit; }
/* The whole card is clickable through the name link (one link per card for screen readers). */
.mt-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mt-card__name a:focus-visible { outline: none; }
.mt-card:hover .mt-card__name a { text-decoration: underline; }
.mt-list .mt-card__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mt-list .mt-card__facts li { margin: 0; font-size: 14px; line-height: 1.3; background: var(--mt-tint); border-radius: 8px; padding: 6px 10px; color: var(--mt-navy); }
.mt-list .mt-card__dots { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 14px; color: var(--mt-muted); }
.mt-card__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #9AABB2; }
.mt-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.mt-list .mt-card__price { margin: 0; font-size: 18px; font-weight: 600; color: var(--mt-navy); }
.mt-list .mt-card__price del { font-weight: 400; color: var(--mt-muted); font-size: 15px; margin-left: 4px; }
.mt-list .mt-card__price .woocommerce-Price-amount { color: inherit; }
.mt-card__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
	background: var(--mt-teal); color: #FFFFFF; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.mt-card:hover .mt-card__btn { background: var(--mt-teal-dark); }
.mt-list-empty { font-size: 17px; color: var(--mt-text); }
.mt-list .mt-list-pages ul { list-style: none; display: flex; gap: 8px; justify-content: center; margin: 32px 0 0; padding: 0; }
.mt-list .mt-list-pages li { margin: 0; }
.mt-list .mt-list-pages a, .mt-list .mt-list-pages span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid #C7D5DA; color: var(--mt-navy); text-decoration: none; }
.mt-list .mt-list-pages .current { background: var(--mt-navy); color: #FFFFFF; border-color: var(--mt-navy); }

/* Which drive is right for you? */
.mt-help { background: var(--mt-tint); }
.mt-list .mt-help h2 { margin: 0 0 32px; font-family: var(--mt-font); font-size: 30px; font-weight: 600; color: var(--mt-navy); letter-spacing: 0; text-transform: none; }
.mt-help__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mt-help__card { background: #FFFFFF; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.mt-list .mt-help__card h3 { margin: 0; font-family: var(--mt-font); font-size: 20px; font-weight: 600; color: var(--mt-navy); letter-spacing: 0; text-transform: none; }
.mt-list .mt-help__card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--mt-text); }
.mt-list .mt-help__card a { align-self: flex-start; margin-top: auto; color: var(--mt-teal-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Trust row */
.mt-trustrow { border-bottom: 1px solid var(--mt-line); }
.mt-list .mt-trustrow ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mt-list .mt-trustrow li { margin: 0; display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 500; color: var(--mt-navy); }
.mt-trustrow__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #E3EEF1; display: inline-flex; align-items: center; justify-content: center; color: var(--mt-navy); }

@media (max-width: 1024px) {
	.mt-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mt-list .mt-trustrow ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.mt-list-wrap { padding: 0 16px; }
	.mt-list .mt-list-head__title h1 { font-size: 32px; }
	/* Category buttons scroll sideways instead of wrapping into a tall block. */
	.mt-list-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: thin; }
	.mt-list-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	/* Compact cards: a small square photo beside the details, price and button across the bottom. */
	.mt-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 14px; align-items: start; }
	.mt-card__img { grid-column: 1; grid-row: 1 / span 4; border-radius: 12px; overflow: hidden; }
	.mt-card__badge { top: 6px; left: 6px; font-size: 11px; padding: 5px 7px; }
	.mt-card__body { display: contents; }
	.mt-card__body > * { grid-column: 2; }
	.mt-list .mt-card__name { font-size: 19px; }
	.mt-list .mt-card__facts li { font-size: 13px; padding: 5px 8px; }
	.mt-card__foot { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--mt-line); }
	.mt-help__grid { grid-template-columns: minmax(0, 1fr); }
	.mt-list .mt-help h2 { font-size: 24px; }
}