.sw-capability-tabs,
.sw-capability-tabs * {
	box-sizing: border-box;
}

.elementor-widget-seewell_capability_tabs {
	margin-block-end: 0;
}

.e-con:has(> .elementor-widget-seewell_capability_tabs) {
	padding: 0 !important;
}

.sw-capability-tabs {
	--sw-capability-bg: #f7f6f2;
	--sw-capability-primary: #387e80;
	--sw-capability-accent: #c39160;
	--sw-capability-text: #333;
	--sw-capability-muted: #666;
	--sw-capability-border: #dedbd3;
	padding: 80px 24px;
	background: var(--sw-capability-bg);
	color: var(--sw-capability-text);
	font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sw-capability-tabs__container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

.sw-capability-tabs__header {
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
}

.sw-capability-tabs__heading {
	margin: 0;
	color: var(--sw-capability-primary);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 750;
	line-height: 1.16;
	letter-spacing: -0.025em;
}

.sw-capability-tabs__description {
	max-width: 780px;
	margin: 20px auto 0;
	color: var(--sw-capability-muted);
	font-size: 17px;
	line-height: 1.65;
}

.sw-capability-tabs__tablist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 18px;
	margin: 44px auto 52px;
}

.sw-capability-tabs__tab {
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 10px 26px;
	background: transparent;
	color: #555;
	font: inherit;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.sw-capability-tabs__tab:hover {
	border-color: color-mix(in srgb, var(--sw-capability-primary) 25%, transparent);
	color: var(--sw-capability-primary);
}

.sw-capability-tabs__tab.is-active,
.sw-capability-tabs__tab[aria-selected="true"] {
	border-color: var(--sw-capability-primary);
	background: var(--sw-capability-primary);
	color: #fff;
}

.sw-capability-tabs__tab:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--sw-capability-accent) 60%, white);
	outline-offset: 3px;
}

.sw-capability-tabs__panels {
	overflow: hidden;
	transition: height 0.45s ease;
}

.sw-capability-tabs__panel {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.sw-capability-tabs__panel[hidden] {
	display: none;
}

.sw-capability-tabs__panel.is-leaving {
	opacity: 0;
	transform: translateX(20px);
}

.sw-capability-tabs__panel.is-entering {
	opacity: 0;
	transform: translateX(-20px);
}

.sw-capability-tabs__panel:focus {
	outline: 0;
}

.sw-capability-tabs__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	align-items: stretch;
}

.sw-capability-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--sw-capability-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 5px 18px rgba(38, 61, 57, 0.06);
	transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.sw-capability-card:hover,
.sw-capability-card:focus-within {
	box-shadow: 0 16px 36px rgba(38, 61, 57, 0.13);
	transform: translateY(-5px);
}

.sw-capability-card__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #e9e7e2;
}

.sw-capability-card__image,
.sw-capability-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.sw-capability-tabs .sw-capability-card__image {
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s ease;
}

.sw-capability-card:hover .sw-capability-card__image,
.sw-capability-card:focus-within .sw-capability-card__image {
	transform: scale(1.045);
}

.sw-capability-card__placeholder {
	position: relative;
	background:
		linear-gradient(135deg, rgba(56, 126, 128, 0.22), rgba(245, 240, 224, 0.65)),
		repeating-linear-gradient(45deg, transparent 0 22px, rgba(255, 255, 255, 0.38) 22px 24px);
}

.sw-capability-card__placeholder::after {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 44px;
	height: 44px;
	border: 2px solid rgba(56, 126, 128, 0.32);
	border-radius: 50%;
	content: "";
	transform: translate(-50%, -50%);
}

.sw-capability-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.sw-capability-card__title {
	margin: 0 0 8px;
	color: #222;
	font-size: 18px;
	font-weight: 750;
	line-height: 1.3;
}

.sw-capability-card__description {
	flex: 1;
	margin: 0;
	color: var(--sw-capability-muted);
	font-size: 14px;
	line-height: 1.55;
}

.sw-capability-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 30px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.sw-capability-card__badges:empty {
	display: none;
}

.sw-capability-card__badge {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 50%;
	color: #fff;
}

.sw-capability-card__badge svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.sw-capability-card__badge--recyclable { background: #8170d8; }
.sw-capability-card__badge--biodegradable { background: #a98b58; }
.sw-capability-card__badge--reusable { background: #69c3cc; }
.sw-capability-card__badge--sustainable { background: #67ca8e; }

.sw-capability-tabs__empty {
	margin: 0;
	border: 1px dashed var(--sw-capability-border);
	border-radius: 16px;
	padding: 40px 24px;
	background: rgba(255, 255, 255, 0.65);
	color: var(--sw-capability-muted);
	text-align: center;
}

.sw-screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

@media (max-width: 1024px) {
	.sw-capability-tabs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.sw-capability-tabs {
		padding: 64px 16px;
	}

	.sw-capability-tabs__heading {
		font-size: 36px;
	}

	.sw-capability-tabs__tablist {
		gap: 10px;
		margin: 34px auto 38px;
	}

	.sw-capability-tabs__tab {
		min-height: 42px;
		padding-inline: 18px;
		font-size: 14px;
	}

	.sw-capability-tabs__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sw-capability-tabs__panels,
	.sw-capability-tabs__panel,
	.sw-capability-tabs__tab,
	.sw-capability-card,
	.sw-capability-card__image {
		transition: none !important;
	}

	.sw-capability-card:hover,
	.sw-capability-card:focus-within,
	.sw-capability-card:hover .sw-capability-card__image,
	.sw-capability-card:focus-within .sw-capability-card__image {
		transform: none;
	}
}