/* =========================================================================
   Melkeys - Property Cards v1 (carte statique, style site historique)
   Tout est scopé sous .melkeys-card afin de ne pas impacter les autres
   widgets / cartes du thème.
   Palette de marque : navy #172740, crème #f6eedb, police Roboto.
   ========================================================================= */

.melkeys-card {
	--mk-navy: #172740;
	--mk-cream: #f6eedb;
	--mk-muted: #7a7f87;
	--mk-border: #e4e7ea;
	--mk-radius: 10px;
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: var(--mk-navy);
	height: 100%;
}

/* ---- Cadre de la carte ---- */
.melkeys-card .mk-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--mk-border);
	border-radius: var(--mk-radius);
	overflow: hidden;
}

/* Ombre portée au survol uniquement (aucune ombre par défaut, aucun mouvement) */
.melkeys-card:hover .mk-card {
	box-shadow: 0 8px 24px rgba(23, 39, 64, .12);
}

/* Carte entièrement cliquable : le lien du titre est étendu à toute la carte
   via un pseudo-élément (pattern "stretched link"). */
.melkeys-card .mk-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---- Média / image ---- */
/* z-index:2 : on remonte la galerie AU-DESSUS du lien plein-carte
   (.mk-title a::after, z-index:1) pour que le carrousel Slick reçoive les gestes
   tactiles (swipe mobile). Sans ça l'overlay captait les touchs et le swipe ne
   changeait jamais d'image. Le tap reste géré par le lien propre à chaque diapo
   (a.hover-effect, même URL que le titre). */
.melkeys-card .mk-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	z-index: 2;
}

/* La zone image remplit tout le conteneur au ratio fixe */
.melkeys-card .mk-card__media .listing-image-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.melkeys-card .mk-card__media .listing-thumb,
.melkeys-card .mk-card__media .listing-featured-thumb,
.melkeys-card .mk-card__media .listing-gallery-wrap,
.melkeys-card .mk-card__media .houzez-listing-carousel,
.melkeys-card .mk-card__media .slick-list,
.melkeys-card .mk-card__media .slick-track,
.melkeys-card .mk-card__media .slide-img,
.melkeys-card .mk-card__media .slide-img > a {
	height: 100% !important;
}

.melkeys-card .mk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .3s ease;
}

/* Flèches du slider photo : cliquables au-dessus du lien plein-carte */
.melkeys-card .mk-card__media .slick-arrow {
	z-index: 3;
}

/* Swipe tactile : le carrousel doit pouvoir capter les gestes horizontaux.
   touch-action: pan-y => le scroll vertical de la page passe normalement, tandis
   que l'horizontal est réservé au carrousel (évite aussi le swipe-retour du
   navigateur sur les bords). */
.melkeys-card .mk-card__media .houzez-listing-carousel,
.melkeys-card .mk-card__media .slick-list,
.melkeys-card .mk-card__media .slick-track {
	touch-action: pan-y;
}

/* Overlay dégradé sombre de .hover-effect (thème parent) : on le neutralise
   COMPLÈTEMENT (jamais affiché, ni par défaut ni au survol). !important pour
   battre la règle parente .hover-effect:before { opacity: 1 }. */
.melkeys-card .mk-card__media .hover-effect::before,
.melkeys-card:hover .mk-card__media .hover-effect::before {
	opacity: 0 !important;
}

/* Badges statut / featured : haut-gauche.
   On annule le positionnement absolu hérité du thème parent pour les
   laisser s'empiler dans .mk-badges. */
.melkeys-card .mk-card__media .mk-badges {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	z-index: 3;
	margin: 0;
}

.melkeys-card .mk-card__media .mk-badges .labels-wrap,
.melkeys-card .mk-card__media .mk-badges .label-featured {
	position: static;
	top: auto;
	left: auto;
	margin: 0;
}

.melkeys-card .mk-card__media .mk-badges .label {
	font-size: 11px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #fff;
	background: var(--mk-navy);
	text-decoration: none;
}

