/** Shopify CDN: Minification failed

Line 429:0 Unexpected "}"

**/
/* ---------------------------------------------------------------
   MOON BASIN - POLICY PAGES + FOOTER POLICY DROPDOWN
   Added 2026-08-27 (Simon) on Jay's call. The policy pages render on
   Shopify's stock markup and had NEVER been styled by this theme -
   verified against the 8/23 local copy and live, zero .shopify-policy
   rules in either. New work, not a repair.

   Brand Rules section 2, "Cut it down the middle":
     - Every page reads down one vertical axis
     - Body copy centres too on Worlds (Jay 2026-08-24)
     - Nothing starts on the left margin
   --------------------------------------------------------------- */

.shopify-policy__container {
  max-width: 58rem;
  margin-inline: auto;
  padding:
    clamp(3.5rem, 8vw, 8rem)
    var(--mb-gutter, clamp(1.25rem, 4vw, 5rem))
    clamp(5rem, 10vw, 9rem);
  text-align: center;
  color: var(--mb-moon, #eef3ef);
  font-family: var(--font-body--family, sans-serif);
}

.shopify-policy__title h1 {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  color: var(--mb-moon, #eef3ef);
  font-family: var(--font-heading--family, var(--font-body--family, sans-serif));
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
}

.shopify-policy__body {
  text-align: center;
  color: var(--mb-moon, #eef3ef);
  line-height: 1.75;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
}

.shopify-policy__body h2 {
  margin: clamp(2.75rem, 5vw, 4rem) 0 clamp(0.85rem, 1.5vw, 1.25rem);
  color: var(--mb-moon, #eef3ef);
  font-family: var(--font-heading--family, var(--font-body--family, sans-serif));
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.shopify-policy__body h2 + p { margin-top: 0; }

.shopify-policy__body h3 {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.6rem;
  color: var(--mb-moon, #eef3ef);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.shopify-policy__body p {
  max-width: 46ch;
  margin-inline: auto;
  margin-block: 0 1.15em;
  text-align: center;
}

.shopify-policy__body strong { color: var(--mb-moon, #eef3ef); font-weight: 700; }

.shopify-policy__body ul,
.shopify-policy__body ol {
  max-width: 46ch;
  margin: 0 auto 1.4em;
  padding: 0;
  list-style: none;
  text-align: center;
}

.shopify-policy__body li {
  margin-block: 0.5em;
  color: var(--mb-muted, #a9a7b0);
}

.shopify-policy__body a {
  color: var(--mb-violet, #9b63e6);
  text-underline-offset: 0.22em;
}

.shopify-policy__body hr {
  width: 4rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--mb-moon, #eef3ef) 22%, transparent);
}

.shopify-policy__body table {
  display: block;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
}

@media (max-width: 749px) {
  .shopify-policy__body p,
  .shopify-policy__body ul,
  .shopify-policy__body ol { max-width: 100%; }
}

/* ---------------------------------------------------------------
   FOOTER UTILITIES ROW
   Jay 2026-08-27: "All these need to be centered."

   Setting justify-items on the row was NOT enough: the child carries
   justify-self: start, and justify-self on the child beats
   justify-items on the parent. Both are set below.

   The bottom padding reserves room for the dropdown. It cannot be
   removed while the list is a popover: a top-layer element cannot push
   the page taller, so a list opening DOWNWARD at the bottom of the page
   has to have space waiting for it. Measured in WebKit at 428x745 the
   open list is 150px tall plus an 18px gap, so 190px is the real figure
   - down from the 260px Jay flagged as "lots of padding", with no
   clipping at the viewport bottom.
   --------------------------------------------------------------- */

.footer-utilities .utilities {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  text-align: center;
  /* 2026-09-09 late: the policy list is in flow now (see below), so the
     190px reserve for a floating dropdown is gone. */
  padding-bottom: 28px;
}

.footer-utilities .utilities > * {
  justify-self: center !important;
  text-align: center;
}

/* ---------------------------------------------------------------
   FOOTER "POLICIES" DROPDOWN
   Label changed from Horizon's "Terms and Policies" to "Policies" in
   blocks/footer-policy-list.liquid (Jay 2026-08-27).

   Jay: "Down, not up. Center, Moon Basin. Font." then "Center it
   without the shadow box." Then 2026-08-27 evening, after it was
   briefly replaced with a flat always-visible list: "they have to drop
   down not stay displayed." It is a dropdown. It stays a dropdown.

   NO CONTAINER. Brand Rules section 1: "Nothing sits in a card, tile,
   panel, box, frame or bordered container." Horizon's popover ships
   with a background, a border, a radius and a box-shadow - all removed
   so the list floats on the field. Hover is carried by colour.

   🔒 ROOT CAUSE OF THE "POLICIES JUTS OUT TO THE LEFT" BUG, settled
   2026-08-27 after THREE wrong diagnoses. The popover was never
   mispositioned. `left: anchor(center)` anchors it to the TRIGGER's
   centre, and the trigger itself was 58px off-axis - see the
   margin-inline note below. The list was faithfully following a
   crooked button. Fixing the button fixed the dropdown.

   Two diagnoses that were WRONG and cost most of an evening, recorded
   so nobody retries them:
     1. "The @supports fallback double-shifts it." Measured in WebKit:
        CSS.supports('position-anchor: --x') is TRUE in Safari, so the
        `@supports not (...)` block NEVER EXECUTES there. It was dead
        code. Its --anchor-* custom properties are unset anyway.
     2. "Replace the dropdown with a flat list." Solved the symptom by
        deleting the feature. Jay rejected it.
   Verified in WebKit (Safari's engine) at 428x745 on the live page,
   opened by a real tap: closed = not rendered; open = x 115..313,
   centre 214 against a screen centre of 214, 0px off axis, drops 18px
   below the label, no clipping left or bottom.
   --------------------------------------------------------------- */

/* 🔒 margin-inline:auto IS THE FIX. Measured on the live page: this
   button computes to display:block with a width of 83.53px inside a
   correctly-centred 199px wrapper, and sat at the wrapper's LEFT edge.
   A <button> shrinks to fit its text even at display:block, so
   `width:auto` never fills the parent and `text-align:center` only
   centres text inside those 84px - which changes nothing visible.
   Auto inline margins are what centre a fit-content block.
   Label centre moved 156 -> 214 on a 428px viewport. */
.policy-list-trigger {
  display: block;
  margin-inline: auto;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-heading--family, var(--font-body--family, sans-serif));
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-muted, #a9a7b0);
  transition: color 0.22s var(--mb-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.policy-list-trigger:is(:hover, :focus-visible) {
  color: var(--mb-moon, #eef3ef);
}

/* 2026-09-09 late (Simon), on Jay: "the policies on top of the socials, but
   not flying out on top of the socials." The list is no longer a top-layer
   popover: blocks/footer-policy-list.liquid is a native <details>. Closed =
   the word. Open = the list sits IN FLOW under the word and pushes the
   social row down, so it can never cover anything. Still a dropdown at
   rest (Jay 2026-08-27), still no container (Brand Rules s.1). */
.footer-utilities .mb-policies {
  order: 2;
  margin-inline: auto;
  text-align: center;
  width: max-content;
  max-width: min(90vw, 26rem);
}

.footer-utilities .mb-policies > summary {
  list-style: none;
}

.footer-utilities .mb-policies > summary::-webkit-details-marker {
  display: none;
}

.footer-utilities .mb-policies .policy_list {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-top: 14px;
  text-align: center;
}

.footer-utilities .mb-policies .policy_list li {
  width: 100%;
  border-radius: 0;
  background: none !important;
}

.footer-utilities .mb-policies .policy_list li a {
  display: block;
  width: 100%;
  color: var(--mb-muted, #a9a7b0);
  font-family: var(--font-heading--family, var(--font-body--family, sans-serif));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 0;
  transition: color 0.2s var(--mb-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Colour carries the hover, not a filled box. */
.footer-utilities .mb-policies .policy_list li:is(:hover, :focus-within) {
  background: none !important;
}

.footer-utilities .mb-policies .policy_list li:is(:hover, :focus-within) a {
  color: var(--mb-moon, #eef3ef);
}

/* ---------------------------------------------------------------
   FOOTER ORDER + THE WORLDS CRESCENT - 2026-09-09 (Simon), on Jay:
   "when the policies fly out there, stepping on the socials" and "a
   little purple crescent the same size as the social icons... going to
   go to the View All Worlds collection. All Empire Strikes Back center
   axis."

   The social row now sits ABOVE the Policies trigger (block order in
   sections/footer-group.json), so the dropdown opens into the 190px
   reserve below it and can never touch the icons. The old
   `:has(:popover-open)` margin hack that tried to push the icons down
   is gone. The crescent (blocks/social-links.liquid) is the theme
   favicon at the social icon size, on its own centred row, one axis.
   --------------------------------------------------------------- */
/* 2026-09-09 late, the PYRAMID (Jay: "the purple crescent on top of that
   just a little bigger, so it forms a pyramid"). The social block's wrapper
   is display:contents, so its two children (the crescent row and the
   social row) and the Policies block are three siblings in the footer
   column, stacked by `order`: crescent 1, Policies 2, socials 3. Widths
   grow downward: one 1.3x icon, then the word, then five icons. */
.footer-utilities .social-icons__wrapper {
  display: contents;
}

.footer-utilities .mb-social-row {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin-inline: auto;
}

/* Jay 2026-09-09 9:00 PM, final: "I like the way that you had it the first
   time, with the purple crescent on top of the socials." Own centred row
   above the social row, same icon size, one axis. (The inline-in-the-row
   version lived for ten minutes between 8:45 and 9:00 PM.) */
.footer-utilities .social-icons__icon-wrapper--worlds {
  order: 1;
  display: flex;
  justify-content: center;
  width: auto;
  height: calc(var(--icon-size-lg, 24px) * 1.3);
  margin-inline: auto;
}

.footer-utilities .social-icons__icon--worlds {
  display: block;
  /* 1.3x the social icon token (Jay 2026-09-09 late: "just a little bigger"):
     39px on Jay's 20px root, 31px at a 16px root */
  width: calc(var(--icon-size-lg, 24px) * 1.3);
  height: calc(var(--icon-size-lg, 24px) * 1.3);
  opacity: 0.92;
  transition: opacity 0.2s var(--mb-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter 0.2s ease;
}

.footer-utilities .social-icons__icon-wrapper--worlds a:is(:hover, :focus-visible) .social-icons__icon--worlds {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(155, 99, 230, 0.55));
}

/* Jay 2026-09-09 late: "Make the policies just a little bigger." 11.5 -> 15px. */
.policy-list-trigger {
  font-size: 15px;
  letter-spacing: 3px;
}

/* ---------------------------------------------------------------
   HEADER - Jay 2026-08-27 evening: "Moon Basin logo larger and it's
   not centre axis plus the whole thing needs to be sticky, it strays
   all over the place on scroll." Then: "Make the Moon Basin logo
   bigger."

   The centre-axis half was NOT a header bug. It was the product-page
   horizontal overflow fixed in mb-stage-cap.css, which made Safari
   zoom the whole document out and pin it to the left edge. The lockup
   was centred the entire time.

   SIZE is set in px and vw, deliberately NOT rem, so the root font
   size cannot change what ships relative to what Jay approved.
   Was clamp(9rem, 13vw, 11.5rem); now 260px on a phone, 320px on
   desktop - 1.8x the previous rendered width. Comparison sheet at four
   widths: Desktop\MB-LOGO-SIZES-2026-08-27.png

   STICKY: #header-group is the wrapper theme.liquid places around the
   header sections, so pinning it holds the lockup at the top on every
   template. It already carries a 96%-opaque void background, so the
   hero art passes UNDER it rather than through it. Revert by deleting
   this rule; nothing else depends on it.
   --------------------------------------------------------------- */

.header-logo::before {
  width: clamp(260px, 40vw, 320px);
}

#header-group {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Jay 2026-09-05: keep the entire Worlds orbit visible on short desktop
   screens without changing the approved composition at normal heights. */
@media (max-height: 620px) and (min-width: 681px) {
  .header-logo::before {
    width: clamp(220px, 30vw, 260px);
  }

  .header-logo {
    margin-block: -0.55rem;
  }

  .mb-arrival {
    min-height: calc(100svh - 5rem);
  }

  .mb-orbit__stage {
    height: clamp(10.5rem, 40svh, 12rem);
  }

  .mb-orbit__controls {
    padding-block: 0.3rem 0.65rem;
  }
}

/* ---------------------------------------------------------------
   TOUCH DEVICES, NO BLURRED GLOW LAYERS - 2026-09-09 (Simon), on Jay:
   "on the mobile, it kind of flickers when I scroll" / "Flick seems worse".
   iOS Safari re-rasterises every `filter: blur()` layer on each scroll
   frame. The orbit underglow, the product radiance and the wall glow
   (mb-canvas-gallery.css) all use one; on a phone that is dozens of
   blurred layers repainting while the thumb moves. On touch they become
   plain soft gradients with no filter. Desktop is unchanged.
   --------------------------------------------------------------- */
@media (hover: none) {
  .mb-orbit__glow,
  .mb-coordinate__radiance,
  .mb-product__radiance {
    filter: none;
    transition: opacity 400ms ease;
  }
  .mb-orbit__slide { will-change: auto; }
}

/* Product page on touch, 2026-09-09 10:20 PM (Simon). An earlier version of
   this block hid every stacked view image except the one named for the SHIRT
   page; the CANVAS page names its views differently, so on a phone its WALL
   ART view went black (Jay: "The wall art is not loading", live for ~5 min on
   158265114797). Now only the fades are removed; nothing is hidden. */
@media (hover: none) {
  .mb-product__image { transition: none; }
  .mb-product__radiance { transition: none; }
}
}