/* Moon Mother Gift Cards — matches the approved canvas design. Uses the theme's colour tokens when present. */
:root {
  --mmgc-green: var(--mm-green, #4A5646);
  --mmgc-green-soft: var(--mm-green-soft, #E3E7DF);
  --mmgc-paper: var(--mm-paper, #FFFDF8);
  --mmgc-input: var(--mm-input, #FAF8F1);
  --mmgc-clay: var(--mm-clay, #8A5F4F);
  --mmgc-ink: var(--mm-ink, #3F3E3B);
  --mmgc-text: var(--mm-text, #57564F);
  --mmgc-muted: var(--mm-muted, #63625C);
  --mmgc-line: var(--mm-line, #DCD8C8);
  --mmgc-field: var(--mm-field-line, #A9B5A6);
  --mmgc-error: var(--mm-error, #9A3B2E);
  --mmgc-serif: var(--mm-serif, Aleo, Georgia, serif);
  --mmgc-sans: var(--mm-sans, Montserrat, 'Helvetica Neue', Arial, sans-serif);
}

/* ---------- buttons ---------- */
.mmgc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--mmgc-green); color: var(--mmgc-paper);
  font: 600 14px/1 var(--mmgc-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.mmgc-btn:hover { filter: brightness(1.1); color: var(--mmgc-paper); }
.mmgc-btn:focus-visible { outline: 2px solid var(--mmgc-green); outline-offset: 2px; }
.mmgc-btn--outline { background: transparent; color: var(--mmgc-green); border: 1.5px solid var(--mmgc-green); min-height: 44px; font-size: 13px; }
.mmgc-btn--outline:hover { background: var(--mmgc-green); color: var(--mmgc-paper); filter: none; }

/* ---------- product page form ---------- */
.mmgc-form {
  display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; padding: 24px;
  background: var(--mmgc-paper); border: 1px solid var(--mmgc-line); border-radius: 12px;
  font-family: var(--mmgc-sans); color: var(--mmgc-text);
}
.mmgc-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--mmgc-ink); margin: 0; }
.mmgc-form input[type=text], .mmgc-form input[type=email], .mmgc-form input[type=date], .mmgc-form textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; font: 400 15px var(--mmgc-sans); color: var(--mmgc-ink);
  border: 1px solid var(--mmgc-field); border-radius: 8px; background: var(--mmgc-input);
}
.mmgc-form textarea { padding: 10px 12px; resize: vertical; min-height: 84px; }
.mmgc-form input:focus, .mmgc-form textarea:focus { outline: 2px solid var(--mmgc-green); outline-offset: 1px; border-color: var(--mmgc-green); }
.mmgc-form .mmgc-date { max-width: 240px; }
.mmgc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .mmgc-grid { grid-template-columns: 1fr; } }
.mmgc-optional { font-weight: 400; color: var(--mmgc-muted); }
.mmgc-help { margin: -8px 0 0; font-size: 13px; color: var(--mmgc-muted); }

.mmgc-amounts { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mmgc-amounts legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 14px; color: var(--mmgc-ink); width: 100%; }
.mmgc-pill { position: relative; margin: 0 !important; cursor: pointer; display: inline-flex !important; }
.mmgc-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mmgc-pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--mmgc-field); background: var(--mmgc-input); color: var(--mmgc-ink); font: 600 15px var(--mmgc-sans);
}
.mmgc-pill input:checked + span { background: var(--mmgc-green); border-color: var(--mmgc-green); color: var(--mmgc-paper); }
.mmgc-pill input:focus-visible + span { outline: 2px solid var(--mmgc-green); outline-offset: 2px; }

.mmgc-perks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font: 400 14px var(--mmgc-sans); color: var(--mmgc-text); }
.mmgc-perks li { display: flex; gap: 10px; align-items: center; margin: 0; }
.mmgc-perks svg { color: var(--mmgc-green); flex: 0 0 auto; }
.mmgc-perks-link { margin: 12px 0 0; font: 400 14px var(--mmgc-sans); }
.mmgc-perks-link a { color: var(--mmgc-green); }

/* ---------- the card (website) ---------- */
.mmgc-card-wrap { width: 100%; max-width: 440px; container-type: inline-size; }
.mmgc-card-wrap--tilt { transform: rotate(-3deg); }
.mmgc-card {
  position: relative; display: block; width: 100%; aspect-ratio: 800 / 504; overflow: hidden; border-radius: 3.5cqw;
  box-shadow: 0 24px 36px rgba(63, 62, 59, .2); font-family: var(--mmgc-sans);
  --bg: #F1EEE2; --ink: #3F3E3B; --frame: #4A5646; --clay: #8A5F4F; --band: #4A5646; --bandText: #E1E6DD;
  background: var(--bg);
}
.mmgc-card--green { --bg: #4A5646; --ink: #FFFDF8; --frame: #E3CBC2; --clay: #E3CBC2; --band: #3E3D3A; }
.mmgc-card--wnavy { --bg: #3D4463; --ink: #FFFDF8; --frame: #A9ADDA; --clay: #C3C6E8; --band: #2B3048; --bandText: #E4E5F2; }
.mmgc-card--woat { --bg: #F1EEE2; --ink: #3D4463; --frame: #3D4463; --clay: #5A5F8A; --band: #3D4463; --bandText: #E4E5F2; }
.mmgc-card__frame { position: absolute; inset: 2.25cqw; border: max(1px, .19cqw) solid var(--frame); border-radius: 2cqw; }
.mmgc-card__frame--inner { inset: 3.25cqw; border-width: 1px; opacity: .45; border-radius: 1.4cqw; }
.mmgc-card__logo { position: absolute; left: 12.5%; top: 8cqw; width: 75%; height: auto; }
.mmgc-card__label, .mmgc-card__amount, .mmgc-card__title { position: absolute; left: 0; right: 0; text-align: center; line-height: 1; color: var(--ink); }
.mmgc-card__label { top: 22.2cqw; font-weight: 600; font-size: 3.75cqw; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--clay); }
.mmgc-card__amount { top: 32cqw; font-family: var(--mmgc-serif); font-size: 11.5cqw; }
.mmgc-card__title { top: 28cqw; font-family: var(--mmgc-serif); font-style: italic; font-size: 12cqw; }
.mmgc-card__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14cqw; background: var(--band); color: var(--bandText);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw;
  font-weight: 500; font-size: 3.75cqw; line-height: 1.15; letter-spacing: .02em;
}

/* ---------- balance page ---------- */
.mmgc-balance-page { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; margin: 24px 0 48px; font-family: var(--mmgc-sans); color: var(--mmgc-text); }
.mmgc-balance-page__art { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; padding: 12px; }
.mmgc-balance-page__main { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mmgc-balance-page__title { margin: 0; font-family: var(--mmgc-serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; color: var(--mmgc-ink); }
.mmgc-balance-page__lede { margin: 0; max-width: 46ch; }
.mmgc-balance-page__help p { margin: 0 0 6px; font-size: 14px; color: var(--mmgc-muted); }
.mmgc-balance-page__help strong { color: var(--mmgc-clay); }
.mmgc-balance-page__help a { color: var(--mmgc-green); }

.mmgc-balance { display: flex; flex-direction: column; gap: 10px; background: var(--mmgc-paper); border: 1px solid var(--mmgc-line); border-radius: 12px; padding: 22px; margin: 0; }
.mmgc-balance label { font-weight: 600; font-size: 14px; color: var(--mmgc-ink); }
.mmgc-result { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--mmgc-green-soft); border-radius: 10px; padding: 16px 18px; }
.mmgc-result[hidden] { display: none; }
.mmgc-result__card { font-size: 13px; color: #3c4739; }
.mmgc-result__amount span { font-family: var(--mmgc-serif); font-size: 34px; line-height: 1.1; color: var(--mmgc-ink); }
.mmgc-result__amount small { font-size: 14px; color: var(--mmgc-text); }

/* ---------- gift card box (cart + checkout) ---------- */
.mmgc-redeem { margin: 16px 0; padding: 16px; background: var(--mmgc-green-soft); border-radius: 10px; font-family: var(--mmgc-sans); }
.mmgc-redeem label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--mmgc-ink); }
.mmgc-redeem-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mmgc-redeem-row input {
  flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 0 12px; font: 400 16px var(--mmgc-sans); letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--mmgc-field); border-radius: 8px; background: var(--mmgc-input); color: var(--mmgc-ink); box-sizing: border-box;
}
.mmgc-redeem-row .mmgc-btn { flex: 0 0 auto; min-height: 46px; }
.mmgc-msg { margin: 8px 0 0; font-size: 14px; min-height: 0; }
.mmgc-msg:empty { display: none; }
.mmgc-msg.err { color: var(--mmgc-error); }
.mmgc-msg.ok { color: #3f5e44; }
.mmgc-total-row th, .mmgc-total-row td { color: var(--mmgc-clay); font-weight: 600; }
.mmgc-total-row .mmgc-remove { font-weight: 400; font-size: 13px; margin-left: 6px; color: var(--mmgc-green); }
.mmgc-total-row .mmgc-left { display: block; font-weight: 400; font-size: 13px; color: var(--mmgc-muted); margin-top: 2px; }