:root {
	--ma-card-accent: #0f5a4a;
	--ma-card-accent-text: #ffffff;
}

.ma-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--ma-columns, 4), minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
	margin-bottom: 48px;
}
@media (max-width: 900px) {
	.ma-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ma-card-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
}

.ma-card {
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	background: #fff;
	border: 1px solid #e5e5e2;
	border-radius: 14px;
	padding: 18px;
	text-align: center;
	font-family: inherit;
}
/* Simple products with no variation list ("custom"/"fixed" mode) are
   naturally much shorter than variable-product cards. A short card sitting
   right before a theme section with a fixed negative pull-up (e.g. WoodMart's
   "negative gap" sections) can get its own bottom content (buttons) visually
   swallowed by that section, since the fixed pull-up doesn't know how tall
   the card actually is. Giving these shorter cards a sane minimum height
   keeps them closer to a normal card's footprint, so they stop being the
   one short card a fixed external pull-up can reach into. */
.ma-card[data-mode="custom"], .ma-card[data-mode="fixed"] {
	min-height: 380px;
}
.ma-card--clickable { cursor: pointer; }

.ma-card__media { margin-bottom: 12px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; }
.ma-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }

.ma-card__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #1c1c1a; }
.ma-card__desc { font-size: 13px; color: #6b6b66; margin-bottom: 10px; }

.ma-card__price { font-size: 18px; font-weight: 800; color: var(--ma-card-accent); margin-bottom: 14px; }
.ma-card__price del { opacity: 0.6; font-weight: 400; font-size: 14px; }

/* Variation buttons */
.ma-card__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ma-card__opt {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 1.5px solid #e5e5e2; border-radius: 10px;
	padding: 10px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: #1c1c1a; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ma-card__opt:hover { border-color: var(--ma-card-accent); }
.ma-card__opt.is-selected { border-color: var(--ma-card-accent); background: rgba(15,90,74,.06); }
.ma-card__opt strong { color: var(--ma-card-accent); }

/* Amount pills + custom input */
.ma-card__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-width: 0; }
.ma-card__amount-btn {
	flex: 1 1 auto; min-width: 44px; background: #fff; border: 1.5px solid #e5e5e2;
	border-radius: 10px; padding: 9px 6px; font-family: inherit; font-size: 12.5px;
	font-weight: 700; color: #1c1c1a; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ma-card__amount-btn:hover { border-color: var(--ma-card-accent); }
.ma-card__amount-btn.is-selected { border-color: var(--ma-card-accent); background: var(--ma-card-accent); color: var(--ma-card-accent-text); }

.ma-card__custom-label {
	display: block; text-align: right; font-size: 12.5px; font-weight: 700;
	color: #1c1c1a; margin-bottom: 6px;
}
.ma-card__custom-hint { font-weight: 400; color: #8a8a84; font-size: 11.5px; }

.ma-card__amount-input {
	display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 14px;
	border: 1.5px solid #e5e5e2; border-radius: 10px; font-family: inherit; font-size: 13.5px;
	color: #1c1c1a; text-align: center;
}
.ma-card__amount-input:focus { outline: none; border-color: var(--ma-card-accent); }

.ma-card__amount-wrap { margin-bottom: 14px; text-align: right; }

.ma-card__error { color: #b32d2e; font-size: 12.5px; margin: 0 0 10px; }

/* Two action buttons — pinned to the bottom of the card, regardless of how
   much content (price tiers, description, etc.) sits above it, so buttons
   stay aligned across cards of different content heights in the same grid row */
.ma-card__actions { display: flex !important; gap: 8px; min-width: 0; margin-top: auto !important; padding-top: 14px; position: relative; z-index: 2; }
.ma-card__btn {
	flex: 1; min-width: 0; border-radius: 10px; padding: 12px 8px; font-family: inherit;
	font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent;
	transition: filter .2s ease, background .2s ease;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-card__btn--outline {
	background: #fff; border-color: var(--ma-card-accent); color: var(--ma-card-accent);
}
.ma-card__btn--outline:hover { background: rgba(15,90,74,.06); }

.ma-card__btn--solid {
	background: var(--ma-card-accent); color: var(--ma-card-accent-text);
}
.ma-card__btn--solid:hover { filter: brightness(0.9); }

.ma-card__btn.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 480px) {
	.ma-card { padding: 14px; }
	.ma-card__actions { flex-direction: column; }
}

/* Dedicate ("اهداء") field — hidden by default, self-contained so the card
   works correctly on any site/theme without relying on external CSS. */
.ma-card__dedicate { margin-bottom: 12px; }
.ma-card__dedicate .qd-dedicate-toggle {
	display: flex; align-items: center; gap: 8px; cursor: pointer;
	font-size: 13px; color: #1F2A24;
}
.ma-card__dedicate .qd-dedicate-toggle input[type="checkbox"] {
	width: 16px; height: 16px; margin: 0; accent-color: var(--ma-card-accent);
}
.ma-card__dedicate-name-wrap {
	display: none;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .2s ease, opacity .2s ease;
}
.ma-card__dedicate-name-wrap.qd-open {
	display: block;
	max-height: 60px;
	opacity: 1;
	margin-top: 8px;
}
.ma-card__dedicate-name {
	width: 100%; box-sizing: border-box; border: 1px solid #E3DFD3; border-radius: 8px;
	padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: #1F2A24;
}
.ma-card__dedicate-name:focus { outline: none; border-color: var(--ma-card-accent); }