/** Shopify CDN: Minification failed

Line 669:3 Unexpected "3."
Line 799:3 Unexpected "5."
Line 934:3 Unexpected "6."
Line 1000:3 Unexpected "12."
Line 1051:3 Unexpected "13."
Line 1306:3 Unexpected "20."
Line 6723:0 Unexpected "}"

**/
/* ==========================================================================
   Maccs — product page styles
   Tokens copied verbatim from the design system. Components mapped onto
   Envy markup so Envy JS keeps working.
   ========================================================================== */

.mx {
  /* --- brand color ---------------------------------------------------- */
  --mx-red: #d12627;
  --mx-red-dark: #b01f20;
  --mx-plum: #3e0f2f;
  --mx-pink: #fdf1f0;
  --mx-pink-bright: #f7c8c5;   /* eyebrow text on plum */
  --mx-cream: #f7efd9;
  --mx-shell: #fbf6f1;         /* footer background */
  --mx-canvas: #f4eeea;        /* page background outside sections */
  --mx-white: #ffffff;
  --mx-gold: #f2b90f;          /* review stars */

  /* --- text -------------------------------------------------------------
     Plum at decreasing opacity. Kept as explicit rgba so a developer can
     see exactly what each shade is instead of guessing.                  */
  --mx-text: #3e0f2f;
  --mx-text-strong: rgba(62, 15, 47, 0.82);
  --mx-text-body: rgba(62, 15, 47, 0.72);
  --mx-text-muted: rgba(62, 15, 47, 0.65);
  --mx-text-soft: rgba(62, 15, 47, 0.62);
  --mx-text-dim: rgba(62, 15, 47, 0.5);
  --mx-text-faint: rgba(62, 15, 47, 0.45);
  --mx-text-ghost: rgba(62, 15, 47, 0.4);
  --mx-text-on-dark: rgba(255, 255, 255, 0.72);
  --mx-text-on-dark-dim: rgba(255, 255, 255, 0.55);

  /* --- lines and fills --------------------------------------------------- */
  --mx-line: rgba(62, 15, 47, 0.22);        /* card + input borders */
  --mx-line-mid: rgba(62, 15, 47, 0.16);    /* device / panel outline */
  --mx-line-soft: rgba(62, 15, 47, 0.14);   /* accordion rules */
  --mx-line-hair: rgba(62, 15, 47, 0.12);   /* section dividers */
  --mx-line-faint: rgba(62, 15, 47, 0.08);  /* nav item rules */
  --mx-fill-muted: rgba(62, 15, 47, 0.04);  /* disabled button face */
  --mx-fill-chip: rgba(62, 15, 47, 0.09);   /* neutral chip */
  --mx-line-on-dark: rgba(255, 255, 255, 0.35);
  --mx-fill-on-dark: rgba(255, 255, 255, 0.08);

  /* --- type families ----------------------------------------------------
     Bowlby One SC has a single weight (400) and is always uppercase.
     Poppins carries 400 / 500 / 600 / 700.                              */
  --mx-font-display: "Bowlby One SC", "Arial Black", sans-serif;
  --mx-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* --- type scale, per role --------------------------------------------
     Each role lists: size / line-height / weight / letter-spacing.       */

  /* hero — Bowlby, uppercase, section-opening statement */
  --mx-type-hero-size: 21px;
  --mx-type-hero-lh: 1.12;
  --mx-type-hero-ls: 0;

  /* title — Bowlby, uppercase, page title (collection, club hero) */
  --mx-type-title-size: 24px;
  --mx-type-title-lh: 1.08;

  /* section — Bowlby, uppercase, section heading */
  --mx-type-section-size: 19px;
  --mx-type-section-lh: 1.15;

  /* sub — Bowlby, uppercase, sub-section heading */
  --mx-type-sub-size: 18px;
  --mx-type-sub-lh: 1.1;

  /* price — Bowlby, numerals */
  --mx-type-price-size: 34px;
  --mx-type-price-lh: 1;

  /* body */
  --mx-type-body-size: 13px;
  --mx-type-body-lh: 1.6;
  --mx-type-body-weight: 400;

  /* body small */
  --mx-type-body-sm-size: 12.5px;
  --mx-type-body-sm-lh: 1.5;

  /* fine print */
  --mx-type-fine-size: 11px;
  --mx-type-fine-lh: 1.5;

  /* eyebrow — Poppins 700, wide tracking, uppercase */
  --mx-type-eyebrow-size: 10.5px;
  --mx-type-eyebrow-weight: 700;
  --mx-type-eyebrow-ls: 0.12em;

  /* label — Poppins 700, uppercase, above a control group */
  --mx-type-label-size: 11.5px;
  --mx-type-label-weight: 700;
  --mx-type-label-ls: 0.1em;

  /* button, display face */
  --mx-type-btn-size: 15px;
  --mx-type-btn-ls: 0.04em;

  /* button, body face (outline + small buttons) */
  --mx-type-btn-alt-size: 12.5px;
  --mx-type-btn-alt-weight: 700;
  --mx-type-btn-alt-ls: 0.06em;

  /* product / card name */
  --mx-type-name-size: 12.5px;
  --mx-type-name-weight: 600;
  --mx-type-name-lh: 1.25;

  /* --- spacing ---------------------------------------------------------- */
  --mx-space-1: 4px;
  --mx-space-2: 6px;
  --mx-space-3: 8px;
  --mx-space-4: 10px;
  --mx-space-5: 12px;
  --mx-space-6: 14px;
  --mx-space-7: 16px;
  --mx-space-8: 18px;
  --mx-space-9: 20px;
  --mx-space-10: 22px;
  --mx-space-11: 24px;
  --mx-space-12: 26px;
  --mx-space-14: 32px;
  --mx-space-16: 44px;

  /* section padding, the value every band uses */
  --mx-pad-x: 18px;
  --mx-pad-y: 24px;

  /* --- radii ------------------------------------------------------------ */
  --mx-radius-xs: 6px;
  --mx-radius-sm: 8px;
  --mx-radius-md: 9px;
  --mx-radius-lg: 11px;
  --mx-radius-xl: 12px;
  --mx-radius-2xl: 14px;
  --mx-radius-3xl: 18px;
  --mx-radius-pill: 100px;
  --mx-radius-circle: 50%;

  /* --- shadows ---------------------------------------------------------- */
  --mx-shadow-modal: 0 24px 60px rgba(62, 15, 47, 0.32);
  --mx-shadow-sticky: 0 -2px 12px rgba(62, 15, 47, 0.08);

  /* --- motion ----------------------------------------------------------- */
  --mx-transition: 160ms ease;
  --mx-transition-slow: 320ms ease;

  /* --- layout ----------------------------------------------------------- */
  --mx-container: 1180px;
  --mx-bp-tablet: 48em;      /* 768px — documentation only, see note above */
  --mx-bp-desktop: 64em;     /* 1024px */
}
/* Desktop type bump — copied from the design's 48em block. */
@media (min-width: 48em) {
  .mx {
    --mx-pad-x: 32px;
    --mx-pad-y: 40px;
    --mx-type-hero-size: 32px;
    --mx-type-title-size: 32px;
    --mx-type-section-size: 26px;
    --mx-type-sub-size: 22px;
    --mx-type-body-size: 15px;
    --mx-type-body-sm-size: 14px;
  }
}

/* ==========================================================================
   2. Scoped reset — neutralises Bootstrap + Envy globals inside .mx only
   ========================================================================== */

.mx, .mx *, .mx *::before, .mx *::after { box-sizing: border-box; }

.mx {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: var(--mx-type-body-weight);
  line-height: var(--mx-type-body-lh);
  color: var(--mx-text);
}

.mx h1, .mx h2, .mx h3, .mx h4,
.mx p, .mx ul, .mx ol, .mx li,
.mx figure, .mx fieldset, .mx legend { margin: 0; padding: 0; }

.mx ul, .mx ol { list-style: none; }
.mx img { display: block; max-width: 100%; height: auto; }
.mx a { color: inherit; text-decoration: none; }
.mx button { font: inherit; color: inherit; }
.mx label { font-weight: 400; margin: 0; }

/* ==========================================================================
   3. Page shell
   ========================================================================== */

.mx-pdp { padding-bottom: var(--mx-space-16); }

.mx .mx-breadcrumb {
  background: none;
  padding: var(--mx-space-9) 0;
  margin: 0 0 var(--mx-space-5);
  font-size: var(--mx-type-fine-size);
  color: var(--mx-text-ghost);
}
.mx .mx-breadcrumb a { color: var(--mx-text-ghost); }
.mx .mx-breadcrumb a:hover { color: var(--mx-red); }
.mx .mx-breadcrumb span { color: var(--mx-text); font-size: inherit; }

.mx .mx-pdp__grid { display: grid; gap: var(--mx-space-11); }

@media (min-width: 48em) {
  .mx .mx-pdp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mx-space-16);
    align-items: start;
  }
  .mx .mx-pdp__buy { position: sticky; top: var(--mx-space-11); }
}

/* ==========================================================================
   4. Gallery — restyles Envy's #product_images
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .mx #product_images { display: block !important; }
  .mx #mobile-product-images { display: none !important; }
}

.mx .featured-image-div {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-pink);
  border-radius: var(--mx-radius-2xl);
  max-width: none;
}
.mx .featured-image-div > .lazyload-blur-wrapper { height: 100%; }
.mx .featured-image-div img,
.mx .featured-image-div .product-main-image {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.mx .featured-image-div .ls-blur-up-img { object-fit: cover; }

/* Envy sets li padding via an ID selector, so these have to outscore it. */
.mx ul#product-thumbnails.product-thumbnails-wrapper {
  display: flex;
  gap: var(--mx-space-2);
  overflow-x: auto;
  margin: var(--mx-space-5) 0 0;
  padding: 0 0 2px;
  scrollbar-width: thin;
}
.mx ul#product-thumbnails.product-thumbnails-wrapper li {
  flex: none; width: 58px; height: 58px; padding: 0; margin: 0; list-style: none;
}
.mx ul#product-thumbnails a.image-swap {
  display: block;
  width: 58px; height: 58px;
  overflow: hidden;
  background: var(--mx-pink);
  border: 1px solid var(--mx-line-hair);
  border-radius: var(--mx-radius-md);
  transition: border-color var(--mx-transition);
}
.mx ul#product-thumbnails a.image-swap:hover { border-color: var(--mx-red); }
.mx ul#product-thumbnails a.image-swap.is-active { border: 2px solid var(--mx-red); }
.mx ul#product-thumbnails a.image-swap img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* ==========================================================================
   5. Buy column — headings
   ========================================================================== */

.mx .mx-pdp__buy { padding-top: var(--mx-space-9); }
@media (min-width: 48em) { .mx .mx-pdp__buy { padding-top: 0; } }

.mx .mx-eyebrow {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-eyebrow-size);
  font-weight: var(--mx-type-eyebrow-weight);
  line-height: 1;
  letter-spacing: var(--mx-type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--mx-red);
  margin: 0 0 var(--mx-space-4);
}

.mx h1.product-description-header {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-title-size);
  line-height: var(--mx-type-title-lh);
  text-transform: uppercase;
  color: var(--mx-text);
  text-wrap: balance;
  margin: 0 0 var(--mx-space-3);
}

.mx .mx-rating {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  margin: 0 0 var(--mx-space-6);
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-muted);
}
.mx .mx-rating__stars { color: #e8a020; letter-spacing: 0.08em; }

.mx .product-description-wrapper {
  margin: 0 0 var(--mx-space-7);
  font-size: var(--mx-type-body-size);
  font-weight: var(--mx-type-body-weight);
  line-height: var(--mx-type-body-lh);
  color: var(--mx-text-muted);
  text-wrap: pretty;
}
.mx .product-description-wrapper p { margin: 0 0 var(--mx-space-5); }
.mx .product-description-wrapper p:last-child { margin-bottom: 0; }

.mx .mx-nutrition { margin: 0 0 var(--mx-space-9); font-size: var(--mx-type-body-sm-size); }
.mx .mx-nutrition a {
  color: var(--mx-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mx .mx-nutrition a::after { content: " \2192"; text-decoration: none; display: inline-block; }
.mx .mx-nutrition a:hover { color: var(--mx-red-dark); }

/* ==========================================================================
   6. Price ledger — wraps Envy's #price-field
   ========================================================================== */

.mx .mx-ledger {
  margin: 0 0 var(--mx-space-8);
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}
.mx .mx-ledger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-5);
  padding: var(--mx-space-6);
}
.mx .mx-ledger__key { display: block; }
.mx .mx-ledger__label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mx-text-ghost);
}
.mx .mx-ledger__note {
  display: block;
  margin-top: var(--mx-space-2);
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-muted);
}

.mx .product-page--pricing { margin: 0; padding: 0; text-align: right; }
.mx .product-page--pricing li { display: block; margin: 0; }
.mx #price-field {
  display: block;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--mx-text);
}
.mx .product-page--pricing--variant-compare-at-price .compare-at-price {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 500;
  color: var(--mx-text-ghost);
  text-decoration: line-through;
  opacity: 1;
  width: auto;
}
.mx .product-page--pricing--discount span[class$="-wrapper"] {
  display: inline-block;
  margin-top: var(--mx-space-2);
  padding: 2px 8px;
  background: var(--mx-red);
  color: var(--mx-white);
  border: 0;
  border-radius: var(--mx-radius-pill);
  font-size: 10px;
  font-weight: 700;
  top: 0;
}

/* ==========================================================================
   7. Swatches — swatch.liquid output restyled as the design's option cards
   ========================================================================== */

.mx .swatches-wrapper { width: 100%; padding: 0; margin: 0 0 var(--mx-space-7); float: none; }

.mx .swatch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mx-space-3);
}
.mx .swatch::after { display: none; }

.mx .swatch .swatch-title {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin: 0 0 var(--mx-space-2);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: var(--mx-type-label-weight);
  line-height: 1;
  letter-spacing: var(--mx-type-label-ls);
  text-transform: uppercase;
  color: var(--mx-text);
}

.mx .swatch .swatch-element,
.mx .swatch a.swatch-element {
  float: none; display: block; position: relative; margin: 0; transform: none;
}

.mx .swatch input { display: none; }

.mx .swatch label {
  display: block;
  float: none;
  width: 100%;
  min-width: 0 !important;
  height: auto !important;
  margin: 0;
  padding: var(--mx-space-5) var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  white-space: normal;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx .swatch label:hover { border-color: var(--mx-red); }

.mx .swatch input:checked + label {
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-5) - 1px) calc(var(--mx-space-4) - 1px);
}

.mx .swatch .swatch-element.soldout label {
  color: var(--mx-text-ghost);
  cursor: not-allowed;
  text-decoration: line-through;
}
.mx .swatch .crossed-out { display: none !important; }
.mx .swatch .tooltip { display: none; }

/* Upsell links injected by custom.js */
.mx .swatch a.swatch-element label {
  border-style: dashed;
  font-weight: 600;
  color: var(--mx-text-muted);
}
.mx .swatch a.swatch-element label:hover { border-color: var(--mx-red); color: var(--mx-red); }

/* ==========================================================================
   8. Quantity — restyles Envy's .quantity-controls
   ========================================================================== */

.mx .mx-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-5);
  width: 100%;
  margin: 0 0 var(--mx-space-7);
  padding: 0;
  float: none;
}
.mx .mx-qty-row > label {
  position: static !important;
  width: auto; height: auto; clip: auto; overflow: visible;
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: var(--mx-type-label-weight);
  line-height: 1;
  letter-spacing: var(--mx-type-label-ls);
  text-transform: uppercase;
  color: var(--mx-text);
}

.mx .quantity-controls {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-md);
}
.mx .quantity-controls::after { display: none; }

.mx .quantity-controls button,
.mx .shopify-product-form .quantity-controls .qty-minus,
.mx .shopify-product-form .quantity-controls .qty-plus {
  float: none;
  width: 40px; height: 42px;
  padding: 0;
  border: 0;
  background: var(--mx-white);
  font-family: var(--mx-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--mx-plum);
  cursor: pointer;
  transition: background var(--mx-transition);
}
.mx .quantity-controls button:hover { background: var(--mx-pink); }

.mx .quantity-controls input.quantity-selector {
  float: none;
  width: 44px; height: 42px;
  padding: 0;
  border: 0;
  background: var(--mx-white);
  text-align: center;
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--mx-plum);
}

/* ==========================================================================
   9. Add to cart
   Envy styles this with `body button#purchase.add-to-cart--secondary`, which
   carries an ID. These selectors are written to outscore it.
   ========================================================================== */

.mx .product-page--submit-action { width: 100%; padding: 0; float: none; clear: both; }

body .mx button#purchase,
body .mx button#purchase.add-to-cart--secondary,
body .mx input#purchase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-space-4);
  width: 100%;
  margin: 0;
  padding: var(--mx-space-7);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  cursor: pointer;
  transition: background var(--mx-transition), transform var(--mx-transition);
}
body .mx button#purchase:hover:not([disabled]),
body .mx button#purchase:focus:not([disabled]),
body .mx button#purchase.add-to-cart--secondary:hover:not([disabled]),
body .mx button#purchase.add-to-cart--secondary:focus:not([disabled]) {
  background: var(--mx-red-dark);
  color: var(--mx-white);
}
body .mx button#purchase:active:not([disabled]) { transform: translateY(1px); }
body .mx button#purchase[disabled],
body .mx button#purchase.add-to-cart--secondary[disabled] {
  background: var(--mx-text-ghost);
  color: var(--mx-white);
  cursor: not-allowed;
}

.mx button#purchase .lds-dual-ring:after {
  border-color: var(--mx-white) transparent var(--mx-white) transparent;
}

.mx .mx-fine {
  margin: var(--mx-space-5) 0 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 400;
  line-height: var(--mx-type-fine-lh);
  color: var(--mx-text-ghost);
  text-align: center;
}

.mx .shopify-payment-button .shopify-payment-button__button--unbranded {
  border-radius: var(--mx-radius-lg);
  background: var(--mx-plum);
  color: var(--mx-white);
}

/* ==========================================================================
   10. Out of stock
   ========================================================================== */

.mx .product-out-of-stock,
.mx .variant-out-of-stock {
  margin: var(--mx-space-5) 0 0;
  padding: var(--mx-space-6);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  font-style: normal;
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-muted);
  text-align: left;
}
.mx .sold-out-notification input[type="email"] {
  width: 100%;
  margin-bottom: var(--mx-space-4);
  padding: var(--mx-space-4) var(--mx-space-5);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-md);
  font-family: var(--mx-font-body);
}
.mx .sold-out-notification .btn-custom {
  margin: 0;
  border-radius: var(--mx-radius-lg);
  background: var(--mx-red);
  color: var(--mx-white);
}

/* ==========================================================================
   COLLECTION PAGE
   Component rules lifted from the design system, rem converted to px
   (Bootstrap sets html{font-size:10px}). Appended after the product-page
   rules; nothing above this line is modified.
   ========================================================================== */


/* ---- Layout primitives + typography (shared) ---- */
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

/* A full-width horizontal band. One per theme section. */
.mx .mx-section {
  padding: var(--mx-pad-y) var(--mx-pad-x);
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-section:last-child { border-bottom: 0; }

.mx .mx-section--center { text-align: center; }
.mx .mx-section--pink { background: var(--mx-pink); }
.mx .mx-section--cream { background: var(--mx-cream); }
.mx .mx-section--shell { background: var(--mx-shell); }

.mx .mx-section--plum {
  color: var(--mx-white);
  background: var(--mx-plum);
  border-bottom: 0;
}

.mx .mx-section--flush { padding-top: 0; }
.mx .mx-section--tight { padding-bottom: var(--mx-space-9); }

/* Right-bleeding band: content starts at the gutter, the rail runs off the
   right edge so a partial card peeks and reads as scrollable. */
.mx .mx-section--bleed {
  padding-right: 0;
  overflow: hidden;
}

.mx .mx-section--bleed > *:not(.mx-rail) { padding-right: var(--mx-pad-x); }

.mx .mx-container {
  width: 100%;
  max-width: var(--mx-container);
  margin: 0 auto;
}

.mx .mx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-4);
}

.mx .mx-stack--tight { gap: var(--mx-space-3); }
.mx .mx-stack--loose { gap: var(--mx-space-5); }

.mx .mx-label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: var(--mx-type-label-weight);
  line-height: 1;
  letter-spacing: var(--mx-type-label-ls);
  text-transform: uppercase;
  color: var(--mx-text);
}

.mx .mx-label--muted { color: var(--mx-text-faint); }

/* Headings. Bowlby One SC only ships weight 400 — never bold it. */
.mx .mx-heading {
  font-family: var(--mx-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mx-text);
  text-wrap: balance;
}

.mx .mx-heading--hero {
  font-size: var(--mx-type-hero-size);
  line-height: var(--mx-type-hero-lh);
}

.mx .mx-heading--title {
  font-size: var(--mx-type-title-size);
  line-height: var(--mx-type-title-lh);
}

.mx .mx-heading--section {
  font-size: var(--mx-type-section-size);
  line-height: var(--mx-type-section-lh);
}

.mx .mx-heading--sub {
  font-size: var(--mx-type-sub-size);
  line-height: var(--mx-type-sub-lh);
}

.mx .mx-heading--on-dark { color: var(--mx-white); }
.mx .mx-heading--red { color: var(--mx-red); }

/* Two-tone headings: the second clause carries the accent color.
   Used on almost every homepage section heading. */
.mx .mx-heading__accent { color: var(--mx-red); }
.mx .mx-heading--red .mx-heading__accent { color: var(--mx-plum); }

.mx .mx-prose {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: var(--mx-type-body-weight);
  line-height: var(--mx-type-body-lh);
  color: var(--mx-text-muted);
  text-wrap: pretty;
}

.mx .mx-prose + .mx-prose { margin-top: var(--mx-space-5); }
.mx .mx-prose--sm { font-size: var(--mx-type-body-sm-size); }
.mx .mx-prose--soft { color: var(--mx-text-soft); }
.mx .mx-prose--on-dark { color: var(--mx-text-on-dark); }
.mx .mx-prose--measure { max-width: 36ch; }
.mx .mx-prose--center { margin-left: auto; margin-right: auto; }

.mx .mx-prose strong {
  font-weight: 700;
  color: var(--mx-text);
}

.mx .mx-prose em { color: var(--mx-red); font-style: normal; }

.mx .mx-stars {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--mx-gold);
}

/* ---- Buttons ---- */
   5. BUTTONS
   Variants: primary, primary-pill, outline, outline-light, small, locked.
   States:   :hover, :focus-visible, :active, :disabled, .is-loading.
   -------------------------------------------------------------------------- */

.mx .mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-space-4);
  padding: var(--mx-space-7);
  font-family: var(--mx-font-display);
  font-size: var(--mx-type-btn-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  text-align: center;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  transition: background var(--mx-transition), color var(--mx-transition),
              border-color var(--mx-transition), transform var(--mx-transition);
}

.mx .mx-btn:hover { color: var(--mx-white); background: var(--mx-red-dark); }
.mx .mx-btn:active { transform: translateY(1px); }

.mx .mx-btn--block { display: flex; width: 100%; }

/* Pill: the "Get Macc'd →" treatment with a circular arrow chip. */
.mx .mx-btn--pill {
  padding: var(--mx-space-6);
  font-size: 14px;
  border-radius: var(--mx-radius-pill);
}

.mx .mx-btn__arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-red);
  background: var(--mx-white);
  border-radius: var(--mx-radius-circle);
}

/* Outline: secondary action on light ground. */
.mx .mx-btn--outline {
  padding: var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-btn-alt-size);
  font-weight: var(--mx-type-btn-alt-weight);
  letter-spacing: var(--mx-type-btn-alt-ls);
  color: var(--mx-plum);
  background: transparent;
  border: 1.5px solid var(--mx-plum);
}

.mx .mx-btn--outline:hover { color: var(--mx-white); background: var(--mx-plum); }

/* Outline on the plum band. */
.mx .mx-btn--outline-light {
  padding: var(--mx-space-5);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  letter-spacing: var(--mx-type-btn-alt-ls);
  color: var(--mx-white);
  background: transparent;
  border: 1.5px solid var(--mx-line-on-dark);
  border-radius: var(--mx-radius-md);
}

.mx .mx-btn--outline-light:hover { background: var(--mx-fill-on-dark); }

/* Small: inline actions (Reorder, Skip / Swap / Pause, Join). */
.mx .mx-btn--sm {
  padding: var(--mx-space-5) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-btn-alt-size);
  font-weight: 700;
  letter-spacing: var(--mx-type-btn-alt-ls);
  border-radius: var(--mx-radius-md);
}

.mx .mx-btn:disabled,
.mx .mx-btn--disabled {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border: 1px solid var(--mx-line);
  transform: none;
}

.mx .mx-btn:disabled:hover,
.mx .mx-btn--disabled:hover {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
}

/* Loading: label is replaced by a spinning mark. Toggled by maccs.js. */
.mx .mx-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.mx .mx-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--mx-white);
  border-radius: var(--mx-radius-circle);
  animation: mx-spin 640ms linear infinite;
}

@keyframes mx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mx .mx-btn.is-loading::after { animation-duration: 2s; }
  .mx * { scroll-behavior: auto !important; }
}

/* ---- Badges and chips ---- */
   6. BADGES AND CHIPS
   -------------------------------------------------------------------------- */

.mx .mx-badge {
  display: inline-block;
  padding: var(--mx-space-1) var(--mx-space-3);
  font-family: var(--mx-font-body);
  font-size: 9px;   /* 9px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-pill);
}

/* Badge pinned over product imagery. */
.mx .mx-badge--overlay {
  position: absolute;
  top: var(--mx-space-2);
  left: var(--mx-space-2);
  z-index: 2;
  padding: 5px var(--mx-space-3);
}

.mx .mx-chip {
  flex: 0 0 auto;
  padding: var(--mx-space-3) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-pill);
  scroll-snap-align: start;
  transition: background var(--mx-transition), color var(--mx-transition),
              border-color var(--mx-transition);
}

.mx .mx-chip:hover { border-color: var(--mx-plum); }

.mx .mx-chip[aria-pressed="true"],
.mx .mx-chip--active {
  color: var(--mx-white);
  background: var(--mx-plum);
  border-color: var(--mx-plum);
}

/* The members-only filter reads in brand red, not plum. */
.mx .mx-chip--club {
  color: var(--mx-red);
  background: var(--mx-pink);
  border-color: rgba(209, 38, 39, 0.4);
}

.mx .mx-chip--club[aria-pressed="true"] {
  color: var(--mx-white);
  background: var(--mx-red);
  border-color: var(--mx-red);
}

/* ---- Rails ---- */
   12. RAILS — horizontal scrollers with snap
   Used by: craft rail, signature rail, filter chips, gallery thumbs.
   -------------------------------------------------------------------------- */

.mx .mx-rail {
  display: flex;
  gap: var(--mx-space-5);
  padding-right: var(--mx-pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx .mx-rail::-webkit-scrollbar { display: none; }

.mx .mx-rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.mx .mx-rail--chips { gap: 7px; }
.mx .mx-rail--cards > * { width: 148px; }
.mx .mx-rail--craft > * { width: 152px; }

/* Craft rail card: red face, white name under the photo. */
.mx .mx-craft-card {
  overflow: hidden;
  background: var(--mx-red);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-craft-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--mx-pink);
}

.mx .mx-craft-card__name {
  display: block;
  padding: var(--mx-space-3) var(--mx-space-4) var(--mx-space-2);
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 0.95;
  text-align: center;
  color: var(--mx-white);
}

/* ---- Product card ---- */
   13. PRODUCT CARD — name + Add only. Shared by collection, signature
       rails, dashboard. The single most reused component in the system.
   -------------------------------------------------------------------------- */

.mx .mx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-pink);
}

.mx .mx-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx .mx-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--mx-space-2);
  padding: var(--mx-space-5) var(--mx-space-5) var(--mx-space-5);
}

.mx .mx-card__name {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: var(--mx-type-name-weight);
  line-height: var(--mx-type-name-lh);
  color: var(--mx-text);
  /* Reserves two lines so Add buttons align across a row of mixed names. */
  min-height: 2.5em;
}

.mx .mx-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: auto;
  padding: var(--mx-space-3) var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 1.5px solid var(--mx-red);
  border-radius: var(--mx-radius-sm);
  transition: background var(--mx-transition), color var(--mx-transition),
              border-color var(--mx-transition);
}

.mx .mx-card__add:hover { color: var(--mx-white); background: var(--mx-red); }

.mx .mx-card__add-plus {
  margin-top: -1px;
  font-size: 14px;
  font-weight: 700;
}

