/*
 * Header, nav and footer styling -- ported 1:1 from the inline styles in
 * p6_render_nav.jsx (header/nav/category ribbon) and the Footer component
 * in p4_misc.jsx, converted to classes against the tokens in tokens.css.
 * Values (px, colors, breakpoints) are copied from those source files, not
 * re-guessed -- see p1b_globalstyles.jsx for the two responsive breakpoints
 * (860px / 560px) this file mirrors.
 *
 * Storefront's own header/nav CSS is overridden wholesale below rather than
 * patched, since header.php/footer.php replace its markup wholesale too.
 */

/* Reset a few Storefront defaults that would otherwise fight this layout. */
.site-header.mls-header {
	background: none;
	border: none;
	box-shadow: none;
}

/* Storefront sets `body{overflow-x:hidden}` and `.site{overflow-x:hidden}`
   with no matching overflow-y. Per the CSS overflow spec, a 'visible' axis
   paired with a non-visible axis on the same element gets promoted to
   'auto' -- so both of these silently become their own scroll containers.
   That breaks position:sticky on #mls-nav (it sticks relative to whichever
   ancestor is the actual scroll container, not the viewport). `clip` avoids
   the promotion (it isn't a scrolling overflow value), so it suppresses the
   same horizontal-scrollbar-prevention Storefront wants without turning
   body/.site into scroll containers. */
body,
.site {
	overflow-x: clip;
}

/* Storefront's .col-full caps content at ~1064px with side padding, but
   every Medlive section manages its own max-width (1320px) and padding via
   its own inner wrapper (.mls-section-inner, .mls-hero-grid, etc.) so full-
   bleed section backgrounds can run edge-to-edge. Reset it theme-wide
   rather than just in the header/footer, since every template in this
   rebuild follows the same pattern. */
.col-full {
	max-width: none;
	padding: 0;
}

/* ── Promo marquee ─────────────────────────────────────────────────── */

.mls-marquee {
	background: var(--mls-g-night);
	padding: 7px 0;
	overflow: hidden;
	border-bottom: 2px solid var(--mls-red);
}

/* No gap here -- the 56px spacing between the two duplicated groups
   lives on .mls-marquee-group's own padding-right instead, so each
   group's rendered width includes its trailing gap. That makes the two
   groups exactly the same width as each other, so translateX(-50%)
   below lands exactly one group-width to the left and the loop repeats
   with no visible jump. (Previously the gap sat between the groups at
   the track level, so -50% overshot short by half that gap -- a small
   but real skip at the loop point every 34s.) */
.mls-marquee-track {
	display: flex;
	width: max-content;
	animation: mls-marquee 34s linear infinite;
}

@keyframes mls-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.mls-marquee-group {
	display: flex;
	gap: 56px;
	padding-right: 56px;
	flex-shrink: 0;
}

.mls-marquee-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mls-white);
	white-space: nowrap;
}

/* ── Topbar ────────────────────────────────────────────────────────── */

.mls-topbar {
	background: var(--mls-night-md);
	padding: 5px 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px;
}

.mls-topbar-left {
	display: flex;
	gap: 16px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .56);
}

.mls-topbar-left span,
.mls-topbar-left a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(255, 255, 255, .56);
	text-decoration: none;
}

.mls-topbar-left a:hover {
	color: var(--mls-white);
}

.mls-topbar-right {
	display: flex;
	gap: 14px;
	font-size: 11.5px;
}

.mls-topbar-right a {
	color: rgba(255, 255, 255, .56);
	text-transform: capitalize;
	text-decoration: none;
}

.mls-topbar-right a:hover {
	color: var(--mls-white);
}

/* ── Main nav ──────────────────────────────────────────────────────── */

.mls-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mls-white);
	border-bottom: 1px solid var(--mls-border);
	transition: all .25s;
}

.mls-nav.is-scrolled {
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(20px);
	box-shadow: 0 4px 24px rgba(32, 38, 44, .08);
}

.mls-nav-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	height: 66px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.mls-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}

