/* ─── Reset [hidden] ──────────────────────────────────────────────────────────
 * Some Shopify themes reset or override the native [hidden] attribute.
 * Re-enforce it here so our JS-toggled visibility is reliable.
 */
.mrb-wrapper [hidden] { display: none !important; }

/* ─── Design token re-declaration ────────────────────────────────────────────
 * The section is self-contained — tokens are declared locally so the section
 * works in any Shopify theme without depending on an external CSS file.
 * Source of truth remains /monument-shopify/design-tokens.css.
 */
.mrb-wrapper {
  --color-bg-base:       #1C2B3B;
  --color-bg-elevated:   #223245;
  --color-bg-raised:     #28394F;
  --color-bg-overlay:    rgba(28, 43, 59, 0.94);
  --color-fg:            #ffffff;
  --color-fg-muted:      rgba(255, 255, 255, 0.78);
  --color-fg-subtle:     rgba(255, 255, 255, 0.50);
  --color-accent:        #C17C3A;
  --color-accent-hover:  #D48D4A;
  --color-accent-muted:  rgba(193, 124, 58, 0.14);
  --color-accent-shadow: rgba(193, 124, 58, 0.32);
  --color-border:        rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.25);
  --color-border-focus:  #ffffff;
  --color-error:         #D96060;
  --color-error-muted:   rgba(217, 96, 96, 0.12);
  --font-display:        'Geist', sans-serif;
  --font-body:           var(--font-body-family, 'Helvetica Neue', Arial, sans-serif);
  --shadow-sm:    0 2px  8px  rgba(0,0,0,0.24);
  --shadow-md:    0 8px  24px rgba(0,0,0,0.32);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.42);
  --shadow-frame: 0 24px 64px rgba(0,0,0,0.62), 0 4px 12px rgba(0,0,0,0.42);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Frame oak color — used in multiple rules */
  --frame-oak:    #7B5230;
  --frame-mat:    #F5F0E8;

  /* Offset for sticky panel when Shopify theme has a fixed header.
   * Override this in theme.liquid if needed: .mrb-wrapper { --mrb-header-offset: 80px; }
   */
  --mrb-header-offset: 0px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SECTION ROOT
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-wrapper {
  background: var(--color-bg-base);
  color: var(--color-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mrb {
  max-width: 1440px;
  margin: 0 auto;
}


/* ─── Section heading ──────────────────────────────────────────────────────── */

.mrb-header {
  padding: 56px 48px 48px;
  text-align: center;
}

.mrb-header__title {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT — two-zone split
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  grid-template-rows: 1fr;
  min-height: calc(100vh - var(--mrb-header-offset));
  align-items: start;
}


/* ─────────────────────────────────────────────────────────────────────────────
   LEFT — PREVIEW PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-preview {
  position: sticky;
  top: var(--mrb-header-offset);
  height: calc(100vh - var(--mrb-header-offset));
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ─── Preview tabs ─────────────────────────────────────────────────────────── */

.mrb-tabs {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mrb-tab {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
  transition: color 120ms var(--ease-out),
              background 120ms var(--ease-out),
              border-color 120ms var(--ease-out);
  white-space: nowrap;
}

.mrb-tab:hover {
  color: var(--color-fg);
  background: rgba(255, 255, 255, 0.06);
}

.mrb-tab[aria-selected="true"] {
  color: var(--color-fg);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
}

/* 3D tab — subtly differentiated, hidden on small mobile (Step 5.1) */
.mrb-tab--3d {
}


/* ─── Preview panes ────────────────────────────────────────────────────────── */

.mrb-pane {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  overflow: auto;
  min-height: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   POSTER PREVIEW — flat view
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-poster-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* container-type required so cqw units on poster text reference the
     poster container width, not the viewport */
  container-type: inline-size;
}

/* The A4 poster card — white, portrait, with frame border driven by state */
.mrb-poster {
  background: #ffffff;
  aspect-ratio: 210 / 297;
  width: min(420px, 88%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6% 6% 2%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  /* Frame border — colour set live via --poster-frame-color from JS state */
  border: clamp(5px, 1.6cqw, 16px) solid var(--poster-frame-color, #7d5428);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 8px 32px rgba(0,0,0,0.42);
}

/* Route name — top of poster, sans-serif, in trail color */
.mrb-poster__route-name {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 4.5cqw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
  color: var(--poster-trail-color, #b85c38);
  width: 100%;
  margin-bottom: 3%;
  text-transform: uppercase;
}

/* 2D route visualization — centered vertically between route-name and customer-name */
.mrb-poster__route-viz {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1% 0;
  margin-top: auto;
  margin-bottom: auto;
}

/* Circle: diameter = 80% of poster width, padded so route doesn't touch edge */
.mrb-poster__route-circle {
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: max(0.5px, 0.25cqw) solid #111111;
  overflow: hidden;
  flex-shrink: 0;
  background: #ffffff;
  padding: 9%;
  box-sizing: border-box;
}

.mrb-poster__route-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Spacers — hidden, layout handled via margin-top: auto */
.mrb-poster__spacer {
  display: none;
}

/* Spacers — hidden, layout handled via auto margins on route-viz */


/* Customer name — slightly smaller than route name */
.mrb-poster__customer-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 3.6cqw, 1.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  text-align: center;
  width: 100%;
}

/* Stats row */
.mrb-poster__stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 4%;
  margin-bottom: 2%;
  gap: 2px;
}

.mrb-poster__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mrb-poster__stat-icon {
  width: clamp(10px, 2.2cqw, 18px);
  height: clamp(10px, 2.2cqw, 18px);
  color: #111111;
  flex-shrink: 0;
}

/* Force SVG to fill its container.
   Without this, iOS Safari renders SVG at intrinsic viewBox size (24×24)
   instead of scaling to the parent's explicit width/height — causing the
   icon to overflow downward onto the stat label text. */
.mrb-poster__stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}


.mrb-poster__stat-label {
  font-family: var(--font-body);
  font-size: clamp(4.5px, 1cqw, 7px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #111111;
  text-align: center;
  text-transform: uppercase;
}

.mrb-poster__stat-value {
  font-family: var(--font-body);
  font-size: clamp(4.5px, 1cqw, 7px);
  font-weight: 400;
  color: #333333;
  text-align: center;
}

/* MONUMENT wordmark at bottom */
.mrb-poster__wordmark {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(5px, 1.2cqw, 9px);
  letter-spacing: 0.2em;
  color: #111111;
  text-align: center;
  margin-top: 3%;
}


/* ─────────────────────────────────────────────────────────────────────────────
   FRAME MOCKUP — "Ramme" pane
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-pane--frame {
  padding: 24px;
  background: var(--color-bg-base);
}

.mrb-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Outer oak frame — uses gradient to simulate wood grain depth */
.mrb-frame__outer {
  display: inline-flex;
  padding: 18px;
  background:
    linear-gradient(135deg,
      #9B6B3E 0%,
      #6B4520 25%,
      #8B5E30 50%,
      #5C3A18 75%,
      #7B5230 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 2px 0 0 rgba(255,255,255,0.06),
    inset -2px 0 0 rgba(0,0,0,0.2),
    var(--shadow-frame);
}

/* Cream mat — inner mount between frame and poster */
.mrb-frame__mat {
  padding: 20px;
  background: var(--frame-mat);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.08);
}

/* Poster inside the frame is the same .mrb-poster — slightly smaller */
.mrb-poster-wrap--framed .mrb-poster {
  width: min(340px, 72%);
  box-shadow: var(--shadow-sm);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3D VIEWER — "3D terræn" pane
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-3d-viewer {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Three.js injects a <canvas> — make it fill the mount */
.mrb-3d-viewer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.mrb-3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg-elevated);
}

.mrb-3d-loading__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-fg-muted);
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   RIGHT — CONFIGURATION PANEL
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-config {
  background: var(--color-bg-base);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--mrb-header-offset));
  padding: 0 36px 40px;
  gap: 0;
  position: relative;
}


/* ─── Step indicator ────────────────────────────────────────────────────────── */

.mrb-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 0;
  margin-bottom: 36px;
}

