/* May Anthony configurator — scoped under .ma-configurator to avoid colliding
   with Prestige's own (often identically-named) component classes. Reuses the
   theme's own heading/body font variables instead of loading a duplicate webfont.
   Those variables resolve to Cormorant Garamond and Jost — ma-global.css overrides
   Prestige's Liquid-generated values, so the theme editor's font setting (Lora) is
   not what renders. */

.ma-configurator {
  --ma-ground: #FFFFFF;
  --ma-panel: #FFFFFF;
  --ma-stage: #FFFFFF;
  --ma-ink: #1A1712;
  --ma-muted: #6E6659;
  --ma-thread: #9C7C3C;
  --ma-thread-soft: rgba(156, 124, 60, 0.14);
  --ma-line: #E4DDD1;
  --ma-line-strong: #C9BFAE;
  --ma-good: #4A6741;
  --ma-alert: #8C3B2E;
  --ma-shadow: 0 18px 40px -22px rgba(26, 23, 18, 0.35);
  --ma-serif: var(--heading-font-family, Georgia, serif);
  --ma-sans: "Jost", var(--text-font-family, sans-serif);

  /* Always render on the light/white palette regardless of the device's
     dark/light setting. color-scheme:light also keeps native controls
     (text/file inputs) from picking up the browser's dark chrome. Do not
     add a prefers-color-scheme:dark override here — the configurator is
     intentionally locked to white in both modes. */
  color-scheme: light;
  background: var(--ma-ground);
  color: var(--ma-ink);
  font-family: var(--ma-serif);
  font-size: 16px;
  line-height: 1.55;
}

.ma-configurator * { box-sizing: border-box; }

/* product-form / the native Shopify form tag are structural wrappers only */
.ma-configurator product-form,
.ma-configurator form { display: contents; }

/* Capped and centred so the preview and the wizard read as one composed block.
   Without the cap the preview column absorbed every surplus pixel while the canvas
   stayed height-capped, so the dead space grew with the monitor. */
.ma-atelier {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  min-height: 70vh; max-width: 1240px; margin-inline: auto;
}

