/*
 * Miltaa Gift Cards — front-end styles.
 *
 * Colours and fonts come from the live Elementor kit rather than being
 * re-picked here, so re-colouring the site re-colours the gift card:
 *   --e-global-color-primary   #033220  deep green
 *   --e-global-color-accent    #E9BBB7  blush
 *   --e-global-color-secondary #F2EEED  warm off-white
 *   Polin (body) · Tzlotana (display)
 * The hex fallbacks are the current kit values, used if a page renders
 * outside Elementor's stylesheet — the print sheet and the emails.
 *
 * The theme sizes its type in vw, which collapses on narrow screens; these
 * components use rem and clamp() instead so the card stays legible on a phone.
 */

.mgc-scope,
.mgc-form,
.mgc-card,
.mgc-promo,
.mgc-redeem {
	--mgc-green: var( --mgc-green-set, var( --e-global-color-primary, #033220 ) );
	--mgc-blush: var( --mgc-blush-set, var( --e-global-color-accent, #E9BBB7 ) );
	--mgc-cream: var( --mgc-cream-set, var( --e-global-color-secondary, #F2EEED ) );
	--mgc-cream-light: var( --mgc-cream-light-set, var( --e-global-color-8d172ae, #F8F6F5 ) );
	--mgc-white: var( --mgc-white-set, #fff );
	--mgc-rule: var( --mgc-rule-set, color-mix( in srgb, currentColor 18%, transparent ) );
	--mgc-font-body: var( --mgc-font-body-set, "Polin", var( --e-global-typography-text-font-family, system-ui ), system-ui, sans-serif );
	--mgc-font-display: var( --mgc-font-display-set, "Tzlotana", "Polin", var( --e-global-typography-primary-font-family, system-ui ), system-ui, sans-serif );

	direction: rtl;
	text-align: right;
	font-family: var( --mgc-font-body );
	color: var( --mgc-green );
	box-sizing: border-box;
}

.mgc-form *,
.mgc-card *,
.mgc-promo *,
.mgc-redeem * {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Announcement strip
 * ---------------------------------------------------------------------- */

/*
 * The strip takes the place of the shop's static banner and matches it exactly
 * — same dark green, same Polin, same two-line shape — so the change is that
 * the message rotates, not that the site looks different.
 *
 * The original banner is hidden by CSS rather than by unhooking the snippet
 * that prints it: turning the strip off in settings brings it straight back.
 */
body:has( .mgc-ticker ) .miltaa-shipping-banner {
	display: none;
}

.mgc-ticker {
	position: relative;
	width: 100%;
	background: #1E4434;
	color: #fff;
	font-family: var( --mgc-font-body );
	font-size: 16px;
	line-height: 1.35;
	text-align: center;
	direction: rtl;
	overflow: hidden;
	z-index: 3;
	display: flex;
	align-items: stretch;
}

/*
 * Every message occupies the same grid cell, so the strip is as tall as the
 * tallest one and switching cannot nudge the page down and back.
 *
 * `minmax(0, 1fr)` and the min-width resets are what stop the strip escaping
 * the screen. A grid item defaults to `min-width: auto`, so a nowrap headline
 * widened its own track from the inside — the stage grew to the text instead
 * of the text being held to the stage, and the whole bar pushed off the
 * viewport. It also quietly broke the auto-fit, which measured against a stage
 * that had already stretched and so always concluded the text fitted.
 */
.mgc-ticker__stage {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

/*
 * The arrows say "there is more here", so they are always visible rather than
 * appearing on hover — on a phone there is no hover to reveal them with.
 *
 * `direction: ltr` is what keeps them pointing the right way. The chevrons are
 * bidi-mirrored characters: dropped into an RTL strip the browser flips them,
 * so the one meant to point left rendered pointing right. Isolating the glyph
 * from the paragraph direction stops that.
 *
 * Every state pins its own colours because the theme styles <button> with the
 * blush fill, which turned each arrow into a solid pink slab on tap.
 */
.mgc-ticker__nav,
.mgc-ticker__nav:hover,
.mgc-ticker__nav:focus,
.mgc-ticker__nav:focus-visible,
.mgc-ticker__nav:active,
.mgc-ticker__nav[disabled] {
	flex: none;
	width: 2.25rem;
	padding: 0;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	direction: ltr;
	unicode-bidi: isolate;
	color: #fff;
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity .15s ease;
}

.mgc-ticker__nav {
	opacity: .5;
}

.mgc-ticker__nav:hover,
.mgc-ticker__nav:focus-visible {
	opacity: 1;
}

.mgc-ticker__nav:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, .7 );
	outline-offset: -4px;
}

/*
 * A finger needs about 44px to hit reliably; the glyph itself stays small, so
 * the arrow is drawn at its old size inside a target big enough to tap.
 */
/*
 * A finger needs about 44px of height to hit reliably. The width is kept
 * narrower than that — two 44px columns would eat a quarter of a phone screen
 * and squeeze the message they exist to advertise.
 */
@media ( max-width: 782px ) {
	.mgc-ticker__nav,
	.mgc-ticker__nav:hover,
	.mgc-ticker__nav:focus,
	.mgc-ticker__nav:focus-visible,
	.mgc-ticker__nav:active {
		width: 30px;
		min-height: 44px;
		font-size: 1.05rem;
		opacity: .75;
	}
}

/*
 * One line on a wide screen, two at most on a phone.
 *
 * On desktop the headline and its detail sit on a single row with a dot
 * between them; on a phone they stack, each clamped to one line with the type
 * stepped down so the strip is never more than two lines tall.
 */
.mgc-ticker__item,
.mgc-ticker__item:link,
.mgc-ticker__item:visited,
.mgc-ticker__item:hover,
.mgc-ticker__item:focus,
.mgc-ticker__item:active {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 9px 12px;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease;
}

/*
 * Nothing here is ever clipped. An earlier version cut the message with an
 * ellipsis to force it onto two lines, which left half a sentence on screen —
 * useless in a banner whose whole job is to be read. The type is sized down
 * instead, and the text wraps if it still needs to.
 */
/*
 * Each part stays on one line — headline and detail — which makes the strip
 * one line wide-screen and exactly two on a phone. Nothing is clipped to
 * achieve it: the script measures each message and steps the type down until
 * it genuinely fits. If the script never runs the text spills rather than
 * disappears, which is the failure worth having.
 */
.mgc-ticker__item > strong,
.mgc-ticker__item > span {
	min-width: 0;
	white-space: nowrap;
}

/* The dot only belongs there while the two parts share a line. */
.mgc-ticker__item > span::before {
	content: "· ";
	opacity: .6;
}

@media ( max-width: 782px ) {
	.mgc-ticker__item,
	.mgc-ticker__item:link,
	.mgc-ticker__item:visited {
		flex-direction: column;
		gap: .05rem;
		padding: 6px 2px;
	}

	.mgc-ticker__item > strong,
	.mgc-ticker__item > span {
		max-width: 100%;
	}

	.mgc-ticker__item > span::before {
		content: none;
	}
}

/* With the CSS animation driving things, `is-current` is only the first
   message's starting state and the marker JS uses once a visitor takes
   manual control with the arrows. */
.mgc-ticker__item.is-current {
	opacity: 1;
	visibility: visible;
}

/* Tapping an arrow stops the automatic cycle so the message being read does
   not slide away mid-sentence. */
.mgc-ticker.is-manual .mgc-ticker__item {
	animation: none !important;
	opacity: 0;
	visibility: hidden;
}

.mgc-ticker.is-manual .mgc-ticker__item.is-current {
	opacity: 1;
	visibility: visible;
}

.mgc-ticker__item strong {
	font-weight: 400;
}

.mgc-ticker__item span {
	font-size: .875em;
	opacity: .8;
	font-weight: 100;
}

/*
 * Sized so the shop's real messages land on two lines on a phone without
 * anything being cut. A longer message wraps to a third line rather than
 * losing its ending — legible and complete beats a fixed height.
 */
@media ( max-width: 782px ) {
	.mgc-ticker {
		font-size: 13.5px;
		line-height: 1.3;
	}

	.mgc-ticker__item span {
		font-size: .85em;
	}
}

@media ( max-width: 400px ) {
	.mgc-ticker {
		font-size: 12.5px;
	}
}

a.mgc-ticker__item {
	cursor: pointer;
}

a.mgc-ticker__item strong {
	text-decoration: underline;
	text-underline-offset: .22em;
}

@media ( max-width: 520px ) {
	.mgc-ticker {
		font-size: 15px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mgc-ticker__item {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Purchase page — picture on one side, the whole form on the other
 * ---------------------------------------------------------------------- */

.mgc-purchase {
	--mgc-green: var( --mgc-green-set, var( --e-global-color-primary, #033220 ) );
	--mgc-blush: var( --mgc-blush-set, var( --e-global-color-accent, #E9BBB7 ) );
	--mgc-cream: var( --mgc-cream-set, var( --e-global-color-secondary, #F2EEED ) );
	--mgc-cream-light: var( --mgc-cream-light-set, var( --e-global-color-8d172ae, #F8F6F5 ) );
	--mgc-white: var( --mgc-white-set, #fff );
	--mgc-rule: var( --mgc-rule-set, color-mix( in srgb, currentColor 18%, transparent ) );
	--mgc-font-body: var( --mgc-font-body-set, "Polin", var( --e-global-typography-text-font-family, system-ui ), system-ui, sans-serif );
	--mgc-font-display: var( --mgc-font-display-set, "Polin", var( --e-global-typography-primary-font-family, system-ui ), system-ui, sans-serif );

	direction: rtl;
	text-align: right;
	font-family: var( --mgc-font-body );
	color: var( --mgc-green );
	box-sizing: border-box;

	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: start;
	max-width: 72rem;
	margin-inline: auto;
}

.mgc-purchase * {
	box-sizing: border-box;
}

/*
 * The theme puts `overflow-x: hidden` on <body> to stop sideways scrolling.
 * That makes the body its own scroll container, and a sticky descendant then
 * has nothing to stick inside — which is why the picture scrolled away.
 * `clip` still prevents the sideways scroll but creates no scroll container,
 * so sticky works again. Scoped to pages that actually carry this component,
 * so nothing else on the site is touched.
 */
body:has( .mgc-purchase ) {
	overflow-x: clip;
	overflow-y: visible;
}

@media ( min-width: 900px ) {
	.mgc-purchase--has-media {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
		align-items: start;
	}

	/* Picture on the left of an RTL page, panel on the right — the same
	   arrangement a WooCommerce product page uses. It stays put while the
	   fields are filled in, then releases at the end of the form. */
	/*
	 * Both pinned to row 1, and the panel left to fill whichever column the
	 * picture does not take.
	 *
	 * Without the row, anything that reorders the two — an `order` value, the
	 * widget's own "which side" control — made grid auto-placement put the
	 * panel into row 1 first and push the picture down into row 2, so the
	 * image turned up underneath the whole form instead of beside it.
	 */
	.mgc-purchase__media {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 2rem;
		align-self: start;
	}

	.mgc-purchase__panel {
		grid-column: auto;
		grid-row: 1;
	}
}

.mgc-purchase__media {
	background: var( --mgc-cream-light );
	border: 1px solid var( --mgc-rule );
	padding: clamp( .75rem, 2vw, 1.25rem );
}

.mgc-purchase__media img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Set to match the page heading exactly, measured off the live kit rather than
 * guessed: Tzlotana, 2.5vw, weight 100, #033220, normal tracking. The theme's
 * own 2.5vw would fall to about 10px on a phone, so it is clamped.
 */
.mgc-purchase__eyebrow {
	display: block;
	font-family: var( --mgc-font-display );
	font-size: clamp( 1.75rem, 2.5vw, 2.75rem );
	font-weight: 100;
	letter-spacing: normal;
	direction: ltr;

	/*
	 * Inherit, not right.
	 *
	 * The line is Latin and set direction: ltr, which makes its natural `start`
	 * the left edge — wrong on a right-to-left page. Pinning it to `right`
	 * fixed that and broke something else: aligning the block to the centre
	 * moved every line except this one, because an explicit value does not
	 * inherit. `inherit` takes the parent's alignment whatever it is, so the
	 * heading follows the design instead of arguing with it.
	 */
	text-align: inherit;
	line-height: 1.1;
	color: var( --mgc-green );
	margin-bottom: .25rem;
}

/* Now the supporting line under that heading rather than the headline itself. */
.mgc-purchase__title {
	margin: 0 0 .5rem;
	font-family: var( --mgc-font-body );
	font-size: clamp( 1rem, 1.4vw, 1.1875rem );
	font-weight: 400;
	line-height: 1.4;
	color: var( --mgc-green );
	opacity: .7;
}

.mgc-purchase__range {
	margin: 0 0 .75rem;
	font-size: clamp( 1.0625rem, 2.4vw, 1.25rem );
	color: var( --mgc-green );
}

.mgc-purchase__range .amount,
.mgc-purchase__range bdi {
	font-family: inherit;
}

.mgc-purchase__lede {
	margin: 0 0 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var( --mgc-rule );
	font-size: 1rem;
	line-height: 1.7;
	opacity: .75;
	max-width: 30rem;
}

/* -------------------------------------------------------------------------
 * Purchase form
 * ---------------------------------------------------------------------- */

.mgc-form {
	max-width: 34rem;
	margin-inline: auto;
	display: grid;
	gap: 1.5rem;
}

/* Inside the two-column layout the form fills its column instead of centring. */
.mgc-purchase .mgc-form {
	max-width: none;
	margin-inline: 0;
	gap: 1.25rem;
}

/* The form is set entirely in Polin — the display face is kept for the gift
   card artwork itself, not for interface text. */
.mgc-form {
	--mgc-font-display: var( --mgc-font-display-set, "Polin", var( --e-global-typography-primary-font-family, system-ui ), system-ui, sans-serif );
}

.mgc-field {
	display: grid;
	gap: .5rem;
	margin: 0;
	border: 0;
	padding: 0;
}

.mgc-label {
	font-family: var( --mgc-font-display );
	font-size: 1.125rem;
	font-weight: 400;
	color: var( --mgc-green );
	padding: 0;
}

.mgc-optional {
	font-family: var( --mgc-font-body );
	font-size: .8125rem;
	font-weight: 100;
	opacity: .55;
	margin-inline-start: .4em;
}

.mgc-hint {
	font-size: .8125rem;
	line-height: 1.5;
	opacity: .65;
}

.mgc-form input[type="text"],
.mgc-form input[type="email"],
.mgc-form input[type="number"],
.mgc-form input[type="date"],
.mgc-form textarea {
	width: 100%;
	padding: .75rem .9rem;
	font: inherit;
	font-size: 1rem;
	color: var( --mgc-green );
	background: var( --mgc-white );
	border: 1px solid var( --mgc-rule );
	border-radius: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mgc-form input:focus-visible,
.mgc-form textarea:focus-visible {
	outline: none;
	border-color: var( --mgc-green );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --mgc-blush ) 45%, transparent );
}

.mgc-form textarea {
	resize: vertical;
	min-height: 5.5rem;
	line-height: 1.6;
}

/* Amount chooser --------------------------------------------------------- */

.mgc-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* Chips sized to their content rather than stretched across the row, so a
   short list does not turn into four enormous slabs. */
.mgc-amount {
	position: relative;
	flex: 0 0 auto;
	min-width: 5.5rem;
}

.mgc-amount input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.mgc-amount__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	padding: .5rem .75rem;
	font-family: var( --mgc-font-display );
	font-size: 1.125rem;
	background: var( --mgc-white );
	border: 1px solid var( --mgc-rule );
	border-radius: 0;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mgc-amount input:hover + .mgc-amount__value {
	border-color: var( --mgc-green );
}

/* :has() keeps the checked state on the label; the sibling rule below is the
   fallback for browsers without it. */
.mgc-amount input:checked + .mgc-amount__value {
	background: var( --mgc-blush );
	border-color: var( --mgc-blush );
	color: var( --mgc-green );
}

.mgc-amount input:focus-visible + .mgc-amount__value {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --mgc-green ) 25%, transparent );
}

.mgc-amount .amount,
.mgc-amount bdi {
	font-family: inherit;
}

/* Delivery choice ------------------------------------------------------- */

.mgc-field--delivery {
	gap: .5rem;
}

.mgc-choice {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .85rem 1rem;
	background: var( --mgc-white );
	border: 1px solid var( --mgc-rule );
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.mgc-choice input {
	margin: .2rem 0 0;
	accent-color: var( --mgc-green );
	flex: none;
}

.mgc-choice > span {
	display: grid;
	gap: .15rem;
}

.mgc-choice strong {
	font-weight: 400;
	color: var( --mgc-green );
}

.mgc-choice:has( input:checked ) {
	border-color: var( --mgc-green );
	background: var( --mgc-cream-light );
}

/*
 * Showing and hiding the recipient's address is done in CSS, not JavaScript.
 *
 * WP Rocket delays script execution until the first interaction on this site,
 * so a JS-driven toggle does nothing on the very tap that is supposed to
 * trigger it — which is exactly the tap the customer makes. `:has()` reacts to
 * the checked radio immediately, with no script involved at all.
 *
 * The JS still manages the `required` attribute, which CSS cannot set, and the
 * [hidden] rule stays as a belt-and-braces for browsers without :has().
 */
.mgc-form:has( input[name="mgc_delivery"][value="self"]:checked ) [data-mgc-email-row] {
	display: none;
}

[data-mgc-email-row][hidden] {
	display: none;
}

.mgc-purchase__note {
	margin: -.75rem 0 1.5rem;
	padding: .85rem 1rem;
	background: var( --mgc-cream-light );
	border-inline-start: 3px solid var( --mgc-blush );
	font-size: .9375rem;
	line-height: 1.65;
}

.mgc-custom-amount {
	margin: .75rem 0 0;
}

.mgc-custom-amount[hidden] {
	display: none;
}

/* Submit ----------------------------------------------------------------- */

.mgc-form .mgc-submit {
	justify-self: stretch;
	padding: .95rem 1.5rem;
	font-family: var( --mgc-font-display );
	font-size: 1.125rem;
	font-weight: 400;
	color: var( --mgc-green );
	background: var( --mgc-blush );
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: filter .15s ease;
}

/* Same pinning as the promo button: the theme styles .button on hover and
   would otherwise repaint the label into the background. */
.mgc-form button.mgc-submit,
.mgc-form button.mgc-submit:hover,
.mgc-form button.mgc-submit:focus,
.mgc-form button.mgc-submit:focus-visible,
.mgc-form button.mgc-submit:active {
	color: var( --mgc-green );
	border: 0;
	border-radius: 0;
}

/*
 * Hover follows the site, not a colour picked for the first shop.
 *
 * These three rules carried #ddaaa5, a darker Miltaa pink, as a literal. On any
 * other store the gold button turned pink under the cursor. The site's own
 * add-to-cart buttons go to the kit's primary colour with light text on hover,
 * so these do the same, and a shop that set different colours in Elementor
 * gets its own.
 */
.mgc-form button.mgc-submit:hover,
.mgc-form button.mgc-submit:focus-visible {
	background: var( --mgc-green );
	color: var( --mgc-white );
}

.mgc-terms {
	font-size: .75rem;
	line-height: 1.6;
	opacity: .6;
	margin: 0;
}

.mgc-counter {
	min-height: 1.2em;
}

/* -------------------------------------------------------------------------
 * The card itself — mirrors the printed mockup.
 * Used on the print sheet and the order-received screen.
 * ---------------------------------------------------------------------- */

.mgc-card {
	position: relative;
	width: min( 100%, 30rem );
	aspect-ratio: 1.6 / 1;
	margin-inline: auto;
	padding: clamp( 1.25rem, 4vw, 2.25rem );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	text-align: center;
	background: var( --mgc-cream-light );
	border-radius: 0;
	box-shadow: 0 10px 30px rgba( 3, 50, 32, .08 );
}

.mgc-card__logo {
	width: clamp( 7rem, 34%, 11rem );
	height: auto;
}

.mgc-card__title {
	margin: 0;
	font-family: var( --mgc-font-body );
	font-size: clamp( 1rem, 3.4vw, 1.5rem );
	font-weight: 400;
	letter-spacing: .32em;
	/* The word sits in Latin caps inside an RTL card; force its direction so
	   the spacing does not push the last letter to the wrong side. */
	direction: ltr;
	color: var( --mgc-green );
}

.mgc-card__heart {
	color: var( --mgc-blush );
	font-size: 1.25rem;
	line-height: 1;
}

.mgc-card__rule {
	width: min( 70%, 16rem );
	height: 1px;
	border: 0;
	margin: .25rem 0;
	background: var( --mgc-rule );
}

.mgc-card__tagline {
	margin: 0;
	font-size: clamp( .8125rem, 2.4vw, 1rem );
	line-height: 1.7;
	max-width: 22rem;
}

.mgc-card__amount {
	font-family: var( --mgc-font-display );
	font-size: clamp( 1.75rem, 6vw, 2.75rem );
	line-height: 1;
	color: var( --mgc-green );
}

.mgc-card__code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: clamp( .875rem, 3vw, 1.125rem );
	letter-spacing: .18em;
	direction: ltr;
	padding: .5rem .9rem;
	background: var( --mgc-white );
	border: 1px dashed var( --mgc-rule );
	border-radius: 0;
}

.mgc-card__code-label {
	font-size: .75rem;
	opacity: .6;
	margin: 0;
}

.mgc-card__message {
	font-size: .9375rem;
	line-height: 1.7;
	font-style: italic;
	max-width: 24rem;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Promo blocks — home page and cart
 * ---------------------------------------------------------------------- */

.mgc-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	background: var( --mgc-cream );
	border-radius: 0;
}

/* The home block: a framed feature panel with the card photograph. */
.mgc-promo--feature {
	--mgc-frame: color-mix( in srgb, var( --mgc-blush ) 55%, transparent );

	position: relative;
	max-width: 68rem;
	margin-inline: auto;
	padding: clamp( 1.25rem, 3.5vw, 2.75rem );
	gap: clamp( 1.5rem, 4vw, 3rem );
	background:
		radial-gradient( 120% 140% at 100% 0%, color-mix( in srgb, var( --mgc-blush ) 22%, transparent ) 0%, transparent 55% ),
		var( --mgc-cream-light );
	border: 1px solid var( --mgc-frame );
	border-radius: 0;
	box-shadow: 0 18px 48px -24px rgba( 3, 50, 32, .35 );
	overflow: hidden;
}

/* An inner hairline, a couple of pixels in from the border — the detail that
   reads as "printed stationery" rather than "div with a border". */
.mgc-promo--feature::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba( 3, 50, 32, .09 );
	border-radius: 0;
	pointer-events: none;
}

.mgc-promo--feature.mgc-promo--has-image {
	flex-wrap: nowrap;
}

.mgc-promo__figure {
	flex: 0 1 46%;
	display: block;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 14px 34px -18px rgba( 3, 50, 32, .5 );
	transition: transform .35s ease;
}

.mgc-promo__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.mgc-promo__figure:hover {
	transform: translateY( -3px );
}

.mgc-promo__body {
	flex: 1 1 18rem;
	display: grid;
	gap: .35rem;
	position: relative;
	z-index: 1;
}

.mgc-promo--feature .mgc-promo__body {
	gap: .6rem;
	justify-items: start;
	padding-block: clamp( 0rem, 2vw, 1rem );
}

.mgc-promo__eyebrow {
	font-size: .75rem;
	letter-spacing: .34em;
	direction: ltr;
	opacity: .55;
	line-height: 1;
	margin-bottom: .2rem;
}

.mgc-promo__heading {
	margin: 0;
	font-family: var( --mgc-font-display );
	font-size: clamp( 1.125rem, 3vw, 1.625rem );
	font-weight: 400;
	color: var( --mgc-green );
}

.mgc-promo--feature .mgc-promo__heading {
	font-size: clamp( 1.375rem, 3.2vw, 2.125rem );
	line-height: 1.25;
}

.mgc-promo__text {
	margin: 0;
	font-size: clamp( .9375rem, 2.2vw, 1.0625rem );
	line-height: 1.6;
	opacity: .8;
}

.mgc-promo--feature .mgc-promo__text {
	font-size: clamp( 1rem, 2.4vw, 1.1875rem );
	opacity: .75;
	max-width: 26rem;
}

.mgc-promo--feature .mgc-promo__cta {
	margin-top: .65rem;
	padding: 1rem 2rem;
	font-size: 1rem;
	box-shadow: 0 10px 24px -14px rgba( 3, 50, 32, .55 );
}

.mgc-promo__note {
	margin: .35rem 0 0;
	font-size: .8125rem;
	line-height: 1.7;
	opacity: .6;
}

.mgc-promo__note .amount,
.mgc-promo__note bdi {
	font-family: inherit;
}

/* Stack on anything narrower than a small laptop; the photo leads. */
@media ( max-width: 860px ) {
	.mgc-promo--feature.mgc-promo--has-image {
		flex-wrap: wrap;
	}

	.mgc-promo__figure {
		flex: 1 1 100%;
	}

	.mgc-promo--feature .mgc-promo__body {
		justify-items: center;
		text-align: center;
	}

	.mgc-promo--feature .mgc-promo__text {
		max-width: none;
	}
}

/*
 * The theme colours every <a> — including on hover — and its rule was winning,
 * which painted the label the same blush as the button and made the text
 * vanish. Every state is pinned here, at a specificity the theme cannot beat,
 * and the hover darkens the background rather than filtering the whole button.
 */
.mgc-promo a.mgc-promo__cta,
.mgc-promo a.mgc-promo__cta:link,
.mgc-promo a.mgc-promo__cta:visited,
.mgc-promo a.mgc-promo__cta:hover,
.mgc-promo a.mgc-promo__cta:focus,
.mgc-promo a.mgc-promo__cta:focus-visible,
.mgc-promo a.mgc-promo__cta:active {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .95rem 1.9rem;
	font-family: var( --mgc-font-body );
	font-size: .9375rem;
	letter-spacing: .12em;
	text-decoration: none;
	color: var( --mgc-green );
	background: var( --mgc-blush );
	border: 0;
	border-radius: 0;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.mgc-promo a.mgc-promo__cta:hover,
.mgc-promo a.mgc-promo__cta:focus-visible {
	background: var( --mgc-green );
	color: var( --mgc-white );
}

.mgc-promo a.mgc-promo__cta:focus-visible {
	outline: 2px solid var( --mgc-green );
	outline-offset: 2px;
}

/* The arrow points along the reading direction, so it flips in RTL. */
.mgc-promo__cta::after {
	content: "←";
	font-size: 1.1em;
	line-height: 1;
}

.mgc-promo--cart {
	background: var( --mgc-cream-light );
	margin-block: 1.5rem;
}

/* -------------------------------------------------------------------------
 * Redeeming a card in the cart / checkout
 * ---------------------------------------------------------------------- */

/*
 * Its own panel, matching the coupon box it sits beside: full-width field, a
 * full-width button under it. Previously this rendered inside the totals
 * table, which on a phone squeezed the field and left a small button floating
 * against one edge.
 */
.mgc-redeem {
	margin-block: 1.25rem;
	padding: clamp( 1rem, 4vw, 1.25rem );
	border: 1px solid var( --mgc-blush );
	background: var( --mgc-cream-light );
}

.mgc-redeem__label {
	display: block;
	margin: 0 0 .6rem;
	font-size: 1rem;
	text-align: center;
	color: var( --mgc-green );
}

.mgc-redeem__toggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var( --mgc-green );
	text-decoration: underline;
	text-underline-offset: .25em;
	cursor: pointer;
}

.mgc-redeem__form {
	display: grid;
	gap: .5rem;
	margin-top: 0;
}

.mgc-redeem__form input {
	width: 100%;
	padding: .85rem .9rem;
	font: inherit;
	letter-spacing: .12em;
	text-transform: uppercase;
	direction: ltr;
	text-align: center;
	color: var( --mgc-green );
	background: var( --mgc-white );
	border: 1px solid var( --mgc-rule );
	border-radius: 0;
}

.mgc-redeem__form input::placeholder {
	letter-spacing: normal;
	text-transform: none;
}

/* Pinned across every state for the same reason as the promo button: the
   theme repaints .button labels on hover and would hide the text. */
.mgc-redeem__form button,
.mgc-redeem__form button:hover,
.mgc-redeem__form button:focus,
.mgc-redeem__form button:focus-visible,
.mgc-redeem__form button:active {
	width: 100%;
	padding: .85rem 1.4rem;
	font: inherit;
	color: var( --mgc-green );
	background: var( --mgc-blush );
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.mgc-redeem__form button:hover,
.mgc-redeem__form button:focus-visible {
	background: var( --mgc-green );
	color: var( --mgc-white );
}

.mgc-redeem__form button[disabled] {
	opacity: .6;
	cursor: default;
}

/* Side by side once there is room for it. */
@media ( min-width: 600px ) {
	.mgc-redeem__form {
		grid-template-columns: 1fr auto;
		align-items: stretch;
	}

	.mgc-redeem__form button,
	.mgc-redeem__form button:hover,
	.mgc-redeem__form button:focus,
	.mgc-redeem__form button:focus-visible,
	.mgc-redeem__form button:active {
		width: auto;
		padding-inline: 2rem;
	}
}

.mgc-redeem__notice {
	margin: .6rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
}

.mgc-redeem__notice--error {
	color: #8a2b2b;
}

.mgc-redeem__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .75rem 1rem;
	margin-top: .5rem;
	background: var( --mgc-cream-light );
	border: 1px solid var( --mgc-rule );
	border-radius: 0;
	font-size: .9375rem;
}

.mgc-redeem__remove {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .8125rem;
	color: var( --mgc-green );
	opacity: .7;
	text-decoration: underline;
	cursor: pointer;
}

.mgc-redeem__code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .1em;
	direction: ltr;
	display: inline-block;
}

@media ( prefers-reduced-motion: reduce ) {
	.mgc-form input,
	.mgc-form textarea,
	.mgc-amount__value,
	.mgc-promo__cta,
	.mgc-form .mgc-submit {
		transition: none;
	}
}