/* Solid: signature Maccs a member has unlocked. */
.mx .mx-card__add--solid {
  color: var(--mx-white);
  background: var(--mx-red);
  border-color: var(--mx-red);
}

.mx .mx-card__add--solid:hover { background: var(--mx-red-dark); }

/* Locked: gated product, guest viewer. Click routes to the Club page. */
.mx .mx-card__add--locked {
  font-size: var(--mx-type-fine-size);
  letter-spacing: 0.05em;
  color: var(--mx-text-dim);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
}

.mx .mx-card__add--locked:hover {
  color: var(--mx-red);
  background: var(--mx-fill-muted);
  border-color: var(--mx-red);
}

/* Sold out. */
.mx .mx-card__add:disabled {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
}

.mx .mx-card__add:disabled:hover {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
}

.mx .mx-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mx-space-5);
}

/* --------------------------------------------------------------------------
   17. CLUB BAND — the plum recruitment band. Appears on every page.
   -------------------------------------------------------------------------- */

.mx .mx-club-band {
  position: relative;
  /* calc breakout spans the viewport exactly, unlike the -50% margin pair,
     which doubles the parent width and overshoots on desktop. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: auto;
  right: auto;
  transform: none;
  padding: 56px var(--mx-pad-x);
  color: var(--mx-white);
  background: var(--mx-plum);
  text-align: center;
}

.mx .mx-club-band__eyebrow { margin-bottom: var(--mx-space-3); }
.mx .mx-club-band__title { margin-bottom: var(--mx-space-4); }
.mx .mx-club-band__list { margin-bottom: var(--mx-space-8); }
.mx .mx-club-band__foot { margin-top: var(--mx-space-5); text-align: center; }

/* Club hero on the sign-up page: same plum, adds the price block. */
.mx .mx-club-hero {
  padding: var(--mx-space-14) var(--mx-space-10) var(--mx-space-12);
  text-align: center;
  color: var(--mx-white);
  background: var(--mx-plum);
}

.mx .mx-club-hero__copy {
  max-width: 30ch;
  margin: 0 auto var(--mx-space-9);
  font-size: 13.5px;
  line-height: 1.55;
}

.mx .mx-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mx-space-3);
  margin-bottom: var(--mx-space-9);
}

.mx .mx-price__amount {
  font-family: var(--mx-font-display);
  font-size: var(--mx-type-price-size);
  font-weight: 400;
  line-height: var(--mx-type-price-lh);
  color: var(--mx-white);
}

.mx .mx-price__unit {
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--mx-text-on-dark-dim);
}

/* Inline member notice on a light ground. */
.mx .mx-member-note {
  display: flex;
  align-items: center;
  gap: var(--mx-space-4);
  padding: var(--mx-space-5) var(--mx-pad-x);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 500;
  line-height: 1.45;
  color: var(--mx-text-body);
  background: var(--mx-pink);
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-member-note__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 700;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-circle);
}

.mx .mx-page-head {
  padding: var(--mx-space-9) var(--mx-pad-x) var(--mx-space-6);
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-page-head__title { margin-bottom: 7px; }

.mx .mx-filters {
  padding: var(--mx-space-6) 0 var(--mx-space-6) var(--mx-pad-x);
  overflow: hidden;
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-5);
  padding: var(--mx-space-5) var(--mx-pad-x);
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-toolbar__count {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 500;
  line-height: 1;
  color: var(--mx-text-dim);
}

.mx .mx-toolbar__sort {
  padding: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 600;
  line-height: 1;
  color: var(--mx-plum);
  background: transparent;
  border: 0;
}

.mx .mx-toolbar__sort:hover { color: var(--mx-red); }

/* ---- Quick-add modal ---- */
   20. QUICK-ADD MODAL
   Centred in the scroll container, not the page bottom.
   -------------------------------------------------------------------------- */

.mx .mx-modal[hidden] { display: none; }

.mx .mx-modal__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(62, 15, 47, 0.45);
}

.mx .mx-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;
  width: 352px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: var(--mx-space-8) var(--mx-space-8) var(--mx-space-9);
  overflow-y: auto;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-soft);
  border-radius: var(--mx-radius-3xl);
  box-shadow: var(--mx-shadow-modal);
  transform: translate(-50%, -50%);
}

.mx .mx-modal__head {
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  margin-bottom: var(--mx-space-7);
}

.mx .mx-modal__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: var(--mx-pink);
  border-radius: var(--mx-radius-md);
}

.mx .mx-modal__id { flex: 1; min-width: 0; }

.mx .mx-modal__name {
  display: block;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mx-plum);
}

.mx .mx-modal__meta {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--mx-text-faint);
}

.mx .mx-modal__close {
  flex: none;
  width: 26px;
  height: 26px;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid rgba(62, 15, 47, 0.18);
  border-radius: var(--mx-radius-circle);
}

.mx .mx-modal__close:hover { color: var(--mx-red); border-color: var(--mx-red); }
.mx .mx-modal__foot { margin-top: var(--mx-space-5); text-align: center; }

/* ---- Pack-size options (reused in modal) ---- */
/* --- pack size: two-up option buttons ---------------------------------- */
.mx .mx-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mx-space-3);
  margin-bottom: var(--mx-space-7);
}

.mx .mx-option {
  padding: var(--mx-space-5) var(--mx-space-4);
  text-align: center;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  transition: background var(--mx-transition), border-color var(--mx-transition);
}

.mx .mx-option:hover { border-color: var(--mx-red); }

.mx .mx-option[aria-checked="true"] {
  padding: var(--mx-space-5) var(--mx-space-4);
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
}

.mx .mx-option__label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.2;
}

.mx .mx-option__price {
  display: block;
  margin-top: 3px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 500;
  line-height: 1.2;
  color: var(--mx-text-ghost);
}

.mx .mx-option:disabled { opacity: 0.4; }

.mx .mx-qty {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-md);
}

.mx .mx-qty__btn {
  width: 40px;
  height: 42px;
  font-family: var(--mx-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 0;
}

.mx .mx-qty__btn:hover { background: var(--mx-pink); }

.mx .mx-qty__input {
  width: 44px;
  height: 42px;
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 0;
  -moz-appearance: textfield;
}

.mx .mx-qty__input::-webkit-outer-spin-button,
.mx .mx-qty__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }



/* ==========================================================================
   13. Envy overrides for the collection page
   Neutralises Bootstrap wrappers and restyles Envy's sort select + pagination.
   ========================================================================== */

/* The section opens its own .container; let .mx own the width instead. */
.mx-collection { max-width: var(--mx-container); margin: 0 auto; }

/* Envy's .row has -15px side margins that would break the grid. */
.mx .row { margin-left: 0; margin-right: 0; }
.mx [class*="col-"] { padding-left: 0; padding-right: 0; width: auto; float: none; }

/* --- sort: Envy's #sort-by select, restyled as the design's toolbar control */
.mx .mx-toolbar__sort { position: relative; display: inline-flex; align-items: center; }
.mx .mx-toolbar__sort > label {
  margin: 0 var(--mx-space-2) 0 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 400;
  color: var(--mx-text-ghost);
}
.mx .mx-toolbar__sort select#sort-by {
  appearance: none;
  display: block;
  width: auto;
  padding: var(--mx-space-2) 22px var(--mx-space-2) var(--mx-space-3);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mx-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.mx .mx-toolbar__sort::after {
  content: "\25BE";
  position: absolute;
  right: var(--mx-space-2);
  pointer-events: none;
  font-size: 10px;
  color: var(--mx-text-ghost);
}
/* Materialize replaces the select with .select-wrapper; hide that, keep ours. */
.mx .mx-toolbar__sort .select-wrapper { display: none !important; }
.mx .mx-toolbar__sort select#sort-by { display: block !important; }

/* --- pagination ---------------------------------------------------------- */
.mx .pagination {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--mx-space-14) var(--mx-pad-x);
  border-radius: 0;
  text-align: center;
}
.mx .pagination ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-5);
  margin: 0;
  padding: 0;
}
.mx .pagination ul li { display: block; margin: 0; }
.mx .pagination .pagination-text {
  padding: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  color: var(--mx-text-ghost);
  line-height: 1;
}
.mx .pagination .pagination-arrow a,
.mx .pagination .pagination-arrow .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-2);
  float: none;
  width: auto;
  padding: var(--mx-space-4) var(--mx-space-8);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-btn-alt-size);
  font-weight: var(--mx-type-btn-alt-weight);
  letter-spacing: var(--mx-type-btn-alt-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mx-red) !important;
  background: transparent;
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-lg);
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx .pagination .pagination-arrow a:hover {
  background: var(--mx-pink);
  border-color: var(--mx-red);
}
.mx .pagination .btn--disabled,
.mx .pagination .disabled { display: none; }
.mx .pagination .pagination-arrow svg { width: 14px; height: 14px; }

/* --- quick-add modal: sits above the page, below Envy's cart drawer ------ */
.mx-modal { z-index: 1000002; }
.mx-modal__scrim { z-index: 1000002; }
.mx-modal__dialog { z-index: 1000003; }

/* The modal is moved to <body> on init, so it needs the token block too. */
.mx-modal.mx { max-width: none; margin: 0; }

/* --- loading + error states --------------------------------------------- */
.mx .mx-modal__loading,
.mx .mx-modal__error {
  padding: var(--mx-space-14) var(--mx-space-9);
  text-align: center;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-muted);
}
.mx .mx-modal__error { color: var(--mx-red); }
.mx .mx-btn.is-loading { opacity: 0.7; pointer-events: none; }

/* ==========================================================================
   14. Breakpoints — tablet (48em) and desktop (64em)
   Lifted from the design system, rem converted to px. Append at the very
   end of maccs.css: media queries must come after the rules they override.
   ========================================================================== */

@media (min-width: 48em) {
  .mx {
    --mx-pad-x: 32px;
    --mx-pad-y: 40px;
    --mx-type-hero-size: 32px;      /* 32px */
    --mx-type-title-size: 32px;
    --mx-type-section-size: 26px;
    --mx-type-sub-size: 22px;
    --mx-type-body-size: 15px;  /* 15px */
    --mx-type-body-sm-size: 14px;
  }

  .mx .mx-section { padding-left: var(--mx-pad-x); padding-right: var(--mx-pad-x); }
  .mx .mx-section > .mx-container { max-width: var(--mx-container); }

  .mx .mx-hero__actions > .mx-btn { flex: 0 1 240px; }

  .mx .mx-product-grid { grid-template-columns: repeat(3, 1fr); }

  .mx .mx-club-band {
    padding: var(--mx-space-14) var(--mx-space-14);
    text-align: center;
  }

  .mx .mx-club-band__list {
    display: inline-flex;
    text-align: left;
  }

  .mx .mx-club-band .mx-btn { max-width: 352px; margin: 0 auto; }
}

@media (min-width: 64em) {
  .mx { --mx-pad-x: 44px; }
  .mx .mx-product-grid { grid-template-columns: repeat(4, 1fr); }

  /* Card rails stop scrolling and become a grid once there is room. */
  .mx .mx-rail--cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-right: 0;
    overflow: visible;
  }

  .mx .mx-rail--cards > * { width: auto; }
}

/* responsive-image ignores `blur: false` (Liquid treats false as blank), so the
   .lazyload-blur-wrapper is always present. It has to fill the media box or the
   image renders at natural size and overflows the card. */
.mx .mx-card__media > .lazyload-blur-wrapper { height: 100%; }
.mx .mx-card__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.mx .mx-card__media .ls-blur-up-img { object-fit: cover; }

/* ==========================================================================
   15. Collection page fixes
   Re-declares the chip, card and toolbar rules at higher specificity so they
   apply regardless of what else is in the file, and adapts them to Envy's
   markup. Append at the very end of maccs.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chips — active and members-only states
   -------------------------------------------------------------------------- */

.mx .mx-rail--chips .mx-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--mx-space-3) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-pill);
  transition: color var(--mx-transition), background var(--mx-transition),
              border-color var(--mx-transition);
}

.mx .mx-rail--chips .mx-chip:hover { border-color: var(--mx-plum); }

.mx .mx-rail--chips .mx-chip[aria-pressed="true"] {
  color: var(--mx-white);
  background: var(--mx-plum);
  border-color: var(--mx-plum);
}

/* Members-only filter reads in brand red, not plum. */
.mx .mx-rail--chips .mx-chip--club {
  color: var(--mx-red);
  background: var(--mx-pink);
  border-color: rgba(209, 38, 39, 0.4);
}

.mx .mx-rail--chips .mx-chip--club:hover { border-color: var(--mx-red); }

.mx .mx-rail--chips .mx-chip--club[aria-pressed="true"] {
  color: var(--mx-white);
  background: var(--mx-red);
  border-color: var(--mx-red);
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.mx .mx-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mx-space-5); }

.mx .mx-product-grid .mx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-product-grid .mx-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-pink);
}

/* responsive-image ignores `blur: false` — Liquid treats false as blank — so
   the .lazyload-blur-wrapper is always present and must fill the media box,
   or the image renders at natural size and overflows the card. */
.mx .mx-product-grid .mx-card__media > .lazyload-blur-wrapper { height: 100%; }

.mx .mx-product-grid .mx-card__media img,
.mx .mx-product-grid .mx-card__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.mx .mx-product-grid .mx-card__media .ls-blur-up-img { object-fit: cover; }

.mx .mx-product-grid .mx-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--mx-space-2);
  padding: var(--mx-space-5);
}

.mx .mx-product-grid .mx-card__name {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: var(--mx-type-name-weight);
  line-height: var(--mx-type-name-lh);
  color: var(--mx-text);
  text-transform: none;
  /* Reserves two lines so Add buttons align across a row of mixed names. */
  min-height: 2.5em;
}

.mx .mx-product-grid .mx-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: auto;
  padding: var(--mx-space-3) var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 1.5px solid var(--mx-red);
  border-radius: var(--mx-radius-sm);
  cursor: pointer;
  transition: background var(--mx-transition), color var(--mx-transition),
              border-color var(--mx-transition);
}

.mx .mx-product-grid .mx-card__add:hover:not(:disabled) {
  color: var(--mx-white);
  background: var(--mx-red);
}

.mx .mx-product-grid .mx-card__add-plus { margin-top: -1px; font-size: 14px; font-weight: 700; }

.mx .mx-product-grid .mx-card__add--locked {
  font-size: var(--mx-type-fine-size);
  letter-spacing: 0.05em;
  color: var(--mx-text-dim);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
}
.mx .mx-product-grid .mx-card__add--locked:hover {
  color: var(--mx-red);
  background: var(--mx-fill-muted);
  border-color: var(--mx-red);
}

.mx .mx-product-grid .mx-card__add:disabled,
.mx .mx-product-grid .mx-card__add:disabled:hover {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
  cursor: not-allowed;
}

/* Overlay badge on locked cards */
.mx .mx-product-grid .mx-badge--overlay {
  position: absolute;
  left: var(--mx-space-4);
  top: var(--mx-space-4);
  z-index: 2;
}

@media (min-width: 48em) {
  .mx .mx-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--mx-space-7); }
}
@media (min-width: 64em) {
  .mx .mx-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Toolbar sort — Envy's #sort-by select, wrapped by Materialize
   -------------------------------------------------------------------------- */

.mx .mx-toolbar { flex-wrap: wrap; }

.mx .mx-toolbar__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-3);
  flex: 0 0 auto;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.mx .mx-toolbar__sort > label {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 500;
  line-height: 1;
  color: var(--mx-text-dim);
  text-transform: none;
}

/* Materialize replaces the select with .select-wrapper. Hide that and use the
   native control, which is easier to keep on-brand and needs no JS. */
.mx .mx-toolbar__sort .select-wrapper { display: none !important; }
.mx .mx-toolbar__sort .collection-header__default-sort { display: none; }

.mx .mx-toolbar__sort select#sort-by {
  display: block !important;
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: var(--mx-space-3) 26px var(--mx-space-3) var(--mx-space-5);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 600;
  line-height: 1;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-pill);
  cursor: pointer;
  transition: border-color var(--mx-transition);
}

.mx .mx-toolbar__sort select#sort-by:hover { border-color: var(--mx-plum); }
.mx .mx-toolbar__sort select#sort-by:focus { outline: 0; border-color: var(--mx-red); }

.mx .mx-toolbar__sort::after {
  content: "\25BE";
  position: absolute;
  right: var(--mx-space-5);
  pointer-events: none;
  font-size: 9px;
  line-height: 1;
  color: var(--mx-text-dim);
}

.mx .mx-product-grid { padding: var(--mx-space-11) var(--mx-pad-x) var(--mx-space-14); }
.mx .mx-page-head,
.mx .mx-filters,
.mx .mx-toolbar { padding-left: var(--mx-pad-x); padding-right: var(--mx-pad-x); }

body.mx-modal-open { overflow: hidden; }

/* --- Quick-add modal: re-declared at higher specificity ------------------- */

.mx.mx-modal { position: fixed; inset: 0; z-index: 1000002; }
.mx.mx-modal[hidden] { display: none; }

.mx.mx-modal .mx-modal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(62, 15, 47, 0.55);
}

.mx.mx-modal .mx-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000003;
  width: 352px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  padding: var(--mx-space-8) var(--mx-space-8) var(--mx-space-9);
  overflow-y: auto;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-soft);
  border-radius: var(--mx-radius-3xl);
  box-shadow: var(--mx-shadow-modal);
  transform: translate(-50%, -50%);
}

.mx.mx-modal .mx-modal__head {
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  margin-bottom: var(--mx-space-7);
}
.mx.mx-modal .mx-modal__thumb {
  width: 52px; height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: var(--mx-radius-md);
  background: var(--mx-pink);
}
.mx.mx-modal .mx-modal__id { flex: 1; min-width: 0; }
.mx.mx-modal .mx-modal__name {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}
.mx.mx-modal .mx-modal__meta {
  display: block;
  font-size: var(--mx-type-label-size);
  font-weight: 500;
  color: var(--mx-text-faint);
}
.mx.mx-modal .mx-modal__close {
  flex: none;
  width: 32px; height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--mx-text-dim);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-circle);
  cursor: pointer;
}
.mx.mx-modal .mx-modal__close:hover { color: var(--mx-red); border-color: var(--mx-red); }

.mx.mx-modal .mx-label { margin-bottom: var(--mx-space-4); color: var(--mx-text-dim); }

.mx.mx-modal .mx-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mx-space-3);
  margin-bottom: var(--mx-space-7);
}
.mx.mx-modal .mx-option {
  display: block;
  padding: var(--mx-space-5) var(--mx-space-4);
  text-align: center;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx.mx-modal .mx-option:hover:not(:disabled) { border-color: var(--mx-red); }
.mx.mx-modal .mx-option[aria-checked="true"] {
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-5) - 1px) calc(var(--mx-space-4) - 1px);
}
.mx.mx-modal .mx-option:disabled { opacity: 0.5; cursor: not-allowed; }
.mx.mx-modal .mx-option__label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  color: var(--mx-plum);
}
.mx.mx-modal .mx-option__price {
  display: block;
  margin-top: 2px;
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-ghost);
}

/* Add button */
.mx.mx-modal .mx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mx-space-4);
  width: 100%;
  padding: var(--mx-space-7);
  font-family: var(--mx-font-display);
  font-size: var(--mx-type-btn-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  cursor: pointer;
  transition: background var(--mx-transition);
}
.mx.mx-modal .mx-btn:hover:not(:disabled) { background: var(--mx-red-dark); }
.mx.mx-modal .mx-btn:disabled {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border: 1px solid var(--mx-line);
  cursor: not-allowed;
}

.mx.mx-modal .mx-modal__foot { margin-top: var(--mx-space-5); text-align: center; }

/* ==========================================================================
   16. Product page — design corrections
   ========================================================================== */

/* Gallery: no pink panel, no border. */
.mx .featured-image-div {
  background: transparent;
  border-radius: 0;
}

/* Thumbnails wrap into a grid instead of scrolling in one row. */
.mx ul#product-thumbnails.product-thumbnails-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 58px);
  gap: var(--mx-space-3);
  overflow: visible;
  margin-top: var(--mx-space-7);
}

/* Price: large, left aligned, note beneath. No box. */
.mx .mx-price { margin: 0 0 var(--mx-space-9); }
.mx .mx-price .product-page--pricing { text-align: left; }
.mx .mx-price #price-field {
  font-size: var(--mx-type-price-size);
  line-height: var(--mx-type-price-lh);
}
.mx .mx-price__note {
  margin: var(--mx-space-3) 0 0;
  font-size: var(--mx-type-body-sm-size);
  line-height: var(--mx-type-body-sm-lh);
  color: var(--mx-text-muted);
}

/* Options and quantity share a row on desktop, stack on mobile. */
.mx .mx-buy-row {
  display: grid;
  gap: var(--mx-space-7);
  margin: 0 0 var(--mx-space-7);
}
.mx .mx-buy-row .swatches-wrapper { margin: 0; }

@media (min-width: 48em) {
  .mx .mx-buy-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--mx-space-9);
  }
  /* Label above the stepper in the right-hand cell. */
  .mx .mx-buy-row .mx-qty-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mx-space-4);
    margin: 0;
  }
}

@media (min-width: 48em) {
  .mx .mx-buy-row .swatch .swatch-title,
  .mx .mx-buy-row .mx-qty-row > label {
    margin: 0 0 var(--mx-space-4);
    line-height: 1;
  }
  .mx .mx-buy-row .mx-qty-row { gap: 0; }
}

/* Hide the upsell links custom.js injects into the option group. */
.mx .mx-buy-row .swatch a.swatch-element { display: none; }

@media (min-width: 48em) {
  .mx .mx-buy-row { display: flex; align-items: flex-start; gap: var(--mx-space-9); }
  .mx .mx-buy-row__options { flex: 0 0 auto; }
  .mx .mx-buy-row .swatch { display: flex; flex-wrap: wrap; gap: var(--mx-space-3); }
  .mx .mx-buy-row .swatch .swatch-title { flex: 0 0 100%; margin: 0 0 var(--mx-space-4); line-height: 1; }
  .mx .mx-buy-row .swatch label { width: auto; min-width: 118px; text-align: left; }
  .mx .mx-buy-row .mx-qty-row { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: var(--mx-space-4); margin: 0; }
  .mx .mx-buy-row .mx-qty-row > label { margin: 0; line-height: 1; }
}

.mx .mx-price .product-page--pricing,
.mx .mx-price #price-field { display: block; }
.mx .mx-price__note { display: block; }

/* --- Pack cards: two-line option radios ---------------------------------- */
.mx .mx-optionset { width: 100%; padding: 0; margin: 0; float: none; }

.mx .mx-buy-row .swatch { display: flex; flex-wrap: wrap; gap: var(--mx-space-3); }
.mx .mx-buy-row .swatch .swatch-title {
  flex: 0 0 100%;
  margin: 0 0 var(--mx-space-4);
  line-height: 1;
}

.mx .mx-pack { float: none; display: block; position: relative; margin: 0; transform: none; }
.mx .mx-pack input { display: none; }

.mx .mx-pack label {
  display: block;
  float: none;
  width: auto;
  min-width: 128px;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: var(--mx-space-5) var(--mx-space-7);
  text-align: left;
  text-transform: none;
  white-space: normal;
  line-height: 1.2;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx .mx-pack label:hover { border-color: var(--mx-red); }

.mx .mx-pack input:checked + label {
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-5) - 1px) calc(var(--mx-space-7) - 1px);
}

.mx .mx-pack__name {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  color: var(--mx-plum);
}
.mx .mx-pack__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 400;
  color: var(--mx-text-ghost);
}

.mx .mx-pack.soldout label { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }

/* ==========================================================================
   17. Buy row — final layout
   Later than everything above, and specific enough to win outright.
   ========================================================================== */

/* Price note sits under the price, not beside it. */
.mx .mx-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mx .mx-price .product-page--pricing { width: 100%; }
.mx .mx-price__note { margin-top: var(--mx-space-2); }

/* Options and quantity: two content-width columns with a gutter. */
@media (min-width: 48em) {
  .mx .mx-buy-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--mx-space-11);
  }
  .mx .mx-buy-row .mx-buy-row__options { flex: 0 1 auto; min-width: 0; }
  .mx .mx-buy-row .mx-qty-row {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mx-space-4);
    margin: 0;
    width: auto;
  }
}

/* The option group is a row of cards, not a full-width grid. */
.mx .mx-buy-row .mx-optionset { margin: 0; }
.mx .mx-buy-row .swatch {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--mx-space-3);
  align-items: stretch;
}

/* Label gap must match QUANTITY's. The flex gap already contributes 8px,
   so the margin here is the remainder, not the full value. */
.mx .mx-buy-row .swatch .swatch-title {
  flex: 0 0 100%;
  margin: 0 0 2px;
  line-height: 1;
}

/* Taller cards so their top edge lines up with the quantity stepper. */
.mx .mx-buy-row .mx-pack { flex: 0 0 auto; }
.mx .mx-buy-row .mx-pack label {
  min-width: 138px;
  height: 100%;
  padding: var(--mx-space-7) var(--mx-space-7);
}
.mx .mx-buy-row .mx-pack input:checked + label {
  padding: calc(var(--mx-space-7) - 1px) calc(var(--mx-space-7) - 1px);
}

/* --- Trust checklist ----------------------------------------------------- */
.mx .mx-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mx-space-3) var(--mx-space-7);
  margin: var(--mx-space-7) 0 var(--mx-space-9);
  padding: 0;
  list-style: none;
}
.mx .mx-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mx-text);
}
.mx .mx-trust__mark { color: var(--mx-red); line-height: 1.2; }

.mx .mx-trust--desktop { display: none; }

@media (min-width: 48em) {
  .mx .mx-trust--mobile { display: none; }
  .mx .mx-trust--desktop {
    display: grid;
    margin-top: var(--mx-space-11);
    padding-top: var(--mx-space-11);
    border-top: 1px solid var(--mx-line-hair);
  }
}

/* --- Mobile: tighten gallery-to-eyebrow gap, scroll thumbs in one row ----- */
@media (max-width: 47.9375em) {
  .mx .mx-pdp__grid { gap: var(--mx-space-5); }
  .mx .mx-pdp__buy { padding-top: 0; }
  .mx ul#product-thumbnails.product-thumbnails-wrapper {
    display: flex;
    overflow-x: auto;
    margin-top: var(--mx-space-5);
    scrollbar-width: none;
  }
  .mx ul#product-thumbnails.product-thumbnails-wrapper::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   18. Testimonials
   ========================================================================== */

.mx .mx-quotes {
  max-width: var(--mx-container);
  margin: 0 auto;
  padding: var(--mx-space-16) var(--mx-pad-x);
}

.mx .mx-quotes__title {
  margin: 0 0 var(--mx-space-11);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-sub-size);
  line-height: var(--mx-type-sub-lh);
  text-transform: uppercase;
  text-align: center;
  color: var(--mx-text);
}

.mx .mx-quotes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mx-space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx .mx-quote {
  margin: 0;
  padding: var(--mx-space-9);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-quote__stars {
  margin: 0 0 var(--mx-space-5);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--mx-gold);
}

.mx .mx-quote__text {
  margin: 0 0 var(--mx-space-6);
  padding: 0;
  border: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  color: var(--mx-text-muted);
  text-wrap: pretty;
}

.mx .mx-quote__name {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 700;
  color: var(--mx-text);
}

@media (min-width: 48em) {
  .mx .mx-quotes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mx .mx-quote__verified { font-weight: 400; color: var(--mx-text-ghost); }

.mx .mx-quotes { max-width: none; padding-left: 0; padding-right: 0; }

/* ==========================================================================
   19. Explore more flavors
   ========================================================================== */

.mx .mx-flavors { padding: var(--mx-space-16) 0 var(--mx-space-11); }

.mx .mx-flavors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mx-space-7);
  margin-bottom: var(--mx-space-9);
}
.mx .mx-flavors__title {
  margin: 0;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-sub-size);
  line-height: var(--mx-type-sub-lh);
  text-transform: uppercase;
  color: var(--mx-text);
}
.mx .mx-flavors__sub {
  margin: var(--mx-space-2) 0 0;
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text-muted);
}

.mx .mx-flavors__nav { display: none; flex: none; gap: var(--mx-space-3); }
.mx .mx-flavors__arrow {
  width: 34px; height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--mx-text);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-circle);
  cursor: pointer;
  transition: border-color var(--mx-transition), color var(--mx-transition);
}
.mx .mx-flavors__arrow:hover { color: var(--mx-red); border-color: var(--mx-red); }