.mls-logo-mark {
	width: 38px;
	height: 38px;
	background: var(--mls-paper);
	border: 1px solid var(--mls-border);
	border-radius: var(--mls-r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	flex-shrink: 0;
}

.mls-logo-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mls-logo-line {
	font-weight: 900;
	font-size: 17px;
	letter-spacing: -.02em;
	line-height: 1;
	white-space: nowrap;
	font-family: var(--mls-font-display);
}

.mls-logo-red { color: var(--mls-red); }
.mls-logo-ink { color: var(--mls-ink); }

.mls-logo-sub {
	font-size: 9.5px;
	color: var(--mls-ghost);
	letter-spacing: .09em;
	text-transform: uppercase;
}

.mls-nav-search {
	flex: 1;
	max-width: 500px;
	position: relative;
}

.mls-search-icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mls-ghost);
	pointer-events: none;
	display: flex;
}

.mls-nav-search input,
.mls-mobile-search input {
	width: 100%;
	padding: 10px 14px 10px 40px;
	background: var(--mls-paper);
	border: 1.5px solid var(--mls-border);
	border-radius: var(--mls-r-md);
	color: var(--mls-ink);
	font-size: 13.5px;
	outline: none;
	font-family: inherit;
	box-sizing: border-box;
}

.mls-nav-search input:focus,
.mls-mobile-search input:focus {
	border-color: var(--mls-red);
}

.mls-nav-links {
	display: flex;
	gap: 2px;
}

.mls-nav-links a {
	display: inline-block;
	border-bottom: 2px solid transparent;
	color: var(--mls-muted);
	padding: 7px 4px;
	margin: 0 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	transition: all .15s;
	text-decoration: none;
}

.mls-nav-links a:hover {
	color: var(--mls-ink);
}

.mls-nav-links a.is-active {
	border-bottom-color: var(--mls-red);
	color: var(--mls-ink);
	font-weight: 700;
}

/* Country / currency picker */

.mls-country-picker {
	position: relative;
	flex-shrink: 0;
}

.mls-country-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--mls-paper);
	border: 1.5px solid var(--mls-border);
	color: var(--mls-ink);
	padding: 6px 11px;
	border-radius: var(--mls-r-md);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
}

.mls-country-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--mls-white);
	border: 1.5px solid var(--mls-border);
	border-radius: var(--mls-r-lg);
	box-shadow: var(--mls-shadow-lg);
	z-index: 200;
	min-width: 205px;
	overflow: hidden;
	animation: mls-fadeUp .18s ease;
}

@keyframes mls-fadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.mls-country-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--mls-border);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--mls-body);
	font-family: inherit;
	text-align: left;
}

.mls-country-option.is-active {
	background: var(--mls-paper);
	color: var(--mls-ink);
}

.mls-country-flag { font-size: 19px; }
.mls-country-name { flex: 1; }
.mls-country-currency { font-size: 11.5px; color: var(--mls-ghost); }
.mls-country-sym { font-size: 12.5px; }

/* Actions: wishlist / cart / get-quote / hamburger */

.mls-nav-actions {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-shrink: 0;
}

.mls-icon-btn {
	position: relative;
	background: var(--mls-paper);
	border: 1.5px solid var(--mls-border);
	color: var(--mls-ink);
	padding: 7px 10px;
	border-radius: var(--mls-r-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mls-icon-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background: var(--mls-red);
	color: var(--mls-white);
	border-radius: 50%;
	width: 17px;
	height: 17px;
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mls-icon-badge--dark {
	background: var(--mls-night);
}

.mls-hamburger {
	display: none;
	background: var(--mls-paper);
	border: 1.5px solid var(--mls-border);
	color: var(--mls-ink);
	padding: 7px 8px;
	border-radius: var(--mls-r-md);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* Buttons (shared with the rest of the theme) */

.mls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--mls-r-md);
	font-family: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	border: none;
	transition: all .15s;
}

.mls-btn--primary {
	background: var(--mls-red);
	color: var(--mls-white);
	box-shadow: var(--mls-shadow-btn);
}

.mls-btn--primary:hover {
	background: var(--mls-red-deep);
	color: var(--mls-white);
}

.mls-btn--ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .78);
}

.mls-btn--ghost:hover {
	border-color: rgba(255, 255, 255, .45);
	color: var(--mls-white);
}

.mls-btn--sec {
	background: var(--mls-white);
	color: var(--mls-body);
	border: 1.5px solid var(--mls-border);
	box-shadow: var(--mls-shadow-card);
}

.mls-btn--sec:hover {
	color: var(--mls-ink);
	border-color: var(--mls-ghost);
}

