/* Menu Grid Showcase — organic blob card design */

.mgs-wrap {
	--mgs-bg: #FDF6EE;
	--mgs-accent: #2B2018;
	--mgs-button: #FF3D78;
	--mgs-columns: 4;

	background: var(--mgs-bg);
	border-radius: 32px;
	padding: 44px 36px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
}
.mgs-wrap * { box-sizing: border-box; }

/* ---------- Header row ---------- */
.mgs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 34px;
	flex-wrap: wrap;
	gap: 14px;
}

.mgs-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	background: var(--mgs-accent);
	color: #fff;
	padding: 12px 26px;
	border-radius: 40px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.mgs-pill-heart {
	position: absolute;
	top: -12px;
	right: -6px;
	color: #ff5c8a;
	font-size: 20px;
	transform: rotate(-10deg);
}

.mgs-viewall {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--mgs-accent);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.mgs-viewall-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--mgs-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}
.mgs-viewall:hover .mgs-viewall-circle {
	transform: translateX(4px);
}

/* ---------- Grid ---------- */
.mgs-grid {
	display: grid;
	grid-template-columns: repeat(var(--mgs-columns), 1fr);
	gap: 28px;
}

@media (max-width: 1200px) {
	.mgs-grid { grid-template-columns: repeat(min(4, var(--mgs-columns)), 1fr) !important; }
}
@media (max-width: 900px) {
	.mgs-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	.mgs-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Card ---------- */
.mgs-card {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.mgs-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 18px;
}

/* Organic blob shapes via clip-path — 4 hand-tuned variants for visual variety */
.mgs-blob {
	position: absolute;
	inset: 6%;
	z-index: 1;
}
.mgs-blob-1 {
	clip-path: polygon(52% 2%, 75% 8%, 92% 26%, 98% 50%, 90% 74%, 70% 94%, 44% 98%, 20% 88%, 4% 66%, 2% 40%, 14% 16%, 34% 4%);
	transform: rotate(-4deg);
}
.mgs-blob-2 {
	clip-path: polygon(48% 0%, 70% 4%, 90% 18%, 100% 42%, 96% 66%, 80% 88%, 56% 100%, 30% 96%, 10% 80%, 0% 56%, 6% 30%, 24% 10%);
	transform: rotate(6deg);
}
.mgs-blob-3 {
	clip-path: polygon(40% 0%, 64% 6%, 86% 22%, 98% 46%, 94% 70%, 76% 90%, 50% 100%, 24% 92%, 6% 74%, 0% 48%, 10% 22%, 24% 6%);
	transform: rotate(-8deg);
}
.mgs-blob-4 {
	clip-path: polygon(56% 4%, 80% 14%, 96% 34%, 96% 60%, 82% 82%, 58% 98%, 32% 96%, 10% 80%, 0% 56%, 4% 30%, 20% 10%, 38% 0%);
	transform: rotate(3deg);
}

.mgs-photo-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	display: flex;
}
.mgs-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Photo mask uses the same organic language, offset slightly so the blob peeks out */
.mgs-photo-shape-1 { clip-path: polygon(50% 4%, 78% 10%, 94% 32%, 96% 58%, 84% 80%, 62% 96%, 36% 94%, 14% 78%, 4% 54%, 10% 28%, 28% 8%); }
.mgs-photo-shape-2 { clip-path: polygon(46% 2%, 72% 6%, 92% 24%, 98% 50%, 88% 76%, 66% 94%, 40% 96%, 16% 84%, 2% 60%, 4% 34%, 20% 12%); }
.mgs-photo-shape-3 { clip-path: polygon(42% 2%, 68% 8%, 90% 26%, 96% 52%, 88% 76%, 66% 94%, 40% 96%, 16% 84%, 4% 60%, 6% 32%, 22% 10%); }
.mgs-photo-shape-4 { clip-path: polygon(52% 6%, 78% 14%, 94% 36%, 92% 62%, 76% 84%, 52% 98%, 28% 94%, 8% 76%, 2% 50%, 10% 26%, 30% 8%); }

/* When there's no blob behind it, just show a soft round photo */
.mgs-media:not(:has(.mgs-blob)) .mgs-photo-wrap {
	border-radius: 50%;
	clip-path: none;
	box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* ---------- Badges ---------- */
.mgs-badge {
	position: absolute;
	z-index: 3;
	font-family: inherit;
}

.mgs-badge-new {
	top: 4%;
	left: 4%;
	width: 52px;
	height: 52px;
	background: #57C7E0;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	transform: rotate(-14deg);
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.mgs-badge-heart {
	top: -2%;
	right: 14%;
	color: #FF4D7E;
	font-size: 30px;
	transform: rotate(-8deg);
}

.mgs-badge-bubble {
	top: -6%;
	right: 0;
	background: #FFE29A;
	color: var(--mgs-accent);
	padding: 12px 14px;
	border-radius: 50% 50% 6px 50%;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	max-width: 76px;
	transform: rotate(10deg);
	box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

.mgs-badge-burst {
	top: 0;
	right: 8%;
	font-size: 26px;
	color: var(--mgs-accent);
}

/* ---------- Text ---------- */
.mgs-title {
	font-family: Georgia, "Playfair Display", serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--mgs-accent);
	margin: 0 0 8px;
}

.mgs-desc {
	font-size: 13px;
	line-height: 1.5;
	color: #8b8177;
	margin: 0 0 16px;
}

/* ---------- Footer / price row ---------- */
.mgs-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mgs-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--mgs-accent);
}

.mgs-add-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--mgs-button);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px rgba(255, 61, 120, .35);
	transition: transform .15s ease;
}
.mgs-add-btn:hover { transform: scale(1.08); }
.mgs-add-btn.mgs-added { background: #38b26a; }

.mgs-empty {
	color: #8b8177;
	font-size: 14px;
}