.mrb-steps__track {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mrb-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background 220ms var(--ease-out),
              width 220ms var(--ease-out);
}

/* Active dot — wider pill shape */
.mrb-step-dot[data-active] {
  width: 20px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* Completed dot */
.mrb-step-dot[data-complete] {
  background: rgba(193, 124, 58, 0.45);
}

.mrb-steps__label {
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg-muted);
  text-transform: none;
  margin-left: auto;
}


/* ─── Loading overlay ───────────────────────────────────────────────────────── */

.mrb-loading {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 32px;
}

.mrb-loading__text {
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

.mrb-loading__subtext {
  display: none;
}

/* ─── Progress bar ───────────────────────────────────────────────────────────── */

.mrb-progress-wrapper {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mrb-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.1);
  background-image: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85));
  background-size: var(--p, 10%) 100%;
  background-repeat: no-repeat;
  background-position: left center;
  transition: background-size 600ms ease;
}

.mrb-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mrb-progress-subtext {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-fg-muted);
  font-weight: 400;
}

.mrb-progress-percent {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: rgba(246,242,238,0.45);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.mrb-progress-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.mrb-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 400ms ease;
}

.mrb-progress-dot--active {
  background: rgba(255,255,255,0.85);
}

.mrb-progress-dot--done {
  background: rgba(255,255,255,0.4);
}