.mls-btn--wa {
	background: #25D366;
	color: var(--mls-white);
	box-shadow: 0 4px 14px rgba(37, 211, 102, .3);
}

.mls-btn--wa:hover {
	background: #1FB959;
	color: var(--mls-white);
}

.mls-btn--sm {
	padding: 7px 14px;
	font-size: 12.5px;
}

.mls-btn--md {
	padding: 10px 22px;
	font-size: 14px;
}

.mls-btn:disabled,
.mls-btn.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}

.mls-btn:disabled:hover,
.mls-btn.is-disabled:hover {
	filter: none;
	transform: none;
}

.mls-btn--lg {
	padding: 13px 30px;
	font-size: 15px;
}

.mls-btn--xl {
	padding: 16px 38px;
	font-size: 16.5px;
}

.mls-btn--full {
	width: 100%;
}

.mls-btn:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
}

/* Mobile menu panel */

.mls-mobile-menu {
	display: none;
	flex-direction: column;
	padding: 14px 20px 20px;
	background: var(--mls-white);
	border-top: 1px solid var(--mls-border);
	gap: 2px;
	max-height: calc(100vh - 66px);
	overflow-y: auto;
}

.mls-mobile-menu.is-open {
	display: flex;
}

.mls-mobile-search {
	position: relative;
	margin-bottom: 14px;
}

.mls-mobile-menu > a {
	padding: 12px 4px;
	border-bottom: 1px solid var(--mls-border);
	color: var(--mls-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.mls-mobile-countries {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.mls-mobile-country {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border-radius: var(--mls-r-md);
	border: 1.5px solid var(--mls-border);
	background: var(--mls-paper);
	color: var(--mls-ink);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.mls-mobile-country.is-active {
	border-color: var(--mls-red);
	background: var(--mls-red-tint);
}

.mls-mobile-menu .mls-btn--full {
	margin-top: 16px;
}

/* Category ribbon */

.mls-cat-strip {
	background: var(--mls-paper);
	border-top: 1px solid var(--mls-border);
	overflow-x: auto;
}

.mls-cat-strip-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	height: 40px;
	align-items: center;
}

.mls-cat-pill {
	padding: 0 13px;
	height: 100%;
	border: none;
	border-bottom: 2.5px solid transparent;
	background: none;
	color: var(--mls-muted);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 500;
	font-family: inherit;
	white-space: nowrap;
	transition: all .15s;
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
}

.mls-cat-pill:hover {
	color: var(--cat-clr, var(--mls-red));
}

.mls-cat-pill.is-active {
	border-bottom-color: var(--cat-clr, var(--mls-red));
	color: var(--cat-clr, var(--mls-red));
	font-weight: 700;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer.mls-footer {
	background: var(--mls-night);
	color: rgba(255, 255, 255, .5);
	padding-top: 56px;
	border-top: 3px solid var(--mls-red);
}

/*
 * Storefront's base stylesheet underlines every link inside .site-footer
 * ( .site-footer a { text-decoration: underline; } ) with a specificity
 * (0,1,1) that beats our single-class overrides here like .mls-footer-logo
 * and .mls-btn (0,1,0 each) -- that's why the logo, footer link columns,
 * WhatsApp/Email buttons and the "Get a Quote" button all showed a stray
 * underline even though each already declared text-decoration: none.
 * This compound selector (0,2,1) wins cleanly without an !important and
 * without touching links anywhere outside this footer.
 */
.site-footer.mls-footer a {
	text-decoration: none;
}

.mls-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
	gap: 36px;
	padding-bottom: 48px;
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.mls-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	text-decoration: none;
}

.mls-footer-logo-mark {
	width: 38px;
	height: 38px;
	background: var(--mls-white);
	border-radius: var(--mls-r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	flex-shrink: 0;
}

.mls-footer-logo-mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mls-footer-logo-line {
	font-weight: 900;
	font-size: 16px;
	line-height: 1.1;
}

.mls-footer-red { color: var(--mls-red); }
.mls-footer-white { color: var(--mls-white); }

.mls-footer-logo-sub {
	font-size: 10px;
	color: rgba(255, 255, 255, .5);
	letter-spacing: .07em;
	text-transform: uppercase;
}

.mls-footer-desc {
	font-size: 13px;
	line-height: 1.78;
	max-width: 290px;
	margin-bottom: 18px;
}

.mls-footer-social {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mls-footer-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--mls-white);
	margin-bottom: 14px;
	display: block;
}

.mls-footer-link {
	display: block;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .56);
	margin-bottom: 7px;
	text-decoration: none;
}

.mls-footer-link:hover {
	color: var(--mls-white);
}

.mls-footer-country {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .56);
	margin-bottom: 7px;
}

.mls-footer-contact-line {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .56);
	margin-bottom: 9px;
	line-height: 1.55;
	display: flex;
	gap: 8px;
}