/* ---- Stage ---- */
.ma-stage-col { padding: 28px; display: flex; flex-direction: column; }
.ma-stage-sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
/* The preview sits on the page — no card frame, border or shadow around it. */
.ma-stage {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0; position: relative; min-height: 380px;
}
.ma-stage canvas { max-width: 100%; max-height: min(70vh, 720px); height: auto; display: block; background: transparent; }
.ma-sr-heading {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---- Panel ---- */
.ma-panel-col { border-left: 1px solid var(--ma-line); background: var(--ma-panel); display: flex; flex-direction: column; }
.ma-panel { padding: 24px 34px 30px; display: flex; flex-direction: column; gap: 18px; flex: 1; }

.ma-rail { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 36px; }
.ma-rail::before {
  content: ''; position: absolute; top: 15px; left: 15px; right: 15px;
  border-top: 1px dashed var(--ma-line-strong); z-index: 0;
}
.ma-rail-step {
  position: relative; z-index: 1; width: 30px; background: none; border: none;
  padding: 0; cursor: pointer; font-family: var(--ma-sans); color: var(--ma-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.ma-rail-step::after { content: ''; position: absolute; inset: -7px -14px; }
.ma-rail-step:disabled { cursor: default; opacity: 0.45; }
.ma-rail-step .ma-dot {
  width: 30px; height: 30px; margin: 0; border-radius: 50%;
  border: 1px solid var(--ma-line-strong); background: var(--ma-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ma-muted); position: relative; z-index: 1;
  transition: all 0.25s ease;
}
.ma-rail-step .ma-lbl {
  position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
  width: 88px; text-align: center;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; text-wrap: balance;
}
.ma-rail-step:first-child .ma-lbl { left: 0; transform: none; text-align: left; }
.ma-rail-step:last-child .ma-lbl { left: auto; right: 0; transform: none; text-align: right; }
.ma-rail-step.ma-done .ma-dot { background: var(--ma-thread); border-color: var(--ma-thread); color: var(--ma-stage); }
.ma-rail-step.ma-current .ma-dot { border-color: var(--ma-thread); color: var(--ma-thread); box-shadow: 0 0 0 4px var(--ma-thread-soft); }
.ma-rail-step.ma-current { color: var(--ma-ink); }
.ma-rail-step:focus-visible { outline: none; }
.ma-rail-step:focus-visible .ma-dot { box-shadow: 0 0 0 3px var(--ma-thread-soft), 0 0 0 5px var(--ma-thread); }

/* Steps */
.ma-step { display: none; flex-direction: column; gap: 16px; animation: ma-rise 0.35s ease; }
.ma-step.ma-active { display: flex; }
@keyframes ma-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ma-step { animation: none; }
  .ma-rail-step .ma-dot { transition: none; }
  .ma-stage canvas { transition: none; }
}

.ma-step h2 { font-size: 27px; font-weight: 400; margin: 0; line-height: 1.25; text-wrap: balance; }
/* Lede fills the column and wraps naturally — no narrow measure, no overlap with the heading. */
.ma-step .ma-lede { margin: 0; color: var(--ma-muted); font-style: italic; font-size: 15px; }

/* Each step's contents: consistent vertical rhythm between heading, lede, option
   groups and the nav (the wrapper used to be a plain block, so nothing was spaced). */
.ma-step-body { display: flex; flex-direction: column; gap: 20px; }

.ma-configurator fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ma-configurator legend, .ma-field-label {
  font-family: var(--ma-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ma-muted); padding: 0; margin: 0; display: flex; justify-content: space-between;
  align-items: baseline; width: 100%;
}
.ma-configurator legend .ma-picked, .ma-field-label .ma-picked { color: var(--ma-thread); }
/* <legend> sits outside the fieldset's flex flow, so the fieldset `gap` never
   separates it from its options — give it its own breathing room. */
.ma-configurator legend { margin-bottom: 12px; }

/* Swatches */
.ma-swatches { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 14px 10px; margin-left: -6px; }
.ma-swatch { position: relative; width: 64px; }
.ma-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ma-swatch .ma-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.ma-swatch .ma-well {
  width: 52px; height: 52px; border-radius: 3px; border: 1px solid var(--ma-line-strong);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35);
  transition: transform 0.15s ease;
}
.ma-swatch .ma-name { font-family: var(--ma-sans); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ma-muted); text-align: center; line-height: 1.3; }
.ma-swatch input:checked + .ma-chip .ma-well { outline: 2px solid var(--ma-thread); outline-offset: 2px; }
.ma-swatch input:checked + .ma-chip .ma-name { color: var(--ma-ink); }
.ma-swatch input:focus-visible + .ma-chip .ma-well { outline: 2px solid var(--ma-thread); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ma-thread-soft); }
.ma-swatch:hover .ma-well { transform: translateY(-2px); }
.ma-swatch .ma-well.ma-small { width: 38px; height: 38px; }

.ma-swatches--small { grid-template-columns: repeat(auto-fill, 52px); gap: 8px 6px; margin-left: -10px; }
.ma-swatch--small { width: 52px; }
.ma-swatch--small .ma-well { width: 32px; height: 32px; }
.ma-swatch--small .ma-name { min-height: 2.6em; }

/* Cards (marking type / font) */
.ma-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ma-card { position: relative; }
.ma-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ma-card .ma-face {
  border: 1px solid var(--ma-line-strong); border-radius: 4px; background: var(--ma-stage);
  padding: 14px 14px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; height: 100%;
  transition: border-color 0.15s ease;
}
.ma-card .ma-face .ma-glyph { font-size: 30px; line-height: 1.2; color: var(--ma-ink); }
.ma-card .ma-face .ma-glyph.block { font-family: 'MA Block'; }
.ma-card .ma-face .ma-glyph.cursive { font-family: 'MA Cursive'; font-size: 34px; }
.ma-card .ma-face .ma-glyph.numbers { font-family: 'MA Numbers'; }
.ma-card .ma-face .ma-t { font-size: 15px; }
.ma-card .ma-face .ma-d { font-size: 12.5px; color: var(--ma-muted); font-style: italic; line-height: 1.4; }
.ma-card input:checked + .ma-face { border-color: var(--ma-thread); box-shadow: 0 0 0 1px var(--ma-thread), var(--ma-shadow); }
.ma-card input:focus-visible + .ma-face { box-shadow: 0 0 0 3px var(--ma-thread-soft), 0 0 0 1px var(--ma-thread); }