.mx .mx-flavors .mx-rail--cards {
  display: flex;
  gap: var(--mx-space-7);
  margin: 0;
  padding: 0 0 var(--mx-space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mx .mx-flavors .mx-rail--cards::-webkit-scrollbar { display: none; }

.mx .mx-flavors .mx-card {
  flex: 0 0 62%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}
.mx .mx-flavors .mx-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-pink);
}
.mx .mx-flavors .mx-card__media > .lazyload-blur-wrapper { height: 100%; }
.mx .mx-flavors .mx-card__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.mx .mx-flavors .mx-card__body {
  display: flex; flex: 1; flex-direction: column; gap: var(--mx-space-2);
  padding: var(--mx-space-5);
}
.mx .mx-flavors .mx-card__name {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: var(--mx-type-name-weight);
  line-height: var(--mx-type-name-lh);
  color: var(--mx-text);
  min-height: 2.5em;
}
.mx .mx-flavors .mx-card__add {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%;
  margin-top: auto;
  padding: var(--mx-space-3) var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 1.5px solid var(--mx-red);
  border-radius: var(--mx-radius-sm);
  cursor: pointer;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mx .mx-flavors .mx-card__add:hover:not(:disabled) { color: var(--mx-white); background: var(--mx-red); }
.mx .mx-flavors .mx-card__add:disabled {
  color: var(--mx-text-ghost);
  background: var(--mx-fill-muted);
  border-color: var(--mx-line);
  cursor: not-allowed;
}

@media (min-width: 48em) {
  .mx .mx-flavors__nav { display: flex; }
  .mx .mx-flavors .mx-card { flex: 0 0 calc((100% - 3 * var(--mx-space-7)) / 4); }
}

/* ==========================================================================
   20. Sign-off + mobile sticky bar
   ========================================================================== */

.mx .mx-signoff {
  padding: var(--mx-space-16) var(--mx-pad-x);
  text-align: center;
  border-top: 1px solid var(--mx-line-hair);
}
.mx .mx-signoff__heading {
  margin: 0 0 var(--mx-space-3);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-sub-size);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--mx-red);
}
.mx .mx-signoff__line {
  margin: 0;
  font-size: var(--mx-type-fine-size);
  color: var(--mx-text-ghost);
}

/* --- sticky bar ---------------------------------------------------------- */
.mx.mx-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-5);
  padding: var(--mx-space-5) var(--mx-pad-x);
  background: var(--mx-white);
  border-top: 1px solid var(--mx-line);
  box-shadow: var(--mx-shadow-sticky);
}
.mx.mx-stickybar[hidden] { display: none; }

.mx.mx-stickybar .mx-stickybar__text { min-width: 0; }
.mx.mx-stickybar .mx-stickybar__name {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx.mx-stickybar .mx-stickybar__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--mx-type-fine-size);
  color: var(--mx-text-ghost);
}
.mx.mx-stickybar .mx-stickybar__btn {
  flex: none;
  padding: var(--mx-space-5) var(--mx-space-9);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-alt-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  cursor: pointer;
}
.mx.mx-stickybar .mx-stickybar__btn:hover { background: var(--mx-red-dark); }

/* Desktop has no sticky bar — the buy column stays in view instead. */
@media (min-width: 48em) {
  .mx.mx-stickybar { display: none !important; }
}

/* ==========================================================================
   21. Subscription frequency cards
   ========================================================================== */

.mx .mx-frequency { margin: 0 0 var(--mx-space-9); }
.mx .mx-frequency__label { margin-bottom: var(--mx-space-4); color: var(--mx-text); }

.mx .mx-freq { display: block; margin: 0 0 var(--mx-space-3); cursor: pointer; }
.mx .mx-freq:last-child { margin-bottom: 0; }
.mx .mx-freq input { position: absolute; opacity: 0; pointer-events: none; }

.mx .mx-freq__box {
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  padding: var(--mx-space-6) var(--mx-space-7);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx .mx-freq:hover .mx-freq__box { border-color: var(--mx-red); }

.mx .mx-freq input:checked + .mx-freq__box {
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-6) - 1px) calc(var(--mx-space-7) - 1px);
}

.mx .mx-freq__mark {
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid var(--mx-line);
  border-radius: var(--mx-radius-circle);
  transition: border-color var(--mx-transition);
}
.mx .mx-freq input:checked + .mx-freq__box .mx-freq__mark {
  border-color: var(--mx-red);
  box-shadow: inset 0 0 0 4px var(--mx-white), inset 0 0 0 12px var(--mx-red);
}

.mx .mx-freq__text { flex: 1; min-width: 0; }
.mx .mx-freq__title {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}
.mx .mx-freq__note {
  display: block;
  margin-top: 2px;
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.4;
  color: var(--mx-text-muted);
}
.mx .mx-freq__price {
  flex: none;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: 700;
  color: var(--mx-text);
}

/* ==========================================================================
   22. Footer
   ========================================================================== */

.mx.mx-footer {
  padding: var(--mx-space-16) var(--mx-pad-x);
  background: var(--mx-shell);
  color: var(--mx-text);
  text-align: left;
  margin: 0;
}

.mx.mx-footer .mx-footer__inner {
  display: grid;
  gap: var(--mx-space-14);
  max-width: var(--mx-container);
  margin: 0 auto;
}

.mx.mx-footer .mx-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mx-space-11) var(--mx-space-7);
}

.mx.mx-footer .mx-footer__col { display: flex; flex-direction: column; }

.mx.mx-footer .mx-footer__head {
  display: block;
  margin: 0 0 var(--mx-space-5);
  padding: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-eyebrow-size);
  font-weight: var(--mx-type-eyebrow-weight);
  line-height: 1;
  letter-spacing: var(--mx-type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--mx-red);
}

.mx.mx-footer .mx-footer__link {
  display: block;
  margin-bottom: var(--mx-space-4);
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.35;
  color: var(--mx-text-muted);
  text-decoration: none;
  transition: color var(--mx-transition);
}
.mx.mx-footer .mx-footer__link:hover { color: var(--mx-red); text-decoration: none; }

.mx.mx-footer .mx-footer__legal {
  margin: var(--mx-space-9) 0 0;
  font-size: var(--mx-type-fine-size);
  line-height: 1.5;
  color: var(--mx-text-ghost);
}
.mx.mx-footer .mx-footer__legal p { margin: 0; }

/* Envy's newsletter-form markup, restyled. */
.mx.mx-footer #newsletter-wrapper {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  width: 100%;
  max-width: 340px;
  margin: var(--mx-space-6) 0 0;
  padding: 0;
  text-align: left;
}
.mx.mx-footer input#newsletter_text {
  flex: 1;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: var(--mx-space-5) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  color: var(--mx-text);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-md);
}
.mx.mx-footer input#newsletter_text:focus { outline: 0; border-color: var(--mx-red); }

.mx.mx-footer #newsletter_submit {
  flex: none;
  margin: 0;
  padding: var(--mx-space-5) var(--mx-space-9);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-alt-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-md);
  cursor: pointer;
}
.mx.mx-footer #newsletter_submit:hover { background: var(--mx-red-dark); }
.mx.mx-footer #newsletter_submit svg { display: none; }
.mx.mx-footer #newsletter_submit::after {
  content: "Join";
  display: block;
}

@media (min-width: 48em) {
  .mx.mx-footer .mx-footer__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .mx.mx-footer .mx-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Footer: match mockup ------------------------------------------------ */

.mx.mx-footer .mx-footer__head { color: var(--mx-text-faint); }

.mx.mx-footer .mx-footer__link {
  color: var(--mx-text);
  margin-bottom: var(--mx-space-5);
}
.mx.mx-footer .mx-footer__link:hover { color: var(--mx-red); }

/* Newsletter is a full-width band under the columns, not a fifth column. */
.mx.mx-footer .mx-footer__inner { display: block; }
.mx.mx-footer .mx-footer__cols { margin-bottom: var(--mx-space-14); }
.mx.mx-footer .mx-footer__signup {
  padding-top: var(--mx-space-14);
  border-top: 1px solid var(--mx-line-hair);
}
.mx.mx-footer .mx-footer__signup .mx-prose { margin: 0; color: var(--mx-text); }

.mx.mx-footer #newsletter-wrapper { max-width: none; }

.mx.mx-footer #newsletter_submit {
  background: var(--mx-plum);
  border-radius: var(--mx-radius-md);
}
.mx.mx-footer #newsletter_submit:hover { background: var(--mx-red); }

@media (min-width: 48em) {
  .mx.mx-footer .mx-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   23. Header
   Undoes the absolute positioning the client's CSS applied to the old header,
   which existed only because the desktop header was hidden and the mobile one
   promoted in its place.
   ========================================================================== */

/* Was `position: static !important` to undo the client's absolute header.
   Sticky serves the same purpose — it overrides the absolute positioning —
   while letting the header pin on scroll. */
body div#shopify-section-header { position: sticky !important; top: 0; z-index: 999990; height: auto !important; }
body #shopify-section-announcement-bar ~ #shopify-section-header { position: sticky !important; top: 0; z-index: 999990; height: auto !important; }
body:not(.template-index) #shopify-section-announcement-bar ~ #main { padding-top: 0 !important; }

.mx.mx-headerbar { background: var(--mx-white); border-bottom: 1px solid var(--mx-line-hair); }

/* Widths mirror Bootstrap's .container so the header aligns with page content. */
.mx.mx-headerbar .mx-headerbar__mobile,
.mx.mx-headerbar .mx-headerbar__desktop {
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--mx-space-5) 15px;
  background: transparent;
}

@media (min-width: 768px) {
  .mx.mx-headerbar .mx-headerbar__mobile,
  .mx.mx-headerbar .mx-headerbar__desktop { width: 750px; }
}
@media (min-width: 992px) {
  .mx.mx-headerbar .mx-headerbar__mobile,
  .mx.mx-headerbar .mx-headerbar__desktop { width: 970px; }
}
@media (min-width: 1200px) {
  .mx.mx-headerbar .mx-headerbar__mobile,
  .mx.mx-headerbar .mx-headerbar__desktop { width: 1170px; }
}

.mx.mx-headerbar .mx-headerbar__mobile { justify-content: space-between; }
.mx.mx-headerbar .mx-headerbar__desktop { display: none; }

/* logo */
.mx.mx-headerbar .mx-headerbar__logo { display: block; flex: none; }
.mx.mx-headerbar .mx-headerbar__logo img { height: 32px; width: auto; }
.mx.mx-headerbar .mx-headerbar__wordmark {
  font-family: var(--mx-font-display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--mx-red);
}

/* burger */
.mx.mx-headerbar .mx-headerbar__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mx-space-1);
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
}
.mx.mx-headerbar .mx-headerbar__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--mx-plum);
  border-radius: 2px;
}

/* actions */
.mx.mx-headerbar .mx-headerbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mx-space-7);
  flex: none;
}
.mx.mx-headerbar .mx-headerbar__account {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  color: var(--mx-plum);
  white-space: nowrap;
}
.mx.mx-headerbar .mx-headerbar__account:hover { color: var(--mx-red); }

.mx.mx-headerbar .mx-headerbar__bag {
  display: flex;
  align-items: center;
  gap: var(--mx-space-2);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  color: var(--mx-plum);
  white-space: nowrap;
}
.mx.mx-headerbar .mx-headerbar__bag:hover { color: var(--mx-red); }
.mx.mx-headerbar .mx-headerbar__bagicon { width: 21px; height: 21px; }
.mx.mx-headerbar .mx-headerbar__bagcount::before { content: "("; }
.mx.mx-headerbar .mx-headerbar__bagcount::after { content: ")"; }

/* desktop nav */
.mx.mx-headerbar .mx-headerbar__nav {
  display: flex;
  align-items: center;
  gap: var(--mx-space-11);
  flex: 1;
  min-width: 0;
}
.mx.mx-headerbar .mx-headerbar__navlink {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  line-height: 1;
  color: var(--mx-plum);
  white-space: nowrap;
  transition: color var(--mx-transition);
}
.mx.mx-headerbar .mx-headerbar__navlink:hover,
.mx.mx-headerbar .mx-headerbar__navlink.is-active { color: var(--mx-red); }

@media (min-width: 64em) {
  .mx.mx-headerbar .mx-headerbar__mobile { display: none; }
  .mx.mx-headerbar .mx-headerbar__desktop { display: flex; }
  .mx.mx-headerbar .mx-headerbar__desktop .mx-headerbar__logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .mx.mx-headerbar .mx-headerbar__desktop { position: relative; justify-content: space-between; }
  .mx.mx-headerbar .mx-headerbar__actions { flex: 1; justify-content: flex-end; }
}

/* ==========================================================================
   24. Mobile drawer — restyles nav-mobile.liquid inside Envy's Slideout
   #menu is moved to <body> on init, so it can't be scoped under .mx.
   ========================================================================== */

#menu, #menu .mobile-menu {
  font-family: var(--mx-font-body);
  background: #fff;
}

#menu .mobile-menu-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  color: rgba(62, 15, 47, 0.4);
}
#menu .mobile-menu-close:hover { color: #d12627; }

#menu .mobile-menu { padding-top: 52px; }

#menu .mobile-menu > li { position: relative; list-style: none; }

#menu .mobile-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #3e0f2f;
  border-bottom: 1px solid rgba(62, 15, 47, 0.08);
  transition: color 160ms ease, background 160ms ease;
}
#menu .mobile-menu > li > a:hover {
  color: #d12627;
  background: #fdf1f0;
  text-decoration: none;
}

/* Chevron sits in the same row as the link, not as a separate block. */
#menu .mobile-menu .mobile-menu-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(62, 15, 47, 0.08);
  color: rgba(62, 15, 47, 0.3);
}
#menu .mobile-menu .mobile-menu-right:hover { color: #d12627; background: transparent; }
#menu .mobile-menu .mobile-menu-right svg { width: 16px; height: 16px; }

/* Back rows in the child and grandchild panels */
#menu .mobile-menu-back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(62, 15, 47, 0.55);
  font-weight: 600;
}
#menu .mobile-menu-back .mobile-menu-title { flex: 1; text-align: left; }

/* Account links read as secondary */
#menu .mobile-customer-link > a {
  font-weight: 500;
  color: rgba(62, 15, 47, 0.65);
}

/* Envy's custom CSS hides the drawer search; leaving that alone. */

/* Join the Club CTA at the foot of the mobile drawer */
#menu .mobile-menu-cta {
  padding: 16px 18px 8px;
  list-style: none;
}
#menu .mobile-menu-cta .mobile-menu-cta__btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background: #d12627;
  border: 0;
  border-radius: 100px;
  transition: background 160ms ease;
}
#menu .mobile-menu-cta .mobile-menu-cta__btn:hover {
  background: #b01f20;
  color: #fff;
  text-decoration: none;
}

/* Hide the drawer until Slideout initialises it, so it doesn't flash inline. */
/* Hidden until Slideout initialises and moves #menu to <body>. */
/* The drawer is only ever visible via Envy's Slideout, which removes
   .slideout-panel-hidden when opening. Keep it hidden otherwise. */
#menu.slideout-panel-hidden { display: none !important; }

/* Child panels are shown by the mobile-menu JS toggling .mobile-menu-hidden. */
#menu .mobile-menu-hidden { display: none !important; }

/* Beat .mobile-menu--wrapper ul li a from the client's stylesheet. */
body #menu.mobile-menu--wrapper ul li a {
  padding: 12px 18px;
  width: 100%;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #3e0f2f;
  border-bottom: 1px solid rgba(62, 15, 47, 0.08);
}
body #menu.mobile-menu--wrapper ul li a:hover { color: #d12627; background: #fdf1f0; }
body #menu.mobile-menu--wrapper ul li a.mobile-menu-right {
  width: 48px;
  padding: 13px;
  border-left: 0;
}
body #menu.mobile-menu--wrapper ul li.mobile-menu-cta a {
  width: 100%;
  border-bottom: 0;
  border-radius: 100px;
  background: #d12627;
  color: #fff;
  text-align: center;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 20px;
}
body #menu.mobile-menu--wrapper ul li.mobile-menu-cta a:hover { background: #b01f20; color: #fff; }

#menu { position: relative; }
#menu .mobile-menu { position: relative; }
#menu .mobile-menu-close { display: none; }

/* --- Desktop nav dropdowns ----------------------------------------------- */

.mx.mx-headerbar .mx-headerbar__item { position: relative; }

.mx.mx-headerbar .mx-headerbar__navlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--mx-space-5) 0;
}

.mx.mx-headerbar .mx-headerbar__caret {
  font-size: 9px;
  line-height: 1;
  color: rgba(62, 15, 47, 0.4);
  transition: transform var(--mx-transition), color var(--mx-transition);
}
.mx.mx-headerbar .mx-headerbar__item--has-menu:hover .mx-headerbar__caret {
  transform: rotate(180deg);
  color: var(--mx-red);
}

.mx.mx-headerbar .mx-headerbar__dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--mx-space-4) 0;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: var(--mx-radius-xl);
  box-shadow: 0 12px 28px rgba(62, 15, 47, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--mx-transition), transform var(--mx-transition), visibility var(--mx-transition);
}

.mx.mx-headerbar .mx-headerbar__item--has-menu:hover .mx-headerbar__dropdown,
.mx.mx-headerbar .mx-headerbar__item--has-menu:focus-within .mx-headerbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mx.mx-headerbar .mx-headerbar__dropitem {
  display: block;
  padding: var(--mx-space-4) var(--mx-space-7);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 500;
  line-height: 1.3;
  color: var(--mx-plum);
  white-space: nowrap;
  transition: color var(--mx-transition), background var(--mx-transition);
}
.mx.mx-headerbar .mx-headerbar__dropitem:hover {
  color: var(--mx-red);
  background: var(--mx-pink);
}

/* ==========================================================================
   25. Members' Signature Maccs
   ========================================================================== */

.mx .mx-signature {
  max-width: var(--mx-container);
  margin: var(--mx-space-16) auto;
  overflow: hidden;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-flavors { padding-top: 0; }
.mx .mx-quotes { padding-top: 0; }

.mx .mx-signature__head {
  padding: var(--mx-space-14) var(--mx-pad-x);
  background: var(--mx-pink);
  text-align: center;
}
.mx .mx-signature__head .mx-eyebrow { margin-bottom: var(--mx-space-3); }
.mx .mx-signature__head .mx-heading {
  margin: 0 0 var(--mx-space-5);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-sub-size);
  line-height: var(--mx-type-sub-lh);
  text-transform: uppercase;
  color: var(--mx-text);
}
.mx .mx-signature__head .mx-prose {
  max-width: 480px;
  margin: 0 auto;
  color: var(--mx-text-muted);
}

.mx .mx-signature__rail { padding: var(--mx-space-9) var(--mx-pad-x) 0; }

.mx .mx-signature .mx-rail--cards {
  display: flex;
  gap: var(--mx-space-7);
  margin: 0;
  padding: 0 0 var(--mx-space-3);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.mx .mx-signature .mx-rail--cards::-webkit-scrollbar { display: none; }

.mx .mx-signature .mx-card {
  flex: 0 0 62%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: var(--mx-radius-xl);
}
.mx .mx-signature .mx-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mx-pink);
}
.mx .mx-signature .mx-card__media > .lazyload-blur-wrapper { height: 100%; }
.mx .mx-signature .mx-card__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.mx .mx-signature .mx-card__body { padding: var(--mx-space-5); }
.mx .mx-signature .mx-card__name {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: var(--mx-type-name-weight);
  line-height: var(--mx-type-name-lh);
  color: var(--mx-text);
}

.mx .mx-signature__cta {
  padding: var(--mx-space-9) var(--mx-pad-x) var(--mx-space-14);
  text-align: center;
}
.mx .mx-signature__cta .mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mx-space-6) var(--mx-space-14);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-alt-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  transition: background var(--mx-transition);
}
.mx .mx-signature__cta .mx-btn:hover { background: var(--mx-red-dark); }
.mx .mx-signature__cta .mx-fine { margin-top: var(--mx-space-5); }

@media (min-width: 48em) {
  .mx .mx-signature .mx-card { flex: 0 0 calc((100% - 3 * var(--mx-space-7)) / 4); }
}

/* ==========================================================================
   26. Member price band + Club card
   ========================================================================== */

.mx .mx-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-7);
  margin: 0 0 var(--mx-space-9);
  padding: var(--mx-space-6) var(--mx-space-7);
  background: var(--mx-pink);
  border-radius: var(--mx-radius-xl);
}
.mx .mx-member__left { flex: none; }
.mx .mx-member__label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mx-red);
}
.mx .mx-member__price {
  display: block;
  margin-top: var(--mx-space-2);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--mx-text);
}
.mx .mx-member__note {
  margin: 0;
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.4;
  color: var(--mx-text-muted);
  text-align: right;
}

.mx .mx-club { display: block; margin: 0 0 var(--mx-space-9); cursor: pointer; }
.mx .mx-club__check { position: absolute; opacity: 0; pointer-events: none; }

.mx .mx-club__box {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-5);
  padding: var(--mx-space-7);
  background: var(--mx-pink);
  border: 1px solid rgba(209, 38, 39, 0.35);
  border-radius: var(--mx-radius-xl);
  transition: border-color var(--mx-transition);
}
.mx .mx-club:hover .mx-club__box { border-color: var(--mx-red); }
.mx .mx-club__check:checked + .mx-club__box {
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-7) - 1px);
}

/* Unchecked: empty white box, red border. */
.mx .mx-club__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 1;
  color: transparent;
  background: var(--mx-white);
  border: 2px solid var(--mx-red);
  border-radius: var(--mx-radius-md);
  transition: background var(--mx-transition), color var(--mx-transition);
}

/* Checked: solid red, white heart. */
.mx .mx-club__check:checked + .mx-club__box .mx-club__mark {
  color: var(--mx-white);
  background: var(--mx-red);
  box-shadow: none;
}

.mx .mx-club__body { flex: 1; min-width: 0; }
.mx .mx-club__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mx-space-5);
}
.mx .mx-club__title {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}
.mx .mx-club__price {
  flex: none;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 700;
  color: var(--mx-red);
}
.mx .mx-club__copy {
  display: block;
  margin-top: var(--mx-space-2);
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.4;
  color: var(--mx-text-muted);
}
.mx .mx-club__link {
  display: inline-block;
  margin-top: var(--mx-space-4);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  color: var(--mx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Member band + Club card: match mockup ------------------------------- */

.mx .mx-member {
  align-items: center;
  padding: var(--mx-space-7) var(--mx-space-9);
  border: 1px solid rgba(209, 38, 39, 0.25);
  border-radius: var(--mx-radius-xl);
}
.mx .mx-member__label {
  font-size: var(--mx-type-label-size);
  letter-spacing: var(--mx-type-label-ls);
}
.mx .mx-member__price {
  margin-top: var(--mx-space-3);
  font-size: 30px;
}
.mx .mx-member__note {
  max-width: 240px;
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.4;
}

.mx .mx-club__heading {
  display: block;
  margin: 0 0 var(--mx-space-4);
  color: var(--mx-text);
}

.mx .mx-club__box {
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-7) - 1px);
}
.mx .mx-club__check:checked + .mx-club__box {
  border-color: var(--mx-red);
  box-shadow: inset 0 0 0 1px var(--mx-red);
}
.mx .mx-club__mark {
  width: 30px;
  height: 30px;
  border-radius: var(--mx-radius-md);
  font-size: 14px;
}
.mx .mx-club__title { font-size: var(--mx-type-body-size); }
.mx .mx-club__price { font-size: var(--mx-type-body-size); }

/* --- Modal frequency choices --------------------------------------------- */

.mx.mx-modal .mx-choices {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-3);
  margin-bottom: var(--mx-space-7);
}

.mx.mx-modal .mx-choice {
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  width: 100%;
  padding: var(--mx-space-5) var(--mx-space-6);
  text-align: left;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-xl);
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx.mx-modal .mx-choice:hover { border-color: var(--mx-red); }
.mx.mx-modal .mx-choice[aria-checked="true"] {
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  padding: calc(var(--mx-space-5) - 1px) calc(var(--mx-space-6) - 1px);
}

.mx.mx-modal .mx-choice__dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mx-line);
  border-radius: var(--mx-radius-circle);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition);
}
.mx.mx-modal .mx-choice[aria-checked="true"] .mx-choice__dot {
  border-color: var(--mx-red);
  box-shadow: inset 0 0 0 3px var(--mx-white), inset 0 0 0 11px var(--mx-red);
}

.mx.mx-modal .mx-choice__text { flex: 1; min-width: 0; }
.mx.mx-modal .mx-choice__title {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}
.mx.mx-modal .mx-choice__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--mx-type-fine-size);
  line-height: 1.35;
  color: var(--mx-text-muted);
}
.mx.mx-modal .mx-choice__price {
  flex: none;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 700;
  color: var(--mx-text);
}

.mx .mx-page-head,
.mx .mx-filters,
.mx .mx-toolbar {
  margin-left: var(--mx-pad-x);
  margin-right: var(--mx-pad-x);
  padding-left: 0;
  padding-right: 0;
}

.mx .mx-toolbar__sort { position: relative; display: inline-flex; align-items: center; gap: var(--mx-space-3); }
.mx .mx-toolbar__sort > label {
  margin: 0;
  font-size: var(--mx-type-label-size);
  font-weight: 500;
  line-height: 1;
  color: var(--mx-text-dim);
  text-transform: none;
}
.mx .mx-toolbar__sort select#sort-by.browser-default {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--mx-space-3) 28px var(--mx-space-3) var(--mx-space-5);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 600;
  line-height: 1;
  color: var(--mx-plum);
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-pill);
  cursor: pointer;
}
.mx .mx-toolbar__sort select#sort-by.browser-default:hover { border-color: var(--mx-plum); }
.mx .mx-toolbar__sort select#sort-by.browser-default:focus { outline: 0; border-color: var(--mx-red); }
.mx .mx-toolbar__sort::after {
  content: "\25BE";
  position: absolute;
  right: var(--mx-space-5);
  pointer-events: none;
  font-size: 9px;
  color: var(--mx-text-dim);
}

/* ==========================================================================
   27. Filter chip rail — single-line horizontal scroll
   Re-declares the rail behaviour: the original `.mx .mx-rail` rule in
   section 12 is swallowed by a malformed comment header above it.
   ========================================================================== */

.mx .mx-rail--chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mx .mx-rail--chips::-webkit-scrollbar { display: none; }

.mx .mx-rail--chips > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Full-bleed on mobile: the gutter moves from the band to the rail's padding,
   so chips scroll to both page edges but still start aligned with the heading. */
@media (max-width: 47.9375em) {
  .mx .mx-filters {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
  .mx .mx-filters .mx-rail--chips {
    padding-left: var(--mx-pad-x);
    padding-right: var(--mx-pad-x);
    scroll-padding-left: var(--mx-pad-x);
  }
}

@media (min-width: 48em) {
  .mx .mx-filters { overflow: visible; }
}

/* ==========================================================================
   28. Announcement bar
   Renders outside the .mx wrapper, so these target the section ID directly
   (same approach as the header rules in section 23). The ID is also what
   beats the section's own inline <style> block, which loads after this file.
   Colors stay merchant-editable via the section's two color settings.
   ========================================================================== */

#shopify-section-announcement-bar .notification-bar {
  padding: 9px 18px;
  text-align: center;
  border-bottom: 1px solid rgba(62, 15, 47, 0.12);
}

#shopify-section-announcement-bar .notification-bar__message,
#shopify-section-announcement-bar a.notification-bar__message {
  display: block;
  margin: 0;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The link variant nests the <p> inside the <a>; both need the reset. */
#shopify-section-announcement-bar a.notification-bar__message p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

#shopify-section-announcement-bar a.notification-bar__message:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   29. The Extra Batch page
   Self-contained. Nothing here depends on the shared components in sections
   3 to 20, several of which never parse because of malformed comment headers
   at roughly lines 670, 802, 935, 1002, 1053 and 1298. Every value this page
   needs is declared below.
   Never write an asterisk followed by a slash inside a comment body.
   ========================================================================== */

/* Full bleed. theme.liquid wraps page templates in Bootstrap's .container,
   so the page breaks out to the viewport edge. Note that the transform makes
   this element the containing block for fixed children, which is why the
   sticky bar is moved to body by script. */
.mx-eb {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 76px;
}

.mx-eb .mx-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Bowlby carries no trademark glyph. */
.mx-eb .mx-tm {
  font-family: var(--mx-font-body);
  font-size: 0.36em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

/* --- Shared type --------------------------------------------------------- */

.mx-eb .mx-eb-h2 {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--mx-plum);
  text-wrap: balance;
  margin: 0;
}

.mx-eb .mx-eb-h2--center { text-align: center; }
.mx-eb .mx-eb-accent { color: var(--mx-red); }