.mls-footer-contact-line svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.mls-footer-contact-line a {
	color: rgba(255, 255, 255, .56);
	text-decoration: none;
}

.mls-footer-contact-line a:hover {
	color: var(--mls-white);
}

.mls-footer-quote {
	margin-top: 16px;
}

.mls-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding: 18px 24px;
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
}

.mls-footer-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mls-footer-badge {
	padding: 2px 8px;
	background: rgba(255, 255, 255, .05);
	border-radius: 99px;
	font-size: 11px;
}

.mls-footer-legal {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mls-footer-legal-link {
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
}

.mls-footer-legal-link:hover {
	color: var(--mls-white);
	text-decoration: underline;
}

/* ── Responsive: tablet & phone (≤860px) ──────────────────────────────
   Mirrors the @media(max-width:860px) block in p1b_globalstyles.jsx. */

@media (max-width: 860px) {
	.mls-topbar,
	.mls-nav-search,
	.mls-nav-links,
	.mls-nav-getquote,
	.mls-cat-strip {
		display: none !important;
	}

	.mls-hamburger {
		display: flex !important;
	}

	.mls-nav-inner {
		padding: 0 12px;
		gap: 8px;
	}

	.mls-logo-mark {
		width: 32px;
		height: 32px;
	}

	.mls-logo-line {
		font-size: 15px;
	}

	.mls-logo-sub {
		display: none;
	}

	.mls-country-btn {
		padding: 6px 8px;
	}

	.mls-country-sym {
		display: none;
	}

	.mls-footer-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 32px 20px !important;
		padding-left: 16px;
		padding-right: 16px;
	}

	.mls-footer-bottom {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ── Responsive: phone (≤560px) ──────────────────────────────────────
   Mirrors the @media(max-width:560px) block in p1b_globalstyles.jsx. */

@media (max-width: 560px) {
	.mls-footer-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mls-marquee-track {
		animation-duration: .001ms;
		animation-iteration-count: 1;
	}
}


/* ══════════════════════════════════════════════════════════════════════
 * Content pages -- Brands, Wholesale, Tenders, Guides, FAQ.
 * These are plain WordPress Pages rendered through Storefront's default
 * page.php (no custom template in this theme), so everything below is
 * scoped to the automatic body classes WordPress adds per page
 * (.page-id-1677 etc.) rather than a template file. Component classes
 * (.mls-cp-*, .mls-faq-*, .mls-brand-*) are unique to this theme and
 * safe to leave unscoped.
 *
 * Icons are CSS mask-images, not inline SVG markup, because page content
 * is saved through the REST API's sanitizer, which strips raw SVG tags --
 * a masked span element survives that filter and still renders the exact
 * path data from inc/icons.php.
 * ────────────────────────────────────────────────────────────────── */

.mls-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: var(--mls-icon-svg);
	mask-image: var(--mls-icon-svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}

.mls-icon--truck { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%207h11v9H2z%20M13%2010.5h4.2L20%2013.5V16H13z%20M6%2019.6a1.8%201.8%200%20100-3.6%201.8%201.8%200%20000%203.6z%20M17.2%2019.6a1.8%201.8%200%20100-3.6%201.8%201.8%200%20000%203.6z'/%3E%3C/svg%3E"); }
.mls-icon--shield { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l7.5%202.8V11c0%205-3.2%208.5-7.5%2010-4.3-1.5-7.5-5-7.5-10V5.8L12%203z'/%3E%3C/svg%3E"); }
.mls-icon--award { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2014.3a5%205%200%20100-10%205%205%200%20000%2010z%20M8.4%2013.4L7%2021l5-2.4%205%202.4-1.4-7.6'/%3E%3C/svg%3E"); }
.mls-icon--doc { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5h9l3.5%203.5v15.5H6z%20M15%202.5V6h3.5%20M9%2012.2h6%20M9%2016h6'/%3E%3C/svg%3E"); }
.mls-icon--building { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2021V4.5h9V21%20M9.5%2021h9V9.5h-9%20M7.5%207.5h1.5%20M7.5%2011h1.5%20M7.5%2014.5h1.5%20M12.5%2012.5h1.8%20M12.5%2016h1.8'/%3E%3C/svg%3E"); }
.mls-icon--phone { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.6%203.5l3%20.5.8%203.6-2%201.6a13%2013%200%20006.4%206.4l1.6-2%203.6.8.5%203a2%202%200%2001-2.1%201.7C10.9%2018.3%205.7%2013.1%204.9%205.6a2%202%200%20011.7-2.1z'/%3E%3C/svg%3E"); }
.mls-icon--mail { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%205.5h17v13h-17z%20M3.8%206l8.2%206.8L20.2%206'/%3E%3C/svg%3E"); }
.mls-icon--whatsapp { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020l1.2-4.4A8%208%200%201112%2020a8%208%200%2001-4.4-1.3z%20M8.7%209.4c-.3.9%200%202.2.9%203.4%201%201.3%202.2%202%203.4%202.2.5.1%201%200%201.4-.3l.3-.7-1.4-1-.6.5c-.3-.1-.9-.4-1.4-1s-.8-1.2-.9-1.6l.5-.5-.9-1.5z'/%3E%3C/svg%3E"); }
.mls-icon--mapPin { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021.5S5%2015%205%209.8a7%207%200%200114%200c0%205.2-7%2011.7-7%2011.7z%20M12%2012.3a2.5%202.5%200%20100-5%202.5%202.5%200%20000%205z'/%3E%3C/svg%3E"); }
.mls-icon--clock { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020a8%208%200%20100-16%208%208%200%20000%2016z%20M12%207.5V12l3.2%202'/%3E%3C/svg%3E"); }
.mls-icon--check { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5%205L20%206'/%3E%3C/svg%3E"); }
.mls-icon--globe { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5a8.5%208.5%200%20100%2017%208.5%208.5%200%20000-17z%20M3.7%2012h16.6%20M12%203.5c2.4%202.3%203.7%205.3%203.7%208.5s-1.3%206.2-3.7%208.5c-2.4-2.3-3.7-5.3-3.7-8.5S9.6%205.8%2012%203.5z'/%3E%3C/svg%3E"); }
.mls-icon--creditCard { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%205.5h19v13h-19z%20M2.5%209.8h19%20M6%2015.2h4'/%3E%3C/svg%3E"); }
.mls-icon--quote { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%208.2C5.8%209.3%204.5%2011%204.5%2013.6c0%202%201.2%203.4%203%203.4a2.7%202.7%200%20002.7-2.8c0-1.4-1-2.4-2.3-2.5.3-1.3%201.5-2.4%202.9-3zm9%200c-2.7%201.1-4%202.8-4%205.4%200%202%201.2%203.4%203%203.4a2.7%202.7%200%20002.7-2.8c0-1.4-1-2.4-2.3-2.5.3-1.3%201.5-2.4%202.9-3z'/%3E%3C/svg%3E"); }
.mls-icon--chevDown { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209.5l6%206%206-6'/%3E%3C/svg%3E"); }
.mls-icon--bolt { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202.5L4.5%2014h6l-1%207.5L18%2010h-6l1-7.5z'/%3E%3C/svg%3E"); }

.page-id-1677 .entry-header,
.page-id-1679 .entry-header,
.page-id-1681 .entry-header,
.page-id-1680 .entry-header,
.page-id-1678 .entry-header {
	background: var(--mls-g-hero);
	border-radius: var(--mls-r-lg) var(--mls-r-lg) 0 0;
	padding: 44px 32px 4px;
	max-width: 1320px;
	margin: 24px auto 0;
	box-sizing: border-box;
}

.page-id-1677 .entry-title,
.page-id-1679 .entry-title,
.page-id-1681 .entry-title,
.page-id-1680 .entry-title,
.page-id-1678 .entry-title {
	color: var(--mls-white);
	font-size: clamp(28px, 3.6vw, 38px);
	margin: 0;
}

.page-id-1677 .entry-content,
.page-id-1679 .entry-content,
.page-id-1681 .entry-content,
.page-id-1680 .entry-content,
.page-id-1678 .entry-content {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px 72px;
	box-sizing: border-box;
}

.page-id-1677 .entry-content > p.lead:first-child,
.page-id-1679 .entry-content > p.lead:first-child,
.page-id-1681 .entry-content > p.lead:first-child,
.page-id-1680 .entry-content > p.lead:first-child,
.page-id-1678 .entry-content > p.lead:first-child {
	background: var(--mls-g-hero);
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	line-height: 1.6;
	max-width: 760px;
	margin: 0;
	padding: 10px 32px 32px 0;
	border-radius: 0 0 var(--mls-r-lg) var(--mls-r-lg);
}

.page-id-1677 .entry-content > p.lead:first-child a,
.page-id-1679 .entry-content > p.lead:first-child a,
.page-id-1681 .entry-content > p.lead:first-child a,
.page-id-1680 .entry-content > p.lead:first-child a,
.page-id-1678 .entry-content > p.lead:first-child a {
	color: var(--mls-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-id-1677 .entry-content > p.lead:first-child,
.page-id-1679 .entry-content > p.lead:first-child,
.page-id-1681 .entry-content > p.lead:first-child,
.page-id-1680 .entry-content > p.lead:first-child {
	margin-bottom: 40px;
}
.page-id-1678 .entry-content > p.lead:first-child {
	margin-bottom: 8px;
}

.mls-cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mls-red);
	margin: 0 0 10px;
}

.mls-cp-section-title {
	font-size: clamp(20px, 2.4vw, 26px);
	margin: 0 0 8px;
}

.mls-cp-section-sub {
	color: var(--mls-muted);
	font-size: 15px;
	max-width: 640px;
	margin: 0 0 28px;
}

.mls-cp-section {
	padding: 48px 0;
	border-top: 1px solid var(--mls-border);
}
.mls-cp-section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.mls-cp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mls-cp-card {
	background: var(--mls-white);
	border-radius: var(--mls-r-lg);
	box-shadow: var(--mls-shadow-card);
	padding: 24px 22px;
}

.mls-cp-icon {
	width: 42px;
	height: 42px;
	border-radius: var(--mls-r-md);
	background: var(--mls-red-tint);
	color: var(--mls-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.mls-cp-icon .mls-icon { width: 20px; height: 20px; }

.mls-cp-card h4 {
	font-size: 16px;
	margin: 0 0 6px;
}
.mls-cp-card p {
	font-size: 14px;
	color: var(--mls-muted);
	margin: 0;
	line-height: 1.6;
}

.mls-cp-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	counter-reset: mls-step;
	background: var(--mls-white);
	border-radius: var(--mls-r-lg);
	box-shadow: var(--mls-shadow-card);
	overflow: hidden;
}

.mls-cp-step {
	counter-increment: mls-step;
	padding: 28px 24px;
	position: relative;
}
.mls-cp-step:not(:last-child) {
	border-right: 1px solid var(--mls-border);
}
.mls-cp-step::before {
	content: counter(mls-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mls-red);
	color: var(--mls-white);
	font-family: var(--mls-font-display);
	font-weight: 800;
	font-size: 14px;
	margin-bottom: 14px;
}
.mls-cp-step h4 {
	font-size: 15.5px;
	margin: 0 0 6px;
}
.mls-cp-step p {
	font-size: 13.5px;
	color: var(--mls-muted);
	margin: 0;
	line-height: 1.6;
}

.mls-cp-cta {
	background: var(--mls-g-night);
	border-radius: var(--mls-r-lg);
	border-top: 3px solid var(--mls-red);
	padding: 36px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.mls-cp-cta-text h3 {
	color: var(--mls-white);
	font-size: 20px;
	margin: 0 0 6px;
}
.mls-cp-cta-text p {
	color: rgba(255, 255, 255, .6);
	font-size: 14px;
	margin: 0;
	max-width: 440px;
}
.mls-cp-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mls-cp-cta-actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.mls-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mls-faq-item {
	background: var(--mls-white);
	border: 1px solid var(--mls-border);
	border-radius: var(--mls-r-md);
	overflow: hidden;
}

.mls-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--mls-font-display);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--mls-ink);
}
.mls-faq-item summary::-webkit-details-marker { display: none; }

.mls-faq-item .mls-faq-chev {
	color: var(--mls-red);
	transition: transform .2s ease;
}
.mls-faq-item[open] .mls-faq-chev {
	transform: rotate(180deg);
}

.mls-faq-item .mls-faq-a {
	padding: 0 20px 20px;
	color: var(--mls-body);
	font-size: 14.5px;
	line-height: 1.7;
}
.mls-faq-item .mls-faq-a p {
	margin: 0;
}

.mls-brand-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--mls-muted);
	margin: 0 0 24px;
}

.mls-brand-az {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	position: sticky;
	top: 8px;
	z-index: 5;
	background: var(--mls-paper);
	padding: 12px 0 20px;
	margin-bottom: 8px;
}
.mls-brand-az a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--mls-r-sm);
	background: var(--mls-white);
	border: 1px solid var(--mls-border);
	color: var(--mls-ink);
	font-family: var(--mls-font-mono);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.mls-brand-az a:hover {
	background: var(--mls-red);
	border-color: var(--mls-red);
	color: var(--mls-white);
}

.mls-brand-letter-section {
	padding: 22px 0;
	border-top: 1px solid var(--mls-border);
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: start;
	gap: 20px;
	scroll-margin-top: 60px;
}
.mls-brand-letter-section:first-of-type {
	border-top: none;
}

.mls-brand-letter-badge {
	width: 40px;
	height: 40px;
	border-radius: var(--mls-r-md);
	background: var(--mls-ink);
	color: var(--mls-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mls-font-display);
	font-weight: 800;
	font-size: 16px;
}

.mls-brand-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 8px;
}
.mls-brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--mls-white);
	border: 1px solid var(--mls-border);
	border-radius: 999px;
	padding: 6px 8px 6px 14px;
	font-size: 13px;
	color: var(--mls-ink);
	text-decoration: none;
	line-height: 1.3;
}
.mls-brand-chip:hover {
	border-color: var(--mls-red);
	color: var(--mls-red);
}
.mls-brand-chip .mls-brand-chip-n {
	background: var(--mls-paper-dk);
	color: var(--mls-ghost);
	border-radius: 999px;
	font-size: 11px;
	padding: 2px 7px;
	font-family: var(--mls-font-mono);
}

@media (max-width: 860px) {
	.mls-cp-grid,
	.mls-cp-steps {
		grid-template-columns: 1fr;
	}
	.mls-cp-step:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid var(--mls-border);
	}
	.mls-cp-cta {
		flex-direction: column;
		align-items: flex-start;
	}
	.mls-brand-letter-section {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.page-id-1677 .entry-header,
	.page-id-1679 .entry-header,
	.page-id-1681 .entry-header,
	.page-id-1680 .entry-header,
	.page-id-1678 .entry-header {
		padding: 32px 20px 4px;
	}
	.page-id-1677 .entry-content,
	.page-id-1679 .entry-content,
	.page-id-1681 .entry-content,
	.page-id-1680 .entry-content,
	.page-id-1678 .entry-content {
		padding: 0 20px 56px;
	}
	.page-id-1677 .entry-content > p.lead:first-child,
	.page-id-1679 .entry-content > p.lead:first-child,
	.page-id-1681 .entry-content > p.lead:first-child,
	.page-id-1680 .entry-content > p.lead:first-child,
	.page-id-1678 .entry-content > p.lead:first-child {
		padding: 10px 20px 28px 0;
	}
}


/* ==========================================================================
 * Content pages -- modernization pass 2: hover depth, entrance motion,
 * gradient accents, a reusable trust-stat bar, and brand search styling.
 * Purely additive -- nothing above this block is touched or overridden.
 * ========================================================================== */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mls-cp-card, .mls-brand-chip, .mls-cp-step, .mls-brand-az a, .mls-faq-item {
		transition: none !important;
		animation: none !important;
	}
}

.mls-icon--search { --mls-icon-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%204.5a6.5%206.5%200%20100%2013%206.5%206.5%200%20000-13z%20M20.5%2020.5L15.8%2015.8'/%3E%3C/svg%3E"); }

/* Card + chip + step micro-interactions */
.mls-cp-card {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	border: 1px solid transparent;
}
.mls-cp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -12px rgba(17, 24, 39, .18);
	border-color: var(--mls-red-tint);
}
.mls-cp-icon { transition: transform .2s ease, background .2s ease; }
.mls-cp-card:hover .mls-cp-icon { background: var(--mls-red); transform: scale(1.08); }
.mls-cp-card:hover .mls-cp-icon .mls-icon { background-color: var(--mls-white); }

.mls-cp-step { transition: background .2s ease; }
.mls-cp-step:hover { background: var(--mls-paper); }

.mls-faq-item { transition: border-color .2s ease, box-shadow .2s ease; }
.mls-faq-item:hover { border-color: var(--mls-red-tint); }
.mls-faq-item[open] { box-shadow: var(--mls-shadow-card); border-color: var(--mls-red-tint); }

.mls-brand-chip { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.mls-brand-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(17, 24, 39, .2); }

.mls-brand-az a { transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.mls-brand-az a:hover { transform: translateY(-2px); }

.mls-cp-cta-actions a { transition: transform .15s ease, box-shadow .15s ease; }
.mls-cp-cta-actions a:hover { transform: translateY(-2px); }

/* Gradient accent under section titles */
.mls-cp-section-title { position: relative; padding-bottom: 14px; }
.mls-cp-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mls-red), var(--mls-red-tint));
}

/* Reusable trust-stat bar (Brands / Wholesale / Tenders heroes) */
.mls-cp-trustbar {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 40px;
	border: 1px solid var(--mls-border);
	border-radius: var(--mls-r-lg);
	overflow: hidden;
	background: var(--mls-white);
	box-shadow: var(--mls-shadow-card);
}
.mls-cp-trust-item {
	flex: 1 1 0;
	min-width: 120px;
	padding: 20px 18px;
	text-align: center;
	border-right: 1px solid var(--mls-border);
}
.mls-cp-trust-item:last-child { border-right: none; }
.mls-cp-trust-num {
	display: block;
	font-family: var(--mls-font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--mls-red);
	line-height: 1.2;
}
.mls-cp-trust-label {
	display: block;
	font-size: 12px;
	color: var(--mls-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 2px;
}
@media (max-width: 860px) {
	.mls-cp-trust-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--mls-border); }
}

/* Entrance animation: cards/steps/FAQ items fade + lift in on load */
@keyframes mlsFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.mls-cp-card, .mls-cp-step, .mls-faq-item { animation: mlsFadeUp .5s ease both; }
.mls-cp-grid .mls-cp-card:nth-child(1), .mls-cp-steps .mls-cp-step:nth-child(1) { animation-delay: .02s; }
.mls-cp-grid .mls-cp-card:nth-child(2), .mls-cp-steps .mls-cp-step:nth-child(2) { animation-delay: .08s; }
.mls-cp-grid .mls-cp-card:nth-child(3), .mls-cp-steps .mls-cp-step:nth-child(3) { animation-delay: .14s; }
.mls-cp-grid .mls-cp-card:nth-child(4) { animation-delay: .2s; }
.mls-cp-grid .mls-cp-card:nth-child(5) { animation-delay: .26s; }
.mls-cp-grid .mls-cp-card:nth-child(6) { animation-delay: .32s; }
.mls-faq-item:nth-child(1) { animation-delay: 0s; }
.mls-faq-item:nth-child(2) { animation-delay: .04s; }
.mls-faq-item:nth-child(3) { animation-delay: .08s; }
.mls-faq-item:nth-child(4) { animation-delay: .12s; }
.mls-faq-item:nth-child(5) { animation-delay: .16s; }
.mls-faq-item:nth-child(6) { animation-delay: .2s; }
.mls-faq-item:nth-child(7) { animation-delay: .24s; }
.mls-faq-item:nth-child(8) { animation-delay: .28s; }

/* Brand live-search input */
.mls-brand-search-wrap { position: relative; margin: 0 0 22px; max-width: 360px; }
.mls-brand-search-wrap .mls-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--mls-muted);
	width: 16px;
	height: 16px;
}
.mls-brand-search {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px 11px 38px;
	border: 1px solid var(--mls-border);
	border-radius: var(--mls-r-md);
	background: var(--mls-white);
	font-size: 14px;
	color: var(--mls-ink);
	font-family: inherit;
}
.mls-brand-search:focus {
	outline: none;
	border-color: var(--mls-red);
	box-shadow: 0 0 0 3px var(--mls-red-tint);
}
.mls-brand-no-results {
	display: none;
	padding: 32px 0;
	text-align: center;
	color: var(--mls-muted);
	font-size: 14px;
}