/* Inputs */
.ma-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ma-field { display: flex; flex-direction: column; gap: 6px; }
.ma-field label { font-family: var(--ma-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ma-muted); display: flex; justify-content: space-between; }
.ma-field input[type="text"], .ma-field select {
  font-family: var(--ma-serif); font-size: 17px; color: var(--ma-ink);
  background: var(--ma-stage); border: 1px solid var(--ma-line-strong); border-radius: 3px;
  padding: 10px 12px; width: 100%;
}
.ma-field input:focus-visible, .ma-field select:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 1px; }
.ma-hintline { font-size: 13px; color: var(--ma-muted); font-style: italic; margin: 2px 0 0; }

/* Upload */
.ma-uploader { border: 1px dashed var(--ma-line-strong); border-radius: 4px; background: var(--ma-stage); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ma-uploader .ma-row { display: flex; align-items: center; gap: 12px; }
.ma-uploader .ma-thumb { width: 54px; height: 54px; border: 1px solid var(--ma-line); border-radius: 3px; background: var(--ma-ground); display: flex; align-items: center; justify-content: center; font-family: var(--ma-sans); font-size: 10px; color: var(--ma-muted); overflow: hidden; }
.ma-uploader .ma-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ma-uploader button { font-family: var(--ma-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 1px solid var(--ma-line-strong); border-radius: 3px; padding: 9px 14px; cursor: pointer; color: var(--ma-ink); }
.ma-uploader button:hover { border-color: var(--ma-thread); color: var(--ma-thread); }
.ma-uploader button:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 1px; }
.ma-specs { font-size: 13px; font-style: italic; color: var(--ma-muted); line-height: 1.6; }

/* Artwork source toggle (Our designs / Upload your own) */
.ma-segmented { display: inline-flex; border: 1px solid var(--ma-line-strong); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ma-seg-btn {
  font-family: var(--ma-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 16px; background: var(--ma-stage); color: var(--ma-muted); border: none; cursor: pointer;
}
.ma-seg-btn + .ma-seg-btn { border-left: 1px solid var(--ma-line-strong); }
.ma-seg-btn.ma-seg-active { background: var(--ma-ink); color: var(--ma-ground); }
.ma-seg-btn:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 2px; }

/* Motif gallery */
.ma-motif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.ma-motif {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 9px; background: var(--ma-stage); border: 1px solid var(--ma-line-strong);
  border-radius: 4px; cursor: pointer; transition: border-color 0.15s ease;
}
.ma-motif img { width: 46px; height: 46px; object-fit: contain; }
.ma-motif-name { font-family: var(--ma-sans); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ma-muted); text-align: center; }
.ma-motif:hover { border-color: var(--ma-thread); }
.ma-motif.ma-motif-active { border-color: var(--ma-thread); box-shadow: 0 0 0 1px var(--ma-thread); }
.ma-motif.ma-motif-active .ma-motif-name { color: var(--ma-ink); }
.ma-motif:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 2px; }

/* Motif picker (opens below the per-shoe slots, targeted at one shoe) */
.ma-motif-picker { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ma-line); }
.ma-picker-heading { font-family: var(--ma-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ma-muted); margin: 0 0 10px; }

/* Nav */
.ma-stepnav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--ma-line); }
.ma-step-count { display: none; font-family: var(--ma-sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ma-muted); margin: 0; }
.ma-step h2:focus { outline: none; }
.ma-btn {
  font-family: var(--ma-sans); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px;
  padding: 14px 26px; border-radius: 3px; cursor: pointer; border: 1px solid transparent;
}
.ma-btn:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 2px; }
.ma-btn-primary { background: var(--ma-ink); color: var(--ma-ground); border-color: var(--ma-ink); }
.ma-btn-primary:hover { background: var(--ma-thread); border-color: var(--ma-thread); color: #fff; }
.ma-btn-ghost { background: none; color: var(--ma-muted); border-color: var(--ma-line-strong); }
.ma-btn-ghost:hover { color: var(--ma-ink); border-color: var(--ma-ink); }
.ma-validation { color: var(--ma-alert); font-size: 14px; font-style: italic; margin: 0; min-height: 1.4em; }
.ma-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ma-muted); line-height: 1.5; }
.ma-consent input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--ma-thread); cursor: pointer; }
.ma-consent input:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 2px; }