.mx-eb .mx-eb-prose {
  font-family: var(--mx-font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mx-text-muted);
  margin: 0;
}

.mx-eb .mx-eb-prose p { margin: 0; }
.mx-eb .mx-eb-prose strong { color: var(--mx-text); font-weight: 700; }
.mx-eb .mx-eb-prose--center { text-align: center; margin-left: auto; margin-right: auto; }

.mx-eb .mx-eb-eyebrow {
  font-family: var(--mx-font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-red);
  margin: 0;
}

.mx-eb .mx-eb-eyebrow--center { text-align: center; margin-bottom: 20px; }

/* --- Stamp pill ---------------------------------------------------------- */

.mx-eb .mx-eb-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 17px;
  font-family: var(--mx-font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 2px solid var(--mx-red);
  border-radius: 100px;
  transform: rotate(-2deg);
}

.mx-eb .mx-eb-stamp__h { font-size: 11px; line-height: 1; }
.mx-eb .mx-eb-stamp--plum { color: var(--mx-plum); border-color: var(--mx-plum); }

/* --- Button -------------------------------------------------------------- */

.mx-eb .mx-eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease;
}

.mx-eb .mx-eb-btn:hover,
.mx-eb .mx-eb-btn:focus { background: var(--mx-red-dark); color: var(--mx-white); text-decoration: none; }
.mx-eb .mx-eb-btn--block { display: flex; width: 100%; }
.mx-eb .mx-eb-btn__h { font-size: 13px; line-height: 1; }
.mx-eb .mx-eb-form { margin: 0; }

/* --- Tape ---------------------------------------------------------------- */
/* Sits above the card edge, so every taped card needs clear space above it. */

.mx-eb .mx-eb-tape {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 3;
  width: 150px;
  height: 34px;
  background: rgba(247, 200, 197, 0.72);
  box-shadow: 0 2px 6px rgba(62, 15, 47, 0.12);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mx-eb .mx-eb-hero {
  padding: 72px 0 80px;
  background: var(--mx-plum);
}

.mx-eb .mx-eb-herocard {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 48px 44px 42px;
  text-align: center;
  background: var(--mx-white);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  transform: rotate(-0.6deg);
}

.mx-eb .mx-eb-herocard .mx-eb-tape { transform: translateX(-50%) rotate(-2deg); }
.mx-eb .mx-eb-herocard .mx-eb-stamp { margin-bottom: 20px; }

.mx-eb .mx-eb-herocard__title {
  margin: 0 0 14px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--mx-plum);
  text-wrap: balance;
}

.mx-eb .mx-eb-herocard__sub {
  margin: 0 0 18px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mx-red);
}

.mx-eb .mx-eb-herocard__copy {
  max-width: 46ch;
  margin: 0 auto 26px;
  font-family: var(--mx-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mx-text-muted);
}

/* ==========================================================================
   Story
   ========================================================================== */

.mx-eb .mx-eb-story { padding: 76px 0; background: var(--mx-shell); }

.mx-eb .mx-eb-storycard {
  background: var(--mx-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(62, 15, 47, 0.12);
}

/* Counts. Plum for the classics, red for the exclusives, so the colour does
   the comparing and the labels do not have to. */
.mx-eb .mx-eb-counts { display: grid; grid-template-columns: 1fr; }
.mx-eb .mx-eb-count { padding: 24px; background: var(--mx-plum); }
.mx-eb .mx-eb-count--x { background: var(--mx-red); }

.mx-eb .mx-eb-count__n {
  margin: 0;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  color: var(--mx-white);
}

.mx-eb .mx-eb-count__l {
  margin: 10px 0 0;
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.mx-eb .mx-eb-count--x .mx-eb-count__l { color: rgba(255, 255, 255, 0.88); font-weight: 500; }

.mx-eb .mx-eb-storybody { display: grid; grid-template-columns: 1fr; }
.mx-eb .mx-eb-storybody__l { padding: 30px 24px 26px; }
.mx-eb .mx-eb-storybody__r { padding: 0 24px 26px; display: flex; flex-direction: column; gap: 26px; }
.mx-eb .mx-eb-storybody__l .mx-eb-h2 { font-size: 23px; margin-bottom: 18px; }

/* --- Speech bubbles ------------------------------------------------------ */

.mx-eb .mx-eb-bubble {
  position: relative;
  padding: 22px 24px;
  background: var(--mx-pink);
  border-radius: 20px;
}

.mx-eb .mx-eb-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid var(--mx-pink);
}

.mx-eb .mx-eb-bubble--l::after { left: 36px; }
.mx-eb .mx-eb-bubble--r::after { right: 36px; }

.mx-eb .mx-eb-bubble__q {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mx-plum);
}

/* Only the flavour words carry the display face, which is what makes the
   line scannable rather than a block of red uppercase. */
.mx-eb .mx-eb-flavor {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 0.94em;
  text-transform: uppercase;
  color: var(--mx-red);
}

/* --- Story foot ---------------------------------------------------------- */

.mx-eb .mx-eb-storyfoot {
  padding: 6px 24px 30px;
  text-align: center;
  border-top: 1px solid var(--mx-line-hair);
  margin-top: 26px;
  padding-top: 26px;
}

.mx-eb .mx-eb-kicker {
  margin: 0 0 16px;
  font-family: var(--mx-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mx-plum);
}

.mx-eb .mx-eb-storyfoot .mx-eb-prose { max-width: 62ch; }

.mx-eb .mx-eb-members {
  margin: 10px 0 0;
  font-family: var(--mx-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-red);
}

/* ==========================================================================
   Signature Maccs marquee
   ========================================================================== */

.mx-eb .mx-eb-rail-band { padding: 60px 0; background: var(--mx-pink); overflow: hidden; }
.mx-eb .mx-eb-rail-head { text-align: center; margin-bottom: 34px; }
.mx-eb .mx-eb-rail-head .mx-eb-stamp { margin-bottom: 20px; }
.mx-eb .mx-eb-rail-head .mx-eb-h2 { margin-bottom: 14px; }
.mx-eb .mx-eb-rail-head__copy { max-width: 52ch; }

.mx-eb .mx-eb-marquee {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: mx-eb-slide 46s linear infinite;
}

.mx-eb .mx-eb-marquee:hover { animation-play-state: paused; }

@keyframes mx-eb-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mx-eb .mx-eb-marquee {
    animation: none;
    width: auto;
    overflow-x: auto;
    padding: 0 18px;
    scrollbar-width: none;
  }
  .mx-eb .mx-eb-marquee::-webkit-scrollbar { display: none; }
}

.mx-eb .mx-eb-mcard {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: 16px;
  overflow: hidden;
}

.mx-eb .mx-eb-mcard__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mx-pink);
}

.mx-eb .mx-eb-mcard__media > .lazyload-blur-wrapper { height: 100%; }

.mx-eb .mx-eb-mcard__media img,
.mx-eb .mx-eb-mcard__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx-eb .mx-eb-mcard__media .ls-blur-up-img { object-fit: cover; }

.mx-eb .mx-eb-excl {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-family: var(--mx-font-body);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(62, 15, 47, 0.22);
}

.mx-eb .mx-eb-mcard__b { display: block; padding: 14px 14px 16px; }

.mx-eb .mx-eb-mcard__t {
  display: block;
  font-family: var(--mx-font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mx-plum);
}

/* --- The plus element ---------------------------------------------------- */
/* Card form rides in the rail on tablet and up. Bar form takes over on
   mobile, where a moving target is hard to read. */

.mx-eb .mx-eb-more__n {
  font-family: var(--mx-font-display);
  font-weight: 400;
  line-height: 0.9;
  color: var(--mx-white);
}

.mx-eb .mx-eb-more--card {
  display: none;
  flex: 0 0 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 18px;
  text-align: center;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 16px;
}

.mx-eb .mx-eb-more--card .mx-eb-more__n { font-size: 40px; }

.mx-eb .mx-eb-more--card .mx-eb-more__t {
  font-family: var(--mx-font-display);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mx-eb .mx-eb-more--card .mx-eb-more__s {
  margin-top: 6px;
  font-family: var(--mx-font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.mx-eb .mx-eb-more--card .mx-eb-more__cta {
  margin-top: 14px;
  padding: 9px 16px;
  font-family: var(--mx-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border-radius: 100px;
}

.mx-eb .mx-eb-more--bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  padding: 20px 24px;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 16px;
}

.mx-eb .mx-eb-more--bar .mx-eb-more__n { font-size: 34px; flex: none; }
.mx-eb .mx-eb-more--bar .mx-eb-more__text { text-align: left; }

.mx-eb .mx-eb-more--bar .mx-eb-more__t {
  display: block;
  font-family: var(--mx-font-display);
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mx-eb .mx-eb-more--bar .mx-eb-more__s {
  display: block;
  margin-top: 3px;
  font-family: var(--mx-font-body);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Benefits
   ========================================================================== */

.mx-eb .mx-eb-benefits { padding: 60px 0; background: var(--mx-white); }
.mx-eb .mx-eb-benefits .mx-eb-rail-head { margin-bottom: 36px; }

.mx-eb .mx-eb-bento { display: grid; grid-template-columns: 1fr; gap: 12px; }

.mx-eb .mx-eb-tile {
  padding: 26px 22px;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: 22px;
}

.mx-eb .mx-eb-tile--plum { color: var(--mx-white); background: var(--mx-plum); border-color: transparent; }
.mx-eb .mx-eb-tile--red { color: var(--mx-white); background: var(--mx-red); border-color: transparent; }
.mx-eb .mx-eb-tile--pink { background: var(--mx-pink); border-color: transparent; }

.mx-eb .mx-eb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  background: var(--mx-pink);
  border-radius: 14px;
  color: var(--mx-red);
}

.mx-eb .mx-eb-ico svg { display: block; width: 25px; height: 25px; }
.mx-eb .mx-eb-tile--plum .mx-eb-ico,
.mx-eb .mx-eb-tile--red .mx-eb-ico { background: rgba(255, 255, 255, 0.16); color: var(--mx-white); }
.mx-eb .mx-eb-tile--pink .mx-eb-ico { background: var(--mx-white); }

/* One size for every tile title, so the wide tiles match each other. */
.mx-eb .mx-eb-tile__h {
  margin: 18px 0 0;
  font-family: var(--mx-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mx-text);
}

.mx-eb .mx-eb-tile__p {
  margin: 7px 0 0;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-tile--plum .mx-eb-tile__h,
.mx-eb .mx-eb-tile--red .mx-eb-tile__h { color: var(--mx-white); }
.mx-eb .mx-eb-tile--plum .mx-eb-tile__p { color: rgba(255, 255, 255, 0.72); }
.mx-eb .mx-eb-tile--red .mx-eb-tile__p { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   How it works
   ========================================================================== */

.mx-eb .mx-eb-steps-band { padding: 60px 0; background: var(--mx-shell); }

/* Mobile: the same rule and ringed nodes as desktop, turned vertical. */
.mx-eb .mx-eb-track {
  position: relative;
  margin-top: 34px;
  padding-left: 62px;
}

.mx-eb .mx-eb-track::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, rgba(209, 38, 39, 0.25), var(--mx-red) 22%, var(--mx-red) 78%, rgba(209, 38, 39, 0.25));
}

.mx-eb .mx-eb-track__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.mx-eb .mx-eb-station { position: relative; text-align: left; padding: 0 0 30px; }
.mx-eb .mx-eb-station:last-child { padding-bottom: 0; }

.mx-eb .mx-eb-station__n {
  position: absolute;
  top: -2px;
  left: -62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--mx-shell), 0 0 0 7px rgba(209, 38, 39, 0.2);
}

.mx-eb .mx-eb-station__h {
  margin: 0 0 6px;
  font-family: var(--mx-font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mx-text);
}

.mx-eb .mx-eb-station__p {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mx-text-muted);
}

/* ==========================================================================
   Buy box
   ========================================================================== */

/* Extra top padding so the tape is never clipped. */
.mx-eb .mx-eb-buy { padding: 76px 0 60px; background: var(--mx-plum); }

.mx-eb .mx-eb-buycard {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--mx-white);
  border-radius: 4px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.32);
  transform: rotate(0.4deg);
}

/* Tilted the other way to the card, so it reads as stuck on. */
.mx-eb .mx-eb-buycard .mx-eb-tape { transform: translateX(-50%) rotate(-2.4deg); }

.mx-eb .mx-eb-buycard__l {
  padding: 44px 24px 34px;
  text-align: center;
  background: var(--mx-white);
  border-bottom: 2px dashed var(--mx-line-soft);
  border-radius: 4px 4px 0 0;
}

.mx-eb .mx-eb-buycard__r {
  padding: 34px 24px;
  background: var(--mx-pink);
  border-radius: 0 0 4px 4px;
}

.mx-eb .mx-eb-buycard__l .mx-eb-stamp { margin-bottom: 20px; }

.mx-eb .mx-eb-amount {
  margin: 0;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--mx-red);
}

.mx-eb .mx-eb-amount__label {
  margin: 10px 0 12px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--mx-plum);
}

.mx-eb .mx-eb-amount__note {
  margin: 0 0 28px;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-fine {
  margin: 18px 0 0;
  font-family: var(--mx-font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--mx-text-ghost);
}

.mx-eb .mx-eb-listhead {
  margin: 0 0 20px;
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mx-text);
}

.mx-eb .mx-eb-list { margin: 0; padding: 0; list-style: none; }

.mx-eb .mx-eb-list__i {
  display: flex;
  gap: 11px;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mx-text-muted);
  text-align: left;
}

.mx-eb .mx-eb-list__i + .mx-eb-list__i { margin-top: 15px; }
.mx-eb .mx-eb-list__h { flex: none; color: var(--mx-red); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.mx-eb .mx-eb-faq-band { padding: 60px 0 70px; background: var(--mx-white); }

.mx-eb .mx-eb-accordion {
  margin-top: 34px;
  text-align: left;
  border-bottom: 1px solid var(--mx-line-soft);
}

.mx-eb .mx-eb-accordion__col { display: contents; }
.mx-eb .mx-eb-q { border-top: 1px solid var(--mx-line-soft); }

.mx-eb .mx-eb-q__b {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 21px 0;
  font-family: var(--mx-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--mx-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.mx-eb .mx-eb-q__b:hover { color: var(--mx-red); }

.mx-eb .mx-eb-q__s {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

.mx-eb .mx-eb-q__s::before,
.mx-eb .mx-eb-q__s::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--mx-red);
  transition: transform 160ms ease;
}

.mx-eb .mx-eb-q__s::after { transform: rotate(90deg); }
.mx-eb .mx-eb-q__b[aria-expanded="true"] .mx-eb-q__s::after { transform: rotate(0deg); }

.mx-eb .mx-eb-q__p {
  padding: 0 0 21px;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mx-text-muted);
  max-width: 46ch;
}

.mx-eb .mx-eb-q__p p { margin: 0 0 12px; }
.mx-eb .mx-eb-q__p p:last-child { margin-bottom: 0; }
.mx-eb .mx-eb-q__p[hidden] { display: none; }

/* ==========================================================================
   Sticky join bar
   Selector is not scoped under mx-eb because the script moves this element
   to body on init.
   ========================================================================== */

.mx-eb-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999997;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
  background: #ffffff;
  border-top: 1px solid rgba(62, 15, 47, 0.22);
  box-shadow: 0 -2px 14px rgba(62, 15, 47, 0.1);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 320ms ease, opacity 320ms ease;
}

.mx-eb-stickybar.is-visible { transform: translateY(0); opacity: 1; }
.mx-eb-stickybar[hidden] { display: none; }

.mx-eb-stickybar .mx-eb-stickybar__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.mx-eb-stickybar .mx-eb-stickybar__name {
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #3e0f2f;
}

.mx-eb-stickybar .mx-eb-stickybar__price {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #d12627;
}

.mx-eb-stickybar .mx-eb-stickybar__note { display: none; }
.mx-eb-stickybar .mx-eb-form { flex: none; margin: 0; }

.mx-eb-stickybar .mx-eb-stickybar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 12px 22px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  background: #d12627;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.mx-eb-stickybar .mx-eb-stickybar__btn:hover { background: #b01f20; color: #ffffff; }
.mx-eb-stickybar .mx-eb-btn__h { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .mx-eb-stickybar { transition: none; }
}

/* ==========================================================================
   30. The Extra Batch — tablet and desktop
   ========================================================================== */

@media (min-width: 48em) {
  .mx-eb .mx-eb-mcard,
  .mx-eb .mx-eb-more--card { flex: 0 0 216px; }
  .mx-eb .mx-eb-more--card { display: flex; }
  .mx-eb .mx-eb-more--bar { display: none; }
  .mx-eb .mx-eb-more--card .mx-eb-more__n { font-size: 48px; }
  .mx-eb .mx-eb-more--card .mx-eb-more__t { font-size: 13px; }
}

@media (min-width: 64em) {

  .mx-eb { padding-bottom: 84px; }
  .mx-eb .mx-container { padding: 0 28px; }
  .mx-eb .mx-eb-h2 { font-size: 36px; }

  /* --- Hero -------------------------------------------------------------- */
  .mx-eb .mx-eb-hero { padding: 90px 0 96px; }
  .mx-eb .mx-eb-herocard { padding: 56px 48px 48px; }
  .mx-eb .mx-eb-herocard__title { font-size: 52px; }
  .mx-eb .mx-eb-herocard__sub { font-size: 15px; }
  .mx-eb .mx-eb-herocard__copy { font-size: 15.5px; }

  /* --- Story ------------------------------------------------------------- */
  .mx-eb .mx-eb-story { padding: 86px 0; }
  .mx-eb .mx-eb-counts { grid-template-columns: 1fr 1fr; }
  .mx-eb .mx-eb-count { padding: 32px 40px; }
  .mx-eb .mx-eb-count__n { font-size: 52px; }

  .mx-eb .mx-eb-storybody { grid-template-columns: 1fr 1fr; }

  .mx-eb .mx-eb-storybody__l {
    padding: 46px 44px;
    border-right: 2px solid rgba(209, 38, 39, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mx-eb .mx-eb-storybody__r {
    padding: 46px 44px;
    justify-content: center;
  }

  .mx-eb .mx-eb-storybody__l .mx-eb-h2 { font-size: 29px; }
  .mx-eb .mx-eb-bubble { padding: 26px 30px; }
  .mx-eb .mx-eb-bubble__q { font-size: 19px; }

  .mx-eb .mx-eb-storyfoot {
    margin-top: 0;
    padding: 38px 44px;
    border-top: 1px solid var(--mx-line-hair);
  }

  /* --- Marquee ----------------------------------------------------------- */
  .mx-eb .mx-eb-rail-band { padding: 78px 0; }
  .mx-eb .mx-eb-rail-head { margin-bottom: 42px; }

  /* --- Benefits ---------------------------------------------------------- */
  .mx-eb .mx-eb-benefits { padding: 80px 0; }
  .mx-eb .mx-eb-benefits .mx-eb-rail-head { margin-bottom: 46px; }
  .mx-eb .mx-eb-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .mx-eb .mx-eb-tile { padding: 30px 28px; }
  .mx-eb .mx-eb-tile--wide { grid-column: span 2; }
  .mx-eb .mx-eb-tile--wide .mx-eb-tile__h { font-size: 19px; }

  /* --- How it works: the track turns horizontal -------------------------- */
  .mx-eb .mx-eb-steps-band { padding: 80px 0; }

  .mx-eb .mx-eb-track {
    margin-top: 52px;
    padding-top: 56px;
    padding-left: 0;
  }

  .mx-eb .mx-eb-track::before {
    top: 22px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(209, 38, 39, 0.25), var(--mx-red), rgba(209, 38, 39, 0.25));
  }

  .mx-eb .mx-eb-track__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .mx-eb .mx-eb-station { text-align: center; padding: 0 12px; }

  .mx-eb .mx-eb-station__n {
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    font-size: 16px;
    box-shadow: 0 0 0 6px var(--mx-shell), 0 0 0 8px rgba(209, 38, 39, 0.2);
  }

  .mx-eb .mx-eb-station__h { font-size: 15px; }
  .mx-eb .mx-eb-station__p { font-size: 13.5px; }

  /* --- Buy box ----------------------------------------------------------- */
  .mx-eb .mx-eb-buy { padding: 96px 0 86px; }
  .mx-eb .mx-eb-buycard { grid-template-columns: 0.9fr 1.1fr; }

  .mx-eb .mx-eb-buycard__l {
    padding: 52px 46px;
    border-bottom: 0;
    border-right: 2px dashed var(--mx-line-soft);
    border-radius: 4px 0 0 4px;
  }

  .mx-eb .mx-eb-buycard__r { padding: 52px 46px; border-radius: 0 4px 4px 0; }
  .mx-eb .mx-eb-amount { font-size: 56px; }

  /* --- FAQ --------------------------------------------------------------- */
  .mx-eb .mx-eb-faq-band { padding: 80px 0 90px; }

  .mx-eb .mx-eb-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    align-items: start;
    margin-top: 44px;
    border-bottom: 0;
  }

  .mx-eb .mx-eb-accordion__col {
    display: block;
    border-bottom: 1px solid var(--mx-line-soft);
  }

  /* --- Sticky bar -------------------------------------------------------- */
  .mx-eb-stickybar { padding: 14px 44px; }

  .mx-eb-stickybar .mx-eb-stickybar__text {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }

  .mx-eb-stickybar .mx-eb-stickybar__name { font-size: 16px; }
  .mx-eb-stickybar .mx-eb-stickybar__price { font-size: 15px; }

  .mx-eb-stickybar .mx-eb-stickybar__note {
    display: inline;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(62, 15, 47, 0.65);
  }

  .mx-eb-stickybar .mx-eb-stickybar__btn { padding: 14px 32px; font-size: 12.5px; }
}

/* ==========================================================================
   31. The Extra Batch — corrections
   ========================================================================== */

/* --- Hero button: short label and a price line on mobile ----------------- */
/* The full label wraps to two lines at phone width, so mobile drops the
   price and the heart and states the price as body copy underneath. */

.mx-eb .mx-eb-btn__full { display: none; }
.mx-eb .mx-eb-btn__short { display: inline; }
.mx-eb .mx-eb-btn--hero .mx-eb-btn__h { display: none; }
.mx-eb .mx-eb-btn--buy .mx-eb-btn__h { display: none; }

.mx-eb .mx-eb-herocard__price {
  margin: 14px 0 0;
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mx-text-muted);
}

/* --- Story foot: lighter than the bubbles -------------------------------- */
/* Sits between the pink bubbles and the white card, so it needs to read as
   a third value rather than matching either. */

