.eg-cat-wrap {
	max-width: 100%;
}

.eg-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.eg-cat-card {
	--eg-lift: -8px;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 28px 24px;
	text-decoration: none;
	background: var(--eg-bg, #F5F5F5);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.eg-cat-card:hover,
.eg-cat-card:focus-visible {
	transform: translateY(var(--eg-lift));
	box-shadow: 0 20px 40px rgba(0,0,0,0.14);
}

/* background blob shape */
.eg-cat-card::after {
	content: "";
	position: absolute;
	bottom: -30%;
	right: -25%;
	width: 75%;
	height: 65%;
	border-radius: 50%;
	opacity: 0.9;
	z-index: 0;
	background: var(--eg-blob, #DADADA);
	transition: transform 0.5s ease;
}
.eg-cat-card:hover::after {
	transform: scale(1.15) translate(-4%, -4%);
}

/* icon */
.eg-cat-icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--eg-accent, #333333);
	transition: transform 0.35s ease;
}
.eg-cat-icon svg {
	width: 40px;
	height: 40px;
	fill: currentColor;
}
.eg-cat-icon i {
	font-size: 40px;
	line-height: 1;
}
.eg-cat-card:hover .eg-cat-icon {
	transform: scale(1.12) rotate(-4deg);
}

/* title */
.eg-cat-title {
	position: relative;
	z-index: 2;
	font-size: 1.55rem;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.15;
	margin: 0;
}

/* product image */
.card-img {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 62%;
	height: 78%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: bottom right;
}
.eg-cat-card:hover .card-img {
	transform: scale(1.08) translateY(-4px);
}

/* dot pattern */
.eg-dots {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 6px);
	grid-gap: 6px;
	opacity: 0.6;
	color: var(--eg-accent, #333333);
	transition: opacity 0.35s ease;
}
.eg-cat-card:hover .eg-dots { opacity: 1; }
.eg-dots span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

/* accent bar */
.eg-cat-card .accent-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 100%;
	background: var(--eg-accent, #333333);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	z-index: 3;
}
.eg-cat-card:hover .accent-bar { transform: scaleX(1); }

@media (max-width: 767px) {
	.eg-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.eg-cat-grid { grid-template-columns: 1fr !important; }
	.eg-cat-card { aspect-ratio: 4 / 3 !important; }
}