/* ─── Spinner ────────────────────────────────────────────────────────────────── */

.mrb-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  animation: mrb-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.mrb-spinner--lg {
  width: 52px;
  height: 52px;
  border-width: 3px;
}

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

/* ─── Bicycle wheel ─────────────────────────────────────────────────────────── */

.mrb-wheel {
  width: 120px;
  height: 120px;
  animation: mrb-wheel-spin 1.4s linear infinite;
  transform-origin: center;
  flex-shrink: 0;
}

.mrb-wheel__arc {
  transform-origin: 60px 60px;
  animation: mrb-arc-chase 1.4s ease-in-out infinite;
  stroke-dashoffset: 0;
}

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

@keyframes mrb-arc-chase {
  0%   { stroke-dashoffset: 0;    stroke-dasharray: 50 290;  }
  40%  { stroke-dashoffset: -80;  stroke-dasharray: 100 240; }
  80%  { stroke-dashoffset: -240; stroke-dasharray: 60 280;  }
  100% { stroke-dashoffset: -340; stroke-dasharray: 50 290;  }
}


/* ─── Error state ───────────────────────────────────────────────────────────── */

.mrb-error {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  padding: 40px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mrb-error__icon {
  width: 40px;
  height: 40px;
  color: var(--color-error);
}

.mrb-error__message {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-fg);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}


/* ─── Form ────────────────────────────────────────────────────────────────── */

.mrb-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}


/* ─── Step containers ───────────────────────────────────────────────────────── */

/* Reset fieldset browser defaults */
.mrb-step {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 auto;
}

.mrb-step__legend {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0;
  margin-bottom: 4px;
  width: 100%;
}

.mrb-step__number {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-fg);
  flex-shrink: 0;
}

.mrb-step__number::after {
  content: "\00a0-\00a0";
  font-weight: 300;
  color: var(--color-fg-muted);
}

.mrb-step__title {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  line-height: 1.1;
}

.mrb-step__desc {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-fg-muted);
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   STEP 1 — DROP ZONE
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-dropzone {
  position: relative;
  border: 1px dashed var(--color-border-strong);
  border-radius: 0;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 220ms var(--ease-out),
              background 220ms var(--ease-out);
  min-height: 200px;
}

.mrb-dropzone:hover,
.mrb-dropzone:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

/* Drag-over state — JS adds this class */
.mrb-dropzone--drag-over {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-muted);
}

/* The actual file input — visually hidden but covering the zone for click */
.mrb-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  /* Reset any theme input styles */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

.mrb-dropzone__icon {
  width: 64px;
  height: 64px;
  color: var(--color-fg-muted);
  transition: color 220ms var(--ease-out);
  pointer-events: none;
}