.mx-eb .mx-eb-storyfoot { background: #fef8f7; }

/* --- FAQ: bottom padding matches top ------------------------------------- */

.mx-eb .mx-eb-faq-band { padding: 60px 0; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 64em) {

  /* Full label and heart return once there is room for one line. */
  .mx-eb .mx-eb-btn__full { display: inline; }
  .mx-eb .mx-eb-btn__short { display: none; }
  .mx-eb .mx-eb-btn--hero .mx-eb-btn__h,
  .mx-eb .mx-eb-btn--buy .mx-eb-btn__h { display: inline; }
  .mx-eb .mx-eb-herocard__price { display: none; }

  /* The counts row above already divides the two columns. */
  .mx-eb .mx-eb-storybody__l { border-right: 0; }

  .mx-eb .mx-eb-faq-band { padding: 80px 0; }
}

/* ==========================================================================
   32. The Extra Batch — heart alignment and count labels
   ========================================================================== */

/* --- Button heart --------------------------------------------------------
   The glyph sat low because the entity has a large descender gap and the
   flex row was aligning on the box, not the text. Cap the line height,
   match the optical size to the Bowlby label, and nudge it up a hair so the
   heart's visual centre lines up with the cap height beside it. */

.mx-eb .mx-eb-btn {
  align-items: center;
  line-height: 1;
}

.mx-eb .mx-eb-btn__h {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* Bowlby runs small for its point size, so the heart is set above the
     label's own value to read as the same weight. */
  font-size: 17px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* Sticky bar label is smaller, so its heart scales with it. */
.mx-eb-stickybar .mx-eb-btn__h {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* --- Count labels --------------------------------------------------------
   These name what the numbers mean, so they were carrying more weight than
   their size and opacity allowed. */

.mx-eb .mx-eb-count__l {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.mx-eb .mx-eb-count--x .mx-eb-count__l {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

@media (min-width: 64em) {
  .mx-eb .mx-eb-count__l { font-size: 16.5px; }
}

/* ==========================================================================
   33. The Extra Batch — stamps, borders, spacing
   ========================================================================== */

/* --- Hero card: tighter gutters so the CTA holds one line ---------------- */

.mx-eb .mx-eb-herocard { padding: 48px 26px 42px; }
.mx-eb .mx-eb-btn--hero { padding: 18px 20px; }

/* --- Stamps as headings --------------------------------------------------
   The eyebrow paragraph is now a wrapper for the pill, so it carries the
   spacing and the pill carries the styling. */

.mx-eb .mx-eb-eyebrow--center {
  text-align: center;
  margin: 0 0 26px;
  font-size: 0;
  line-height: 0;
}

.mx-eb .mx-eb-story .mx-eb-eyebrow--center { margin-bottom: 30px; }

/* Section stamps sit above a heading, so they need their own gap beneath. */
.mx-eb .mx-eb-steps-band .mx-eb-eyebrow--center,
.mx-eb .mx-eb-faq-band .mx-eb-eyebrow--center { margin-bottom: 20px; }

/* --- Benefit tiles: one border on every colour --------------------------- */
/* The coloured tiles were borderless, so they read as a different component
   from the white ones rather than the same tile in another colour. */

.mx-eb .mx-eb-tile--plum,
.mx-eb .mx-eb-tile--red,
.mx-eb .mx-eb-tile--pink { border: 1px solid var(--mx-line-hair); }

/* --- Buy box stamp: plum text and border, red heart --------------------- */

.mx-eb .mx-eb-stamp--plum .mx-eb-stamp__h { color: var(--mx-red); }

/* --- FAQ: bottom padding matches top ------------------------------------ */
/* The accordion's own bottom rule was adding to the band padding. */

.mx-eb .mx-eb-faq-band { padding: 60px 0; }
.mx-eb .mx-eb-accordion { margin-bottom: 0; }
.mx-eb .mx-eb-accordion__col:last-child .mx-eb-q:last-child { border-bottom: 0; }

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 64em) {
  .mx-eb .mx-eb-herocard { padding: 56px 48px 48px; }
  .mx-eb .mx-eb-btn--hero { padding: 18px 32px; }
  .mx-eb .mx-eb-faq-band { padding: 80px 0; }
  .mx-eb .mx-eb-story .mx-eb-eyebrow--center { margin-bottom: 34px; }
}

/* ==========================================================================
   34. The Extra Batch — counts, marquee card, timeline spacing
   ========================================================================== */

/* --- Word beside the number ---------------------------------------------- */
/* Baseline-aligned so the word sits on the numeral's baseline rather than
   its box, which the descender-free digits would otherwise throw off. */

.mx-eb .mx-eb-count__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.mx-eb .mx-eb-count__w {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.mx-eb .mx-eb-count--x .mx-eb-count__w { color: var(--mx-white); }

/* --- +20 card: whole tile is the link ------------------------------------ */

.mx-eb a.mx-eb-more--card {
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.mx-eb a.mx-eb-more--card:hover {
  background: var(--mx-red-dark);
  transform: translateY(-3px);
}

/* Same shape and heart as every other button on the page. */
.mx-eb .mx-eb-more__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 20px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border-radius: 10px;
}

.mx-eb .mx-eb-more__cta .mx-eb-btn__h {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
  position: relative;
  top: -1px;
  color: var(--mx-red);
}

/* --- +20 bar on mobile: two lines match the numeral's height ------------- */
/* The number is 34px at 0.9 line height, so roughly 31px. The two text
   lines are tightened to land in the same span top and bottom. */

.mx-eb .mx-eb-more--bar .mx-eb-more__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mx-eb .mx-eb-more--bar .mx-eb-more__t { line-height: 1.15; }

.mx-eb .mx-eb-more--bar .mx-eb-more__s {
  margin-top: 1px;
  line-height: 1.15;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 64em) {

  .mx-eb .mx-eb-count__w { font-size: 26px; }

  /* --- How it works: room around the track ------------------------------ */
  /* The heading, the nodes and the copy beneath were all sitting close
     enough to read as one block. */

  .mx-eb .mx-eb-track {
    margin-top: 76px;
    padding-top: 72px;
  }

  .mx-eb .mx-eb-station__n { top: -72px; }
  .mx-eb .mx-eb-station__h { margin-top: 8px; }
}



/* Section 38. Member dashboard - step 1 scaffolding. */

.mx-md-debug {
  padding: 16px;
  margin: 0 0 24px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: #fff;
  border: 2px solid #d12627;
  border-radius: 8px;
}

.mx .mx-md-hero,
.mx .mx-md-panel {
  padding: 24px 18px;
  margin: 0 0 12px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(62, 15, 47, 0.5);
  background: #fbf6f1;
  border: 1px dashed rgba(62, 15, 47, 0.22);
  border-radius: 14px;
}

/* Section 38. Member dashboard. */
/* Base components are unreliable in this file, so everything is declared in full. */

/* Debug block. Delete this rule with the debug markup before launch. */
.mx-md-debug {
  padding: 16px;
  margin: 0 0 24px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: #fff;
  border: 2px solid #d12627;
  border-radius: 8px;
}

/* Full bleed. Page templates sit inside Bootstrap's .container. */
.mx-md {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 64px;
  background: #ffffff;
}

/* Hero band. */

.mx .mx-md-hero {
  padding: 32px 18px;
  color: #ffffff;
  background: #3e0f2f;
}

.mx .mx-md-hero__inner {
  display: grid;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.mx .mx-md-hero__eyebrow {
  margin: 0 0 10px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f7c8c5;
}

.mx .mx-md-hero__title {
  margin: 0 0 12px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.08;
  text-transform: uppercase;
  color: #ffffff;
}

.mx .mx-md-hero__note {
  margin: 0;
  max-width: 42ch;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.mx .mx-md-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mx .mx-md-stat {
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.mx .mx-md-stat--wide { grid-column: 1 / -1; }

.mx .mx-md-stat__num {
  display: block;
  margin-bottom: 6px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: #ffffff;
}

.mx .mx-md-stat__label {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.mx .mx-md-progress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mx .mx-md-progress__label {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

.mx .mx-md-progress__count {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.mx .mx-md-progress__track {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 100px;
}

.mx .mx-md-progress__fill {
  display: block;
  height: 100%;
  background: #f7c8c5;
  border-radius: 100px;
}

.mx .mx-md-hero__redeem {
  grid-column: 1 / -1;
  padding: 14px 20px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 9px;
  cursor: pointer;
}

.mx .mx-md-hero__redeem[disabled] {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.18);
  cursor: not-allowed;
}

/* Body layout. */

.mx .mx-md-body {
  display: grid;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 0;
}

.mx .mx-md-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Card shell. */

.mx .mx-md-card {
  padding: 20px 18px;
  background: #ffffff;
  border: 1px solid rgba(62, 15, 47, 0.16);
  border-radius: 14px;
}

.mx .mx-md-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mx .mx-md-card__title {
  margin: 0;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #3e0f2f;
}

.mx .mx-md-card__sub {
  margin: -8px 0 14px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(62, 15, 47, 0.65);
}

.mx .mx-md-seeall {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #d12627;
}

.mx .mx-md-seeall:hover { color: #b01f20; text-decoration: none; }

.mx .mx-md-prose {
  margin: 0 0 16px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(62, 15, 47, 0.65);
}

.mx .mx-md-empty {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(62, 15, 47, 0.45);
}

/* Buttons. */

.mx .mx-md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.mx .mx-md-btn--primary {
  color: #ffffff;
  background: #d12627;
}

.mx .mx-md-btn--primary:hover { color: #ffffff; background: #b01f20; text-decoration: none; }

.mx .mx-md-btn--add {
  width: 100%;
  margin-top: auto;
  padding: 9px 12px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: #d12627;
  border-radius: 8px;
}

.mx .mx-md-btn--add:hover { color: #ffffff; background: #b01f20; text-decoration: none; }

.mx .mx-md-btn--ghost {
  flex: none;
  padding: 9px 16px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d12627;
  background: #ffffff;
  border: 1.5px solid #d12627;
  border-radius: 8px;
}

.mx .mx-md-btn--ghost:hover { color: #ffffff; background: #d12627; text-decoration: none; }

/* Signature rail. */

.mx .mx-md-rail {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.mx .mx-md-rail::-webkit-scrollbar { display: none; }

.mx .mx-md-pcard {
  display: flex;
  flex: 0 0 62%;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(62, 15, 47, 0.16);
  border-radius: 12px;
}

.mx .mx-md-pcard__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fdf1f0;
}

.mx .mx-md-pcard__media > .lazyload-blur-wrapper { height: 100%; }

.mx .mx-md-pcard__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx .mx-md-pcard__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 5px 8px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: #d12627;
  border-radius: 100px;
}

.mx .mx-md-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.mx .mx-md-pcard__name {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #3e0f2f;
  min-height: 2.5em;
}

/* Orders list. */

.mx .mx-md-orders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx .mx-md-order {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border: 1px solid rgba(62, 15, 47, 0.12);
  border-radius: 12px;
}

.mx .mx-md-order__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: #fdf1f0;
  border-radius: 8px;
}

.mx .mx-md-order__thumb > .lazyload-blur-wrapper { height: 100%; }

.mx .mx-md-order__thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx .mx-md-order__text { flex: 1; min-width: 0; }

.mx .mx-md-order__name {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #3e0f2f;
}

.mx .mx-md-order__meta {
  display: block;
  margin-top: 3px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(62, 15, 47, 0.5);
}

.mx .mx-md-order__price {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #3e0f2f;
}

/* Benefits list. */

.mx .mx-md-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx .mx-md-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx .mx-md-benefit__mark {
  flex: none;
  margin-top: 1px;
  font-size: 13px;
  line-height: 1.5;
  color: #d12627;
}

.mx .mx-md-benefit__text {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(62, 15, 47, 0.65);
}

.mx .mx-md-benefit__text strong { font-weight: 700; color: #3e0f2f; }

/* Account rows. */

.mx .mx-md-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(62, 15, 47, 0.12);
}

.mx .mx-md-row:first-of-type { border-top: 0; padding-top: 0; }

.mx .mx-md-row__text { min-width: 0; }

.mx .mx-md-row__label {
  display: block;
  margin-bottom: 4px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(62, 15, 47, 0.45);
}

.mx .mx-md-row__value {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #3e0f2f;
}

.mx .mx-md-row__edit {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #d12627;
}

.mx .mx-md-row__edit:hover { color: #b01f20; text-decoration: none; }

.mx .mx-md-row__status {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(62, 15, 47, 0.4);
}

/* Tablet. */

@media (min-width: 48em) {
  .mx .mx-md-hero { padding: 44px 32px; }
  .mx .mx-md-hero__inner { grid-template-columns: 1fr 1.4fr; align-items: center; gap: 32px; }
  .mx .mx-md-hero__title { font-size: 38px; }
  .mx .mx-md-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx .mx-md-body { padding: 32px 32px 0; gap: 20px; }
  .mx .mx-md-card { padding: 24px; }
  .mx .mx-md-pcard { flex: 0 0 calc((100% - 24px) / 3); }
}

/* Desktop. */

@media (min-width: 64em) {
  .mx .mx-md-hero { padding: 52px 44px; }
  .mx .mx-md-hero__title { font-size: 44px; }
  .mx .mx-md-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch; }
  .mx .mx-md-stat--wide { grid-column: auto; }
  .mx .mx-md-hero__redeem { grid-column: auto; align-self: stretch; }
  .mx .mx-md-body { grid-template-columns: 1.6fr 1fr; padding: 40px 44px 0; }
  .mx .mx-md-pcard { flex: 0 0 calc((100% - 36px) / 4); }
}

/* Section 38b. Member dashboard - hero corrections. */

/* Square corners: the band is full bleed, so rounding reads as a mistake. */
.mx .mx-md-hero { border-radius: 0; }

/* Stat cards: shorter, wider, matching the mockup proportions. */
.mx .mx-md-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-radius: 10px;
}

.mx .mx-md-stat__num { margin-bottom: 4px; font-size: 32px; }
.mx .mx-md-stat__label { font-size: 12.5px; line-height: 1.3; }

/* Progress card: label on one line, count beside it, bar beneath. */
.mx .mx-md-progress__top {
  align-items: flex-start;
  margin-bottom: 14px;
}

.mx .mx-md-progress__label {
  max-width: 22ch;
  font-size: 12.5px;
  line-height: 1.3;
}

.mx .mx-md-progress__count {
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.mx .mx-md-hero__redeem { border-radius: 10px; }

@media (min-width: 64em) {
  /* Progress card needs more room than the two figure cards. */
  .mx .mx-md-hero__stats {
    grid-template-columns: 0.8fr 0.8fr 1.3fr auto;
    gap: 14px;
  }

  .mx .mx-md-stat { padding: 20px 22px; }
  .mx .mx-md-stat__num { font-size: 34px; }
  .mx .mx-md-progress__label { max-width: none; font-size: 13px; }
  .mx .mx-md-hero__redeem { padding: 14px 28px; }
}

/* Section 38c. Member ledger inside the quick-add modal. */
/* Base .mx-ledger exists in section 6; the value and member variants do not. */

.mx.mx-modal .mx-ledger {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(209, 38, 39, 0.25);
  border-radius: 12px;
}

.mx.mx-modal .mx-ledger__row--member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fdf1f0;
}

.mx.mx-modal .mx-ledger__key { display: block; }

.mx.mx-modal .mx-ledger__label {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d12627;
}

.mx.mx-modal .mx-ledger__note {
  display: block;
  margin-top: 5px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(62, 15, 47, 0.65);
}

.mx.mx-modal .mx-ledger__value--member {
  flex: none;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: #3e0f2f;
}

/* Section 38d. Align body content with the hero's inner edges. */
/* Both are capped at 1180px, but the padding was applied at different levels, */
/* so the body sat inset from the hero. Padding now matches on both. */

.mx .mx-md-hero {
  padding-left: 0;
  padding-right: 0;
}

.mx .mx-md-hero__inner {
  padding-left: 18px;
  padding-right: 18px;
}

@media (min-width: 48em) {
  .mx .mx-md-hero { padding-left: 0; padding-right: 0; }
  .mx .mx-md-hero__inner { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 64em) {
  .mx .mx-md-hero { padding-left: 0; padding-right: 0; }
  .mx .mx-md-hero__inner { padding-left: 44px; padding-right: 44px; }
}

/* Section 38e. Hero stat card proportions. */
/* Cards were too narrow, wrapping labels onto extra lines and squeezing */
/* the progress card. Wider columns, single-line labels. */

@media (min-width: 64em) {
  .mx .mx-md-hero__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
  }

  .mx .mx-md-hero__stats {
    grid-template-columns: 0.7fr 0.7fr 1.25fr 0.65fr;
    gap: 12px;
    align-items: stretch;
  }

  .mx .mx-md-stat {
    padding: 18px 18px;
  }

  .mx .mx-md-stat__num {
    font-size: 32px;
    margin-bottom: 6px;
  }

  .mx .mx-md-stat__label {
    font-size: 12px;
    line-height: 1.3;
  }

  /* Progress card: label and count on one row, bar beneath. */
  .mx .mx-md-progress__top {
    flex-wrap: nowrap;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .mx .mx-md-progress__label {
    max-width: none;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .mx .mx-md-progress__count {
    font-size: 11.5px;
  }

  .mx .mx-md-hero__redeem {
    padding: 14px 16px;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
}

/* Section 38f. Match the header's Bootstrap container widths. */
/* Envy's header uses .container: 750/970/1170px with 15px gutters. The */
/* dashboard used 1180px with its own gutters, so edges never aligned. */

.mx .mx-md-hero__inner,
.mx .mx-md-body {
  width: 100%;
  max-width: none;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .mx .mx-md-hero__inner,
  .mx .mx-md-body { width: 750px; }
}

@media (min-width: 992px) {
  .mx .mx-md-hero__inner,
  .mx .mx-md-body { width: 970px; }
}

@media (min-width: 1200px) {
  .mx .mx-md-hero__inner,
  .mx .mx-md-body { width: 1170px; }
}

/* Section 38g. Hearts activity and referral. */

.mx .mx-md-card--cream { background: #f7efd9; border-color: rgba(62, 15, 47, 0.12); }

.mx .mx-md-prose--tight { margin-bottom: 14px; }

/* Hearts ledger. */

.mx .mx-md-ledger {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mx .mx-md-ledger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  border-top: 1px solid rgba(62, 15, 47, 0.12);
}

.mx .mx-md-ledger__row:first-child { border-top: 0; padding-top: 0; }

.mx .mx-md-ledger__text { min-width: 0; }

.mx .mx-md-ledger__label {
  display: block;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #3e0f2f;
}

.mx .mx-md-ledger__date {
  display: block;
  margin-top: 3px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(62, 15, 47, 0.45);
}

.mx .mx-md-ledger__amount {
  flex: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #d12627;
}

.mx .mx-md-ledger__amount--out { color: rgba(62, 15, 47, 0.4); }

/* Referral code. */

.mx .mx-md-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px dashed rgba(62, 15, 47, 0.3);
  border-radius: 10px;
}

.mx .mx-md-code__value {
  min-width: 0;
  overflow: hidden;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3e0f2f;
}

.mx .mx-md-code__copy {
  flex: none;
  padding: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d12627;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mx .mx-md-code__copy:hover { color: #b01f20; }

/* Section 38h. Redeem button, active and inactive states. */

.mx .mx-md-hero__redeem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mx .mx-md-hero__redeem-mark {
  font-size: 16px;
  line-height: 1;
  color: inherit;
  transition: color 160ms ease, transform 160ms ease;
}

/* Inactive: heart matches the muted label. */
.mx .mx-md-hero__redeem[disabled] .mx-md-hero__redeem-mark {
  color: rgba(255, 255, 255, 0.4);
}

/* Active: brand red heart on a white face. */
.mx .mx-md-hero__redeem--active {
  color: #3e0f2f;
  background: #ffffff;
  border-color: #ffffff;
  cursor: pointer;
}

.mx .mx-md-hero__redeem--active .mx-md-hero__redeem-mark { color: #d12627; }

.mx .mx-md-hero__redeem--active:hover {
  color: #3e0f2f;
  background: #f7c8c5;
  border-color: #f7c8c5;
  text-decoration: none;
}

.mx .mx-md-hero__redeem--active:hover .mx-md-hero__redeem-mark { transform: scale(1.12); }

.mx .mx-md-hero__redeem--active:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .mx .mx-md-hero__redeem,
  .mx .mx-md-hero__redeem-mark { transition: none; }
  .mx .mx-md-hero__redeem--active:hover .mx-md-hero__redeem-mark { transform: none; }
}

/* ==========================================================================
   38i. Hero stats — three items, right aligned
   The saved-on-pricing stat is gone, so the four-column track in 38e no
   longer applies. Columns size to content and the group hugs the right;
   the redeem button is width-only smaller, still full height.
   ========================================================================== */

@media (min-width: 64em) {
  .mx .mx-md-hero__stats {
    grid-template-columns: minmax(150px, auto) minmax(230px, auto) auto;
    justify-content: end;
    gap: 12px;
  }

  /* Labels get room to sit on one or two comfortable lines. */
  .mx .mx-md-stat__label { font-size: 12px; line-height: 1.3; }

  /* Narrower button; height still stretches with the cards beside it. */
  .mx .mx-md-hero__redeem {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   29. Club card — disclosure and Join button
   The checkbox now sits INSIDE .mx-club__box rather than being its sibling,
   so the checked state is matched with :has() instead of the old adjacent
   sibling selector. Re-declared here so it wins on source order.
   ========================================================================== */

.mx .mx-club { display: block; margin: 0 0 var(--mx-space-9); cursor: default; }

.mx .mx-club__box {
  display: block;
  padding: var(--mx-space-7);
  background: var(--mx-pink);
  border: 2px solid var(--mx-red);
  border-radius: var(--mx-radius-xl);
  transition: box-shadow var(--mx-transition);
}

/* Selected state: inner hairline thickens the frame without shifting layout. */
.mx .mx-club__box:has(.mx-club__check:checked) {
  box-shadow: inset 0 0 0 1px var(--mx-red);
}

/* --- selectable region: checkbox + title + copy --------------------------- */
.mx .mx-club__pick {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-5);
  margin: 0;
  cursor: pointer;
}

.mx .mx-club__check { position: absolute; opacity: 0; pointer-events: none; }

.mx .mx-club__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 1;
  color: transparent;
  background: var(--mx-white);
  border: 2px solid var(--mx-red);
  border-radius: var(--mx-radius-md);
  transition: background var(--mx-transition), color var(--mx-transition);
}

.mx .mx-club__check:checked + .mx-club__mark {
  color: var(--mx-white);
  background: var(--mx-red);
}

/* --- disclosure ----------------------------------------------------------- */
/* Indent matches the mark width (30px) plus the pick row gap (12px). */
.mx .mx-club__more { margin-left: 42px; }

.mx .mx-club__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-2);
  margin-top: var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mx-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

/* Strip the native disclosure triangle in both engines. */
.mx .mx-club__link::-webkit-details-marker { display: none; }
.mx .mx-club__link::marker { content: ""; }

.mx .mx-club__link:hover { color: var(--mx-red-dark); }
.mx .mx-club__link:focus-visible { outline: 2px solid var(--mx-red); outline-offset: 2px; }

/* Caret. Rotates to point up when the panel is open. */
.mx .mx-club__link::after {
  content: "\25BE";
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--mx-transition);
}
.mx .mx-club__more[open] .mx-club__link::after { transform: rotate(180deg); }

/* Label swap: closed shows "See what's included", open shows "Hide...". */
.mx .mx-club__link-close { display: none; }
.mx .mx-club__more[open] .mx-club__link-open { display: none; }
.mx .mx-club__more[open] .mx-club__link-close { display: inline; }

/* --- benefit list --------------------------------------------------------- */
.mx .mx-club__list {
  margin: var(--mx-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.mx .mx-club__item {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-4);
  margin-bottom: var(--mx-space-5);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: 400;
  line-height: 1.45;
  color: var(--mx-text-muted);
}
.mx .mx-club__item:last-child { margin-bottom: 0; }

.mx .mx-club__bullet { flex: none; line-height: 1.4; color: var(--mx-red); }

/* --- Join button ---------------------------------------------------------- */
.mx .mx-club__join {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--mx-space-9);
  padding: var(--mx-space-7);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  transition: background var(--mx-transition);
}
.mx .mx-club__join:hover { color: var(--mx-white); background: var(--mx-red-dark); }
.mx .mx-club__join:active { transform: translateY(1px); }

/* Mobile: the indent eats too much width on a narrow buy column. */
@media (max-width: 47.9375em) {
  .mx .mx-club__more { margin-left: 0; }
}

/* ==========================================================================
   30. Club card — corrections
   Underline moves from the <summary> to its label spans so the caret isn't
   underlined; the Join button drops the disclosure indent and becomes a
   secondary outline CTA.
   ========================================================================== */

/* Underline the words only, never the caret. */
.mx .mx-club__link { text-decoration: none; }
.mx .mx-club__link-open,
.mx .mx-club__link-close {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Button spans the full card, aligning with the checkbox rather than the
   disclosure text. Negative margin cancels .mx-club__more's 42px indent. */
.mx .mx-club__join {
  margin-left: -42px;
  color: var(--mx-red);
  background: transparent;
  border: 1.5px solid var(--mx-red);
}
.mx .mx-club__join:hover {
  color: var(--mx-white);
  background: var(--mx-red);
}

@media (max-width: 47.9375em) {
  .mx .mx-club__join { margin-left: 0; }
}

/* ==========================================================================
   31. PDP grid — mobile overflow
   A grid item's min-width defaults to auto, so the single mobile column
   refuses to shrink below its widest intrinsic content (the Recharge widget)
   and overflows .container. Pinning the track and the items to a zero
   minimum lets them shrink to the available width instead.
   ========================================================================== */

.mx .mx-pdp__grid { grid-template-columns: minmax(0, 1fr); }
.mx .mx-pdp__grid > * { min-width: 0; }

@media (min-width: 48em) {
  .mx .mx-pdp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   33. Club card — alignment
   The copy is a sibling of the label rather than a child, so it sits at the
   card edge without negative margins. The flex row contains only the title
   row, which is what the checkbox centres against.
   ========================================================================== */

.mx .mx-club__pick { align-items: center; }
.mx .mx-club__body { flex: 1; min-width: 0; }
.mx .mx-club__top { align-items: center; }

/* Copy: full width under the checkbox, at every breakpoint. */
.mx .mx-club__copy {
  display: block;
  margin: var(--mx-space-6) 0 0;
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.45;
  color: var(--mx-text-muted);
}

/* Disclosure, bullets and button share the copy's left edge. */
.mx .mx-club__more { margin-left: 0; }

.mx .mx-club__join {
  width: 100%;
  margin-left: 0;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 1.5px solid var(--mx-red);
}
.mx .mx-club__join:hover {
  color: var(--mx-white);
  background: var(--mx-red);
}

/* ==========================================================================
   34. Product gallery — rounded corners
   Section 16 flattened these to 0; 14px matches the cards, quote panels and
   signature rail.
   ========================================================================== */

.mx .featured-image-div {
  overflow: hidden;
  border-radius: var(--mx-radius-2xl);
}

/* ==========================================================================
   35. Member view — gallery badge, price ledger, member notice
   ========================================================================== */

/* --- gallery badge -------------------------------------------------------- */
.mx .mx-pdp__gallery { position: relative; }

.mx .mx-gallery-badge {
  position: absolute;
  top: var(--mx-space-5);
  left: var(--mx-space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--mx-space-3) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-pill);
}

/* --- member price ledger -------------------------------------------------- */
.mx .mx-ledger2 {
  margin: 0 0 var(--mx-space-9);
  overflow: hidden;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-2xl);
}

.mx .mx-ledger2__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-7);
  padding: var(--mx-space-7) var(--mx-space-9);
}

.mx .mx-ledger2__row--member {
  background: var(--mx-pink);
  border-top: 1px solid var(--mx-line-hair);
}

.mx .mx-ledger2__key { display: block; }

.mx .mx-ledger2__label {
  display: block;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--mx-type-label-ls);
  text-transform: uppercase;
  color: var(--mx-text-faint);
}

.mx .mx-ledger2__who {
  display: block;
  margin-top: var(--mx-space-2);
  font-size: var(--mx-type-body-size);
  line-height: 1.3;
  color: var(--mx-text-muted);
}

/* Regular price: struck through, muted. Overrides section 16's big treatment. */
.mx .mx-ledger2 .product-page--pricing { margin: 0; padding: 0; text-align: right; }
.mx .mx-ledger2 .product-page--pricing li { display: block; margin: 0; }

.mx .mx-ledger2 #price-field {
  display: block;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--mx-text-faint);
  text-decoration: line-through;
}

.mx .mx-ledger2__price {
  flex: none;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-price-size);
  line-height: var(--mx-type-price-lh);
  color: var(--mx-red);
}

.mx .mx-ledger2__foot {
  margin: 0;
  padding: var(--mx-space-6) var(--mx-space-9);
  background: var(--mx-shell);
  border-top: 1px solid var(--mx-line-hair);
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.4;
  color: var(--mx-text-faint);
}

/* --- member notice above Add to Cart -------------------------------------- */
.mx .mx-mnotice {
  display: flex;
  align-items: center;
  gap: var(--mx-space-6);
  margin: 0 0 var(--mx-space-7);
  padding: var(--mx-space-7) var(--mx-space-9);
  background: var(--mx-pink);
  border-radius: var(--mx-radius-xl);
}

.mx .mx-mnotice__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-circle);
}

.mx .mx-mnotice__text {
  margin: 0;
  font-size: var(--mx-type-body-size);
  line-height: 1.4;
  color: var(--mx-text);
}

.mx .mx-mnotice__link {
  color: var(--mx-red);
  font-weight: 600;
}
.mx .mx-mnotice__link:hover { color: var(--mx-red-dark); text-decoration: underline; }

/* --- signature cards, member state ---------------------------------------- */
.mx .mx-signature .mx-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-5);
}

.mx .mx-signature .mx-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: auto;
  padding: var(--mx-space-5) var(--mx-space-4);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 1.5px solid var(--mx-red);
  border-radius: var(--mx-radius-sm);
  cursor: pointer;
  transition: background var(--mx-transition);
}
.mx .mx-signature .mx-card__add:hover { background: var(--mx-red-dark); }

.mx .mx-signature .mx-card__media { position: relative; }
.mx .mx-signature .mx-badge--overlay {
  top: var(--mx-space-4);
  left: var(--mx-space-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   36. Buy row — label and control alignment
   .swatch is a wrapping flex container with an 8px gap, and the title is a
   full-width flex line. The row gap therefore pushes the title 8px below
   the container top and the pack cards a further 8px below the title,
   while the quantity column has no such gap. Splitting the gap into
   column-only and giving the title an explicit margin removes both offsets.
   ========================================================================== */

@media (min-width: 48em) {
  .mx .mx-buy-row { align-items: flex-start; }

  /* Gap applies between cards only, not between the title line and them. */
  .mx .mx-buy-row .swatch {
    row-gap: 0;
    column-gap: var(--mx-space-3);
  }

  /* Both labels: identical box, identical spacing to the control below. */
  .mx .mx-buy-row .swatch .swatch-title,
  .mx .mx-buy-row .mx-qty-row > label {
    display: block;
    margin: 0 0 var(--mx-space-4);
    line-height: 1;
  }

  .mx .mx-buy-row .mx-qty-row { gap: 0; }
}

/* ==========================================================================
   38. Member chip + account dropdown
   The chip renders in the desktop action row and at the top of the mobile
   drawer. The drawer is portaled to <body> by Slideout, so its rules cannot
   be scoped under .mx and target #menu directly (same as section 24).
   ========================================================================== */

.mx.mx-headerbar .mx-memberchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: var(--mx-space-3) var(--mx-space-6);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-pill);
  transition: background var(--mx-transition);
}
.mx.mx-headerbar .mx-memberchip:hover { color: var(--mx-white); background: var(--mx-red-dark); }

/* Account dropdown: same disclosure as the nav, right-aligned so it cannot
   overflow the viewport at the end of the action row. */
.mx.mx-headerbar .mx-headerbar__account-item { position: relative; }

.mx.mx-headerbar .mx-headerbar__account-item .mx-headerbar__account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--mx-space-5) 0;
}

.mx.mx-headerbar .mx-headerbar__dropdown--right { left: auto; right: -14px; }

.mx.mx-headerbar .mx-headerbar__account-item:hover .mx-headerbar__caret,
.mx.mx-headerbar .mx-headerbar__account-item:focus-within .mx-headerbar__caret {
  transform: rotate(180deg);
  color: var(--mx-red);
}

/* --- mobile drawer chip --------------------------------------------------- */
#menu .mobile-menu-chip {
  list-style: none;
  padding: 16px 18px 8px;
  border-bottom: 1px solid rgba(62, 15, 47, 0.08);
}

body #menu.mobile-menu--wrapper ul li.mobile-menu-chip a.mx-memberchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  padding: 8px 16px;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #d12627;
  border: 0;
  border-bottom: 0;
  border-radius: 100px;
}
body #menu.mobile-menu--wrapper ul li.mobile-menu-chip a.mx-memberchip:hover {
  color: #fff;
  background: #b01f20;
}

/* ==========================================================================
   39. Sticky header
   The section wrapper is what sticks — it is the direct child of #main-body
   and so has the full page height to travel within, whereas the inner
   .mx-headerbar is only as tall as itself. Sticky is enabled by neutralising
   Envy's body{overflow-x:hidden} above; see section 23 for the position
   override this replaces.
   ========================================================================== */

body { overflow-x: visible; }

.mx.mx-headerbar { background: var(--mx-white); }

body.mx-modal-open div#shopify-section-header { z-index: 1; }

/* ==========================================================================
   40. Overscroll
   Disables the rubber-band bounce at the top of the document. Without it the
   announcement bar can be dragged up behind the fixed header, exposing the
   page background above it.
   ========================================================================== */

html { overscroll-behavior-y: none; }

/* Section 38i. Recent orders - stacked thumbnails, full-row link. */
/* Orders always contain several items, so one thumbnail misdescribed them. */

.mx .mx-md-order { padding: 0; }

.mx .mx-md-order__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  transition: background 160ms ease;
}

.mx .mx-md-order__link:hover {
  background: #fdf1f0;
  text-decoration: none;
  color: inherit;
}

/* Thumbnails overlap so the group reads as one object. */
.mx .mx-md-order__stack {
  display: flex;
  flex: none;
  align-items: center;
}

.mx .mx-md-order__stack .mx-md-order__thumb {
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: #fdf1f0;
  border: 2px solid #ffffff;
  border-radius: 8px;
}

