/* ==========================================================================
   Aasthara Product Grid — Collection Grid ([our_collection_arp])
   Cards are styled to match the shop grid's product cards (same palette,
   border, radius, shadow, hover behaviour) rather than the old plain
   boxed-label design. Self-contained: defines its own copy of the
   palette variables so it renders identically whether or not the shop
   grid's .mpg-wrap is present on the same page.
   ========================================================================== */
.mpg-carp-grid {
	--carp-card: linear-gradient(160deg, #fffdfb 0%, #f7efe4 100%);
	--carp-line-strong: rgba(109, 30, 31, 0.38);
	--carp-brand: #6d1e1f;
	--carp-brand-soft: #8a2e2f;
	--carp-gold: #c9a15a;
	--carp-gold-soft: #a97a35;
	--carp-ink: #241514;
	--carp-shadow: 0 14px 36px rgba(109, 30, 31, 0.14);
	--carp-font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	box-sizing: border-box;
	font-family: var(--carp-font-ui);
}
.mpg-carp-grid *,
.mpg-carp-grid *::before,
.mpg-carp-grid *::after {
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.mpg-carp-grid {
		gap: 18px;
	}
}
@media (min-width: 780px) {
	.mpg-carp-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}
@media (min-width: 1180px) {
	.mpg-carp-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Slightly narrower cards on mobile: a little side padding on the grid
   plus a smaller gap between cards, instead of them running edge to
   edge. */
@media (max-width: 639px) {
	.mpg-carp-grid {
		padding: 0 6px;
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------
   Card — same pearl-glass-on-wine-border treatment as the shop grid's
   .mpg-card, minus the price/add-to-cart footer.
   ------------------------------------------------------------------ */
.mpg-carp-card,
.mpg-carp-card:link,
.mpg-carp-card:visited,
.mpg-carp-card:hover,
.mpg-carp-card:active,
.mpg-carp-card:focus {
	text-decoration: none !important;
}
.mpg-carp-card {
	position: relative;
	border-radius: 20px;
	background: var(--carp-card);
	border: 1.5px solid var(--carp-brand);
	box-shadow: var(--carp-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--carp-ink);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.mpg-carp-card:hover {
	transform: translateY(-2px) scale(1.025);
	box-shadow: 0 20px 46px rgba(109, 30, 31, 0.22);
	z-index: 3;
}

.mpg-carp-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f2e9df;
}
.mpg-carp-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mpg-carp-card:hover .mpg-carp-media img {
	transform: scale(1.05);
}
.mpg-carp-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 9, 7, 0) 55%, rgba(10, 9, 7, 0.55) 100%);
	pointer-events: none;
}

/* Diagonal light sweep on hover, same touch as the product cards. */
.mpg-carp-shine {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.35) 50%,
		rgba(255, 255, 255, 0) 60%
	);
	background-size: 250% 250%;
	background-position: 130% 130%;
	transition: background-position 0.7s ease;
}
.mpg-carp-card:hover .mpg-carp-shine {
	background-position: -30% -30%;
}

.mpg-carp-body {
	padding: 14px 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(250, 244, 235, 0.6));
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-top: 1px solid rgba(109, 30, 31, 0.12);
}
.mpg-carp-name {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--carp-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.mpg-carp-card:hover .mpg-carp-name {
	color: var(--carp-gold-soft);
}

/* On small screens show the shortened name (e.g. "Lifestyle" instead
   of "Lifestyle Bracelets"); desktop keeps the full category name. */
.mpg-carp-name-short {
	display: none;
}
@media (max-width: 639px) {
	.mpg-carp-name-full {
		display: none;
	}
	.mpg-carp-name-short {
		display: inline;
	}
}
.mpg-carp-arrow {
	flex-shrink: 0;
	color: var(--carp-gold);
}

@media (prefers-reduced-motion: reduce) {
	.mpg-carp-grid * {
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   Purpose Grid ([our_purposes_arp])
   Icon-forward card design (gradient panel + white line icon, dark
   footer bar) matching the reference "Shop By Purpose" layout, rather
   than the photographic collection-grid card style above.
   ========================================================================== */
.mpg-purpose-grid {
	--purpose-icon-top: #8a2e2f;
	--purpose-icon-bottom: #1a0d0d;
	--purpose-foot-bg: #150c14;
	--purpose-gold: #c9a15a;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	box-sizing: border-box;
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mpg-purpose-grid *,
.mpg-purpose-grid *::before,
.mpg-purpose-grid *::after {
	box-sizing: border-box;
}

/* Tablet: 4 per row. */
@media (min-width: 640px) and (max-width: 1023px) {
	.mpg-purpose-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
}

/* Desktop: fits as many ~120px columns as the row has room for and
   stretches them to fill it evenly — with 8 purposes and a roomy
   container that's one row of 8, but crucially it never reserves
   empty trailing columns the way a hardcoded repeat(8, 1fr) would
   when there are fewer than 8 terms (which is what was dragging the
   whole row visually toward the left). max-width + auto margins then
   center that row in the page. */
@media (min-width: 1024px) {
	.mpg-purpose-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 12px;
		max-width: 1320px;
		width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.mpg-purpose-card,
.mpg-purpose-card:link,
.mpg-purpose-card:visited,
.mpg-purpose-card:hover,
.mpg-purpose-card:active,
.mpg-purpose-card:focus {
	text-decoration: none !important;
}
.mpg-purpose-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(20, 10, 10, 0.18);
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.mpg-purpose-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(20, 10, 10, 0.28);
}

.mpg-purpose-icon-wrap {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20%;
	background: linear-gradient(165deg, var(--purpose-icon-top) 0%, var(--purpose-icon-bottom) 100%);
}
.mpg-purpose-icon-wrap svg,
.mpg-purpose-icon-wrap img {
	width: 100%;
	height: 100%;
	color: #fff;
	object-fit: contain;
}
.mpg-purpose-icon-wrap img {
	border-radius: 8px;
}

.mpg-purpose-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 6px 8px;
	background: var(--purpose-foot-bg);
}
.mpg-purpose-name {
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.mpg-purpose-arrow {
	flex-shrink: 0;
	display: flex;
	color: #fff;
	opacity: 0.85;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.mpg-purpose-arrow svg {
	width: 16px;
	height: 16px;
}
.mpg-purpose-card:hover .mpg-purpose-arrow {
	transform: translateX(2px);
	opacity: 1;
	color: var(--purpose-gold);
}

/* Tablet gets slightly larger type/icon than the compact mobile/desktop
   sizing above. */
@media (min-width: 640px) and (max-width: 1023px) {
	.mpg-purpose-icon-wrap {
		padding: 16%;
	}
	.mpg-purpose-name {
		font-size: 14px;
	}
	.mpg-purpose-foot {
		padding: 10px 12px;
	}
	.mpg-purpose-arrow svg {
		width: 22px;
		height: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpg-purpose-grid * {
		transition-duration: 0.001ms !important;
	}
}