/* MEIMX storefront: stacks page styles (design-system components live in ../meimx-ds.css).
   Research stacks (meimx/stacks) and the NAD+ / GHK-Cu campaign landing (meimx/campaign). Measured from atlas-stacks / atlas-campaign. */

/* ---------- Research stacks ---------- */
.mx-stacks-hero .mx-h1 { margin-top: 0; }
.mx-stacks { display: grid; gap: 24px; padding-top: 56px; }
.mx-stack-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 538px); align-items: center; column-gap: clamp(24px, 4vw, 56px); padding: 56px; border-radius: var(--mx-r-2xl); background: var(--mx-mint); color: var(--mx-green-4); }
.mx-stack-card--cream { background: var(--mx-cream); }
.mx-stack-card--mint-2 { background: var(--mx-mint-2); }
.mx-stack-card__body { min-width: 0; }
.mx-stack-card__tags { margin-bottom: 20px; }
.mx-stack-card__tags .mx-tag { min-height: 32px; padding: 0 14px; }
.meimx-site .mx-stack-card__name { margin: 0; }
.mx-stack-card__composition { display: grid; gap: 6px; max-width: 520px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.55; }
.mx-stack-card__composition a { color: var(--mx-green-4); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mx-stack-card__composition a:hover { color: var(--mx-green-3); opacity: 1; }
.mx-stack-card__meta { color: var(--mx-muted); font-size: 15px; }
.mx-stack-card__meta::before { content: "\2014"; margin: 0 8px; color: var(--mx-muted-2); }
.mx-stacks .is-out, .mx-campaign-page .is-out { color: var(--mx-coral); }
.mx-stack-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 0; }
.mx-stack-card__now { font-size: 36px; line-height: 1; color: var(--mx-green-3); }
.mx-stack-card__was { font-size: 18px; line-height: 1; color: var(--mx-muted); }
.mx-stack-card__note { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--mx-muted); }
.mx-stack-card__note a { color: var(--mx-green-4); }
.mx-stack-card__actions { margin-top: 20px; }
.mx-stack-card__actions .mx-btn { gap: 10px; }
.mx-stack-bag { flex: none; }
.mx-stack-card__problems { margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5; }
.mx-stack-card__problems p { margin: 0; }
.mx-stack-card__problems ul, .mx-stack-card__status ul { margin: 4px 0 0; padding-left: 20px; }
.mx-stack-card__status:empty { display: none; }
.mx-stack-card__status { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5; }
.mx-stack-card__status p { margin: 0; }
.mx-stack-card__status.is-error { color: #9d2b26; box-shadow: inset 3px 0 0 var(--mx-coral); }
.mx-stack-card__status.is-success { box-shadow: inset 3px 0 0 var(--mx-green-3); }
.mx-stack-card__status a { color: var(--mx-green-4); text-decoration: underline; text-underline-offset: 3px; }
.mx-stack-card__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-stack-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 263 / 351; object-fit: cover; border-radius: 24px; background: var(--mx-cream); }
.mx-stack-card__media img:only-child { grid-column: 1 / -1; aspect-ratio: 538 / 351; }
.mx-stack-card__detail { grid-column: 1 / -1; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(31, 72, 85, .16); }
.mx-stack-detail { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.mx-stack-detail__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; padding: 24px 28px; border-radius: 20px; background: rgba(255, 255, 255, .72); }
.mx-stack-detail__item p { margin: 0; }
.mx-stack-detail__name { font-size: 20px; line-height: 1.3; }
.mx-stack-detail__facts { margin-top: 6px !important; font-size: 14px; color: var(--mx-muted); }
.mx-stack-detail__summary { max-width: 640px; margin-top: 10px !important; font-size: 16px; line-height: 1.55; }
.mx-stack-detail__side { display: grid; align-content: start; justify-items: end; gap: 6px; text-align: right; font-size: 15px; }
.mx-stack-detail__price { font-size: 20px; color: var(--mx-green-3); }
.mx-stack-detail__price span { font-size: 14px; color: var(--mx-muted); }
.mx-stacks-empty { max-width: 720px; }