/* Badge « Vendu » : couleur dédiée pour le distinguer des autres labels. */
.melkeys-card .mk-card__media .mk-badges .label-sold {
	background: #b3261e;
}

/* ---- Corps ---- */
.melkeys-card .mk-card__body {
	padding: 18px 18px 8px;
}

/* En-tête : bloc texte (type + titre) à gauche, favori à droite */
.melkeys-card .mk-head-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.melkeys-card .mk-type {
	font-size: 15px;
	font-weight: 400;
	color: var(--mk-navy);
	line-height: 1.35;
}

.melkeys-card .mk-title {
	font-size: 16px;
	line-height: 1.35;
	font-weight: 400;
	margin: 0;
}

.melkeys-card .mk-title a {
	color: var(--mk-navy);
	text-decoration: none;
}

.melkeys-card .mk-title a:hover {
	color: #000;
}

/* Ville : élément le plus visible (gras, MAJUSCULES) comme en prod */
.melkeys-card .mk-city {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--mk-navy);
}

.melkeys-card .mk-city i {
	font-size: 18px;
	color: var(--mk-navy);
}

/* ---- Favori (cœur simple, sans pastille, dans la zone texte) ---- */
/* position/z-index pour rester cliquable au-dessus du lien plein-carte */
.melkeys-card .mk-fav {
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
}

.melkeys-card .mk-fav .item-tools {
	position: static;
	bottom: auto;
	right: auto;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}

/* On n'affiche que le favori (comme en prod) */
.melkeys-card .mk-fav .item-tool.item-preview,
.melkeys-card .mk-fav .item-tool.item-compare {
	display: none;
}

.melkeys-card .mk-fav .item-tool {
	list-style: none;
}

.melkeys-card .mk-fav .item-tool > span {
	width: auto;
	height: auto;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--mk-navy);
	font-size: 24px;
}

.melkeys-card .mk-fav .item-tool > span:hover {
	background: transparent;
	color: #e34848;
}

/* ---- Séparateur (ligne pleine largeur, sans triangle) ---- */
.melkeys-card .mk-sep {
	margin: 14px 0;
}

.melkeys-card .mk-sep span {
	display: block;
	border-top: 1px solid var(--mk-border);
}

/* ---- Prix ---- */
.melkeys-card .mk-price {
	margin-bottom: 16px;
}

.melkeys-card .mk-price-line {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

/* Annulation du positionnement absolu hérité (bottom/left) du thème parent */
.melkeys-card .item-price-wrap {
	position: static;
	bottom: auto;
	left: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.melkeys-card .item-price-wrap .item-price,
.melkeys-card .item-price-wrap .item-price .price {
	font-size: 1rem;
	font-weight: 400;
	color: var(--mk-navy);
	line-height: 20px;
}

.melkeys-card .mk-price-star {
	font-size: 14px;
	color: var(--mk-navy);
	top: 0;
}

.melkeys-card .mk-price-note {
	margin-top: 6px;
	font-size: 12px;
	color: var(--mk-muted);
	line-height: 1.3;
}

/* ---- Specs (pièces / chambres / m²) ---- */
.melkeys-card .mk-specs {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px 18px;
	color: var(--mk-navy);
}

.melkeys-card .mk-specs li {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 15px;
}

.melkeys-card .mk-specs li .val {
	font-weight: 700;
	font-size: 20px;
	position: relative;
}

.melkeys-card .mk-specs li .val:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 16px;
	height: 2px;
	background: var(--mk-navy);
}

/* ---- Pied : référence seule (pas de bordure, pas de bouton) ---- */
.melkeys-card .mk-card__foot {
	padding: 4px 18px 18px;
	border-top: 0;
	margin-top: auto;
}

.melkeys-card .mk-ref {
	font-size: 12px;
	color: var(--mk-muted);
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
	.melkeys-card .mk-city {
		font-size: 16px;
	}

	.melkeys-card .item-price-wrap .item-price,
	.melkeys-card .item-price-wrap .item-price .price {
		font-size: 21px;
	}
}