.mx .mx-md-order__stack .mx-md-order__thumb + .mx-md-order__thumb { margin-left: -14px; }

.mx .mx-md-order__thumb > .lazyload-blur-wrapper { height: 100%; }

.mx .mx-md-order__thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx .mx-md-order__more {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -14px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #3e0f2f;
  background: #f7efd9;
  border: 2px solid #ffffff;
  border-radius: 8px;
}

.mx .mx-md-order__cta { flex: none; }

/* Mobile: the View chip drops out - the whole row is the link. */
@media (max-width: 47.9375em) {
  .mx .mx-md-order__cta { display: none; }
  .mx .mx-md-order__link { gap: 10px; padding: 10px; }
  .mx .mx-md-order__stack .mx-md-order__thumb,
  .mx .mx-md-order__more { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Club band button. .mx-btn in section 5 is swallowed by a malformed comment
   header, so the anchor renders as plain text — restated here.
   -------------------------------------------------------------------------- */

.mx .mx-club-band .mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 260px;
  padding: var(--mx-space-7) var(--mx-space-14);
  font-family: var(--mx-font-display);
  font-size: var(--mx-type-btn-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: var(--mx-radius-lg);
  transition: background var(--mx-transition);
}

.mx .mx-club-band .mx-btn:hover { color: var(--mx-white); background: var(--mx-red-dark); }

@media (max-width: 47.9375em) {
  .mx .mx-club-band .mx-btn { display: flex; width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Member variant — adds the eyebrow above the heading.
   -------------------------------------------------------------------------- */

.mx .mx-club-band__eyebrow {
  margin: 0 0 var(--mx-space-5);
  color: var(--mx-pink-bright);
}

/* --------------------------------------------------------------------------
   Members-only pricing note, under the toolbar.
   -------------------------------------------------------------------------- */

.mx .mx-member-note {
  display: flex;
  align-items: center;
  gap: var(--mx-space-4);
  margin: 0;
  padding: var(--mx-space-6) var(--mx-pad-x);
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  font-weight: 500;
  line-height: 1.45;
  color: var(--mx-text-body);
  background: var(--mx-pink);
  border-bottom: 1px solid var(--mx-line-hair);
}

.mx .mx-member-note__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: var(--mx-type-fine-size);
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-circle);
}

/* Align the member note with the toolbar and grid above and below it. */
.mx .mx-member-note {
  margin-left: var(--mx-pad-x);
  margin-right: var(--mx-pad-x);
  padding-left: 0;
  padding-right: 0;
}

/* Button drops to its own row under the copy, centred. */
.mx .mx-club-band .mx-btn {
  display: inline-flex;
  margin-top: var(--mx-space-4);
}

.mx .mx-club-band__list {
  display: block;
  margin-bottom: var(--mx-space-11);
}

.mx .mx-club-band {
  padding-top: 72px;
  padding-bottom: 72px;
}

.mx .mx-club-band__eyebrow { margin-bottom: var(--mx-space-7); }
.mx .mx-club-band__title { margin-bottom: var(--mx-space-7); }

@media (min-width: 48em) {
  .mx .mx-club-band { padding-top: 88px; padding-bottom: 88px; }
  .mx .mx-club-band__list { margin-bottom: var(--mx-space-14); }
}

/* Restore inner padding — the margin fix above zeroed it and pushed the
   heart against the left edge. */
.mx .mx-member-note {
  padding-left: var(--mx-space-9);
  padding-right: var(--mx-space-9);
}

/* Copy centres with the heading; the band's text-align isn't reaching it. */
.mx .mx-club-band__list {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Section 38j. Account box CTA and member dropdown link. */

.mx .mx-md-account__cta {
  display: flex;
  width: 100%;
  margin-top: 16px;
}

.mx.mx-headerbar .mx-headerbar__dropitem--club {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: #d12627;
}

.mx.mx-headerbar .mx-headerbar__dropitem--club:hover {
  color: #b01f20;
  background: #fdf1f0;
}

.mx.mx-headerbar .mx-headerbar__dropheart {
  font-size: 12px;
  line-height: 1;
  color: #d12627;
}

/* --------------------------------------------------------------------------
   Mobile: filter divider and member note run edge to edge; the note's inner
   content stays on the gutter so it lines up with the cards below.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Mobile: the page-head, filters and toolbar dividers are border-bottoms on
   each block, so each needs the gutter moved off the element and onto its
   own padding to run edge to edge.
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
  .mx .mx-page-head,
  .mx .mx-filters,
  .mx .mx-toolbar,
  .mx .mx-member-note {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--mx-pad-x);
    padding-right: var(--mx-pad-x);
  }

  /* The chip rail supplies its own gutter so chips scroll under both edges. */
  .mx .mx-filters { padding-left: 0; padding-right: 0; }

  .mx .mx-member-note { border-radius: 0; }
}

  .mx .mx-member-note {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--mx-pad-x);
    padding-right: var(--mx-pad-x);
  }
}

/* Section 38k. Member dashboard link in the mobile drawer. */

body #menu.mobile-menu--wrapper ul li.mobile-customer-link--club a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #d12627;
}

body #menu.mobile-menu--wrapper ul li.mobile-customer-link--club a:hover {
  color: #b01f20;
  background: #fdf1f0;
}

#menu .mobile-menu-heart {
  font-size: 12px;
  line-height: 1;
  color: #d12627;
}

/* --------------------------------------------------------------------------
   Mobile toolbar: count and sort share one row, sort hard right. The "Sort"
   label is dropped — the select's own value reads clearly enough.
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
  .mx .mx-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--mx-space-5);
  }

  .mx .mx-toolbar__count { flex: 1; min-width: 0; }

  .mx .mx-toolbar__sort {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .mx .mx-toolbar__sort > label { display: none; }
}

/* --------------------------------------------------------------------------
   Member note: full width at every size, square corners, hairlines above and
   below. Inner padding keeps the heart on the page gutter.
   -------------------------------------------------------------------------- */

.mx .mx-member-note {
  margin-left: 0;
  margin-right: 0;
  padding: var(--mx-space-6) var(--mx-pad-x);
  border-radius: 0;
  border-top: 1px solid var(--mx-line-hair);
  border-bottom: 1px solid var(--mx-line-hair);
}

/* --------------------------------------------------------------------------
   Desktop: the note insets to the same gutter the product grid uses, so its
   ends and hairlines align with the card edges. Mobile stays full width.
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  .mx .mx-member-note {
    margin-left: var(--mx-pad-x);
    margin-right: var(--mx-pad-x);
    padding-left: var(--mx-space-9);
    padding-right: var(--mx-space-9);
  }
}

/* Section 38l. Mobile drawer - member dashboard row alignment. */
/* The drawer's base rule spaces anchor children apart for chevron rows; */
/* this row has no chevron, so heart and label sit together on the left. */

body #menu.mobile-menu--wrapper ul li.mobile-customer-link--club a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

body #menu.mobile-menu--wrapper ul li.mobile-customer-link--club a .mobile-menu-heart {
  flex: none;
  margin: 0;
}

/* ==========================================================================
   30. Members-only badge — re-declared
   The base .mx-badge rule in section 6 is swallowed by a malformed comment
   header above it, leaving the overlay badge with position but no styling.
   ========================================================================== */

.mx .mx-product-grid .mx-badge {
  display: inline-block;
  padding: 5px var(--mx-space-3);
  font-family: var(--mx-font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: var(--mx-radius-pill);
}

/* ==========================================================================
   41. Corporate Gifting page
   Self-contained, like section 29. Nothing here depends on the shared
   components in sections 3 to 20, several of which never parse because of
   the malformed comment headers at roughly lines 670, 802, 935, 1002, 1053
   and 1298. Every value this page needs is declared below.

   Alignment note: every band sits on the Bootstrap container widths Envy's
   header uses (15px gutter, then 750 / 970 / 1170px), the same correction
   the member dashboard got in section 38f. Bands pad vertically only.

   Never write an asterisk followed by a slash inside a comment body.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------
   Declared locally so this page is unaffected by anything above it. */

.mx-cg {
  --mx-red: #d12627;
  --mx-red-dark: #b01f20;
  --mx-plum: #3e0f2f;
  --mx-pink: #fdf1f0;
  --mx-pink-bright: #f7c8c5;
  --mx-shell: #fbf6f1;
  --mx-white: #ffffff;

  --mx-text: #3e0f2f;
  --mx-text-body: rgba(62, 15, 47, 0.70);
  --mx-text-muted: rgba(62, 15, 47, 0.68);
  --mx-text-soft: rgba(62, 15, 47, 0.62);
  --mx-text-faint: rgba(62, 15, 47, 0.45);

  --mx-line: rgba(62, 15, 47, 0.16);
  --mx-line-soft: rgba(62, 15, 47, 0.14);
  --mx-line-hair: rgba(62, 15, 47, 0.12);

  --mx-on-dark: rgba(255, 255, 255, 0.72);
  --mx-on-dark-dim: rgba(255, 255, 255, 0.60);
  --mx-on-dark-faint: rgba(255, 255, 255, 0.45);
  --mx-line-on-dark: rgba(255, 255, 255, 0.22);

  --mx-font-display: "Bowlby One SC", "Arial Black", sans-serif;
  --mx-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* --- Page shell -----------------------------------------------------------
   Full bleed. theme.liquid wraps page templates in Bootstrap's .container.
   The transform makes this element the containing block for fixed children,
   so anything fixed would have to be moved to body by script. Nothing on
   this page is fixed. */

.mx-cg {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mx-font-body);
  color: var(--mx-text);
  background: var(--mx-white);
}

.mx-cg, .mx-cg * { box-sizing: border-box; }
.mx-cg input, .mx-cg select, .mx-cg textarea, .mx-cg button { font-family: inherit; }
.mx-cg h1, .mx-cg h2, .mx-cg h3, .mx-cg p, .mx-cg ul, .mx-cg li { margin: 0; padding: 0; }
.mx-cg ul { list-style: none; }
.mx-cg img { display: block; max-width: 100%; }
.mx-cg a { text-decoration: none; }
.mx-cg label { font-weight: 400; margin: 0; }
.mx-cg [hidden] { display: none !important; }

/* Envy's .row and Bootstrap column padding would fight the grids below. */
.mx-cg .row { margin-left: 0; margin-right: 0; }

/* --- The container --------------------------------------------------------
   All horizontal gutter lives here so every band shares one content edge. */

.mx-cg .mx-cg-inner {
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px)  { .mx-cg .mx-cg-inner { width: 750px; } }
@media (min-width: 992px)  { .mx-cg .mx-cg-inner { width: 970px; } }
@media (min-width: 1200px) { .mx-cg .mx-cg-inner { width: 1170px; } }


/* ==========================================================================
   41a. Shared type and components
   ========================================================================== */

.mx-cg .mx-cg-display {
  font-family: var(--mx-font-display);
  font-weight: 400;
  text-transform: uppercase;
}

.mx-cg .mx-cg-red { color: var(--mx-red); }
.mx-cg .mx-cg-blush { color: var(--mx-pink-bright); }

/* Stamp pill. Flat on this page — never rotated. */
.mx-cg .mx-cg-pill {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  font-family: var(--mx-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 100px;
}

.mx-cg .mx-cg-pill--plum { margin-bottom: 18px; background: var(--mx-plum); }
.mx-cg .mx-cg-pill-row { text-align: center; }

.mx-cg .mx-cg-btn {
  display: inline-block;
  padding: 16px 26px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}

.mx-cg .mx-cg-btn:hover,
.mx-cg .mx-cg-btn:focus { background: var(--mx-red-dark); color: var(--mx-white); text-decoration: none; }

/* Image slot. The caption sits behind the image, so clearing the image
   setting reveals it rather than leaving an empty box. */
.mx-cg .mx-cg-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  border-radius: 18px;
  font-family: var(--mx-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--mx-text-faint);
  background: var(--mx-pink);
}

/* responsive-image ignores blur:false — Liquid treats false as blank — so
   .lazyload-blur-wrapper is always present and must fill the slot. */
/* responsive-image writes style="position: relative" inline on this wrapper,
   which beats a normal declaration — hence !important. Without it the
   wrapper stays in flow as a flex item, collapses to zero width, and the
   absolutely positioned img inside has nothing to size against.
   Long-hand offsets rather than inset, so older Safari is covered too. */
.mx-cg .mx-cg-photo > .lazyload-blur-wrapper {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mx-cg .mx-cg-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx-cg .mx-cg-photo .ls-blur-up-img { object-fit: cover; }

.mx-cg .mx-cg-section { border-bottom: 1px solid var(--mx-line-hair); }

.mx-cg .mx-cg-h2 { font-size: 26px; line-height: 1.2; margin: 0 0 16px; }
.mx-cg .mx-cg-h2--center { text-align: center; margin-bottom: 30px; }

.mx-cg .mx-cg-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mx-text-muted);
  text-wrap: pretty;
}


/* ==========================================================================
   41b. Hero
   ========================================================================== */

.mx-cg .mx-cg-hero { padding: 80px 0 76px; background: var(--mx-plum); }

.mx-cg .mx-cg-hero__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: center;
  gap: 56px;
}

.mx-cg .mx-cg-hero h1 {
  margin: 0 0 18px;
  font-size: 46px;
  line-height: 1.08;
  color: var(--mx-white);
  text-wrap: balance;
}

.mx-cg .mx-cg-hero p {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mx-on-dark);
  text-wrap: pretty;
}

/* Button, then the callback line beneath it on one line. */
.mx-cg .mx-cg-hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.mx-cg .mx-cg-hero-cta small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mx-on-dark-dim);
}

/* 480 x 400 at desktop, held as a ratio so the frame keeps its shape at
   every width instead of squashing to a fixed height on mobile. */
.mx-cg .mx-cg-hero .mx-cg-photo {
  aspect-ratio: 6 / 5;
  background: rgba(255, 255, 255, 0.06);
  color: var(--mx-on-dark-dim);
}


/* ==========================================================================
   41c. Three ways
   ========================================================================== */

.mx-cg .mx-cg-three { padding: 80px 0; }
.mx-cg .mx-cg-three .mx-cg-h2 { font-size: 28px; margin-bottom: 34px; }

.mx-cg .mx-cg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.mx-cg .mx-cg-card {
  padding: 28px 26px;
  background: var(--mx-pink);
  border: 1px solid var(--mx-line-soft);
  border-radius: 16px;
}

.mx-cg .mx-cg-card-num {
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 1;
  color: var(--mx-red);
}

.mx-cg .mx-cg-card h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.3; }


/* ==========================================================================
   41d. Pricing tiers
   ========================================================================== */

.mx-cg .mx-cg-tiers { padding: 76px 0; background: var(--mx-shell); }

.mx-cg .mx-cg-tiers-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: center;
  gap: 48px;
}

.mx-cg .mx-cg-tiers .mx-cg-h2 { margin-bottom: 12px; }

.mx-cg .mx-cg-tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.mx-cg .mx-cg-tier {
  padding: 26px 22px;
  text-align: center;
  background: var(--mx-white);
  border: 1px solid var(--mx-line);
  border-radius: 16px;
}

.mx-cg .mx-cg-tier-num { margin-bottom: 8px; font-size: 40px; line-height: 1; }

.mx-cg .mx-cg-tier-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mx-text-soft);
}

.mx-cg .mx-cg-tier--plum { background: var(--mx-plum); border-color: var(--mx-plum); }
.mx-cg .mx-cg-tier--plum .mx-cg-tier-num { color: var(--mx-pink-bright); }
.mx-cg .mx-cg-tier--plum .mx-cg-tier-label { color: rgba(255, 255, 255, 0.7); }


/* ==========================================================================
   41e. Customization
   ========================================================================== */

.mx-cg .mx-cg-custom { padding: 76px 0; }

.mx-cg .mx-cg-custom__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  align-items: center;
  gap: 56px;
}

/* Flip: driven by the "Put the image on the left" checkbox. */
.mx-cg .mx-cg-custom__grid--flip { grid-template-columns: 480px 1fr; }
.mx-cg .mx-cg-custom__grid--flip .mx-cg-custom-text { order: 2; }
.mx-cg .mx-cg-custom__grid--flip .mx-cg-photo { order: 1; }

.mx-cg .mx-cg-custom .mx-cg-photo { aspect-ratio: 6 / 5; }

.mx-cg .mx-cg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.mx-cg .mx-cg-list li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--mx-text-body);
}

.mx-cg .mx-cg-list strong { color: var(--mx-text); }

.mx-cg .mx-cg-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 23px;
  height: 23px;
  font-family: var(--mx-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 6px;
}

.mx-cg .mx-cg-fine {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(62, 15, 47, 0.5);
}


/* ==========================================================================
   41f. Occasions
   ========================================================================== */

.mx-cg .mx-cg-occasions { padding: 76px 0; background: var(--mx-pink); }

.mx-cg .mx-cg-occ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.mx-cg .mx-cg-occ {
  padding: 24px 20px;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-soft);
  border-radius: 14px;
}

/* Card headings are plum, not red: the red is doing enough work in the
   section heading and the icon. */
.mx-cg .mx-cg-occ h3 {
  margin: 0 0 9px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--mx-text);
}

.mx-cg .mx-cg-occ p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mx-text-muted);
}

/* Icons are hidden unless the "Show icons" checkbox adds the modifier. */
.mx-cg .mx-cg-occ__ico { display: none; }

.mx-cg .mx-cg-occ-grid--icons .mx-cg-occ__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  color: var(--mx-red);
  background: var(--mx-pink);
  border-radius: 11px;
}

.mx-cg .mx-cg-occ__ico svg { display: block; width: 21px; height: 21px; }


/* ==========================================================================
   41g. Form
   ========================================================================== */

.mx-cg .mx-cg-form-section { padding: 80px 0; }

.mx-cg .mx-cg-form-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

.mx-cg .mx-cg-form-section .mx-cg-h2 { font-size: 28px; line-height: 1.18; margin-bottom: 14px; }
.mx-cg .mx-cg-form-section .mx-cg-body { margin-bottom: 22px; }

.mx-cg .mx-cg-callout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--mx-shell);
  border-radius: 14px;
}

.mx-cg .mx-cg-callout-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mx-red);
}

.mx-cg .mx-cg-callout p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--mx-text-body);
}

.mx-cg .mx-cg-direct {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--mx-text-muted);
}

.mx-cg .mx-cg-direct a { color: var(--mx-red); font-weight: 600; text-decoration: none; }
.mx-cg .mx-cg-direct a:hover { color: var(--mx-red-dark); text-decoration: underline; }

.mx-cg .mx-cg-form { padding: 34px 32px; background: var(--mx-plum); border-radius: 18px; }

/* Envy's form element carries global margins. */
.mx-cg .mx-cg-form form { margin: 0; }

.mx-cg .mx-cg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mx-cg .mx-cg-field { display: flex; flex-direction: column; gap: 7px; }
.mx-cg .mx-cg-field--full { grid-column: 1 / -1; }

.mx-cg .mx-cg-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mx-pink-bright);
}

/* Materialize and Envy both style bare inputs; these values are declared in
   full so neither shows through. */
.mx-cg .mx-cg-input {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 13px 14px;
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mx-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--mx-line-on-dark);
  border-radius: 10px;
  box-shadow: none;
  outline: none;
}

.mx-cg .mx-cg-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.mx-cg .mx-cg-input:focus { border-color: var(--mx-pink-bright); box-shadow: none; }
.mx-cg .mx-cg-input option { color: var(--mx-plum); background: var(--mx-white); }
.mx-cg textarea.mx-cg-input { line-height: 1.6; resize: vertical; }
.mx-cg .mx-cg-input.is-invalid { border-color: #f08a8a; }

/* The date field's native glyph is dark and vanishes on plum. */
.mx-cg .mx-cg-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }

/* browser-default on the select stops Materialize hijacking it; this hides
   the wrapper if one is ever produced anyway. */
.mx-cg .select-wrapper { display: none !important; }

.mx-cg select.mx-cg-input.browser-default {
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

.mx-cg .mx-cg-form .mx-cg-btn { width: 100%; margin-top: 20px; padding: 16px; }

.mx-cg .mx-cg-form-foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--mx-on-dark-faint);
}

.mx-cg .mx-cg-error {
  display: none;
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--mx-pink-bright);
}

.mx-cg .mx-cg-error.is-on { display: block; }
.mx-cg .mx-cg-error ul { margin: 0; padding: 0; list-style: none; }

/* --- Confirmation state --------------------------------------------------- */

.mx-cg .mx-cg-thanks { padding: 34px 12px; text-align: center; }

.mx-cg .mx-cg-thanks-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 100px;
}

.mx-cg .mx-cg-thanks h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.2; color: var(--mx-white); }

.mx-cg .mx-cg-thanks p {
  max-width: 38ch;
  margin: 0 auto 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mx-on-dark);
  text-wrap: pretty;
}

.mx-cg .mx-cg-btn--outline {
  padding: 12px 22px;
  font-family: var(--mx-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-pink-bright);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.mx-cg .mx-cg-btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mx-pink-bright);
}


/* ==========================================================================
   41h. FAQ
   Two columns so an open answer pushes only its own column. Same accordion
   as section 29's Extra Batch block.
   ========================================================================== */

.mx-cg .mx-cg-faq { padding: 58px 0 76px; }
.mx-cg .mx-cg-faq .mx-cg-h2 { margin-bottom: 28px; }

.mx-cg .mx-cg-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  align-items: start;
}

.mx-cg .mx-cg-accordion__col { border-bottom: 1px solid var(--mx-line-soft); }
.mx-cg .mx-cg-q { border-top: 1px solid var(--mx-line-soft); }

.mx-cg .mx-cg-q__b {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 0;
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  color: var(--mx-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.mx-cg .mx-cg-q__b:hover { color: var(--mx-red); }

.mx-cg .mx-cg-q__s { position: relative; flex: none; width: 13px; height: 13px; margin-top: 4px; }

.mx-cg .mx-cg-q__s::before,
.mx-cg .mx-cg-q__s::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 2px;
  margin-top: -1px;
  background: var(--mx-red);
  transition: transform 160ms ease;
}

.mx-cg .mx-cg-q__s::after { transform: rotate(90deg); }
.mx-cg .mx-cg-q__b[aria-expanded="true"] .mx-cg-q__s::after { transform: rotate(0deg); }

.mx-cg .mx-cg-q__p {
  padding: 0 0 18px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mx-text-soft);
  text-wrap: pretty;
}

.mx-cg .mx-cg-q__p p { margin: 0 0 12px; }
.mx-cg .mx-cg-q__p p:last-child { margin-bottom: 0; }
.mx-cg .mx-cg-q__p[hidden] { display: none; }


/* ==========================================================================
   41i. Closing band
   ========================================================================== */

.mx-cg .mx-cg-close { padding: 68px 0; background: var(--mx-plum); }

.mx-cg .mx-cg-close__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.mx-cg .mx-cg-close h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; color: var(--mx-white); }
.mx-cg .mx-cg-close p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mx-on-dark-dim); }
.mx-cg .mx-cg-close .mx-cg-btn { flex: none; }


/* ==========================================================================
   41j. Corporate Gifting — mobile, under 900px
   The design's own breakpoint, not the 48em / 64em pair the rest of the
   theme uses. Kept because every value below was set against the 392px
   design frame.
   ========================================================================== */

@media (max-width: 899px) {

  .mx-cg .mx-cg-pill { font-size: 9.5px; margin-bottom: 16px; }
  .mx-cg .mx-cg-pill--plum { margin-bottom: 14px; }
  .mx-cg .mx-cg-h2 { font-size: 21px; line-height: 1.25; margin-bottom: 14px; }
  .mx-cg .mx-cg-h2--center { margin-bottom: 20px; }
  .mx-cg .mx-cg-body { font-size: 12.5px; }

  /* --- Hero -------------------------------------------------------------- */
  .mx-cg .mx-cg-hero { padding: 48px 0 44px; text-align: center; }
  .mx-cg .mx-cg-hero__grid { display: block; }
  .mx-cg .mx-cg-hero h1 { font-size: 29px; line-height: 1.1; margin-bottom: 14px; }
  /* No ch clamp: the container gutter is the only inset the copy needs. */
  .mx-cg .mx-cg-hero p { font-size: 13px; margin: 0 0 20px; max-width: none; }
  .mx-cg .mx-cg-hero-cta { align-items: stretch; gap: 11px; }
  .mx-cg .mx-cg-hero-cta .mx-cg-btn { display: block; width: 100%; padding: 15px; font-size: 13px; line-height: 1.2; }
  .mx-cg .mx-cg-hero-cta small { font-size: 11.5px; }
  .mx-cg .mx-cg-hero .mx-cg-photo { border-radius: 14px; margin-top: 22px; }

  /* --- Three ways -------------------------------------------------------- */
  .mx-cg .mx-cg-three { padding: 46px 0; }
  .mx-cg .mx-cg-three .mx-cg-h2 { font-size: 21px; margin-bottom: 20px; }
  .mx-cg .mx-cg-cards { display: flex; flex-direction: column; gap: 12px; }
  .mx-cg .mx-cg-card { padding: 20px 18px; border-radius: 14px; }
  .mx-cg .mx-cg-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .mx-cg .mx-cg-card-num { font-size: 20px; margin: 0; }
  .mx-cg .mx-cg-card h3 { font-size: 15px; margin: 0; }
  .mx-cg .mx-cg-card p { font-size: 12.5px; }

  /* --- Tiers ------------------------------------------------------------- */
  .mx-cg .mx-cg-tiers { padding: 46px 0; }
  .mx-cg .mx-cg-tiers-grid { display: block; text-align: center; }
  .mx-cg .mx-cg-tiers .mx-cg-h2 { font-size: 20px; margin-bottom: 8px; }
  .mx-cg .mx-cg-tiers .mx-cg-body { margin: 0 auto 18px; }
  .mx-cg .mx-cg-tier-cards { display: flex; flex-direction: column; gap: 10px; }
  .mx-cg .mx-cg-tier { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 13px; }
  .mx-cg .mx-cg-tier-num { font-size: 28px; min-width: 66px; margin: 0; }

  /* --- Customization ------------------------------------------------------
     The grid's align-items:center governs the horizontal axis once the
     container turns into a flex column, which collapses both children to
     their content width. stretch is what makes the image full width. */
  .mx-cg .mx-cg-custom { padding: 46px 0; }

  .mx-cg .mx-cg-custom__grid,
  .mx-cg .mx-cg-custom__grid--flip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  /* Image above the text at every mobile width, flipped or not. */
  .mx-cg .mx-cg-custom__grid .mx-cg-custom-text,
  .mx-cg .mx-cg-custom__grid--flip .mx-cg-custom-text { order: 2; }

  .mx-cg .mx-cg-custom__grid .mx-cg-photo,
  .mx-cg .mx-cg-custom__grid--flip .mx-cg-photo { order: 1; border-radius: 14px; }

  .mx-cg .mx-cg-list { gap: 12px; }
  .mx-cg .mx-cg-list li { font-size: 12.5px; line-height: 1.6; gap: 11px; }
  .mx-cg .mx-cg-heart { width: 22px; height: 22px; }

  .mx-cg .mx-cg-fine {
    margin: 16px auto 0;
    padding: 0 16px;
    font-size: 11.5px;
    text-align: center;
  }

  /* --- Occasions --------------------------------------------------------- */
  .mx-cg .mx-cg-occasions { padding: 46px 0; }
  .mx-cg .mx-cg-occasions .mx-cg-h2 { font-size: 20px; margin-bottom: 18px; }
  .mx-cg .mx-cg-occ-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mx-cg .mx-cg-occ { padding: 16px 14px; border-radius: 13px; }
  .mx-cg .mx-cg-occ h3 { font-size: 13px; margin-bottom: 7px; }
  .mx-cg .mx-cg-occ p { font-size: 11.5px; line-height: 1.6; }
  .mx-cg .mx-cg-occ-grid--icons .mx-cg-occ__ico { width: 32px; height: 32px; margin-bottom: 11px; border-radius: 9px; }
  .mx-cg .mx-cg-occ__ico svg { width: 18px; height: 18px; }

  /* --- Form -------------------------------------------------------------- */
  .mx-cg .mx-cg-form-section { padding: 44px 0; }
  .mx-cg .mx-cg-form-grid { display: block; text-align: center; }
  .mx-cg .mx-cg-form-section .mx-cg-h2 { font-size: 21px; margin-bottom: 10px; }
  .mx-cg .mx-cg-form-section .mx-cg-body { margin: 0 auto 18px; }
  .mx-cg .mx-cg-callout { display: none; }
  .mx-cg .mx-cg-direct { margin: 0 0 18px; font-size: 12px; }
  .mx-cg .mx-cg-form { text-align: left; border-radius: 16px; padding: 24px 20px; }
  .mx-cg .mx-cg-fields { display: flex; flex-direction: column; gap: 14px; }
  .mx-cg .mx-cg-label { font-size: 10.5px; }
  .mx-cg .mx-cg-input { font-size: 13px; }
  .mx-cg .mx-cg-form .mx-cg-btn { margin-top: 18px; padding: 15px; font-size: 13px; }
  .mx-cg .mx-cg-form-foot { font-size: 11px; margin-top: 11px; }
  .mx-cg .mx-cg-thanks { padding: 26px 6px; }
  .mx-cg .mx-cg-thanks-heart { width: 50px; height: 50px; font-size: 21px; margin-bottom: 16px; }
  .mx-cg .mx-cg-thanks h3 { font-size: 21px; margin-bottom: 10px; }
  .mx-cg .mx-cg-thanks p { font-size: 12.5px; max-width: 32ch; margin-bottom: 18px; }

  /* --- FAQ ----------------------------------------------------------------
     One column: the two column wrappers collapse so their children stack
     into a single run. */
  .mx-cg .mx-cg-faq { padding: 32px 0 48px; }
  .mx-cg .mx-cg-faq .mx-cg-h2 { font-size: 20px; margin-bottom: 16px; }
  .mx-cg .mx-cg-accordion { display: block; border-bottom: 1px solid var(--mx-line-soft); }
  .mx-cg .mx-cg-accordion__col { display: contents; border-bottom: 0; }
  .mx-cg .mx-cg-q__b { font-size: 12.5px; padding: 16px 0; }
  .mx-cg .mx-cg-q__p { font-size: 12px; line-height: 1.65; padding-bottom: 16px; }

  /* --- Close ------------------------------------------------------------- */
  .mx-cg .mx-cg-close { padding: 44px 0 46px; text-align: center; }
  .mx-cg .mx-cg-close__grid { display: block; }
  .mx-cg .mx-cg-close h2 { font-size: 20px; line-height: 1.25; }
  .mx-cg .mx-cg-close p { font-size: 11.5px; }
  .mx-cg .mx-cg-close .mx-cg-btn { display: block; width: 100%; margin-top: 20px; padding: 15px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-cg * { transition: none !important; }
}

/* ==========================================================================
   BUILD YOUR DOZEN — section styles
   Append to the END of assets/maccs.css, after the .mx-pack rule.
   Scoped under .mx. All values in px (Bootstrap sets html{font-size:10px},
   so rem renders at 62.5% of intent).
   Desktop >= 900px : 4-col flavor grid, sticky buy box right
   Mobile   < 900px : 2-col grid, buy box stacks, progress bar sticks
   ========================================================================== */

.mx .byd,
.mx .byd * { box-sizing: border-box; }

.mx .byd {
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--mx-font-body);
  color: var(--mx-text);
  background: var(--mx-white);
  -webkit-font-smoothing: antialiased;
}