.mrb-dropzone:hover .mrb-dropzone__icon,
.mrb-dropzone--drag-over .mrb-dropzone__icon {
  color: var(--color-accent);
}

.mrb-dropzone__labels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.mrb-dropzone__primary {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 1.2;
}

.mrb-dropzone__secondary {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--color-fg-muted);
}

.mrb-dropzone__cta {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* File selected confirmation state */
.mrb-dropzone__selected {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.mrb-dropzone__selected-icon {
  width: 22px;
  height: 22px;
  color: #5C9E70;
  flex-shrink: 0;
}

.mrb-dropzone__selected span {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-fg);
  word-break: break-all;
}

/* Hint text below drop zone */
.mrb-file-hint {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-fg-subtle);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────────────────
   STEP 2 — FORM FIELDS
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mrb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mrb-field--full {
  grid-column: 1 / -1;
}

.mrb-field--half {
  grid-column: span 1;
}

.mrb-field__label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  display: block;
}

.mrb-field__required {
  color: var(--color-accent);
  margin-left: 2px;
}

.mrb-field__input {
  /* Reset Shopify theme input styles */
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  padding: 14px 16px;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 1.375rem; /* 22px */
  font-weight: 500;
  color: var(--color-fg);
  line-height: 1.4;
  transition: border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out);
  box-sizing: border-box;
}

.mrb-field__input::placeholder {
  color: var(--color-fg-subtle);
}

.mrb-field__input:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.mrb-field__input:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}


/* ─────────────────────────────────────────────────────────────────────────────
   STEP 3 — COLOR PICKER
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-color-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.mrb-color-group__label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  margin: 0;
}

.mrb-color-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Individual color swatch */
.mrb-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--swatch-color, #888);
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 3px;
  cursor: pointer;
  transition: transform 120ms var(--ease-out),
              outline-color 120ms var(--ease-out),
              border-color 120ms var(--ease-out);
  padding: 0;
  flex-shrink: 0;

  /* Reset button styles that Shopify themes inject */
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

.mrb-swatch:hover {
  transform: scale(1.1);
}

/* Selected state — JS sets aria-pressed="true" */
.mrb-swatch[aria-pressed="true"] {
  border-color: var(--color-fg);
  outline-color: var(--color-accent);
}

/* Custom color button — dashed, no fill */
.mrb-swatch--custom {
  background: transparent;
  border: 2px dashed var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.mrb-swatch--custom:hover {
  border-color: var(--color-accent);
}

.mrb-swatch__color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mrb-swatch__plus {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--color-fg-muted);
  line-height: 1;
  pointer-events: none;
}

.mrb-color-hint {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-fg-subtle);
  margin: 0;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────────────────
   STEP 4 — SUMMARY + ORDER
   ───────────────────────────────────────────────────────────────────────────── */

/* Summary definition list */
.mrb-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  overflow: hidden;
}

.mrb-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.mrb-summary__row:last-child {
  border-bottom: none;
}

.mrb-summary__label {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}

.mrb-summary__value {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-fg);
  text-align: right;
  margin: 0;
  min-width: 0;
  word-break: break-word;
}

.mrb-summary__value--colors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mrb-summary__row--textarea {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.mrb-summary__value--full {
  text-align: left;
  width: 100%;
  margin: 0;
}

.mrb-summary__textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.mrb-summary__textarea::placeholder {
  color: var(--color-fg-subtle);
}

.mrb-summary__textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

/* Small swatch in the summary row */
.mrb-summary__swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch-color, #888);
  border: 1px solid rgba(242, 235, 224, 0.2);
  display: inline-block;
  flex-shrink: 0;
}

/* Order block */
.mrb-order {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.mrb-order__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mrb-order__price-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.mrb-order__price {
  font-family: var(--font-body);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.mrb-order__meta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-fg);
  margin: 0;
  line-height: 1.6;
}

.mrb-order__disclaimer {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-fg);
  margin: 0;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */

.mrb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  padding: 14px 24px;
  min-height: 48px;
  cursor: pointer;
  transition: background 120ms var(--ease-out),
              color 120ms var(--ease-out),
              opacity 120ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;

  /* Reset any Shopify theme button styles */
  -webkit-appearance: none;
  appearance: none;
}

