/* ==========================================================================
   Mr Charms CRO v3 (approved board 2026-10-07)
   Loaded last on every non-locale page (inc/cro-v3.php). Sections:
   1 tokens + helpers · 2 announcement · 3 header · 4 category strip · 5 footer
   6 homepage · 7 category landing · 8 search results · 9 cart · 10 checkout · 11 multi-design (phones)
   ========================================================================== */

/* 1 ---------- tokens + helpers ---------- */
body.mx3 {
  --mx3-neon: #39FF14;
  --mx3-neon-ink: #062600;
  --mx3-pink: #FF2EC4;
  --mx3-gold: #FFD166;
  --mx3-blue: #2E9CFF;
  --mx3-s1: #121212;
  --mx3-s2: #1A1A1A;
  --mx3-s3: #232323;
  --mx3-line: #2A2A2A;
  --mx3-line2: #3A3A3A;
  --mx3-tx2: #D0D0D0;
  --mx3-tx3: #A3A3A3;
  --mx3-rainbow: linear-gradient(90deg, #FF2EC4 0%, #FFD166 36%, #39FF14 66%, #2E9CFF 100%);
  --mx3-tier-rainbow: linear-gradient(90deg, #ff2ec4, #ffb547, #39ff14, #34c6ff, #c77dff);
}
.mx3-wrap { max-width: var(--container, 1240px); margin: 0 auto; padding: 0 var(--gutter, 16px); }
.mx3-i { width: 1em; height: 1em; flex: 0 0 auto; }
.mx3 .ticker { display: none !important; } /* replaced by the static announcement bar */

/* 2 ---------- announcement bar ---------- */
.mx3-ann { position: relative; z-index: 10021; background: #0A0A0A; color: var(--mx3-tx2); font: 600 13px/1.2 var(--font-body, Manrope), system-ui, sans-serif; }
.mx3-ann__in { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mx3-ann__z { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.mx3-ann__ship .mx3-i { width: 17px; height: 17px; color: var(--mx3-neon); }
.mx3-ann__links { justify-content: flex-end; gap: 18px; }
.mx3-ann__links a { color: var(--mx3-tx2); text-decoration: none; }
.mx3-ann__links a:hover, .mx3-ann__links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mx3-ann__mid { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.mx3-ann__mid b { color: var(--mx3-neon); font-weight: 800; }
.mx3-ann__mid i { width: 4px; height: 4px; border-radius: 50%; background: var(--mx3-tx3); }
.mx3-ann-rain { height: 3px; background: var(--mx3-rainbow); }
@media (max-width: 920px) {
  .mx3-ann__z { display: none; }
  .mx3-ann__in { justify-content: center; min-height: 36px; }
  .mx3-ann__mid { font-size: 12.5px; gap: 8px; white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; padding: 6px 0; }
}

/* 3 ---------- header ---------- */
/* The header, announcement bar and strip use the board's wider 1380px box so the search field fits next to the full menu. */
.mx3 .site-header.mx3-header > .wrap, .mx3-ann > .mx3-wrap, .mx3-sub > .mx3-wrap { max-width: 1380px; }
.mx3 .site-header.mx3-header .nav-links > a, .mx3 .site-header.mx3-header .nav-links > div > button, .mx3 .site-header.mx3-header .nav-links > div > a { white-space: nowrap; }
.mx3 .site-header.mx3-header .nav { gap: 18px; }
.mx3 .site-header.mx3-header .nav-links { flex: 0 1 auto; }
.mx3-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 6px; background: rgba(57, 255, 20, .12); border: 1px solid rgba(57, 255, 20, .45); color: var(--mx3-neon); font: 800 11.5px/1 var(--font-body, Manrope), sans-serif; letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.mx3-search { display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 6px 0 14px; border-radius: 14px; border: 1px solid var(--mx3-line2); background: var(--mx3-s2); color: var(--mx3-tx3); font: 600 14.5px/1.2 var(--font-body, Manrope), sans-serif; text-align: left; cursor: text; transition: border-color .18s ease, box-shadow .18s ease; }
.mx3-search:hover { border-color: #555; }
.mx3-search:focus-visible { outline: none; border-color: var(--mx3-neon); box-shadow: 0 0 0 3px rgba(57, 255, 20, .18); }
.mx3-search .mx3-i { width: 20px; height: 20px; color: var(--mx3-tx2); }
.mx3-search__ph { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx3-search.has-query .mx3-search__ph { color: #fff; }
.mx3-search__go { flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9px; background: var(--mx3-neon); color: var(--mx3-neon-ink); font-weight: 800; font-size: 14px; }
.mx3-search--desktop { flex: 1 1 360px; max-width: 420px; margin-left: auto; }

@media (min-width: 921px) {
  .mx3 .site-header.mx3-header .nav { height: 76px; }
  .mx3 .site-header.mx3-header .nav-actions .mrc-search-trigger:not(.mx3-search) { display: none; }
  .mx3 .site-header.mx3-header .mrc-currency-switcher { height: 46px; padding: 0 6px 0 10px; border: 1px solid var(--mx3-line2) !important; border-radius: 12px; background: var(--mx3-s2) !important; }
  .mx3 .site-header.mx3-header .mrc-currency-switcher select { font-weight: 800; }
  .mx3 .site-header.mx3-header .nav-actions .cart-btn { height: 46px; padding: 0 8px 0 16px; gap: 8px; border: 0; border-radius: 14px; background: var(--mx3-neon); color: var(--mx3-neon-ink); font-weight: 800; box-shadow: 0 6px 20px rgba(57, 255, 20, .25); }
  .mx3 .site-header.mx3-header .nav-actions .cart-btn:hover { filter: brightness(1.06); }
  .mx3 .site-header.mx3-header .nav-actions .cart-btn .cart-badge { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 9px; background: var(--mx3-neon-ink); color: var(--mx3-neon); box-shadow: none; }
}
/* Narrow desktops can't fit the field next to the full menu: keep the magnifier there instead. */
@media (min-width: 921px) and (max-width: 1239px) {
  .mx3-search--desktop { display: none; }
  .mx3 .site-header.mx3-header .nav-actions .mrc-search-trigger:not(.mx3-search) { display: inline-flex; }
  .mx3-tag { display: none; }
}
@media (min-width: 1240px) and (max-width: 1365px) {
  .mx3-search--desktop .mx3-search__go { display: none; }
  .mx3-search--desktop { padding-right: 14px; }
}
@media (max-width: 920px) {
  .mx3-search--desktop { display: none; }
  .nav-links .mx3-tag { height: 24px; font-size: 12px; }
}

/* 4 ---------- category strip + bundle tracker ----------
   Clean links (Blair's pick, 2026-10-08): no boxes, small icons, thin dividers between groups, "All categories" last.
   On desktop, category links that don't fit are hidden by mrc-v3.js (never cut off); on phones the row scrolls. */
.mx3-sub { background: #0D0D0D; border-bottom: 1px solid var(--mx3-line); }
.mx3-sub__in { display: flex; align-items: center; gap: 18px; min-height: 52px; }
.mx3-search--mobile { display: none; }
.mx3-chips { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 4px 0; }
.mx3-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--mx3-s2); border: 1px solid var(--mx3-line2); color: #fff; font: 700 13.5px/1 var(--font-body, Manrope), sans-serif; text-decoration: none; white-space: nowrap; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.mx3-chip:hover, .mx3-chip:focus-visible { border-color: #6b6b6b; background: var(--mx3-s3); color: #fff; }
.mx3-chip.is-on { background: #fff; color: #0A0A0A; border-color: #fff; }
.mx3-chip img { width: 24px; height: 24px; border-radius: 6px; background: #fff; object-fit: contain; }
.mx3-chips .mx3-chip { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #C9C3D3; font: 700 14px/1 var(--font-body, Manrope), sans-serif; gap: 7px; }
.mx3-chips .mx3-chip:hover, .mx3-chips .mx3-chip:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; }
.mx3-chips .mx3-chip.is-on { background: rgba(255, 255, 255, .08); color: #fff; }
.mx3-chips .mx3-chip .mx3-i, .mx3-chips .mx3-chip .mxh-i { width: 15px; height: 15px; }
.mx3-chips .mx3-chip--hot { color: #fff; }
.mx3-chips .mx3-chip--hot .mx3-i { color: #FF7AD9; }
.mx3-chips .mx3-chip--instock { color: #fff; gap: 5px; }
.mx3-chips .mx3-chip--instock svg { color: var(--mx3-neon); flex: none; }
.mx3-chips .mx3-chip--all { color: var(--mx3-neon); }
.mx3-chips .mx3-chip--all:hover, .mx3-chips .mx3-chip--all:focus-visible { color: var(--mx3-neon); }
.mx3-chips .mx3-chip.is-fit-hidden { display: none; }
.mx3-sub__div { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 8px; background: var(--mx3-line2); }
.mx3-track { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 0 0 18px; border-left: 1px solid var(--mx3-line2); color: var(--mx3-tx3); font: 600 13px/1 var(--font-body, Manrope), sans-serif; text-decoration: none; white-space: nowrap; }
.mx3-track:hover, .mx3-track:focus-visible { color: var(--mx3-tx2); }
.mx3-track b { color: #fff; font-weight: 800; }
.mx3-track.is-active b { color: var(--mx3-neon); }
.mx3-track__bar { width: 70px; height: 4px; border-radius: 4px; background: var(--mx3-s3); overflow: hidden; }
.mx3-track__bar i { display: block; height: 100%; border-radius: 4px; background: var(--mx3-rainbow); transition: width .35s ease; }
@media (min-width: 921px) and (max-width: 1239px) { .mx3-track__next { display: none; } }
@media (max-width: 920px) {
  .mx3-sub { display: none; }
  .mx3-sub.mx3-sub--phones { display: block; }
  .mx3-sub__in { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding-top: 12px; padding-bottom: 6px; }
  .mx3-search--mobile { display: flex; height: 50px; border-radius: 999px; padding: 0 6px 0 16px; font-size: 15.5px; }
  .mx3-search--mobile .mx3-search__go { border-radius: 999px; height: 38px; }
  .mx3-chips { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 0 calc(var(--gutter, 16px) - 12px); scroll-padding-inline: var(--gutter, 16px); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .mx3-chips::-webkit-scrollbar { display: none; }
  .mx3-chips .mx3-chip { height: 40px; font-size: 14.5px; }
  .mx3-chips .mx3-chip.is-fit-hidden { display: inline-flex; }
  .mx3-track { display: none; }
}

/* 5 ---------- footer ---------- */
.mx3 footer.mx3-ftr { padding: 0; }
.mx3-ftr { margin-top: 0; background: #0A0A0A; border-top: 1px solid var(--mx3-line); color: var(--mx3-tx3); font: 500 14.5px/1.5 var(--font-body, Manrope), sans-serif; }
.mx3-ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr; gap: 34px; padding: 52px 0 30px; }
.mx3-ftr .brand img { height: 40px; width: auto; }
.mx3-ftr__brand p { margin: 12px 0 0; line-height: 1.55; }
.mx3-ftr__soc { display: flex; gap: 8px; margin-top: 16px; }
.mx3-ftr__soc a { width: 42px; height: 42px; border-radius: 11px; background: var(--mx3-s2); border: 1px solid var(--mx3-line2); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.mx3-ftr__soc a:hover { border-color: var(--mx3-neon); }
.mx3-ftr__soc svg { width: 18px; height: 18px; }
.mx3-ftr h2 { margin: 0; font: 700 12px/1.4 var(--font-mono, 'JetBrains Mono'), monospace; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.mx3-ftr__col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mx3-ftr__col summary::-webkit-details-marker { display: none; }
.mx3-ftr__col summary .mx3-i { display: none; width: 18px; height: 18px; color: var(--mx3-tx3); transition: transform .2s ease; }
.mx3-ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mx3-ftr__col a { color: var(--mx3-tx2); text-decoration: none; }
.mx3-ftr__col a:hover, .mx3-ftr__col a:focus-visible { color: var(--mx3-neon); }
.mx3-ftr__nl p { margin: 10px 0 0; font-size: 13.5px; }
.mx3-ftr__notice { color: var(--mx3-neon); font-weight: 700; }
.mx3-ftr__notice.is-error { color: #FF4D6A; }
.mx3-ftr__form { display: flex; gap: 8px; margin-top: 12px; }
.mx3-ftr__form input[type="email"] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--mx3-line2); background: var(--mx3-s2); color: #fff; font: 600 15px var(--font-body, Manrope), sans-serif; }
.mx3-ftr__form input[type="email"]:focus { outline: none; border-color: var(--mx3-neon); box-shadow: 0 0 0 3px rgba(57, 255, 20, .18); }
.mx3-ftr__form button { height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--mx3-neon); color: var(--mx3-neon-ink); font: 800 15px var(--font-body, Manrope), sans-serif; cursor: pointer; }
.mx3-ftr__legal { border-top: 1px solid var(--mx3-line); padding: 18px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.mx3-ftr__legal p { margin: 0; }
.mx3-paymk { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.mx3-ftr__pay .mcx-marks { justify-content: flex-start; margin: 0; gap: 6px; }
.mx3-ftr__pay .mcx-mark svg { width: 46px; height: 29px; border-radius: 5px; }
.mx3-paymk li { height: 24px; padding: 0 7px; border-radius: 5px; background: #fff; color: #111; font: 800 10.5px/24px var(--font-body, Manrope), sans-serif; }
.mx3-ftr__built { display: inline-flex; align-items: center; gap: 8px; color: var(--mx3-tx3); text-decoration: none; }
.mx3-ftr__built img { border-radius: 6px; }
@media (min-width: 768px) {
  .mx3-ftr__col summary { pointer-events: none; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .mx3-ftr__grid { grid-template-columns: 1fr 1fr 1fr; }
  .mx3-ftr__brand, .mx3-ftr__nl { grid-column: span 3; }
}
@media (max-width: 767px) {
  .mx3-ftr__grid { grid-template-columns: 1fr; gap: 0; padding: 32px 0 18px; }
  .mx3-ftr__brand { padding-bottom: 18px; }
  .mx3-ftr__col { border-top: 1px solid var(--mx3-line); }
  .mx3-ftr__col summary { min-height: 54px; margin: 0; cursor: pointer; }
  .mx3-ftr__col summary .mx3-i { display: block; }
  .mx3-ftr__col[open] summary .mx3-i { transform: rotate(180deg); }
  .mx3-ftr__col ul { padding-bottom: 16px; gap: 0; }
  .mx3-ftr__col li a, .mx3-ftr__col li span { display: flex; align-items: center; min-height: 44px; }
  .mx3-ftr__nl { border-top: 1px solid var(--mx3-line); padding-top: 20px; }
  .mx3-ftr__legal { flex-direction: column; align-items: flex-start; padding-bottom: 110px; } /* clears the phone sticky bars */
}

/* 6 ---------- shared page pieces + homepage ---------- */
.mx3-show-phone { display: none !important; }
@media (max-width: 767px) { .mx3-hide-phone { display: none !important; } .mx3-show-phone { display: inline !important; } p.mx3-show-phone, div.mx3-show-phone { display: block !important; } .mx3-btn.mx3-show-phone { display: flex !important; } }
.mx3-main { overflow-x: clip; }
.mx3-kick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 12px/1.3 var(--font-mono, 'JetBrains Mono'), monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mx3-neon); }
.mx3-kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--mx3-neon); flex: 0 0 auto; }
.mx3-disp { margin: 0; font-family: var(--font-hero, 'Anton'), 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .3px; color: #fff; }
.mx3-rain { background: var(--mx3-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx3-muted { color: var(--mx3-tx3); }
.mx3-lbl { margin: 0; font: 700 12px/1.3 var(--font-mono, 'JetBrains Mono'), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mx3-neon); }
.mx3-lbl--amber { color: #FFB547; }
.mx3-lbl--blue { color: #6FB6FF; }
.mx3-sec { padding: 56px 0; }
.mx3-wrap.mx3-sec { padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); }
.mx3-sec--tight { padding: 22px 0 56px; }
.mx3-band { background: #0F0F0F; border-top: 1px solid var(--mx3-line); border-bottom: 1px solid var(--mx3-line); }
.mx3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mx3-head a { color: var(--mx3-neon); font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.mx3-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mx3-h2 { margin: 0; font: 800 30px/1.15 var(--font-body, Manrope), sans-serif; letter-spacing: -.4px; color: #fff; }
.mx3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 14px; border: 0; font: 800 15.5px/1 var(--font-body, Manrope), sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.mx3-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mx3-btn:focus-visible { outline: 3px solid var(--mx3-blue); outline-offset: 3px; }
.mx3-btn .mx3-i { width: 19px; height: 19px; }
.mx3-btn--p { background: var(--mx3-neon); color: var(--mx3-neon-ink); box-shadow: 0 6px 20px rgba(57, 255, 20, .22); }
.mx3-btn--p:hover, .mx3-btn--p:focus { color: var(--mx3-neon-ink); }
.mx3-btn--s { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.mx3-btn--s:hover, .mx3-btn--s:focus { color: #fff; }
.mx3-btn--lg { height: 56px; padding: 0 26px; font-size: 16.5px; border-radius: 16px; }
.mx3-btn--sm { height: 40px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.mx3-btn--block { width: 100%; margin-top: 14px; }
.mx3-pill { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font: 800 12px/1 var(--font-body, Manrope), sans-serif; }
.mx3-pill--right { left: auto; right: 14px; }
.mx3-pill--new { background: var(--mx3-blue); color: #fff; text-transform: uppercase; }
.mx3-pill--dark { background: rgba(10, 10, 10, .82); color: #fff; }
.mx3-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--mx3-neon); }
.mx3-ver .mx3-i { width: 15px; height: 15px; }
.mx3-stars { margin: 0; color: var(--mx3-gold); letter-spacing: 1px; font-size: 15px; }

/* hero */
.mx3-hero { position: relative; padding: 34px 0 6px; background: radial-gradient(60% 70% at 78% 40%, rgba(255, 46, 196, .22), rgba(46, 156, 255, .10) 45%, rgba(10, 10, 10, 0) 70%), radial-gradient(40% 50% at 10% 90%, rgba(57, 255, 20, .10), rgba(10, 10, 10, 0) 70%); }
.mx3-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.mx3-hero__title { font-size: clamp(64px, 7.2vw, 104px); }
.mx3-hero__lede { margin: 18px 0 24px; max-width: 520px; font-size: 19px; line-height: 1.45; color: var(--mx3-tx2); }
.mx3-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mx3-hero__art { position: relative; height: 440px; }
.mx3-hero__img { position: absolute; width: 300px; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.mx3-hero__img--a { left: 0; top: 0; transform: rotate(-6deg); }
.mx3-hero__img--b { right: 0; top: 30px; transform: rotate(5deg); }
.mx3-hero__img--c { left: 26%; top: 150px; width: 320px; }
.mx3-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13.5px; font-weight: 600; color: var(--mx3-tx2); }
.mx3-trust li { display: inline-flex; align-items: center; gap: 7px; }
.mx3-trust .mx3-i { width: 17px; height: 17px; color: var(--mx3-neon); }
@media (max-width: 920px) {
  .mx3-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .mx3-hero { padding: 14px 0 0; background: none; }
  .mx3-hero__grid { position: relative; display: block; min-height: 250px; padding: 18px 16px 16px; border-radius: 22px; border: 1px solid var(--mx3-line); background: radial-gradient(120% 90% at 100% 0%, rgba(255, 46, 196, .30), rgba(46, 156, 255, .12) 45%, #121212 75%); overflow: hidden; margin: 0 var(--gutter, 16px); padding-left: 16px; padding-right: 16px; max-width: none; }
  .mx3-hero__copy { position: relative; z-index: 2; }
  .mx3-hero .mx3-kick { font-size: 11px; margin-bottom: 8px; }
  .mx3-hero__title { font-size: 46px; max-width: 200px; }
  .mx3-hero__lede { margin: 8px 0 12px; max-width: 190px; font-size: 14px; line-height: 1.35; }
  .mx3-hero__cta { flex-wrap: nowrap; gap: 8px; }
  .mx3-hero__cta .mx3-btn--lg { height: 46px; font-size: 15px; padding: 0 14px; border-radius: 13px; }
  .mx3-hero__cta .mx3-btn--p { flex: 1 1 auto; }
  .mx3-hero__cta .mx3-btn--p .mx3-i { display: none; }
  .mx3-hero__art { position: absolute; right: -58px; top: 44px; width: 190px; height: 190px; z-index: 1; }
  .mx3-hero__img--a { width: 186px; left: 0; top: 0; transform: rotate(-8deg); }
  .mx3-hero__img--b, .mx3-hero__img--c { display: none; }
  .mx3-trust { flex-wrap: nowrap; gap: 14px; margin-top: 12px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
}

/* product rows (the universal B1 card sits in these grids) */
.mx3-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .mx3-grid5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mx3-grid--new > :nth-child(5), .mxh-grid > :nth-child(5) { display: none; } }
@media (max-width: 920px) { .mx3-grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mx3-grid--new > :nth-child(n+4), .mxh-grid > :nth-child(n+4) { display: none; } }
@media (max-width: 767px) {
  .mx3-sec { padding: 26px 0; }
  .mx3-sec--tight { padding: 16px 0 26px; }
  .mx3-h2 { font-size: 21px; letter-spacing: -.2px; }
  .mx3-head { margin-bottom: 12px; }
  .mx3-head a { font-size: 14px; }
  .mx3-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mx3-grid--best > :nth-child(n+7) { display: none; }
  .mx3-grid--new > :nth-child(4), .mxh-grid > :nth-child(4):not([hidden]) { display: block; }
  .mx3-grid--new > :nth-child(n+5), .mxh-grid > :nth-child(n+5) { display: none; }
}

/* bundle deals: the original colourful tier cards */
.mx3-bundle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.mx3-bundle__title { font-size: clamp(48px, 5vw, 64px); }
.mx3-steps { list-style: none; counter-reset: mx3step; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; color: var(--mx3-tx2); }
.mx3-steps li { counter-increment: mx3step; display: flex; align-items: center; gap: 10px; }
.mx3-steps li::before { content: counter(mx3step); flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--mx3-neon); color: var(--mx3-neon-ink); font: 800 13px/26px var(--font-body, Manrope), sans-serif; text-align: center; }
.mx3-bts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; padding-top: 10px; }
.mx3-bt { --tier: #FFD166; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 18px; background: var(--mx3-s1); border: 1.5px solid var(--mx3-line2); color: #fff; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.mx3-bt:hover, .mx3-bt:focus-visible { transform: translateY(-2px); border-color: var(--tier); color: #fff; }
.mx3-bt.has-badge { border-color: color-mix(in srgb, var(--tier) 70%, transparent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--tier) 80%, transparent); }
.mx3-bt__badge { position: absolute; top: -11px; left: 12px; padding: 4px 9px; border-radius: 999px; background: var(--tier); color: #0A0A0A; font: 800 11px/1 var(--font-body, Manrope), sans-serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.mx3-bt__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; }
.mx3-bt__qty { font-size: 13px; font-weight: 600; color: var(--mx3-tx3); white-space: nowrap; }
.mx3-bt__qty strong { font: 400 28px/1 var(--font-chunky, 'Lilita One'), sans-serif; color: var(--tier); margin-right: 3px; }
.mx3-bt em { font-style: normal; font: 800 12px/1 var(--font-body, Manrope), sans-serif; color: var(--tier); white-space: nowrap; }
.mx3-bt__pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font: 400 32px/1 var(--font-chunky, 'Lilita One'), sans-serif; }
.mx3-bt__pr s { font: 600 13px/1 var(--font-body, Manrope), sans-serif; color: #7d7d7d; }
.mx3-bt__meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mx3-line); font-size: 12.5px; color: var(--mx3-tx3); white-space: nowrap; }
.mx3-bt--rb { border: 2px solid transparent; background: linear-gradient(var(--mx3-s1), var(--mx3-s1)) padding-box, var(--mx3-tier-rainbow) border-box; }
.mx3-bt--rb .mx3-bt__badge { background: var(--mx3-tier-rainbow); }
.mx3-bt--rb .mx3-bt__qty strong, .mx3-bt--rb em { color: #fff; }
.mx3-bt--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 18px; }
.mx3-bt--wide .mx3-bt__top { flex-direction: column; align-items: flex-start; }
.mx3-bt--wide .mx3-bt__meta { margin: 0 0 0 auto; padding-top: 0; border-top: 0; }
.mx3-bundle__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.mx3-link-muted { color: var(--mx3-tx3); font-size: 14.5px; text-decoration: none; }
.mx3-link-muted:hover { color: #fff; }
@media (max-width: 1000px) { .mx3-bundle { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 767px) {
  .mx3-band:has(.mx3-bundle) { background: none; border: 0; }
  .mx3-bundle { margin: 0 var(--gutter, 16px); padding: 18px 16px; border-radius: 22px; border: 1px solid var(--mx3-line); background: var(--mx3-s1); gap: 16px; }
  .mx3-bundle__title { font-family: var(--font-body, Manrope), sans-serif; text-transform: none; font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.2px; }
  .mx3-bundle__title .mx3-rain { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
  .mx3-steps { display: none; }
  .mx3-bts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .mx3-bt { padding: 14px 12px 12px; border-radius: 16px; }
  .mx3-bt__qty strong { font-size: 24px; }
  .mx3-bt__pr { font-size: 27px; }
  .mx3-bt__meta { font-size: 12px; }
  .mx3-bt__badge { font-size: 10.5px; }
}

/* categories */
.mx3-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mx3-cc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 230px; padding: 16px; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; transition: transform .15s ease; }
.mx3-cc:hover, .mx3-cc:focus-visible { transform: translateY(-3px); color: #fff; }
.mx3-cc--red { background: linear-gradient(160deg, #C8243A, #7A0E1E); }
.mx3-cc--blue { background: linear-gradient(160deg, #2E7BFF, #123E9C); }
.mx3-cc--yellow { background: linear-gradient(160deg, #F5B700, #B57A00); }
.mx3-cc--green { background: linear-gradient(160deg, #2FA84F, #11622A); }
.mx3-cc--pink { background: linear-gradient(160deg, #E33BA6, #8A1463); }
.mx3-cc--purple { background: linear-gradient(160deg, #8B5CF6, #4C1D95); }
.mx3-cc--orange { background: linear-gradient(160deg, #FF7A1A, #B4410A); }
.mx3-cc--teal { background: linear-gradient(160deg, #14B8A6, #0B6B61); }
.mx3-cc__fan { position: absolute; left: 0; right: 0; top: 14px; display: flex; justify-content: center; }
.mx3-cc__fan span { width: 31%; aspect-ratio: 1 / 1; margin: 0 -4%; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.mx3-cc__fan span img { width: 78%; height: 78%; object-fit: contain; }
.mx3-cc__fan span:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.mx3-cc__fan span:nth-child(2) { position: relative; z-index: 2; }
.mx3-cc__fan span:nth-child(3) { transform: rotate(9deg) translateY(8px); }
.mx3-cc__name { position: relative; font: 800 19px/1.1 var(--font-body, Manrope), sans-serif; }
.mx3-cc__count { position: relative; font: 500 12px/1.3 var(--font-mono, 'JetBrains Mono'), monospace; opacity: .9; }
.mx3-cc__go { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; }
.mx3-cc__go .mx3-i { width: 18px; height: 18px; }
@media (max-width: 920px) { .mx3-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .mx3-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mx3-cc { height: 170px; padding: 12px; border-radius: 18px; }
  .mx3-cc__fan { top: 10px; }
  .mx3-cc__fan span { border-radius: 11px; }
  .mx3-cc__name { font-size: 15.5px; padding-right: 30px; }
  .mx3-cc__go { width: 30px; height: 30px; right: 10px; bottom: 10px; }
}

/* reviews */
.mx3-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mx3-rv { margin: 0; padding: 18px; border-radius: 18px; background: var(--mx3-s1); border: 1px solid var(--mx3-line); }
.mx3-rv blockquote { margin: 8px 0 12px; padding: 0; border: 0; font-size: 14.5px; line-height: 1.5; color: var(--mx3-tx2); }
.mx3-rv figcaption { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mx3-tx3); }
.mx3-rv figcaption img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; padding: 3px; }
.mx3-rv figcaption a { color: var(--mx3-tx2); }
@media (max-width: 767px) { .mx3-reviews { grid-template-columns: 1fr; gap: 10px; } }

/* more ways */
.mx3-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mx3-way { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--mx3-s1); border: 1px solid var(--mx3-line); }
.mx3-way__media { position: relative; display: flex; align-items: center; justify-content: center; height: 230px; overflow: hidden; background: #000; }
.mx3-way__scene { width: 100%; height: 100%; object-fit: cover; }
.mx3-way__thumbs { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.mx3-way__thumbs span { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; }
.mx3-way__thumbs span.is-on { border-color: var(--mx3-neon); }
.mx3-way__thumbs span img { width: 86%; height: 86%; object-fit: contain; }
.mx3-way__thumbs span.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.mx3-way__media--orange { background: linear-gradient(150deg, #FF8A1F 0%, #8A3300 100%); }
.mx3-fan { display: flex; align-items: center; justify-content: center; }
.mx3-fan span { width: 116px; height: 116px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.mx3-fan span img { width: 86%; height: 86%; object-fit: contain; }
.mx3-fan span:nth-child(1) { transform: rotate(-9deg) translateY(10px); margin-right: -14px; }
.mx3-fan span:nth-child(2) { position: relative; z-index: 2; width: 126px; height: 126px; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.mx3-fan span:nth-child(3) { transform: rotate(9deg) translateY(10px); margin-left: -14px; }
.mx3-way__media--blue { justify-content: flex-start; background: radial-gradient(120% 120% at 100% 100%, #1E5BD8 0%, #10233f 55%, #0c1424 100%); }
.mx3-way__clog { position: absolute; right: -36px; bottom: -18px; width: 230px; height: auto; transform: rotate(-6deg); }
.mx3-logo-flow { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin-left: 18px; color: #fff; }
.mx3-logo-flow > .mx3-i { width: 26px; height: 26px; }
.mx3-logo-flow__drop { width: 92px; height: 92px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 11.5px/1.2 var(--font-body, Manrope), sans-serif; }
.mx3-logo-flow__drop .mx3-i { width: 22px; height: 22px; color: #6FB6FF; }
.mx3-logo-flow__charm { width: 92px; height: 92px; border-radius: 22px; background: #fff; border: 4px solid #0A0A0A; box-shadow: 0 0 0 2px #6FB6FF, 0 10px 24px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; }
.mx3-logo-flow__charm img { width: 82%; height: auto; }
.mx3-way__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.mx3-way__body h3 { margin: 0; font: 800 20px/1.2 var(--font-body, Manrope), sans-serif; }
.mx3-way__body h3 a { color: #fff; text-decoration: none; }
.mx3-way__body h3 a:hover { color: var(--mx3-neon); }
.mx3-way__body .mx3-muted { margin: 0; font-size: 14px; }
.mx3-way__minis { list-style: none; margin: 4px 0 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.mx3-way__minis li a { width: 40px; height: 40px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; }
.mx3-way__minis img { width: 84%; height: 84%; object-fit: contain; }
.mx3-way__minis .is-more { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--mx3-tx3); }
.mx3-way__steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mx3-way__steps li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--mx3-s2); border: 1px solid var(--mx3-line2); font-size: 13px; font-weight: 700; }
.mx3-way__steps b { color: #6FB6FF; }
.mx3-way__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.mx3-way__price { font: 800 22px/1 var(--font-body, Manrope), sans-serif; color: #fff; }
.mx3-way__price small { font-size: 13px; font-weight: 600; color: var(--mx3-tx3); }
.mx3-way__acts { display: inline-flex; gap: 8px; }
@media (max-width: 1100px) { .mx3-ways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .mx3-ways { grid-template-columns: 1fr; gap: 12px; }
  .mx3-way__media { height: 170px; }
  .mx3-fan span { width: 92px; height: 92px; }
  .mx3-fan span:nth-child(2) { width: 100px; height: 100px; }
  .mx3-way__clog { width: 180px; }
  .mx3-logo-flow__drop, .mx3-logo-flow__charm { width: 76px; height: 76px; }
  .mx3-way__body { padding: 14px 14px 16px; }
  .mx3-way__body h3 { font-size: 18px; }
  .mx3-way__price { font-size: 20px; }
  .mx3-way:last-child .mx3-way__foot .mx3-btn { width: 100%; height: 46px; }
}

/* FAQ */
.mx3-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; }
.mx3-faq__title { font-size: clamp(40px, 4vw, 54px); margin-bottom: 12px; }
.mx3-faq .mx3-muted a { color: var(--mx3-neon); }
.mx3-q { border-bottom: 1px solid var(--mx3-line); }
.mx3-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 2px; font: 700 16px/1.35 var(--font-body, Manrope), sans-serif; color: #fff; cursor: pointer; }
.mx3-q summary::-webkit-details-marker { display: none; }
.mx3-q summary .mx3-i { width: 20px; height: 20px; color: var(--mx3-tx3); transition: transform .2s ease; }
.mx3-q[open] summary .mx3-i { transform: rotate(45deg); }
.mx3-q p { margin: 0 0 18px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--mx3-tx2); }
.mx3-q p a { color: var(--mx3-neon); }
@media (max-width: 767px) {
  .mx3-faq__grid { grid-template-columns: 1fr; gap: 10px; }
  .mx3-faq__title { font-family: var(--font-body, Manrope), sans-serif; text-transform: none; font-weight: 800; font-size: 21px; letter-spacing: -.2px; }
  .mx3-faq__title .mx3-rain { background: none; color: #fff; }
  .mx3-faq .mx3-kick { display: none; }
  .mx3-q summary { font-size: 15px; min-height: 54px; }
}

/* 7 ---------- category landing ---------- */
.mx3-cat__head { padding: 24px 0 26px; background: radial-gradient(60% 70% at 78% 40%, rgba(255, 46, 196, .16), rgba(46, 156, 255, .08) 45%, rgba(10, 10, 10, 0) 70%), radial-gradient(40% 50% at 10% 90%, rgba(57, 255, 20, .08), rgba(10, 10, 10, 0) 70%); }
.mx3-cat__titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 10px; }
.mx3-cat__title { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
.mx3-cat__title .mx3-disp { font-size: clamp(44px, 5vw, 66px); }
.mx3-cat__count { font: 500 14px/1.2 var(--font-mono, 'JetBrains Mono'), monospace; color: var(--mx3-tx3); }
.mx3-insearch { flex: 0 1 400px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 5px 0 14px; border-radius: 14px; border: 1px solid var(--mx3-line2); background: var(--mx3-s2); color: var(--mx3-tx2); }
.mx3-insearch:focus-within { border-color: var(--mx3-neon); box-shadow: 0 0 0 3px rgba(57, 255, 20, .18); }
.mx3-insearch .mx3-i { width: 20px; height: 20px; }
.mx3-insearch input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: 600 15px var(--font-body, Manrope), sans-serif; outline: 0; box-shadow: none; padding: 0; }
.mx3-insearch input::placeholder { color: var(--mx3-tx3); }
.mx3-insearch button { height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--mx3-neon); color: var(--mx3-neon-ink); font: 800 14px var(--font-body, Manrope), sans-serif; cursor: pointer; }
.mx3-cat__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mx3-chip--img { height: 46px; padding-left: 7px; }
.mx3-chip--img img { width: 32px; height: 32px; border-radius: 8px; }
.mx3-chip__n { color: var(--mx3-tx3); font-weight: 600; }
.mx3-cat__chips .mx3-chip.is-extra { display: none; }
.mx3-cat__chips.is-expanded .mx3-chip.is-extra { display: inline-flex; }
.mx3-chip--more { cursor: pointer; color: var(--mx3-neon); }
.mx3-showcase { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 192px 192px; gap: 16px; }
.mx3-showcase .mx3-cc { height: auto; }
.mx3-showcase .mx3-cc--big { grid-row: span 2; }
.mx3-showcase .mx3-cc--big .mx3-cc__fan { top: 40px; padding: 0 40px; }
.mx3-showcase .mx3-cc--big .mx3-cc__name { font-size: 34px; }
.mx3-showcase:not(.mx3-showcase--3) { grid-template-rows: 230px; }
.mx3-showcase--1 { grid-template-columns: 1fr; }
.mx3-showcase--1 .mx3-cc--big, .mx3-showcase--2 .mx3-cc--big { grid-row: auto; }
.mx3-showcase .mx3-cc:not(.mx3-cc--big) .mx3-cc__fan { top: 12px; padding: 0 70px; }
.mx3-cat__cta { display: flex; justify-content: center; margin-top: 26px; }
.mx3-about { padding: 20px 22px; border-radius: 18px; background: var(--mx3-s1); border: 1px solid var(--mx3-line); }
.mx3-about__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mx3-about__title { margin: 0; font: 800 17px/1.25 var(--font-body, Manrope), sans-serif; color: #fff; }
.mx3-about__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--mx3-neon); font: 700 14px var(--font-body, Manrope), sans-serif; cursor: pointer; white-space: nowrap; }
.mx3-about__toggle .mx3-i { width: 16px; height: 16px; transition: transform .2s ease; }
.mx3-about__toggle[aria-expanded="true"] .mx3-i { transform: rotate(180deg); }
.mx3-about__copy { max-width: 980px; margin-top: 6px; color: var(--mx3-tx3); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mx3-about__copy p { margin: 0 0 10px; }
.mx3-about__copy.is-open { display: block; -webkit-line-clamp: unset; }
@media (max-width: 920px) {
  .mx3-cat__titlerow { flex-direction: column; align-items: stretch; gap: 14px; }
  .mx3-insearch { flex-basis: auto; }
}
@media (max-width: 767px) {
  .mx3-cat__head { padding: 14px 0 16px; background: none; }
  .mx3-cat__title .mx3-disp { font-size: 40px; }
  .mx3-cat__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px calc(-1 * var(--gutter, 16px)) 0; padding: 2px var(--gutter, 16px); }
  .mx3-cat__chips::-webkit-scrollbar { display: none; }
  .mx3-cat__chips .mx3-chip.is-extra { display: inline-flex; }
  .mx3-cat__chips .mx3-chip--more { display: none; }
  .mx3-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 150px; gap: 10px; }
  .mx3-showcase .mx3-cc--big { grid-row: auto; grid-column: span 2; }
  .mx3-showcase .mx3-cc--big .mx3-cc__fan { top: 14px; padding: 0 60px; }
  .mx3-showcase .mx3-cc--big .mx3-cc__name { font-size: 22px; }
  .mx3-showcase .mx3-cc:not(.mx3-cc--big) .mx3-cc__fan { top: 10px; padding: 0 6px; }
  .mx3-cat__cta .mx3-btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 54px; padding: 10px 16px; line-height: 1.25; }
  .mx3-grid--more > :nth-child(n+5) { display: none; }
}

/* 8 ---------- search results (shop grid with a query) ---------- */
.mx3-search-mode .mv2-head { padding-bottom: 6px; }
.mx3-sr-title { margin: 8px 0 0; font: 800 clamp(28px, 3vw, 40px)/1.15 var(--font-body, Manrope), sans-serif; letter-spacing: -.6px; color: #fff; overflow-wrap: anywhere; }
.mx3-sr-colls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mx3-sr-colls__label { font-size: 14px; font-weight: 700; color: var(--mx3-tx3); }
.mx3-sr-custom { padding-bottom: 50px; }
.mx3-sr-custom__in { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--mx3-s1); border: 1px solid var(--mx3-line); }
.mx3-sr-custom__in strong { color: #fff; font-weight: 800; }
.mx3-sr-custom__in span { color: var(--mx3-tx3); font-size: 14.5px; flex: 1 1 auto; }
/* Desktop: no sidebar, results run full width; Filter opens the same panel as a side drawer. */
@media (min-width: 1024px) {
  .mx3-search-mode .mv2-body { grid-template-columns: minmax(0, 1fr); }
  .mx3-search-mode .mv2-filter-btn { display: inline-flex; }
  .mx3-search-mode .mv2-filters { position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 10030; width: min(420px, 92vw); max-height: none; border-radius: 26px 0 0 26px; background: #121315; box-shadow: -24px 0 60px -20px #000; transform: translateX(104%); visibility: hidden; transition: transform .34s var(--ease, ease), visibility 0s .34s; }
  .mx3-search-mode .mv2-filters.is-open { transform: none; visibility: visible; transition: transform .34s var(--ease, ease), visibility 0s; }
  .mx3-search-mode .mv2-filters__head, .mx3-search-mode .mv2-filters__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; }
  .mx3-search-mode .mv2-filters__foot { margin-top: auto; border-top: 1px solid var(--mx3-line); }
  .mx3-search-mode .mv2-backdrop:not([hidden]) { display: block !important; position: fixed; inset: 0; z-index: 10029; background: rgba(0, 0, 0, .55); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .mx3-search-mode .mv2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .mx3-sr-title { font-size: 26px; }
  .mx3-sr-colls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 14px calc(-1 * var(--gutter, 16px)) 0; padding: 2px var(--gutter, 16px); }
  .mx3-sr-colls::-webkit-scrollbar { display: none; }
  .mx3-sr-custom__in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mx3-sr-custom__in .mx3-btn { width: 100%; }
}

/* 9 ---------- cart page ---------- */
.mx3-goal { padding: 16px 18px; border-radius: 16px; background: var(--mx3-s1); border: 1px solid var(--mx3-line2); }
.mx3-goal.is-done { border-color: rgba(57, 255, 20, .45); }
.mx3-goal__title { margin: 0 0 10px; font: 600 16px/1.4 var(--font-body, Manrope), sans-serif; color: #fff; }
.mx3-goal__title b { color: var(--mx3-neon); font-weight: 800; }
.mx3-goal__tick { color: var(--mx3-neon); font-weight: 800; }
.mx3-goal__bar { height: 10px; border-radius: 6px; background: var(--mx3-s3); overflow: hidden; }
.mx3-goal__bar i { display: block; height: 100%; border-radius: 6px; background: var(--mx3-rainbow); transition: width .35s ease; }
.mx3-goal__marks { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; font: 500 12px/1.3 var(--font-mono, 'JetBrains Mono'), monospace; color: var(--mx3-tx3); }
.mx3-goal__marks span:last-child { text-align: right; }
.mx3-goal__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.mx3-chip--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.mx3-chip--ghost { background: transparent; color: var(--mx3-tx2); }
.mx3 .mcx-savings { display: none; } /* the saving now has its own totals row */
.mx3-save-row th, .mx3-save-row td { color: var(--mx3-neon) !important; font-weight: 800; }
.mx3-eta { display: block; margin-top: 3px; font: 600 12.5px/1.3 var(--font-body, Manrope), sans-serif; color: var(--mx3-tx3); }
input:checked + label .mx3-eta, .is-selected .mx3-eta { color: var(--mx3-neon); }
@media (max-width: 767px) {
  .mx3-goal { padding: 14px; }
  .mx3-goal__title { font-size: 15px; }
  .mx3-goal__marks { font-size: 11.5px; flex-wrap: wrap; }
  .mx3-goal__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter, 16px)); margin-right: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px); }
  .mx3-goal__chips::-webkit-scrollbar { display: none; }
}

/* cart summary: shipping options as cards */
html body.mx3 .mcx-summary .cart_totals table.shop_table tr.woocommerce-shipping-totals { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
html body.mx3 .mcx-summary .cart_totals table.shop_table tr.woocommerce-shipping-totals > :is(th, td) { width: 100% !important; text-align: left !important; }
.mx3 .mcx-summary .woocommerce-shipping-totals > th { padding-bottom: 6px; }
.mx3 .mcx-summary #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx3 .mcx-summary #shipping_method li { position: relative; margin: 0; padding: 10px 12px 10px 38px; border: 1.5px solid var(--mx3-line2); border-radius: 12px; background: var(--mx3-s2); text-align: left; }
.mx3 .mcx-summary #shipping_method li:has(input:checked) { border-color: var(--mx3-neon); background: rgba(57, 255, 20, .06); }
.mx3 .mcx-summary #shipping_method li input { position: absolute; left: 12px; top: 13px; margin: 0; accent-color: var(--mx3-neon); }
.mx3 .mcx-summary #shipping_method li label { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #fff; }
.mx3 .mcx-summary #shipping_method li:has(input:checked) .mx3-eta { color: var(--mx3-neon); }
.mx3 .mcx-summary .woocommerce-shipping-destination, .mx3 .mcx-summary .woocommerce-shipping-calculator { text-align: left; margin-top: 8px; }

/* 10 ---------- checkout ---------- */
.mcx-co-rate-eta { display: block; margin-top: 3px; font: 700 13px/1.3 var(--font-body, Manrope), sans-serif; color: var(--mx3-tx2); }
.mcx-co-rate.is-selected .mcx-co-rate-eta { color: var(--mx3-neon); }
html body.mx3 .mcx-co-review tfoot tr.mcx-co-saving, .mx3 tr.mcx-co-saving { display: none !important; } /* shown as its own totals row instead */
html body.mx3 .mcx-co-review tfoot tr.mx3-co-eta > td, .mx3 tr.mx3-co-eta > td { display: block; padding: 12px 14px !important; border-radius: 12px !important; background: rgba(57, 255, 20, .07) !important; border: 1px solid rgba(57, 255, 20, .35) !important; text-align: left !important; }
.mx3-co-eta strong { display: block; color: #fff; font-size: 14.5px; }
.mx3-co-eta span { display: block; margin-top: 2px; color: var(--mx3-tx3); font-size: 12.5px; font-weight: 500; }

/* 11 ---------- multi-design listing (phones): scroll window + aligned bundle box ---------- */
.mx3-dwin { position: relative; }
.mx3-dwin__fade, .mx3-dwin__hint { display: none; }
.mx3-bprog { display: none; }
@media (max-width: 760px) {
  html body.mx3 .pd-design-builder .pd-design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; max-height: 500px !important; overflow-y: auto !important; padding: 8px 14px 8px 8px !important; border: 1px solid var(--mx3-line); border-radius: 14px; background: #0F0F0F; scrollbar-width: thin; scrollbar-color: var(--mx3-neon) #222; }
  html body.mx3 .pd-design-builder .pd-design-grid::-webkit-scrollbar { width: 6px; }
  html body.mx3 .pd-design-builder .pd-design-grid::-webkit-scrollbar-track { background: #222; border-radius: 6px; }
  html body.mx3 .pd-design-builder .pd-design-grid::-webkit-scrollbar-thumb { background: var(--mx3-neon); border-radius: 6px; }
  html body.mx3 .pd-design-builder .pd-design-card { padding: 5px 5px 8px !important; gap: 6px !important; border-radius: 10px !important; }
  html body.mx3 .pd-design-builder .pd-design-name { font-size: 12px !important; line-height: 1.25 !important; }
  .mx3-dwin__fade { display: block; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 110px; border-radius: 0 0 14px 14px; background: linear-gradient(rgba(15, 15, 15, 0), #0F0F0F 85%); pointer-events: none; transition: opacity .2s ease; }
  .mx3-dwin__hint { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mx3-neon); background: #1D1D1D; color: #fff; font: 800 13.5px/1 var(--font-body, Manrope), sans-serif; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); cursor: pointer; transition: opacity .2s ease; }
  .mx3-dwin__hint svg { color: var(--mx3-neon); }
  .mx3-dwin.is-end .mx3-dwin__fade, .mx3-dwin.is-end .mx3-dwin__hint { opacity: 0; pointer-events: none; }

  /* Build Your Bundle: every deal in an even 4-column grid, nothing cut off */
  html body.mx3 .pd-variable-bundles .pd-tiers.pd-variable-tiers { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; flex-wrap: wrap !important; margin-bottom: 12px !important; padding: 0 !important; }
  html body.mx3 .pd-variable-tiers .pd-tier { --mx3-tc: #fff; min-width: 0 !important; width: auto !important; min-height: 54px !important; height: 54px; padding: 0 2px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: 1px solid #2E2E2E !important; border-radius: 12px !important; background: #1A1A1A !important; box-shadow: none !important; transform: none !important; flex: none !important; }
  html body.mx3 .pd-variable-tiers .pd-tier :is(.pd-tier-save, .pd-tier-qty-label, .pd-tier-each) { display: none !important; }
  html body.mx3 .pd-variable-tiers .pd-tier .pd-tier-qty { font: 400 19px/1 var(--font-chunky, 'Lilita One'), sans-serif !important; color: var(--mx3-tc) !important; margin: 0 !important; }
  html body.mx3 .pd-variable-tiers .pd-tier .pd-tier-price { font: 700 12px/1 var(--font-body, Manrope), sans-serif !important; color: #BDBDBD !important; margin: 0 !important; }
  html body.mx3 .pd-variable-tiers .pd-tier.selected { border: 1.5px solid #fff !important; background: #242424 !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .07) !important; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="5"] { --mx3-tc: #34c6ff; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="10"] { --mx3-tc: #c77dff; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="20"] { --mx3-tc: #ff4fd8; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="30"] { --mx3-tc: #ff7b54; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="40"] { --mx3-tc: #ffe14d; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="50"] { --mx3-tc: #9dff57; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="60"] { --mx3-tc: #42f5e6; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="70"] { --mx3-tc: #7c8cff; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="80"] { --mx3-tc: #ff5c8a; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="90"] { --mx3-tc: #ffb547; }
  html body.mx3 .pd-variable-tiers .pd-tier[data-tier="100"] { border: 1.5px solid transparent !important; background: linear-gradient(#1A1A1A, #1A1A1A) padding-box, var(--mx3-tier-rainbow) border-box !important; }
  .mx3-bprog { display: block; height: 6px; margin: 10px 0 2px; border-radius: 6px; background: #262626; overflow: hidden; }
  .mx3-bprog i { display: block; width: 3%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ff2ec4, #ffb547, #39ff14); transition: width .3s ease; }
  html body.mx3 .pd-variable-bundles .pd-bundle-slots:has(> .pd-bundle-slot:only-child) { grid-template-columns: minmax(0, 1fr) !important; }
  html body.mx3 .pd-variable-bundles .pd-bundle-slots > span.pd-bundle-slot:only-child { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; height: 52px !important; min-height: 52px !important; border: 1.5px dashed #444 !important; border-radius: 12px !important; background: transparent !important; font-size: 0 !important; color: transparent !important; }
  html body.mx3 .pd-variable-bundles .pd-bundle-slots > span.pd-bundle-slot:only-child::before { content: "↓"; font: 800 18px/1 var(--font-body, Manrope), sans-serif; color: var(--mx3-neon); }
  html body.mx3 .pd-variable-bundles .pd-bundle-slots > span.pd-bundle-slot:only-child::after { content: "Tap a design below to add it here"; font: 700 14px/1.2 var(--font-body, Manrope), sans-serif; color: #BDBDBD; }
}

/* larger-text safety (Blair's browser enforces a ~16px minimum font size) */
.mx3 .site-header.mx3-header .brand { flex: 0 0 auto; }
.mx3 .site-header.mx3-header .brand img { width: auto; height: 40px; max-width: none; }
.mx3-search--desktop { min-width: 190px; }
/* 1.5.526: when a crowded header squeezes the field, drop the green Search button so the field never shows "Sea…" beside it. */
.mx3-search--desktop { container-type: inline-size; }
@container (max-width: 300px) {
  .mx3-search--desktop .mx3-search__go { display: none; }
  .mx3-search--desktop .mx3-search__ph { margin-right: 8px; }
  .mx3-search--desktop:not(.has-query) .mx3-search__ph { font-size: 0; }
  .mx3-search--desktop:not(.has-query) .mx3-search__ph::before { content: "Search charms"; font-size: 14.5px; }
}
@media (min-width: 1240px) and (max-width: 1365px) { .mx3-tag { display: none; } }
.mx3-bt--wide { flex-wrap: wrap; }
.mx3-bt__meta { white-space: normal; }
/* Phone currency picker (Blair, 2026-10-08): same 44px height, top and 4px gap as the search / cart / menu buttons,
   and the select fills its box (it used to be a fixed 74px inside a 70-78px box, so the flag hit the border).
   Widths fit the longest label ("🇦🇺 AUD" in JetBrains Mono 800: 48px at 13px, 59px at the 16px larger-text minimum) clear of the arrow. */
@media (max-width: 920px) {
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher { top: 50% !important; right: calc(clamp(12px, 4vw, 18px) + 146px) !important; left: auto !important; transform: translateY(-50%) !important; width: 92px !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; overflow: hidden; }
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher select { -webkit-appearance: none; appearance: none; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 24px 0 12px !important; border: 0; border-radius: inherit; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23C9C3D3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 7px !important; color: #fff; font-size: 13px !important; font-weight: 800; line-height: 44px; text-align: left !important; text-overflow: clip; }
}
@media (min-width: 768px) and (max-width: 920px) {
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher { right: calc(clamp(12px, 4vw, 18px) + 144px) !important; height: 42px !important; min-height: 42px !important; }
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher select { line-height: 42px; }
}
@media (max-width: 374px) {
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher { width: 88px !important; }
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher select { padding: 0 22px 0 10px !important; background-position: right 8px center !important; font-size: 12.5px !important; }
}
@media (max-width: 360px) {
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher { right: calc(clamp(12px, 4vw, 18px) + 144px) !important; }
}
@media (max-width: 352px) {
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher { width: 70px !important; }
  html body.mx3 .site-header.mx3-header .mrc-currency-switcher select { padding: 0 6px !important; background-image: none !important; font-size: 12px !important; text-align: center !important; text-align-last: center; }
}
@media (max-width: 767px) {
  /* 1.5.526: phone trust row = three equal tiles, icon over a short label, so nothing wraps unevenly. */
  .mx3-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; white-space: normal; overflow: visible; }
  .mx3-trust li { flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 8px 4px; border: 1px solid var(--mx3-line); border-radius: 12px; background: rgba(255, 255, 255, .03); text-align: center; font-size: 12px; line-height: 1.2; }
  .mx3-bt--wide .mx3-bt__meta { margin-left: 0; width: 100%; }
}

/* WooCommerce "Address autocomplete" (Settings → General, suggestions from WooPayments): dark dropdown to match checkout */
html body.mx3 .woocommerce-address-suggestions { margin-top: 6px; background: #1A1A1A; border: 1px solid var(--mx3-line2); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85); overflow: hidden; }
html body.mx3 .woocommerce-address-suggestions .suggestions-list { max-height: 264px; scrollbar-width: thin; scrollbar-color: #555 transparent; }
html body.mx3 .woocommerce-address-suggestions .suggestions-list li { display: flex; align-items: center; min-height: 46px; padding: 11px 14px; border-bottom: 1px solid var(--mx3-line); color: var(--mx3-tx2); font: 600 14.5px/1.35 var(--font-body, Manrope), sans-serif; white-space: normal; text-overflow: clip; }
html body.mx3 .woocommerce-address-suggestions .suggestions-list li:is(.active, :hover, :focus) { background: rgba(46, 156, 255, .14); color: #fff; outline: 0; }
html body.mx3 .woocommerce-address-suggestions .woocommerce-address-autocomplete-branding { background: #121212; border-top: 1px solid var(--mx3-line); color: var(--mx3-tx3); font-size: 12px; }
html body.mx3 .woocommerce-input-wrapper.autocomplete-available .address-search-icon { background-color: var(--mx3-tx3); }
html body.mx3 .woocommerce-address-suggestions ul.suggestions-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html body.mx3 .woocommerce-address-suggestions ul.suggestions-list li { margin: 0 !important; list-style: none !important; }
html body.mx3 .woocommerce-address-suggestions ul.suggestions-list li:last-child { border-bottom: 0; }
html body.mx3 .woocommerce-address-suggestions .woocommerce-address-autocomplete-branding { padding: 8px 14px !important; }

/* 1.5.526: variation design cards line up row by row: image on top, name clamped to 3 lines, and the
   backorder chip pinned to the card's bottom on one line (it used to wrap to two lines and float after the name). */
html body.mx3 .pd-design-grid { align-items: stretch; }
html body.mx3 .pd-design-grid .pd-design-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; height: 100%; min-width: 0; }
html body.mx3 .pd-design-grid .pd-design-img { flex: none; width: 100%; aspect-ratio: 1 / 1; }
html body.mx3 .pd-design-grid .pd-design-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; text-align: center; }
html body.mx3 .pd-design-grid .mrc-backorder-variation-badge,
html body.mx3 .pd-design-grid .mrc-backorder-variation-hold { align-self: center; margin-top: auto !important; max-width: 100%; box-sizing: border-box; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto !important; line-height: 1.3; }
html body.mx3 .pd-design-grid .mrc-backorder-variation-badge + .mrc-backorder-variation-hold { margin-top: 4px !important; }
html body.mx3 .pd-design-grid .mrc-backorder-variation-hold { white-space: normal; text-align: center; }

/* 1.5.526: Shop by category cards keep their original bold gradients, but the colours now run in hue order across
   the grid (orange → amber → green → teal → blue → violet → plum → crimson → rust …) so neighbouring cards flow
   into each other instead of jumping between random tones (Blair, 2026-10-18). Path cards above are untouched. */
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+1) { background: linear-gradient(160deg, #FF8A2A, #9A3A00); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+2) { background: linear-gradient(160deg, #FFB547, #8A4B00); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+3) { background: linear-gradient(160deg, #4FA829, #173F0A); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+4) { background: linear-gradient(160deg, #14B8A6, #0B6B61); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+5) { background: linear-gradient(160deg, #2E7BFF, #123E9C); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+6) { background: linear-gradient(160deg, #6A35E0, #22104A); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+7) { background: linear-gradient(160deg, #9A33B5, #3A0E4A); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+8) { background: linear-gradient(160deg, #C0183F, #4A0614); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+9) { background: linear-gradient(160deg, #E2541B, #6E1A04); }
.mx3-cats:not(.mx3-paths__grid) > .mx3-cc:nth-child(10n+10) { background: linear-gradient(160deg, #8B3DFF, #2E1166); }

/* 1.5.526: one background everywhere, matching the homepage (Blair, 2026-10-18). The diagonal mesh, dot grid and
   vignette (--page-pattern) are gone from body and .mrc-page-shell on every page, as are the grid overlays behind
   section heroes. Pages without the shell (cart, product) and the transparent Bundle Builder shell get the same
   dark base + glow as the homepage shell; the fine grain (body::before) stays, as on the homepage. */
:root { --page-pattern: none, none, none, none; }
.pd-design-builder::before, .mrc-accessory-launch::before, .mrc-accessory-archive-hero::before, .mrc-accessory-main::before,
.mrc-shop-accessory-callout::before, .mlx-pdp-hero::before, .mlx-spotlight::before, .mlx-stage-frame::before { background-image: none !important; }
html body, html body .mrc-shop-builder-page { background-color: var(--bg, #0a0a0a); }
html body.mxh, html body.mxh .mrc-page-shell, html body.mxh .mcx-co-shell { background-color: #0A0A0A; background-image: radial-gradient(70vw 60vh at 100% 0%, rgba(255, 122, 26, .09), rgba(11, 8, 17, 0) 70%), radial-gradient(70vw 70vh at 0% 100%, rgba(139, 61, 255, .11), rgba(11, 8, 17, 0) 70%) !important; background-size: 100% 1900px !important; background-repeat: no-repeat !important; background-attachment: scroll !important; }

/* 1.5.526: Shop page background = A3 "Aurora Sweep" (Blair's pick from the board, 2026-10-18): one continuous colour wash
   pink → blue → purple → orange → green → pink on a 3000px band that repeats without a seam, with soft pink and orange
   glows over it. Shop page + Bundle Builder (body.woocommerce-shop, body.mrc-ux-builder; 1.5.531); every other page keeps
   the homepage background. Grain stays. */
html body.woocommerce-shop, html body.mrc-ux-builder { background-color: #0A0A0A !important; background-image: radial-gradient(55% 14% at 6% 6%, rgba(255, 46, 196, .22), transparent 76%), radial-gradient(55% 14% at 94% 56%, rgba(255, 122, 26, .18), transparent 76%), linear-gradient(180deg, rgba(255, 46, 196, .13) 0%, rgba(46, 156, 255, .13) 22%, rgba(139, 61, 255, .14) 44%, rgba(255, 122, 26, .11) 64%, rgba(57, 255, 20, .07) 82%, rgba(255, 46, 196, .13) 100%) !important; background-size: 100% 3000px !important; background-repeat: repeat-y !important; background-attachment: scroll !important; background-position: 0 0 !important; }
html body.woocommerce-shop .mrc-page-shell, html body.mrc-ux-builder .mrc-page-shell { background: transparent !important; }