/* Compact cart personalisation — no garment/print placement mockup. */
.mxm-personalisation-inline{
display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.mxm-personalisation-inline .button{min-height:31px;padding:0 10px}
.mxm-personalisation-button{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
}
.mxm-personalisation-button:hover{
  background:transparent !important;
  color:var(--ink) !important;
}
.mxm-personalisation-button.is-required-error{
  outline:2px solid #c62828;
  outline-offset:2px;
  border-color:#c62828 !important;
}
.mxm-personalisation-selected{
  font-family:var(--mono);
  font-size:8px;
  line-height:1.5;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.mxm-personalisation-selected strong{color:var(--ink);font-weight:400}

.mxm-personalisation-backdrop{
  position:fixed;
  inset:0;
  z-index:160;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;
  overscroll-behavior:contain;
  background:rgba(17,17,17,.34);
  backdrop-filter:blur(3px);
}
.mxm-personalisation-backdrop.is-open{display:flex}
.mxm-personalisation-modal{
  width:min(100%,520px);
  max-height:calc(100vh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--bg);
  border:1px solid var(--ink);
  padding:24px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
}
.mxm-personalisation-modal-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  padding-bottom:12px;
}
.mxm-personalisation-modal h2{
  margin:6px 0 0;
  font-family:var(--serif);
  font-size:24px;
  line-height:1.08;
  letter-spacing:0;
  font-weight:400;
}
.mxm-personalisation-close{
  border:0;
  background:transparent;
  padding:0;
  width:26px;
  height:26px;
  font-size:22px;
  line-height:1;
  color:var(--ink);
}
.mxm-modal-symbol-stage{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 4px 18px;
  margin-block:24px; /* Equal additional space after heading and before MXM number */
  overflow:visible;
}
.mxm-modal-symbol{
  width:28.5%;
  aspect-ratio:1;
  flex:0 0 28.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:-5.3%;
  transition:transform .16s ease;
  position:relative;
}
.mxm-modal-symbol:first-child{margin-left:0}
.mxm-modal-symbol:nth-child(1){z-index:4}
.mxm-modal-symbol:nth-child(2){z-index:3}
.mxm-modal-symbol:nth-child(3){z-index:2}
.mxm-modal-symbol:nth-child(4){z-index:1}
.mxm-modal-symbol img{width:100%;height:100%;object-fit:contain;display:block}
.mxm-modal-config{
  padding:12px 0 15px;
}
.mxm-modal-config-id{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.08;
  margin:0 0 7px;
}
.mxm-modal-status{
  font-family:var(--mono);
  font-size:8px;
  line-height:1.5;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.mxm-modal-status::before{
  content:'';
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--ink);
  margin-right:7px;
  vertical-align:-1px;
}
.mxm-modal-actions{display:grid;gap:8px;margin-top:2px}
.mxm-modal-actions .button{width:100%;min-height:48px}
.mxm-modal-personalise{background:var(--ink);color:#fff}
.mxm-modal-personalise:hover{background:transparent;color:var(--ink)}
.mxm-modal-placement{
  margin:19px 0 0;
  padding-top:17px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:9px;
  line-height:1.65;
  color:var(--muted);
}
.mxm-modal-placement strong{display:block;color:var(--ink);font-size:9px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
.mxm-modal-unique-note{
  margin-top:12px;
  padding:13px 14px;
  background:var(--soft);
  font-family:var(--mono);
  font-size:8px;
  line-height:1.65;
}
.mxm-summary-personalisation{
  margin:15px 0 16px;
  padding:13px 14px;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:8px;
  line-height:1.65;
}
.mxm-summary-personalisation strong{display:block;font-family:var(--serif);font-size:17px;line-height:1.15;margin-bottom:4px}

.mxm-summary-personalisation.is-error{
  border-color:#c62828;
}
@media(max-width:620px){
  .mxm-personalisation-backdrop{padding:12px;align-items:center;justify-content:center;overflow:hidden}
  .mxm-personalisation-modal{width:100%;max-width:520px;max-height:calc(100dvh - 24px);overflow:hidden;padding:20px}
  .mxm-personalisation-modal h2,.mxm-modal-config-id{font-size:20px}
  .mxm-modal-symbol-stage{min-height:122px;padding:16px 0 16px;margin-block:clamp(8px,calc(10dvh - 46px),24px)}
  .mxm-modal-symbol{width:29%;flex-basis:29%;margin-left:-5.7%}
  .mxm-modal-symbol:first-child{margin-left:0}
  .mxm-modal-actions .button{min-height:46px}
}