.mrb-btn:hover {
  background: #ffffff;
  color: var(--color-bg-base);
}

/* Primary — same white outline style */
.mrb-btn--primary {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.mrb-btn--primary:hover {
  background: #ffffff;
  color: var(--color-bg-base);
}

.mrb-btn--primary:active {
  background: rgba(255, 255, 255, 0.85);
}

/* Ghost — back/secondary action, subdued outline */
.mrb-btn--ghost {
  color: var(--color-fg-muted);
  border-color: rgba(255, 255, 255, 0.3);
}

.mrb-btn--ghost:hover {
  color: var(--color-fg);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* CTA — full width, solid orange, white text */
.mrb-btn--cta {
  width: 100%;
  padding: 24px 32px;
  font-size: 2rem;
  letter-spacing: 0.08em;
  min-height: 80px;
  background: #fb5200;
  color: #ffffff;
  border-color: #fb5200;
}

.mrb-btn--cta:hover {
  background: rgba(251, 82, 0, 0.88);
  color: #ffffff;
  border-color: transparent;
}

/* Disabled state */
.mrb-btn:disabled,
.mrb-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Spinner inside CTA during loading */
.mrb-btn__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(255,255,255,0.3);
  border-top-color: #ffffff;
}

/* Success state — applied by JS after cart add, removed after 2.4s */
.mrb-btn--success {
  background: #5C9E70 !important;
  border-color: #5C9E70 !important;
  color: #ffffff !important;
}


/* ─── Step navigation ────────────────────────────────────────────────────────── */

.mrb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 0;
  padding-bottom: 16px;
}

/* When only "Næste" is shown (step 1), push it right */
.mrb-nav:has([data-nav="back"][hidden]) {
  justify-content: flex-end;
}


/* ─── Inline error messages ──────────────────────────────────────────────────── */

.mrb-inline-error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-error);
  margin: 0;
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--color-error-muted);
  border-radius: 0;
  border-left: 2px solid var(--color-error);
}

.mrb-inline-error--centered {
  text-align: center;
  border-left: none;
  border-top: 2px solid var(--color-error);
}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET  (≤1024px)
   Switch to single-column layout. Config comes first (user fills form, then
   sees the preview). Preview panel is no longer sticky.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  .mrb-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
  }

  /* Config panel moves to top — form-first journey on touch */
  .mrb-config {
    order: -1;
    min-height: unset;
    padding: 32px 28px 40px;
  }

  /* Preview panel — static, shows below config */
  .mrb-preview {
    position: relative;
    top: auto;
    height: auto;
    min-height: 56vw;
    border-right: none;
    border-top: 1px solid var(--color-border);
  }

  .mrb-pane {
    min-height: 60vw;
    padding: 12px 8px;
  }

  /* Nav flows naturally below form content on touch */
  .mrb-nav {
    position: static;
    background: transparent;
    border-top: none;
    padding: 0;
    margin-top: 28px;
  }

  .mrb-header {
    padding: 32px 20px 0;
  }

  .mrb-steps {
    margin-bottom: 24px;
  }

  /* Fields: keep 2-column grid on tablet — only collapse on phones (see 480px) */
  .mrb-fields {
    grid-template-columns: 1fr 1fr;
  }

  .mrb-field--half {
    grid-column: span 1;
  }

}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE  (≤768px)
   Tighten horizontal padding. Config padding narrows to 20px gutter.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .mrb-config {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mrb-nav {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Mobile small preview: render the poster at "lightbox" size (280px wide)
     and use transform: scale() to display it compactly. This gives a true
     scaled-down version with all details (stats, wordmark) preserved.
     Lightbox is unaffected — its selector is .mrb-lightbox__stage .mrb-poster. */
  .mrb-pane--poster .mrb-poster-wrap {
    height: 280px;          /* visible preview height */
    overflow: hidden;
  }

  .mrb-pane--poster .mrb-poster {
    width: 280px;
    aspect-ratio: 210 / 297;
    max-height: none;       /* override desktop constraint */
    /* aspect-ratio gives natural height 280 × 297/210 ≈ 396px;
       scale 0.707 to fit our 280px target visible height */
    transform: scale(0.707);
    transform-origin: center;
  }

}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — SMALL PHONE  (≤480px)
   Simplify: hide 3D tab, collapse form to 1-column, enlarge touch targets.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  .mrb-config {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mrb-nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hide 3D tab — Three.js is heavy; poster/frame is the conversion asset */
  .mrb-tab--3d {
    display: none;
  }

  /* Form fields — single column on small phones */
  .mrb-fields {
    grid-template-columns: 1fr;
  }

  .mrb-field--half {
    grid-column: 1 / -1;
  }

  /* Dropzone — clear tap target, no drag instruction needed on touch */
  .mrb-dropzone {
    min-height: 200px;
    padding: 32px 20px;
  }

  .mrb-dropzone__primary {
    font-size: 1.5rem;
  }

  /* Color swatches — 44px minimum touch target (Apple HIG) */
  .mrb-swatch {
    width: 44px;
    height: 44px;
  }

  /* Frame view — scale down for small phones */
  .mrb-frame__outer {
    padding: 10px;
  }

  .mrb-frame__mat {
    padding: 12px;
  }

  /* Step number + title — slightly smaller on very narrow screens */
  .mrb-step__number,
  .mrb-step__title {
    font-size: 1.625rem;
  }

  /* Summary rows — allow label to wrap if needed */
  .mrb-summary__row {
    align-items: flex-start;
    padding: 12px 14px;
  }

  /* CTA button — full width already, keep large on small phones */
  .mrb-btn--cta {
    padding: 20px 24px;
    font-size: 1.25rem;
    min-height: 68px;
  }

}

/* ── Strava additions ─────────────────────────────────────────────────── */

.mrb-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mrb-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.mrb-divider__text {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--color-fg-subtle);
}