.mx .byd button { font-family: inherit; }

.mx .byd-display {
  font-family: var(--mx-font-display);
  font-weight: 400;
  text-transform: uppercase;
}

.mx .byd [hidden] { display: none !important; }

/* --- intro ---------------------------------------------------------------- */
.mx .byd-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 48px 26px;
}
.mx .byd-pill {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--mx-red);
  color: var(--mx-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mx .byd-h1 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.08;
}
.mx .byd-h1 em { font-style: normal; color: var(--mx-red); }
.mx .byd-lede {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--mx-text-muted);
}
.mx .byd-price { flex: none; text-align: right; }
.mx .byd-price-big { font-size: 38px; line-height: 1; }
.mx .byd-price-sub {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mx-text-dim);
}

/* --- builder layout ------------------------------------------------------- */
.mx .byd-builder {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 34px;
  padding: 0 48px 48px;
  align-items: start;
}

/* --- progress bar --------------------------------------------------------- */
.mx .byd-progress {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--mx-line-soft);
  border-radius: 13px;
  background: var(--mx-pink);
}
.mx .byd-progress-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mx .byd-step { font-size: 15px; line-height: 1; }
.mx .byd-hint {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--mx-text-soft);
}
.mx .byd-pips { display: flex; align-items: center; gap: 7px; }
.mx .byd-pip {
  width: 26px;
  height: 6px;
  border-radius: 100px;
  background: var(--mx-line-mid);
}
.mx .byd-pip.is-on { background: var(--mx-red); }

/* --- flavor grid ---------------------------------------------------------- */
.mx .byd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mx .byd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border: 2px solid var(--mx-line-soft);
  border-radius: 15px;
  background: var(--mx-white);
  transition: border-color 0.15s, opacity 0.15s;
}
.mx .byd-tile.is-selected { border-color: var(--mx-red); }
.mx .byd-tile.is-locked { opacity: 0.42; cursor: not-allowed; }

.mx .byd-tile-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 126px;
  overflow: hidden;
  background: var(--mx-shell);
}
.mx .byd-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mx .byd-tile-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.55);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.mx .byd-tile.is-selected .byd-tile-badge {
  background: var(--mx-red);
  color: var(--mx-white);
}
.mx .byd-tile-text { padding: 12px 13px 14px; }
.mx .byd-tile-name {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  line-height: 1.25;
}
.mx .byd-tile-choc {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mx-text-dim);
}
.mx .byd-split-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mx-text-dim);
}

/* --- buy box shell -------------------------------------------------------- */
.mx .byd-buy {
  position: sticky;
  top: 20px;
  overflow: hidden;
  border: 1px solid var(--mx-line-mid);
  border-radius: 18px;
}
.mx .byd-box { padding: 20px 22px; background: var(--mx-plum); }
.mx .byd-eyebrow {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-pink-bright);
}
.mx .byd-slots { display: flex; gap: 7px; }
.mx .byd-slot {
  flex: 1;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background-color: var(--mx-fill-on-dark);
  background-size: cover;
  background-position: center;
}
.mx .byd-slot.is-filled { border-color: var(--mx-line-on-dark); }
.mx .byd-box-line {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mx-text-on-dark-dim);
}
.mx .byd-buy-body { padding: 20px 22px; background: var(--mx-white); }

/* --- picked rows ---------------------------------------------------------- */
.mx .byd-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}
.mx .byd-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--mx-line-soft);
  border-radius: 11px;
  background: var(--mx-white);
}
.mx .byd-row.is-empty {
  border-style: dashed;
  border-color: var(--mx-line);
}
.mx .byd-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background-color: var(--mx-fill-muted);
  background-size: cover;
  background-position: center;
}
.mx .byd-row-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.mx .byd-row.is-empty .byd-row-name {
  font-weight: 500;
  color: var(--mx-text-ghost);
}
.mx .byd-x4 {
  font-family: var(--mx-font-display);
  font-size: 12px;
  line-height: 1;
  color: var(--mx-red);
}
.mx .byd-remove {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: rgba(62, 15, 47, 0.07);
  color: var(--mx-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.mx .byd-remove:hover { background: rgba(209, 38, 39, 0.14); }

/* --- upsell 1: second dozen ----------------------------------------------- */
.mx .byd-upsell {
  margin-bottom: 16px;
  padding: 16px 16px 14px;
  border: 2px solid var(--mx-red);
  border-radius: 14px;
  background: var(--mx-pink);
}
.mx .byd-upsell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.mx .byd-upsell-title { font-size: 15px; line-height: 1.2; }
.mx .byd-save {
  flex: none;
  padding: 5px 9px;
  border-radius: 100px;
  background: var(--mx-red);
  color: var(--mx-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mx .byd-upsell-line {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--mx-text-muted);
}
.mx .byd-slots--sm { gap: 5px; margin-bottom: 11px; }
.mx .byd-slots--sm .byd-slot { height: 22px; border-radius: 6px; }
.mx .byd-rows--sm { gap: 8px; margin-bottom: 12px; }
.mx .byd-rows--sm .byd-row { padding: 9px 11px; border-radius: 10px; }
.mx .byd-rows--sm .byd-dot { width: 22px; height: 22px; }
.mx .byd-rows--sm .byd-row-name { font-size: 12px; }

/* --- buttons -------------------------------------------------------------- */
.mx .byd-btn {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 11px;
  background: var(--mx-red);
  color: var(--mx-white);
  font-family: var(--mx-font-display);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.mx .byd-btn:hover { background: var(--mx-red-dark); }
.mx .byd-btn--ghost {
  background: var(--mx-fill-chip);
  color: var(--mx-text-soft);
}
.mx .byd-btn--ghost:hover { background: rgba(62, 15, 47, 0.14); }
.mx .byd-btn--plum,
.mx .byd-btn--plum:hover { background: var(--mx-plum); }

/* --- upsell 2: membership ------------------------------------------------- */
.mx .byd-member {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 14px;
  background: var(--mx-plum);
}
.mx .byd-member-eyebrow {
  margin-bottom: 9px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-pink-bright);
}
.mx .byd-member-title {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.25;
  color: var(--mx-white);
}
.mx .byd-member-line {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--mx-text-on-dark);
}
.mx .byd-perks-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: var(--mx-fill-on-dark);
  color: var(--mx-white);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.mx .byd-caret { font-size: 9px; color: var(--mx-pink-bright); }
.mx .byd-perks {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 2px 2px;
}
.mx .byd-perks.is-open { display: flex; }
.mx .byd-perk { display: flex; gap: 10px; }
.mx .byd-perk-heart {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--mx-red);
  color: var(--mx-white);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.mx .byd-perk-title {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mx-white);
}
.mx .byd-perk-body {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--mx-text-on-dark-dim);
}
.mx .byd-member .byd-btn { margin-top: 12px; }
.mx .byd-member-foot {
  margin: 9px 0 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* --- ledger + CTA --------------------------------------------------------- */
.mx .byd-ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--mx-line-hair);
  border-bottom: 1px solid var(--mx-line-hair);
}
.mx .byd-ledger--qty { padding-top: 0; border-top: 0; }
.mx .byd-ledger-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--mx-text-soft);
}
.mx .byd-ledger-sub {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--mx-text-faint);
}
.mx .byd-qty { display: flex; align-items: center; gap: 14px; }
.mx .byd-qty button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--mx-line);
  border-radius: 9px;
  background: var(--mx-white);
  color: var(--mx-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.mx .byd-qty output {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.mx .byd-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mx .byd-total-num { font-size: 26px; line-height: 1; }

.mx .byd-cta {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--mx-fill-chip);
  color: var(--mx-text-faint);
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s;
}
.mx .byd-cta.is-ready {
  background: var(--mx-red);
  color: var(--mx-white);
  cursor: pointer;
}
.mx .byd-cta.is-ready:hover { background: var(--mx-red-dark); }
.mx .byd-cta.is-added {
  background: var(--mx-plum);
  color: var(--mx-white);
  cursor: default;
}
.mx .byd-cta-note {
  margin: 11px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mx-text-faint);
}

/* --- trust bar ------------------------------------------------------------ */
.mx .byd-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mx-line-hair);
  background: var(--mx-shell);
}
.mx .byd-trust div {
  padding: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mx-text-body);
}

/* --- mobile --------------------------------------------------------------- */
@media (max-width: 899px) {
  .mx .byd-intro { display: block; padding: 26px 20px 18px; }
  .mx .byd-pill { margin-bottom: 12px; font-size: 9.5px; }
  .mx .byd-h1 { margin-bottom: 10px; font-size: 27px; line-height: 1.1; }
  .mx .byd-lede { font-size: 13px; }
  .mx .byd-price { margin-top: 14px; text-align: left; }
  .mx .byd-price-big { font-size: 28px; }

  .mx .byd-builder { display: block; padding: 0; }

  .mx .byd-progress {
    margin: 0;
    padding: 12px 20px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .mx .byd-hint { display: none; }
  .mx .byd-step { font-size: 14px; }
  .mx .byd-pip { width: 22px; }

  .mx .byd-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 20px 0; }
  .mx .byd-tile-art { height: 112px; }
  .mx .byd-tile-name { font-size: 12px; }
  .mx .byd-tile-choc { font-size: 10.5px; }
  .mx .byd-split-note { padding: 0 20px; font-size: 12px; }

  .mx .byd-buy { position: static; margin-top: 20px; border: 0; border-radius: 0; }
  .mx .byd-box { padding: 22px 20px; }
  .mx .byd-buy-body { padding: 20px; }
  .mx .byd-qty button { width: 34px; height: 34px; font-size: 16px; }
  .mx .byd-total-num { font-size: 24px; }
  .mx .byd-cta { font-size: 13.5px; }

  .mx .byd-trust { grid-template-columns: 1fr 1fr; }
  .mx .byd-trust div { padding: 16px; font-size: 11px; }
}


/* ==========================================================================
   29. The Extra Batch page
   Self-contained. Nothing here depends on the shared components in sections
   3 to 20, several of which never parse because of malformed comment headers
   at roughly lines 670, 802, 935, 1002, 1053 and 1298. Every value this page
   needs is declared below.
   Never write an asterisk followed by a slash inside a comment body.
   ========================================================================== */

/* Full bleed. theme.liquid wraps page templates in Bootstrap's container,
   so the page breaks out to the viewport edge. The transform makes this
   element the containing block for fixed children, which is why the sticky
   bar is moved to body by script. */
.mx-eb {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 76px;
}

.mx-eb .mx-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

.mx-eb .mx-tm {
  font-family: var(--mx-font-body);
  font-size: 0.36em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

/* --- Shared type --------------------------------------------------------- */

.mx-eb .mx-eb-h2 {
  margin: 0;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--mx-plum);
  text-wrap: balance;
}

.mx-eb .mx-eb-h2--center { text-align: center; }
.mx-eb .mx-eb-accent { color: var(--mx-red); }

.mx-eb .mx-eb-prose {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-prose p { margin: 0; }
.mx-eb .mx-eb-prose strong { color: var(--mx-text); font-weight: 700; }
.mx-eb .mx-eb-prose--center { text-align: center; margin-left: auto; margin-right: auto; }

/* --- Stamp pill ---------------------------------------------------------- */

.mx-eb .mx-eb-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 17px;
  font-family: var(--mx-font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 2px solid var(--mx-red);
  border-radius: 100px;
  transform: rotate(-2deg);
}

.mx-eb .mx-eb-stamp__h { font-size: 11px; line-height: 1; }
.mx-eb .mx-eb-stamp--plum { color: var(--mx-plum); border-color: var(--mx-plum); }
.mx-eb .mx-eb-stamp--plum .mx-eb-stamp__h { color: var(--mx-red); }

.mx-eb .mx-eb-stamp-row {
  margin: 0 0 26px;
  text-align: center;
  font-size: 0;
  line-height: 0;
}

/* --- Button -------------------------------------------------------------- */

.mx-eb .mx-eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--mx-white);
  background: var(--mx-red);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease;
}

.mx-eb .mx-eb-btn:hover,
.mx-eb .mx-eb-btn:focus { background: var(--mx-red-dark); color: var(--mx-white); text-decoration: none; }
.mx-eb .mx-eb-btn--block { display: flex; width: 100%; }
.mx-eb .mx-eb-form { margin: 0; }

.mx-eb .mx-eb-btn__h {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 17px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* Long labels drop the heart on a phone so nothing wraps. */
.mx-eb .mx-eb-btn__full { display: none; }
.mx-eb .mx-eb-btn__short { display: inline; }
.mx-eb .mx-eb-btn--hero .mx-eb-btn__h,
.mx-eb .mx-eb-btn--buy .mx-eb-btn__h { display: none; }

/* --- Tape ---------------------------------------------------------------- */
/* Sits above the card edge, so every taped card needs clear space above. */

.mx-eb .mx-eb-tape {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 3;
  width: 150px;
  height: 34px;
  background: rgba(247, 200, 197, 0.72);
  box-shadow: 0 2px 6px rgba(62, 15, 47, 0.12);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mx-eb .mx-eb-hero { padding: 72px 0 80px; background: var(--mx-plum); }

.mx-eb .mx-eb-herocard {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 46px 26px 42px;
  text-align: center;
  background: var(--mx-white);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  transform: rotate(-0.6deg);
}

.mx-eb .mx-eb-herocard .mx-eb-tape { transform: translateX(-50%) rotate(-2deg); }
.mx-eb .mx-eb-herocard .mx-eb-stamp { margin-bottom: 18px; }

.mx-eb .mx-eb-herocard__title {
  margin: 0 0 14px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--mx-plum);
  text-wrap: balance;
}

.mx-eb .mx-eb-herocard__sub {
  margin: 0 0 18px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mx-red);
}

.mx-eb .mx-eb-herocard__copy {
  max-width: 48ch;
  margin: 0 auto 26px;
  font-family: var(--mx-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-herocard__price {
  margin: 14px 0 0;
  font-family: var(--mx-font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mx-text-muted);
}

/* --- Founding price panel ------------------------------------------------ */
/* Soft pink fill with a plum frame, so it carries weight through the border
   and the figure rather than borrowing the CTA red. */

.mx-eb .mx-eb-pricebar {
  display: flex;
  align-items: stretch;
  max-width: 480px;
  margin: 0 auto 26px;
  border: 2px solid var(--mx-plum);
  border-radius: 14px;
  overflow: hidden;
}

.mx-eb .mx-eb-pricebar__a,
.mx-eb .mx-eb-pricebar__b { flex: 1; padding: 18px 16px; }
.mx-eb .mx-eb-pricebar__a { background: #FDF1F1; }
.mx-eb .mx-eb-pricebar__b { background: var(--mx-white); border-left: 2px dashed var(--mx-line-soft); }

.mx-eb .mx-eb-pb__k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mx-font-body);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mx-eb .mx-eb-pricebar__a .mx-eb-pb__k { color: var(--mx-red); }
.mx-eb .mx-eb-pricebar__b .mx-eb-pb__k { color: var(--mx-text-ghost); }

.mx-eb .mx-eb-pb__n {
  display: block;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}

.mx-eb .mx-eb-pricebar__a .mx-eb-pb__n { color: var(--mx-plum); }
.mx-eb .mx-eb-pricebar__b .mx-eb-pb__n { color: var(--mx-text-ghost); }

.mx-eb .mx-eb-pb__s {
  display: block;
  margin-top: 6px;
  font-family: var(--mx-font-body);
  font-size: 11.5px;
  line-height: 1.35;
}

.mx-eb .mx-eb-pricebar__a .mx-eb-pb__s { color: var(--mx-text-muted); font-weight: 600; }
.mx-eb .mx-eb-pricebar__b .mx-eb-pb__s { color: var(--mx-text-ghost); }

/* ==========================================================================
   Story
   ========================================================================== */

.mx-eb .mx-eb-story { padding: 76px 0; background: var(--mx-shell); }

.mx-eb .mx-eb-storycard {
  background: var(--mx-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(62, 15, 47, 0.12);
}

/* --- Doors --------------------------------------------------------------- */

.mx-eb .mx-eb-doors { display: grid; grid-template-columns: 1fr; }
.mx-eb .mx-eb-door { padding: 26px 24px; }
.mx-eb .mx-eb-door--keep { background: var(--mx-plum); color: var(--mx-white); }
.mx-eb .mx-eb-door--first { background: var(--mx-red); color: var(--mx-white); }

.mx-eb .mx-eb-door__k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 11px;
  font-family: var(--mx-font-body);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 100px;
}

.mx-eb .mx-eb-door__row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin: 0;
}

.mx-eb .mx-eb-door__n {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  color: var(--mx-white);
}

.mx-eb .mx-eb-door__w {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.mx-eb .mx-eb-door__l {
  margin: 10px 0 0;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

/* The border belongs to this element, so no rule text means no divider. */
.mx-eb .mx-eb-door__x {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  font-family: var(--mx-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mx-white);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- Story body ---------------------------------------------------------- */

.mx-eb .mx-eb-storybody { display: grid; grid-template-columns: 1fr; }
.mx-eb .mx-eb-storybody__l { padding: 30px 24px 26px; }
.mx-eb .mx-eb-storybody__r { padding: 0 24px 26px; display: flex; flex-direction: column; gap: 26px; }
.mx-eb .mx-eb-storybody__l .mx-eb-h2 { font-size: 23px; margin-bottom: 18px; }

/* --- Speech bubbles ------------------------------------------------------ */

.mx-eb .mx-eb-bubble {
  position: relative;
  padding: 22px 24px;
  background: var(--mx-pink);
  border-radius: 20px;
}

.mx-eb .mx-eb-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid var(--mx-pink);
}

.mx-eb .mx-eb-bubble--l::after { left: 36px; }
.mx-eb .mx-eb-bubble--r::after { right: 36px; }

.mx-eb .mx-eb-bubble__q {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mx-plum);
}

/* Only the flavour words carry the display face. */
.mx-eb .mx-eb-flavor {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 0.94em;
  text-transform: uppercase;
  color: var(--mx-red);
}

/* --- Closing block ------------------------------------------------------- */

.mx-eb .mx-eb-storyfoot {
  padding: 26px 24px 30px;
  margin-top: 26px;
  text-align: center;
  background: #fef8f7;
  border-top: 1px solid var(--mx-line-hair);
}

.mx-eb .mx-eb-kicker {
  margin: 0 0 16px;
  font-family: var(--mx-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--mx-plum);
}

.mx-eb .mx-eb-storyfoot .mx-eb-prose { max-width: 62ch; }

.mx-eb .mx-eb-members {
  margin: 10px 0 0;
  font-family: var(--mx-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-red);
}

/* --- Lifecycle timeline -------------------------------------------------- */

.mx-eb .mx-eb-life {
  padding: 28px 24px;
  background: #FDF1F1;
  border-top: 1px solid var(--mx-line-hair);
}

.mx-eb .mx-eb-life__h {
  margin: 0 0 22px;
  font-family: var(--mx-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mx-red);
}

.mx-eb .mx-eb-life__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

.mx-eb .mx-eb-stop { position: relative; padding: 0 0 24px 46px; }
.mx-eb .mx-eb-stop:last-child { padding-bottom: 0; }

.mx-eb .mx-eb-stop::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 26px;
  bottom: -2px;
  width: 2px;
  background: rgba(209, 38, 39, 0.3);
}

.mx-eb .mx-eb-stop:last-child::before { display: none; }

.mx-eb .mx-eb-stop__n {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 50%;
}

.mx-eb .mx-eb-stop__h {
  margin: 0 0 3px;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mx-text);
}

.mx-eb .mx-eb-stop__p {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-stop--end .mx-eb-stop__n { background: var(--mx-text-ghost); }
.mx-eb .mx-eb-stop--end .mx-eb-stop__h { color: var(--mx-text-muted); }

.mx-eb .mx-eb-locked {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--mx-plum);
  border-radius: 16px;
}

.mx-eb .mx-eb-locked__i {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 11px;
}

.mx-eb .mx-eb-locked__i svg { width: 20px; height: 20px; display: block; }

.mx-eb .mx-eb-locked__t {
  font-family: var(--mx-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.mx-eb .mx-eb-locked__t b {
  display: block;
  margin-bottom: 2px;
  font-size: 14.5px;
  color: var(--mx-white);
}

/* ==========================================================================
   Secret menu marquee
   ========================================================================== */

.mx-eb .mx-eb-rail-band { padding: 60px 0; background: var(--mx-pink); overflow: hidden; }
.mx-eb .mx-eb-rail-head { text-align: center; margin-bottom: 34px; }
.mx-eb .mx-eb-rail-head .mx-eb-stamp { margin-bottom: 20px; }
.mx-eb .mx-eb-rail-head .mx-eb-h2 { margin-bottom: 14px; }
.mx-eb .mx-eb-rail-head__copy { max-width: 52ch; }

.mx-eb .mx-eb-marquee {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: mx-eb-slide 52s linear infinite;
}

.mx-eb .mx-eb-marquee:hover { animation-play-state: paused; }

@keyframes mx-eb-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mx-eb .mx-eb-marquee {
    animation: none;
    width: auto;
    overflow-x: auto;
    padding: 0 18px;
    scrollbar-width: none;
  }
  .mx-eb .mx-eb-marquee::-webkit-scrollbar { display: none; }
}

.mx-eb .mx-eb-mcard {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: 16px;
  overflow: hidden;
}

.mx-eb .mx-eb-mcard__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mx-pink);
}

.mx-eb .mx-eb-mcard__media > .lazyload-blur-wrapper { height: 100%; }

.mx-eb .mx-eb-mcard__media img,
.mx-eb .mx-eb-mcard__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mx-eb .mx-eb-mcard__media .ls-blur-up-img { object-fit: cover; }

.mx-eb .mx-eb-excl {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-family: var(--mx-font-body);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(62, 15, 47, 0.22);
}

.mx-eb .mx-eb-mcard__b { display: block; padding: 14px 14px 16px; }

.mx-eb .mx-eb-mcard__t {
  display: block;
  font-family: var(--mx-font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mx-plum);
}

/* --- Voting element ------------------------------------------------------ */
/* Card form rides in the rail on tablet and up. Bar form takes over on
   mobile, where a moving target is hard to tap. */

.mx-eb .mx-eb-vote { text-decoration: none; }

.mx-eb .mx-eb-vote__i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--mx-white);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 13px;
}

.mx-eb .mx-eb-vote__i svg { display: block; }

.mx-eb .mx-eb-vote--card {
  display: none;
  flex: 0 0 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 18px;
  text-align: center;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 16px;
  transition: background 160ms ease, transform 160ms ease;
}

.mx-eb a.mx-eb-vote--card:hover { background: var(--mx-red-dark); transform: translateY(-3px); }

.mx-eb .mx-eb-vote--card .mx-eb-vote__i { width: 42px; height: 42px; margin-bottom: 6px; }
.mx-eb .mx-eb-vote--card .mx-eb-vote__i svg { width: 23px; height: 23px; }

.mx-eb .mx-eb-vote--card .mx-eb-vote__t {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
}

.mx-eb .mx-eb-vote--card .mx-eb-vote__s {
  margin-top: 6px;
  font-family: var(--mx-font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.mx-eb .mx-eb-vote__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 20px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mx-red);
  background: var(--mx-white);
  border-radius: 10px;
}

.mx-eb .mx-eb-vote__cta .mx-eb-btn__h {
  display: inline-flex;
  font-size: 13px;
  color: var(--mx-red);
}

.mx-eb .mx-eb-vote--bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 20px 24px;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 16px;
}

.mx-eb .mx-eb-vote--bar .mx-eb-vote__i { width: 44px; height: 44px; }
.mx-eb .mx-eb-vote--bar .mx-eb-vote__i svg { width: 24px; height: 24px; }
.mx-eb .mx-eb-vote--bar .mx-eb-vote__text { display: flex; flex-direction: column; justify-content: center; }

.mx-eb .mx-eb-vote--bar .mx-eb-vote__t {
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.15;
  text-transform: uppercase;
}

.mx-eb .mx-eb-vote--bar .mx-eb-vote__s {
  margin-top: 1px;
  font-family: var(--mx-font-body);
  font-size: 12.5px;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Benefits
   ========================================================================== */

.mx-eb .mx-eb-benefits { padding: 60px 0; background: var(--mx-white); }
.mx-eb .mx-eb-benefits .mx-eb-rail-head { margin-bottom: 36px; }

.mx-eb .mx-eb-bento { display: grid; grid-template-columns: 1fr; gap: 14px; }

.mx-eb .mx-eb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  background: var(--mx-white);
  border: 1px solid var(--mx-line-hair);
  border-radius: 22px;
}

.mx-eb .mx-eb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  background: var(--mx-pink);
  border-radius: 14px;
  color: var(--mx-red);
}

.mx-eb .mx-eb-ico svg { display: block; width: 25px; height: 25px; }

/* Eyebrow pill, pinned to the top right. Its top edge matches the icon's,
   so the two read as one row. */
.mx-eb .mx-eb-tag {
  position: absolute;
  top: 26px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 55%;
  padding: 6px 12px;
  font-family: var(--mx-font-body);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 100px;
}

.mx-eb .mx-eb-tile__h {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mx-text);
}

.mx-eb .mx-eb-tile__p {
  margin: 7px 0 0;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mx-text-muted);
}

/* ==========================================================================
   How it works
   ========================================================================== */

.mx-eb .mx-eb-steps-band { padding: 60px 0; background: var(--mx-shell); }

/* Mobile: the same rule and ringed nodes as desktop, turned vertical. */
.mx-eb .mx-eb-track { position: relative; margin-top: 34px; padding-left: 62px; }

.mx-eb .mx-eb-track::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, rgba(209, 38, 39, 0.25), var(--mx-red) 22%, var(--mx-red) 78%, rgba(209, 38, 39, 0.25));
}

