/* Snusly Product Cards */

.scc-section,
.scc-section * {
	box-sizing: border-box;
}

.elementor-widget-snusly_custom_cards,
.scc-cards-widget {
	margin: 0 !important;
	width: 100% !important;
}

.scc-section {
	width: 100%;
	background: var(--scc-bg, #fff);
	padding: 36px 0 48px;
}

.scc-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.scc-heading {
	margin: 0 0 28px;
	text-align: center;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--scc-heading, #111) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.scc-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--scc-cols, 4), minmax(0, 1fr));
	gap: var(--scc-gap, 20px);
}

.scc-card {
	background: var(--scc-card-bg, #fff) !important;
	border: 1px solid var(--scc-border, #E5E7EB) !important;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.scc-card__media {
	width: 100%;
	height: var(--scc-img-h, 360px);
	background: #f3f4f6;
	overflow: hidden;
	line-height: 0;
}

.scc-card__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.scc-card__placeholder {
	width: 100%;
	height: 100%;
	min-height: var(--scc-img-h, 360px);
	background: linear-gradient(145deg, #e8eef5, #f8fafc);
}

.scc-card__body {
	padding: 16px 14px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	flex: 1;
}

.scc-card__name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--scc-name, #111) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.scc-card__price {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--scc-price, #6B7280) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.scc-card__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin-top: auto;
	padding: 12px 14px !important;
	border-radius: 4px !important;
	background-color: var(--scc-btn-bg, #0A6B82) !important;
	color: var(--scc-btn-color, #fff) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 0 !important;
	box-shadow: none !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	transition: background 0.2s ease;
}

.scc-card__btn:hover {
	/* Fill wipe handled in buttons.css — keep base under ::before */
	background-color: var(--scc-btn-bg, #0A6B82) !important;
	color: var(--scc-btn-color, #fff) !important;
}

@media (max-width: 1100px) {
	.scc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	.scc-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.scc-card {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.scc-heading {
		font-size: 22px;
	}
}