@media (max-width: 1199.98px) {
  .mx-stack-card { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding: 40px; }
}
@media (max-width: 899.98px) {
  .mx-stack-card { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .mx-stack-card__detail { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .mx-stacks { gap: 16px; padding-top: 32px; }
  .mx-stack-card { padding: 24px; }
  .mx-stack-card__tags { margin-bottom: 16px; }
  .mx-stack-card__now { font-size: 28px; }
  .mx-stack-card__actions { flex-direction: column; align-items: flex-start; }
  .mx-stack-detail__item { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .mx-stack-detail__side { justify-items: start; text-align: left; }
}

/* ---------- Campaign landing ---------- */
.mx-campaign-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 614px); align-items: center; gap: clamp(24px, 4vw, 56px); padding-top: 36px; }
.mx-campaign-hero .mx-lead { max-width: 520px; margin-top: 22px; }
.mx-campaign-checks { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.mx-campaign-checks li { display: flex; align-items: flex-start; gap: 12px; }
.mx-check-icon { flex: none; margin-top: 2px; color: var(--mx-green-3); }
.mx-campaign-hero .mx-actions { margin-top: 28px; }
.mx-campaign-hero__media { position: relative; padding: 20px 0; }
.mx-campaign-hero__frame { position: relative; overflow: hidden; aspect-ratio: 614 / 768; border-radius: var(--mx-r-2xl); background: var(--mx-cream); }
/* The source photo has thin white letterbox bands top and bottom; overscan crops them. */
.mx-campaign-hero__frame img { position: absolute; top: -8%; left: 0; display: block; width: 100%; height: 116%; object-fit: cover; object-position: 40% 50%; }
.mx-campaign-hero__label { position: absolute; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(31, 72, 85, .12); font-size: 14px; font-weight: 500; line-height: 1; color: var(--mx-green-4); white-space: nowrap; }
.mx-campaign-hero__label--top { top: 0; left: 24px; }
.mx-campaign-hero__label--bottom { right: 24px; bottom: 0; }

.mx-campaign-compounds { margin-top: 40px; }
.mx-campaign-compound { display: flex; flex-direction: column; padding: 40px; border-radius: var(--mx-r-2xl); background: var(--mx-mint); color: var(--mx-green-4); }
.meimx-site .mx-campaign-compound__name { margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--mx-font); letter-spacing: -.01em; color: var(--mx-green-4); }
.mx-campaign-compound__name a { color: inherit; text-decoration: none; }
.mx-campaign-compound__name a:hover { color: var(--mx-green-3); opacity: 1; }
.mx-campaign-compound__name a:focus-visible { outline: 2px solid var(--mx-green-4); outline-offset: 3px; }
.mx-campaign-compound__summary { margin: 16px 0 0; font-size: 16px; line-height: 1.55; }
.mx-campaign-compound__facts { margin: 16px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.9; }
.mx-campaign-compound__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(31, 72, 85, .16); }
.mx-campaign-compound__facts + .mx-campaign-compound__foot { margin-top: 24px; }
.mx-campaign-compound__price { margin: 0; font-size: 15px; color: var(--mx-green-3); }

.mx-campaign-packs { scroll-margin-top: 96px; }
.mx-campaign-packs:focus { outline: none; }
.mx-campaign-packs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }
.mx-campaign-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.meimx-site .mx-campaign-tabs .mx-pill[aria-selected="true"] { background: var(--mx-mint); border-color: var(--mx-mint-2); color: var(--mx-green-4); }
.meimx-site .mx-campaign-tabs .mx-pill:focus-visible { outline: 2px solid var(--mx-green-4); outline-offset: 2px; }
.mx-campaign-pack-list { margin: 0; padding: 0; list-style: none; }
.mx-campaign-pack { display: flex; flex-direction: column; padding: 38px; border-radius: 24px; background: #fff; box-shadow: var(--mx-shadow-card); }
.mx-campaign-pack p { margin: 0; }
.mx-campaign-pack__label { font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--mx-green-3); }
.mx-campaign-pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 20px !important; }
.mx-campaign-pack__price span { font-size: clamp(36px, 3.4vw, 48px); line-height: 1; color: var(--mx-green-4); }
.mx-campaign-pack__price small { font-size: 15px; color: var(--mx-muted); }
.mx-campaign-pack__total { margin-top: 14px !important; font-size: 15px; line-height: 1.5; color: var(--mx-muted); }
.mx-campaign-pack__total strong { font-weight: 500; color: var(--mx-green-4); }
.mx-campaign-pack__detail { margin-top: 12px !important; font-size: 14px; line-height: 1.5; color: var(--mx-muted); }
.mx-campaign-pack__problem { margin-top: 12px !important; font-size: 14px; color: var(--mx-coral); }
.mx-campaign-pack .mx-btn { margin-top: auto; }
.mx-campaign-pack__detail + .mx-btn, .mx-campaign-pack__problem + .mx-btn { margin-top: 28px; }
.mx-campaign-packs__status { margin-top: 16px; background: var(--mx-mint); }
.mx-campaign-note { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0 0; padding: 16px 24px; border-radius: 16px; background: var(--mx-mint); font-size: 15px; line-height: 1.55; color: var(--mx-green-4); }
.mx-campaign-note svg { flex: none; margin-top: 2px; color: var(--mx-green-3); }

.mx-campaign-cta { display: grid; justify-items: center; gap: 20px; padding: clamp(48px, 7vw, 104px) clamp(24px, 4vw, 56px); border-radius: var(--mx-r-2xl); background: #fff; text-align: center; }
.mx-campaign-cta p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.5; color: var(--mx-green-4); }

@media (max-width: 991.98px) {
  .mx-campaign-hero { grid-template-columns: minmax(0, 1fr); }
  .mx-campaign-hero__media { max-width: 614px; }
  .mx-campaign-pack-list.mx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-campaign-pack { padding: 28px 22px; }
}
@media (max-width: 767.98px) {
  .mx-campaign-pack-list.mx-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .mx-campaign-hero { padding-top: 24px; }
  .mx-campaign-hero__frame { aspect-ratio: 4 / 5; border-radius: 32px; }
  .mx-campaign-hero__label { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .mx-campaign-hero__label--top { left: 16px; }
  .mx-campaign-hero__label--bottom { right: 16px; }
  .mx-campaign-compounds { margin-top: 24px; }
  .mx-campaign-compound { padding: 28px 24px; border-radius: 32px; }
  .mx-campaign-pack { padding: 28px 24px; }
  .mx-campaign-packs__head { margin-bottom: 24px; }
  .mx-campaign-tabs { width: 100%; }
  .meimx-site .mx-campaign-tabs .mx-pill { white-space: normal; text-align: left; line-height: 1.3; padding: 10px 16px; }
  .mx-campaign-note { padding: 14px 16px; }
}
/* Secondary text on the darker mint-2 panel uses the heading colour to keep AA contrast. */
.mx-stack-card--mint-2 .mx-stack-card__meta, .mx-stack-card--mint-2 .mx-stack-card__note { color: var(--mx-green-4); }