/* Review */
.ma-summary { border: 1px solid var(--ma-line); border-radius: 4px; background: var(--ma-stage); overflow: hidden; }
.ma-summary .ma-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ma-line); }
.ma-summary .ma-row:last-child { border-bottom: none; }
.ma-summary .ma-k { font-family: var(--ma-sans); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ma-muted); }
.ma-summary .ma-v { font-size: 15.5px; text-align: right; }
.ma-summary .ma-v em { color: var(--ma-muted); font-size: 13px; }
.ma-summary .ma-edit { font-family: var(--ma-sans); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ma-thread); background: none; border: none; cursor: pointer; padding: 0 0 0 10px; text-decoration: underline; text-underline-offset: 3px; }
.ma-summary .ma-edit:focus-visible { outline: 2px solid var(--ma-thread); outline-offset: 2px; }
.ma-notes { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ma-muted); font-style: italic; }
.ma-notes p { margin: 0; }
/* Price stacked above the shipping note, in the wizard on every step. */
.ma-pricebar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px; }
.ma-pricebar .ma-amount { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
.ma-pricebar .ma-terms { font-family: var(--ma-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ma-muted); }

.ma-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ma-ink); color: var(--ma-ground); font-family: var(--ma-sans); font-size: 13px;
  padding: 12px 22px; border-radius: 3px; opacity: 0; pointer-events: none; transition: all 0.3s ease;
  max-width: min(90vw, 480px); text-align: center; z-index: 20;
}
.ma-toast.ma-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobile — compact rhythm: preview + the active step share the screen */
@media (max-width: 900px) {
  /* Block layout, not a single-column grid: a sticky grid item is trapped inside its
     own grid area, so the preview could only ever travel its own height before
     scrolling away. As a block child it can stay pinned for the whole configurator. */
  .ma-atelier { display: block; }
  /* --sticky-area-height is the theme's own value for the announcement bar + header,
     and already accounts for the header hiding on scroll. */
  .ma-stage-col {
    position: sticky; top: var(--sticky-area-height, 0px); z-index: 5;
    background: var(--ma-ground); padding: 8px 12px 6px;
  }
  .ma-stage-sticky { position: static; gap: 6px; }
  .ma-stage { min-height: 0; padding: 0; }
  .ma-stage canvas { max-height: 26vh; transition: max-height 0.25s ease; }
  /* Keyboard up: give the fields room without losing sight of the shoe. */
  .ma-configurator.ma-typing .ma-stage canvas { max-height: 15vh; }
  .ma-panel-col { border-left: none; border-top: 1px solid var(--ma-line); }
  .ma-panel { padding: 12px 16px 26px; gap: 14px; }
  .ma-rail { padding-bottom: 0; }
  .ma-rail::before { top: 12px; left: 12px; right: 12px; }
  .ma-rail-step .ma-lbl { display: none; }
  .ma-rail-step .ma-dot { width: 24px; height: 24px; font-size: 11px; }
  .ma-step { gap: 13px; }
  .ma-step h2 { font-size: 20px; }
  .ma-step .ma-lede { font-size: 13px; margin-top: -8px; }
  .ma-swatches { grid-template-columns: repeat(auto-fill, 50px); gap: 8px 6px; margin-left: -5px; }
  .ma-swatches--small { margin-left: -8px; }
  .ma-swatch { width: 50px; }
  .ma-swatch .ma-well { width: 40px; height: 40px; }
  .ma-swatch .ma-well.ma-small { width: 34px; height: 34px; }
  .ma-swatch .ma-name { font-size: 8.5px; }
  .ma-pair { gap: 8px; }
  .ma-field input[type="text"], .ma-field select { padding: 8px 10px; font-size: 16px; }
  .ma-field label { font-size: 10px; }
  .ma-hintline { font-size: 12px; }
  .ma-specs { font-size: 12px; }
  .ma-card .ma-face { padding: 10px 10px 9px; gap: 2px; }
  .ma-card .ma-face .ma-glyph { font-size: 24px; }
  .ma-card .ma-face .ma-glyph.cursive { font-size: 27px; }
  .ma-card .ma-face .ma-t { font-size: 13.5px; }
  .ma-card .ma-face .ma-d { font-size: 11px; }
  .ma-stepnav {
    position: sticky; bottom: 0; z-index: 6; background: var(--ma-panel);
    margin: 12px -16px -26px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ma-line);
  }
  .ma-btn { padding: 13px 20px; }
  .ma-consent { font-size: 12.5px; }
  .ma-step-count { display: block; }
  .ma-rail-step { width: 24px; min-height: 44px; }
  .ma-rail-step::after { inset: -10px -16px; }
  .ma-summary .ma-edit { padding: 14px 4px 14px 14px; margin: -14px 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ma-stage canvas { max-height: 42vh; }
}