.mx-eb .mx-eb-track__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.mx-eb .mx-eb-station { position: relative; text-align: left; padding: 0 0 30px; }
.mx-eb .mx-eb-station:last-child { padding-bottom: 0; }

.mx-eb .mx-eb-station__n {
  position: absolute;
  top: -2px;
  left: -62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: var(--mx-white);
  background: var(--mx-red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--mx-shell), 0 0 0 7px rgba(209, 38, 39, 0.2);
}

.mx-eb .mx-eb-station__h {
  margin: 0 0 6px;
  font-family: var(--mx-font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mx-text);
}

.mx-eb .mx-eb-station__p {
  margin: 0;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mx-text-muted);
}

/* ==========================================================================
   Buy box
   ========================================================================== */

/* Extra top padding so the tape is never clipped. */
.mx-eb .mx-eb-buy { padding: 76px 0 60px; background: var(--mx-plum); }

.mx-eb .mx-eb-buycard {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--mx-white);
  border-radius: 4px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.32);
  transform: rotate(0.4deg);
}

/* Tilted the other way to the card, so it reads as stuck on. */
.mx-eb .mx-eb-buycard .mx-eb-tape { transform: translateX(-50%) rotate(-2.4deg); }

.mx-eb .mx-eb-buycard__l {
  padding: 44px 24px 34px;
  text-align: center;
  background: var(--mx-white);
  border-bottom: 2px dashed var(--mx-line-soft);
  border-radius: 4px 4px 0 0;
}

.mx-eb .mx-eb-buycard__r {
  padding: 34px 24px;
  background: var(--mx-pink);
  border-radius: 0 0 4px 4px;
}

.mx-eb .mx-eb-buycard__l .mx-eb-stamp { margin-bottom: 20px; }

.mx-eb .mx-eb-amount {
  margin: 0;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--mx-red);
}

.mx-eb .mx-eb-amount__label {
  margin: 10px 0 6px;
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--mx-plum);
}

.mx-eb .mx-eb-amount__after {
  margin: 0 0 20px;
  font-family: var(--mx-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mx-text-ghost);
}

.mx-eb .mx-eb-amount__note {
  margin: 0 0 24px;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  color: var(--mx-text-muted);
}

.mx-eb .mx-eb-fine {
  margin: 18px 0 0;
  font-family: var(--mx-font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--mx-text-ghost);
}

.mx-eb .mx-eb-listhead {
  margin: 0 0 20px;
  font-family: var(--mx-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mx-text);
}

.mx-eb .mx-eb-list { margin: 0; padding: 0; list-style: none; }

.mx-eb .mx-eb-list__i {
  display: flex;
  gap: 11px;
  font-family: var(--mx-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mx-text-muted);
  text-align: left;
}

.mx-eb .mx-eb-list__i + .mx-eb-list__i { margin-top: 15px; }
.mx-eb .mx-eb-list__h { flex: none; color: var(--mx-red); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.mx-eb .mx-eb-faq-band { padding: 60px 0; background: var(--mx-white); }

.mx-eb .mx-eb-accordion {
  margin-top: 34px;
  text-align: left;
  border-bottom: 1px solid var(--mx-line-soft);
}

.mx-eb .mx-eb-accordion__col { display: contents; }
.mx-eb .mx-eb-q { border-top: 1px solid var(--mx-line-soft); }

.mx-eb .mx-eb-q__b {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 21px 0;
  font-family: var(--mx-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--mx-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.mx-eb .mx-eb-q__b:hover { color: var(--mx-red); }

.mx-eb .mx-eb-q__s { position: relative; flex: none; width: 14px; height: 14px; margin-top: 4px; }

.mx-eb .mx-eb-q__s::before,
.mx-eb .mx-eb-q__s::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--mx-red);
  transition: transform 160ms ease;
}

.mx-eb .mx-eb-q__s::after { transform: rotate(90deg); }
.mx-eb .mx-eb-q__b[aria-expanded="true"] .mx-eb-q__s::after { transform: rotate(0deg); }

.mx-eb .mx-eb-q__p {
  padding: 0 0 21px;
  font-family: var(--mx-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mx-text-muted);
  max-width: 46ch;
}

.mx-eb .mx-eb-q__p p { margin: 0 0 12px; }
.mx-eb .mx-eb-q__p p:last-child { margin-bottom: 0; }
.mx-eb .mx-eb-q__p[hidden] { display: none; }
.mx-eb .mx-eb-accordion__col:last-child .mx-eb-q:last-child { border-bottom: 0; }

/* ==========================================================================
   Sticky join bar
   Not scoped under mx-eb because the script moves it to body on init.
   ========================================================================== */

.mx-eb-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999997;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
  background: #ffffff;
  border-top: 1px solid rgba(62, 15, 47, 0.22);
  box-shadow: 0 -2px 14px rgba(62, 15, 47, 0.1);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 320ms ease, opacity 320ms ease;
}

.mx-eb-stickybar.is-visible { transform: translateY(0); opacity: 1; }
.mx-eb-stickybar[hidden] { display: none; }

.mx-eb-stickybar .mx-eb-stickybar__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.mx-eb-stickybar .mx-eb-stickybar__name {
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #3e0f2f;
}

.mx-eb-stickybar .mx-eb-stickybar__price {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #d12627;
}

.mx-eb-stickybar .mx-eb-stickybar__note { display: none; }
.mx-eb-stickybar .mx-eb-form { flex: none; margin: 0; }

.mx-eb-stickybar .mx-eb-stickybar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 12px 22px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  background: #d12627;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.mx-eb-stickybar .mx-eb-stickybar__btn:hover { background: #b01f20; color: #ffffff; }
.mx-eb-stickybar .mx-eb-btn__h { display: inline-flex; align-items: center; font-size: 14px; top: -1px; position: relative; }

@media (prefers-reduced-motion: reduce) {
  .mx-eb-stickybar { transition: none; }
}

/* ==========================================================================
   30. The Extra Batch — tablet
   ========================================================================== */

@media (min-width: 48em) {
  .mx-eb .mx-eb-bento { grid-template-columns: 1fr 1fr; }
  .mx-eb .mx-eb-mcard,
  .mx-eb .mx-eb-vote--card { flex: 0 0 216px; }
  .mx-eb .mx-eb-vote--card { display: flex; }
  .mx-eb .mx-eb-vote--bar { display: none; }
  .mx-eb .mx-eb-vote--card .mx-eb-vote__t { font-size: 14px; }
}

/* ==========================================================================
   31. The Extra Batch — desktop
   ========================================================================== */

@media (min-width: 64em) {

  .mx-eb { padding-bottom: 84px; }
  .mx-eb .mx-eb-h2 { font-size: 36px; }

  /* Full label and heart return once there is room for one line. */
  .mx-eb .mx-eb-btn__full { display: inline; }
  .mx-eb .mx-eb-btn__short { display: none; }
  .mx-eb .mx-eb-btn--hero .mx-eb-btn__h,
  .mx-eb .mx-eb-btn--buy .mx-eb-btn__h { display: inline-flex; }

  /* --- Hero -------------------------------------------------------------- */
  .mx-eb .mx-eb-hero { padding: 90px 0 96px; }
  .mx-eb .mx-eb-herocard { padding: 54px 48px 46px; }
  .mx-eb .mx-eb-herocard__title { font-size: 52px; }
  .mx-eb .mx-eb-herocard__sub { font-size: 15px; }
  .mx-eb .mx-eb-herocard__copy { font-size: 15.5px; }
  .mx-eb .mx-eb-herocard__price { font-size: 14px; }
  .mx-eb .mx-eb-pricebar { max-width: 540px; }
  .mx-eb .mx-eb-pb__n { font-size: 29px; }

  /* --- Story ------------------------------------------------------------- */
  .mx-eb .mx-eb-story { padding: 86px 0; }
  .mx-eb .mx-eb-doors { grid-template-columns: 1fr 1fr; }
  .mx-eb .mx-eb-door { padding: 32px 40px; }
  .mx-eb .mx-eb-door__n { font-size: 52px; }
  .mx-eb .mx-eb-door__w { font-size: 24px; }
  .mx-eb .mx-eb-door__l { font-size: 16px; }

  .mx-eb .mx-eb-storybody { grid-template-columns: 1fr 1fr; }

  .mx-eb .mx-eb-storybody__l {
    padding: 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .mx-eb .mx-eb-storybody__r { padding: 46px 44px; justify-content: center; }
  .mx-eb .mx-eb-storybody__l .mx-eb-h2 { font-size: 29px; }
  .mx-eb .mx-eb-bubble { padding: 26px 30px; }
  .mx-eb .mx-eb-bubble__q { font-size: 19px; }

  .mx-eb .mx-eb-storyfoot { margin-top: 0; padding: 38px 44px; }

  /* --- Lifecycle --------------------------------------------------------- */
  .mx-eb .mx-eb-life { padding: 38px 44px; }
  .mx-eb .mx-eb-life__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mx-eb .mx-eb-stop { padding: 46px 0 0; }

  .mx-eb .mx-eb-stop::before {
    left: 34px;
    right: -24px;
    top: 15px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .mx-eb .mx-eb-stop:last-child::before { display: none; }
  .mx-eb .mx-eb-stop__n { top: 0; left: 0; }
  .mx-eb .mx-eb-locked { margin-top: 30px; padding: 20px 24px; }

  /* --- Marquee ----------------------------------------------------------- */
  .mx-eb .mx-eb-rail-band { padding: 78px 0; }
  .mx-eb .mx-eb-rail-head { margin-bottom: 42px; }

  /* --- Benefits ---------------------------------------------------------- */
  /* Six columns. Two wide cards at span 3, the rest at span 2. Adding a
     ninth and tenth card fills the next row untouched. */
  .mx-eb .mx-eb-benefits { padding: 80px 0; }
  .mx-eb .mx-eb-benefits .mx-eb-rail-head { margin-bottom: 46px; }
  .mx-eb .mx-eb-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .mx-eb .mx-eb-tile { padding: 30px 28px; grid-column: span 2; }
  .mx-eb .mx-eb-tile--wide { grid-column: span 3; }
  .mx-eb .mx-eb-tile--wide .mx-eb-tile__h { font-size: 19px; }
  .mx-eb .mx-eb-tag { top: 30px; right: 28px; }

  /* --- How it works ------------------------------------------------------ */
  .mx-eb .mx-eb-steps-band { padding: 80px 0; }
  .mx-eb .mx-eb-track { margin-top: 76px; padding-top: 72px; padding-left: 0; }

  .mx-eb .mx-eb-track::before {
    top: 22px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(209, 38, 39, 0.25), var(--mx-red), rgba(209, 38, 39, 0.25));
  }

  .mx-eb .mx-eb-track__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .mx-eb .mx-eb-station { text-align: center; padding: 0 12px; }

  .mx-eb .mx-eb-station__n {
    top: -72px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    font-size: 16px;
    box-shadow: 0 0 0 6px var(--mx-shell), 0 0 0 8px rgba(209, 38, 39, 0.2);
  }

  .mx-eb .mx-eb-station__h { margin-top: 8px; font-size: 15px; }
  .mx-eb .mx-eb-station__p { font-size: 13.5px; }

  /* --- Buy box ----------------------------------------------------------- */
  .mx-eb .mx-eb-buy { padding: 96px 0 86px; }
  .mx-eb .mx-eb-buycard { grid-template-columns: 0.9fr 1.1fr; }

  .mx-eb .mx-eb-buycard__l {
    padding: 52px 46px;
    border-bottom: 0;
    border-right: 2px dashed var(--mx-line-soft);
    border-radius: 4px 0 0 4px;
  }

  .mx-eb .mx-eb-buycard__r { padding: 52px 46px; border-radius: 0 4px 4px 0; }
  .mx-eb .mx-eb-amount { font-size: 56px; }

  /* --- FAQ --------------------------------------------------------------- */
  .mx-eb .mx-eb-faq-band { padding: 80px 0; }

  .mx-eb .mx-eb-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    align-items: start;
    margin-top: 44px;
    border-bottom: 0;
  }

  .mx-eb .mx-eb-accordion__col { display: block; border-bottom: 1px solid var(--mx-line-soft); }

  /* --- Sticky bar -------------------------------------------------------- */
  .mx-eb-stickybar { padding: 14px 44px; }

  .mx-eb-stickybar .mx-eb-stickybar__text {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }

  .mx-eb-stickybar .mx-eb-stickybar__name { font-size: 16px; }
  .mx-eb-stickybar .mx-eb-stickybar__price { font-size: 15px; }

  .mx-eb-stickybar .mx-eb-stickybar__note {
    display: inline;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(62, 15, 47, 0.65);
  }

  .mx-eb-stickybar .mx-eb-stickybar__btn { padding: 14px 32px; font-size: 12.5px; }
}

/* ==========================================================================
   32. The Extra Batch — price panel and note corrections
   ========================================================================== */

/* --- Founding price panel ------------------------------------------------ */
/* Two Bowlby figures cannot sit side by side at phone width, so the panel
   stacks below 48em and splits above it. Frame softened from solid plum. */

.mx-eb .mx-eb-pricebar {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 420px;
  border: 2px solid rgba(62, 15, 47, 0.18);
}

.mx-eb .mx-eb-pricebar__a,
.mx-eb .mx-eb-pricebar__b {
  padding: 18px 20px;
  text-align: center;
}

.mx-eb .mx-eb-pricebar__b {
  border-left: 0;
  border-top: 2px dashed rgba(62, 15, 47, 0.14);
}

/* --- Line under the hero button ------------------------------------------ */
/* Declared explicitly so an older display rule cannot hide it on desktop. */

.mx-eb .mx-eb-herocard__price { display: block; }

/* --- Lifecycle note heading ---------------------------------------------- */
/* The theme reset drops the bold off a bare b tag. */

.mx-eb .mx-eb-locked__t b { font-weight: 700; }

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 48em) {
  .mx-eb .mx-eb-pricebar { grid-template-columns: 1fr 1fr; max-width: 480px; }
  .mx-eb .mx-eb-pricebar__a,
  .mx-eb .mx-eb-pricebar__b { padding: 18px 16px; }
  .mx-eb .mx-eb-pricebar__b {
    border-top: 0;
    border-left: 2px dashed rgba(62, 15, 47, 0.14);
  }
}

@media (min-width: 64em) {
  .mx-eb .mx-eb-pricebar { max-width: 540px; }
  .mx-eb .mx-eb-herocard__price { display: block; }
}

/* ==========================================================================
   38j. Free plan — Extra Batch upsell
   Replaces the Signature rail for free-tier members. Deliberately not a
   .mx-md-card: the red frame is what separates it from its neighbors.
   ========================================================================== */

.mx .mx-md-up {
  position: relative;
  padding: 24px 20px;
  background: #fdf1f0;
  border: 2px solid #d12627;
  border-radius: 14px;
}

.mx .mx-md-up__stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 6px 12px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: #d12627;
  border-radius: 100px;
}

/* Nudged up so the glyph sits optically centered against the caps. */
.mx .mx-md-up__stamp-heart {
  display: block;
  flex: none;
  margin-top: -1px;
  font-size: 10px;
  line-height: 1;
}

.mx .mx-md-up__eyebrow {
  margin: 0 0 8px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d12627;
}

.mx .mx-md-up__title {
  margin: 0 0 10px;
  max-width: 20ch;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #3e0f2f;
}

.mx .mx-md-up__sub {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(62, 15, 47, 0.65);
}

.mx .mx-md-up__tiles { display: grid; gap: 12px; margin-top: 18px; }

.mx .mx-md-up__tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgba(209, 38, 39, 0.25);
  border-radius: 12px;
}

.mx .mx-md-up__tile--lead { border-color: #d12627; box-shadow: 0 0 0 1px #d12627; }

.mx .mx-md-up__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mx .mx-md-up__name {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #3e0f2f;
}

.mx .mx-md-up__price { display: flex; align-items: baseline; gap: 6px; }

.mx .mx-md-up__amt {
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
  color: #3e0f2f;
}

.mx .mx-md-up__term {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 11.5px;
  color: rgba(62, 15, 47, 0.45);
}

.mx .mx-md-up__line {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(62, 15, 47, 0.45);
}

.mx .mx-md-up__spots {
  display: inline-block;
  padding: 4px 9px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: #d12627;
  border-radius: 100px;
}

.mx .mx-md-up__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 12px 18px;
  font-family: "Bowlby One SC", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: #d12627;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.mx .mx-md-up__btn:hover { color: #ffffff; background: #b01f20; text-decoration: none; }

.mx .mx-md-up__btn--ghost {
  color: #d12627;
  background: #ffffff;
  border: 1.5px solid #d12627;
}

.mx .mx-md-up__btn--ghost:hover { color: #ffffff; background: #d12627; }

@media (min-width: 640px) {
  .mx .mx-md-up { padding: 30px 26px; }
  .mx .mx-md-up__stamp { left: 26px; }
  .mx .mx-md-up__title { font-size: 23px; }
  .mx .mx-md-up__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   38k. Hero stats on mobile — hearts counter and redeem side by side
   The progress card sits before the redeem button in the markup, so the
   rows are placed explicitly rather than left to source order.
   38i handles the desktop layout from 64em up.
   ========================================================================== */

@media (max-width: 63.9375em) {
  .mx .mx-md-hero__stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  /* Row 1, left: hearts counter. */
  .mx .mx-md-hero__stats > .mx-md-stat:not(.mx-md-stat--wide) {
    grid-column: 1;
    grid-row: 1;
  }

  /* Row 1, right: redeem. */
  .mx .mx-md-hero__redeem {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    padding: 14px 12px;
    font-size: 10.5px;
    line-height: 1.25;
    white-space: normal;
  }

  /* Row 2, full width: progress. */
  .mx .mx-md-stat--wide {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ==========================================================================
   MEMBERSHIP TERMS PAGE  (/pages/membership-terms)
   Wrapper .mx-terms is in the page content itself (Admin → Pages).
   px only — html font-size is 10px (Bootstrap).
   ========================================================================== */

/* ---------- Layout + base type ---------- */
.mx-terms {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 64px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #3e0f2f;
}
.mx-terms p,
.mx-terms ul { margin: 0 0 16px; }
.mx-terms ul { padding-left: 22px; }
.mx-terms li { margin-bottom: 8px; list-style: disc; }
.mx-terms strong { font-weight: 600; }

/* ---------- Last updated line ---------- */
.mx-terms__updated {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #d12627;
}

/* ---------- Headings ---------- */
.mx-terms h2 {
  font-family: "Bowlby One SC", Impact, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
  color: #3e0f2f;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(62, 15, 47, .12);
}
.mx-terms h3 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: #3e0f2f;
  margin: 28px 0 10px;
}
@media (min-width: 768px) {
  .mx-terms h2 { font-size: 28px; }
}

/* ---------- Links ---------- */
.mx-terms a {
  color: #d12627;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mx-terms a:hover { color: #b01f20; }

/* ---------- Tables (scroll inside their box on mobile) ---------- */
.mx-terms__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
  border: 1px solid rgba(62, 15, 47, .12);
  border-radius: 12px;
}
.mx-terms__table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.mx-terms__table--narrow table { min-width: 0; }
.mx-terms__table th,
.mx-terms__table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(62, 15, 47, .12);
}
.mx-terms__table thead th {
  background: #fdf1f1;
  font-weight: 600;
}
.mx-terms__table tbody th { font-weight: 600; }
.mx-terms__table tbody tr:last-child th,
.mx-terms__table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Contact block ---------- */
.mx-terms__contact { line-height: 1.8; }

/* ==========================================================================
   39. PDP club card — two plan tiles
   Supersedes the single-checkbox card. Tiles are buttons, so they carry
   type="button" in the markup and never submit the product form.
   ========================================================================== */

.mx .mx-club__cardtitle {
  display: block;
  margin: 0 0 12px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}

.mx .mx-club__tiles { display: grid; gap: 8px; }

.mx .mx-club__tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--mx-white);
  border: 1px solid rgba(209, 38, 39, 0.3);
  border-radius: var(--mx-radius-md);
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}

.mx .mx-club__tile:hover { border-color: var(--mx-red); }

/* Padding drops 1px so the 2px border does not shift the contents. */
.mx .mx-club__tile[aria-pressed="true"] {
  padding: 12px 13px;
  background: #fff6f5;
  border: 2px solid var(--mx-red);
}

.mx .mx-club__tilemark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  font-size: 11px;
  line-height: 1;
  color: transparent;
  background: var(--mx-white);
  border: 2px solid var(--mx-red);
  border-radius: var(--mx-radius-xs);
  transition: background var(--mx-transition), color var(--mx-transition);
}

.mx .mx-club__tile[aria-pressed="true"] .mx-club__tilemark {
  color: var(--mx-white);
  background: var(--mx-red);
}

.mx .mx-club__tilebody { flex: 1; min-width: 0; }

.mx .mx-club__tiletop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mx .mx-club__tilename {
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-name-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-text);
}

.mx .mx-club__tileprice {
  flex: none;
  font-family: var(--mx-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mx-red);
}

.mx .mx-club__tileterm { font-size: 11px; font-weight: 500; }

.mx .mx-club__tilesub {
  display: block;
  margin-top: 2px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  font-weight: 400;
  line-height: 1.35;
  color: var(--mx-text-ghost);
}

/* --- founding spots bar --------------------------------------------------- */

.mx .mx-club__bar { display: block; margin-top: var(--mx-space-5); }

.mx .mx-club__bartop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.mx .mx-club__barlabel {
  font-family: var(--mx-font-body);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mx-red);
}

.mx .mx-club__barcount {
  flex: none;
  font-family: var(--mx-font-body);
  font-size: 10.5px;
  line-height: 1;
  color: var(--mx-text-ghost);
}

.mx .mx-club__bartrack {
  display: block;
  height: 5px;
  overflow: hidden;
  background: rgba(209, 38, 39, 0.18);
  border-radius: var(--mx-radius-pill);
}

.mx .mx-club__barfill {
  display: block;
  height: 100%;
  background: var(--mx-red);
  border-radius: var(--mx-radius-pill);
}

/* --- sold-out note -------------------------------------------------------- */

.mx .mx-club__soldout {
  margin: var(--mx-space-4) 0 0;
  padding: 9px 11px;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-fine-size);
  line-height: 1.4;
  color: var(--mx-text-ghost);
  background: var(--mx-white);
  border: 1px dashed var(--mx-line);
  border-radius: var(--mx-radius-sm);
}

/* --- disclosure ----------------------------------------------------------- */

.mx .mx-club__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
}

.mx .mx-club__link::-webkit-details-marker { display: none; }

.mx .mx-club__caret {
  font-size: 9px;
  line-height: 1;
  color: var(--mx-red);
  transition: transform var(--mx-transition);
}

.mx .mx-club__more[open] .mx-club__caret { transform: rotate(180deg); }

.mx .mx-club__more[open] .mx-club__link-open,
.mx .mx-club__more:not([open]) .mx-club__link-close { display: none; }

/* --- benefit list: bullet aligned to the first line of text --------------- */

.mx .mx-club__item {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-3);
  margin-bottom: 7px;
}

.mx .mx-club__bullet {
  flex: none;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mx-red);
}

.mx .mx-club__itemtext {
  flex: 1;
  min-width: 0;
  font-family: var(--mx-font-body);
  font-size: var(--mx-type-body-sm-size);
  line-height: 1.45;
  color: var(--mx-text-muted);
}

/* --- Learn more ----------------------------------------------------------- */

.mx .mx-club__join {
  display: block;
  width: 100%;
  margin-top: var(--mx-space-6);
  padding: var(--mx-space-5) var(--mx-space-7);
  font-family: var(--mx-font-display);
  font-weight: 400;
  font-size: var(--mx-type-btn-alt-size);
  line-height: 1;
  letter-spacing: var(--mx-type-btn-ls);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mx-red);
  background: var(--mx-white);
  border: 1.5px solid var(--mx-red);
  border-radius: var(--mx-radius-md);
  transition: background var(--mx-transition), color var(--mx-transition);
}

.mx .mx-club__join:hover {
  color: var(--mx-white);
  background: var(--mx-red);
  text-decoration: none;
}

/* Hide the browser's native disclosure triangle; the card supplies its own. */
.mx .mx-club__more > summary { list-style: none; }
.mx .mx-club__more > summary::marker { content: ""; }
.mx .mx-club__more > summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   BUILD YOUR DOZEN — patch 02  (REPLACES patch 01)

   Delete the whole "patch 01" block from assets/maccs.css and paste this in
   its place, at the END of the file after the Build Your Dozen block.

   What changed from patch 01
   --------------------------
   The alignment rules and the button rule were correct and are unchanged.
   The full-bleed rules were wrong: they used box-shadow OFFSET, which shifts
   a copy of the box sideways rather than stretching it. With a 720px element
   in a 903px viewport, the right-hand copy landed entirely off-screen and the
   gap beside the element stayed unpainted.

   Replaced with an absolutely positioned ::before pinned to viewport width.
   It carries the background AND the border, so the hairline continues across
   the bled area. Verified safe: no ancestor of .byd-trust clips overflow.
   ========================================================================== */

/* --- 1. Container alignment ----------------------------------------------
   The section sits inside the theme's Bootstrap .container (1170px max,
   15px padding). Its own side padding was stacking on top, pushing content
   ~48px further in than the header nav. Vertical padding unchanged.     */

.mx .byd-intro {
  padding-left: 0;
  padding-right: 0;
}

.mx .byd-builder {
  padding-left: 0;
  padding-right: 0;
}

/* --- 2. Trust bar full bleed, all viewports -------------------------------
   The element keeps its layout width, so the four items stay aligned to the
   container; only the painted band spans the viewport.

   Mechanics:
   - background and border-top move OFF the element and ONTO the pseudo,
     so the hairline runs the full width instead of stopping at the
     container edge.
   - z-index:0 on the element makes it a stacking context, so the
     z-index:-1 pseudo stays behind the bar's own content and cannot slip
     behind an ancestor's background.
   - left:50% + translateX(-50%) centers a 100vw band regardless of where
     the container sits.                                                 */

.mx .byd-trust {
  position: relative;
  z-index: 0;
  background: transparent;
  border-top: 0;
}

.mx .byd-trust::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--mx-shell);
  border-top: 1px solid var(--mx-line-hair);
}

/* --- 3. Button face -------------------------------------------------------
   font-size and letter-spacing were already applying; only font-family was
   being overridden by a theme-level rule. Specificity raised to 0,3,0 with
   !important on that one declaration.                                   */

.mx .byd .byd-btn,
.mx .byd .byd-cta {
  font-family: var(--mx-font-display) !important;
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 899px) {

  /* 1. Container alignment, mobile */
  .mx .byd-intro {
    padding-left: 0;
    padding-right: 0;
  }

  .mx .byd-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .mx .byd-split-note {
    padding-left: 0;
    padding-right: 0;
  }

  /* 2. Progress bar full bleed.
     Already position:sticky with z-index:2, so it is both a positioned
     ancestor and a stacking context — no extra properties needed.
     top/bottom of -1px put the pseudo's borders exactly where the
     element's own borders sat, so nothing shifts.                       */
  .mx .byd-progress {
    background: transparent;
    border: 0;
  }

  .mx .byd-progress::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--mx-pink);
    border-top: 1px solid var(--mx-line-soft);
    border-bottom: 1px solid var(--mx-line-soft);
  }

  /* 2. Plum panel at the top of the buy box.
     .byd-buy carries overflow:hidden on desktop for its rounded corners;
     that would clip the pseudo, so it is released on mobile where the
     card is square and borderless anyway.                               */
  .mx .byd-buy {
    overflow: visible;
  }

  .mx .byd-box {
    position: relative;
    z-index: 0;
    background: transparent;
  }

  .mx .byd-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--mx-plum);
  }
}

/* =========================================================
   MOBILE DRAWER — submenu drill-down fix
   The existing "#menu .mobile-menu { position: relative; }"
   rule stops submenus from overlaying the main list. This
   hides the parent list only while a submenu is open, so
   the submenu takes its place (matches live behavior).
   Back arrow restores the parent list.
   ========================================================= */

/* Level 1: hide main list while a submenu is open */
#menu .mobile-menu-main:has(~ .mobile-menu-child:not(.mobile-menu-hidden)),

/* Level 2: hide submenu while a third-level submenu is open */
#menu .mobile-menu-child:has(~ .mobile-menu-grandchild:not(.mobile-menu-hidden)) {
  display: none;
}

/* =========================================================
   MEMBERS' SIGNATURE RAIL — locked card media
   Non-members get a <span> instead of a link (see
   maccs-signature.liquid). Match the linked card's box.
   ========================================================= */
.mx span.mx-card__media {
  display: block;
}