.mrb-strava-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #FC4C02;
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms var(--ease-out);
}

.mrb-strava-btn:hover { background: #e04400; color: #fff; }

.mrb-strava-picker {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mrb-connected-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--color-fg-muted);
}

.mrb-connected-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FC4C02;
  flex-shrink: 0;
}

.mrb-connected-badge__name { color: var(--color-fg); }

.mrb-picker-label {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.mrb-activity-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.mrb-activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-left: 3px solid transparent;
  cursor: pointer;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  width: 100%;
  transition: background 150ms, border-left-color 150ms;
}

.mrb-activity-item:last-child { border-bottom: none; }

.mrb-activity-item:hover {
  background: var(--color-accent-muted);
  border-left-color: var(--color-accent);
}

.mrb-activity-item__body { flex: 1; min-width: 0; }

.mrb-activity-item__name {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrb-activity-item__meta {
  font-size: 1.2rem;
  color: var(--color-fg-muted);
  margin-top: 2px;
}

.mrb-activity-item__sport {
  font-size: 1.2rem;
  color: var(--color-fg-muted);
  flex-shrink: 0;
}

.mrb-switch-account {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-fg-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  text-align: left;
  transition: color 150ms, text-decoration-color 150ms;
}

.mrb-switch-account:hover {
  color: var(--color-fg-muted);
  text-decoration-color: var(--color-fg-subtle);
}

.mrb-no-activities {
  padding: 16px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--color-fg);
  text-align: center;
}

.mrb-connected-badge__dot { background: #22c55e; }

.mrb-switch-account { margin-left: auto; }

.mrb-activity-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.mrb-strava-search {
  position: relative;
}

.mrb-strava-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-fg-muted);
  pointer-events: none;
}

.mrb-strava-search__input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--color-bg-elevated, rgba(239,234,225,0.06));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-fg);
  font-size: 1.4rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 150ms;
}

.mrb-strava-search__input::placeholder { color: var(--color-fg-muted); }
.mrb-strava-search__input:focus { border-color: var(--color-accent); }

.mrb-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mrb-chip {
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-fg-muted);
  font-family: var(--font-body);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 150ms, color 150ms, background 150ms;
  white-space: nowrap;
}

.mrb-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

