/* CM Products Tabs – default styles (all overridable from Elementor) */

.cm-products { width: 100%; }
.cm-products *, .cm-products *::before, .cm-products *::after { box-sizing: border-box; }

/* ---------- Header ---------- */
.cm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
}
.cm-head-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	min-width: 0;
}
.cm-heading {
	position: relative;
	margin: 0;
	padding-bottom: 14px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.3;
	color: #1b1f3b;
}
.cm-heading::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background-color: #3d9a6a;
}

/* ---------- Tabs ---------- */
.cm-tabs {
	display: flex;
	align-items: center;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: 100%;
}
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab {
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 12px 20px;
	border: 1px solid #e3e6f0;
	border-radius: 999px;
	background: #fff;
	color: #4a4f6a;
	transition: all .2s ease;
}
.cm-tab:hover { border-color: #3d9a6a; color: #3d9a6a; background: #fff; }
.cm-tab.is-active,
.cm-tab.is-active:hover {
	background: #3d9a6a;
	border-color: #3d9a6a;
	color: #fff;
}

/* ---------- View all ---------- */
.cm-viewall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: #2f7d55;
	background: #e9f6ef;
	border: 1px solid #bfe3cf;
	border-radius: 999px;
	transition: all .2s ease;
}
.cm-viewall:hover { background: #3d9a6a; color: #fff; border-color: #3d9a6a; }
[dir="ltr"] .cm-viewall-arrow { transform: scaleX(-1); }

/* ---------- Grid ---------- */
.cm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	transition: opacity .2s ease;
}
.cm-products.is-loading .cm-grid { opacity: .4; pointer-events: none; }
.cm-empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: #777; }

/* ---------- Card ---------- */
.cm-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: #fff;
	border: 1px solid #e8ebf3;
	border-radius: 22px;
	transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.cm-card:hover {
	border-color: #c9d2f3;
	box-shadow: 0 12px 30px rgba(40, 60, 160, .12);
}

.cm-media {
	position: relative;
	height: 300px;
	border-radius: 16px;
	background: #eef1fd;
	overflow: hidden;
}
.cm-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 16px;
}
.cm-img img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	transition: transform .35s ease;
}

.cm-badge {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: #3d9a6a;
	border-radius: 8px;
}

.cm-wish {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	color: #444;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	transition: color .2s ease, transform .2s ease;
}
.cm-wish:hover { transform: scale(1.08); }
.cm-wish.is-active { color: #e53956; }
.cm-wish.is-active svg { fill: currentColor; }

/* ---------- Body ---------- */
.cm-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
	padding-top: 18px;
}
.cm-ptitle {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	min-height: 54px;
}
.cm-ptitle a { color: #1b1f3b; text-decoration: none; transition: color .2s ease; }

.cm-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 22px;
	font-weight: 800;
	color: #1d36b8;
}
.cm-price .amount { color: #1d36b8; }
.cm-price .woocommerce-Price-currencySymbol { font-size: 13px; font-weight: 400; color: #777c94; }
.cm-price del, .cm-price del .amount { font-size: 14px; font-weight: 400; color: #9aa0b8; }
.cm-price ins { text-decoration: none; background: none; }

/* ---------- Add to cart button ---------- */
.cm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: #1d36b8;
	background: #fff;
	border: 1px solid #1d36b8;
	border-radius: 12px;
	transition: all .2s ease;
}
.cm-btn:hover { color: #fff; background: #1d36b8; border-color: #1d36b8; }
.cm-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.cm-btn.loading { opacity: .6; pointer-events: none; }
.cm-btn.added::after { display: none; }
.cm-card .added_to_cart { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cm-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
	.cm-head { flex-direction: column; align-items: stretch; }
	.cm-head-main { flex-direction: column; align-items: stretch; gap: 14px; }
	.cm-viewall { justify-content: center; }
	.cm-media { height: 260px; }
}