.mrb-chip--active {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.mrb-load-more {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}

.mrb-load-more:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE LAYOUT — sticky preview + segmented progress + fixed nav + lightbox
   All existing CSS is untouched. This block only adds overrides for ≤768px.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* 1. Ordering: preview on top, config below.
        Overrides the 1024px block's `order: -1` on config. */
  .mrb-config {
    order: 1;
    padding-top: 16px;
    padding-bottom: 96px; /* breathing room above fixed nav bar */
    min-height: unset;
  }

  .mrb-preview {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto;
    min-height: unset;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }

  .mrb-pane {
    min-height: unset;
    height: auto;
    padding: 12px 8px;
  }

  /* 2. Progress indicator: restyle dots as horizontal segments */
  .mrb-steps {
    flex-direction: column-reverse;
    gap: 6px;
    padding: 10px 0 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .mrb-steps__track {
    gap: 4px;
  }

  /* Override the circular dot shape */
  .mrb-step-dot {
    width: auto;
    height: 2px;
    flex: 1;
    border-radius: 2px;
    background: var(--color-border-strong);
    transition: background 220ms var(--ease-out);
  }

  .mrb-step-dot[data-active] {
    width: auto;
    border-radius: 2px;
    background: var(--color-accent);
  }

  .mrb-step-dot[data-complete] {
    background: rgba(193, 124, 58, 0.55);
  }

  .mrb-steps__label {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-left: 0;
  }

  /* 3. Fixed nav bar at bottom */
  .mrb-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: #141E2A;
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    margin-top: 0;
  }

  /* Step 1: both buttons hidden — hide bar entirely */
  .mrb-nav:has([data-nav="back"][hidden]):has([data-nav="next"][hidden]) {
    display: none;
  }

  /* Ghost "Tilbage" button styling on mobile */
  .mrb-nav [data-nav="back"] {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-fg-muted);
    padding: 13px 18px;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    flex-shrink: 0;
  }

  /* "Næste" — compact orange button (matches mockup) */
  .mrb-nav [data-nav="next"] {
    flex: none;
    padding: 13px 28px;
    background: #fb5200;
    border-color: #fb5200;
    color: #ffffff;
  }
  .mrb-nav [data-nav="next"]:hover {
    background: rgba(251, 82, 0, 0.88);
    border-color: transparent;
  }

  /* Step 4: only Tilbage visible — left-aligned */
  .mrb-nav:has([data-nav="next"][hidden]) {
    justify-content: flex-start;
  }

  /* 4. Compact section header on mobile */
  .mrb-header {
    padding: 16px 16px 0;
  }

  .mrb-header__title {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

}


/* ─── Lightbox (mobile poster full-screen overlay) ────────────────────────── */

.mrb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 18, 26, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.mrb-lightbox__close {
  position: absolute;
  top: max(52px, env(safe-area-inset-top, 52px));
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 12px var(--color-accent-shadow);
  z-index: 201;
  flex-shrink: 0;
  transition: background 150ms var(--ease-out);
}

.mrb-lightbox__close:hover,
.mrb-lightbox__close:focus-visible {
  background: var(--color-accent-hover);
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.mrb-lightbox__stage {
  width: 100%;
  padding: 72px 24px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Scale up the poster within the lightbox */
.mrb-lightbox__stage .mrb-poster {
  width: min(280px, 78vw);
}

/* 3D pane fills the full lightbox stage */
[data-lightbox-mode="3d"] .mrb-lightbox__stage {
  padding: 0;
  align-items: stretch;
}
[data-lightbox-mode="3d"] [data-pane="3d"] {
  flex: 1;
  height: 100%;
  max-height: none;
  min-height: 0;
}

/* Immersive mode: hide all other sections when user is on step 2–4 */
.mrb-hidden-for-immersive {
  display: none !important;
}

/* On mobile step 3, show the 3D tab button so the user can switch back */
@media (max-width: 768px) {
  .mrb-tabs--show-3d .mrb-tab--3d {
    display: block;
  }
}

.mrb-lightbox__hint {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 234, 228, 0.28);
  margin: 0;
  pointer-events: none;
}